fix(core/group): suppress selection will not block native events (#1380)

Co-authored-by: AndreasBerliner <[email protected]> Co-authored-by: Andreas Berliner <[email protected]> Co-authored-by: Lukas Maurer <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
siemens · Jul 17, 2024 · 55783f7 · 55783f7
1 parent a650347
commit 55783f7
Show file tree

Hide file tree

Showing 73 changed files with 147 additions and 66 deletions.
diff --git a/.changeset/loud-days-burn.md b/.changeset/loud-days-burn.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/group-item): allow clicks on supress click event
diff --git a/.changeset/many-singers-exercise.md b/.changeset/many-singers-exercise.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/application-header): increase font
diff --git a/.changeset/rare-frogs-marry.md b/.changeset/rare-frogs-marry.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix-aggrid': patch
+---
+
+fix(core/aggrid): align colors
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -73,7 +73,7 @@ Once it's filed:
 <!-- omit in toc -->
 #### Before Submitting an Enhancement
 
-- Read the [documentation](https://ix.siemens.io/version-dev/docs/getting-started/) carefully and find out if the functionality is already covered, maybe by an individual configuration.
+- Read the [documentation](https://ix.siemens.io/docs/getting-started/) carefully and find out if the functionality is already covered, maybe by an individual configuration.
 - Perform a [search](https://github.com/siemens/ix/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
 - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.
 

diff --git a/packages/aggrid/scss/ix-aggrid.scss b/packages/aggrid/scss/ix-aggrid.scss
@@ -18,6 +18,7 @@
   --ag-odd-row-background-color: transparent;
   --ag-row-hover-color: var(--theme-table-data-row--background--hover);
   --ag-selected-row-background-color: var(--theme-table-data-row--background--selected);
+  --ag-selected-hover-row-background-color: var(--theme-table-data-row--background--selected-hover);
 
   --ag-range-selection-background-color: var(--theme-table-data-row--background--selected);
   --ag-range-selection-border-color: var(--theme-input--border-color--focus);
@@ -44,6 +45,11 @@
     }
   }
 
+  .ag-row-hover.ag-row-selected::before {
+    background-color: var(--ag-selected-hover-row-background-color);
+    background-image: unset;
+  }
+
   .ag-root-wrapper {
     border: none;
   }
@@ -94,6 +100,10 @@
     background-color: var(--theme-table-header-splitter--background--hover);
   }
 
+  .ag-row-hover.ag-row-selected {
+    background-color: unset;
+  }
+
   .ag-row-focus::before {
     border: 1px solid var(--theme-color-input--focus);
   }
@@ -102,10 +112,6 @@
     background-color: var(--theme-table-data-row--background--active);
   }
 
-  .ag-row-hover.ag-row-selected {
-    background-color: var(--theme-table-data-row--background--selected-hover);
-  }
-
   .ag-row-hover.ag-row-selected:active {
     background-color: var(--theme-table-data-row--background--selected-active);
   }

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -402,12 +402,14 @@
       "dependencies": [
         "ix-menu-expand-icon",
         "ix-icon-button",
+        "ix-typography",
         "ix-dropdown"
       ],
       "dependencyGraph": {
         "ix-application-header": [
           "ix-menu-expand-icon",
           "ix-icon-button",
+          "ix-typography",
           "ix-dropdown"
         ],
         "ix-menu-expand-icon": [
@@ -443,7 +445,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         }
       ],
@@ -622,6 +624,7 @@
         "ix-application-header": [
           "ix-menu-expand-icon",
           "ix-icon-button",
+          "ix-typography",
           "ix-dropdown"
         ],
         "ix-menu-expand-icon": [
@@ -6987,7 +6990,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -7008,7 +7011,7 @@
               "type": "number"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -7024,6 +7027,7 @@
           "reflectToAttr": true,
           "docs": "Whether the group is selected.",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -7050,7 +7054,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -7225,7 +7229,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -7246,7 +7250,7 @@
               "type": "number"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -7267,7 +7271,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -7283,6 +7287,7 @@
           "reflectToAttr": false,
           "docs": "Show selected state",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -7331,7 +7336,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         }
       ],
@@ -8690,6 +8695,7 @@
         "ix-application-header": [
           "ix-menu-expand-icon",
           "ix-icon-button",
+          "ix-typography",
           "ix-dropdown"
         ],
         "ix-menu-expand-icon": [
@@ -16509,6 +16515,7 @@
       "encapsulation": "shadow",
       "dependents": [
         "ix-action-card",
+        "ix-application-header",
         "ix-application-switch-modal",
         "ix-avatar",
         "ix-blind",
@@ -16531,6 +16538,9 @@
         "ix-action-card": [
           "ix-typography"
         ],
+        "ix-application-header": [
+          "ix-typography"
+        ],
         "ix-application-switch-modal": [
           "ix-typography"
         ],

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -142,7 +142,7 @@ export namespace Components {
         /**
           * Application name
          */
-        "name": string;
+        "name"?: string;
     }
     interface IxApplicationSidebar {
     }
@@ -1064,19 +1064,19 @@ export namespace Components {
         /**
           * Group header
          */
-        "header": string;
+        "header"?: string;
         /**
           * The index of the selected group entry. If undefined no group item is selected.
          */
-        "index": number;
+        "index"?: number;
         /**
           * Whether the group is selected.
          */
         "selected": boolean;
         /**
           * Group header subtitle
          */
-        "subHeader": string;
+        "subHeader"?: string;
         /**
           * Prevent header from being selectable
          */
@@ -1092,15 +1092,15 @@ export namespace Components {
         /**
           * Group item icon
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Index
          */
-        "index": number;
+        "index"?: number;
         /**
           * Group item secondary text
          */
-        "secondaryText": string;
+        "secondaryText"?: string;
         /**
           * Show selected state
          */
@@ -1112,7 +1112,7 @@ export namespace Components {
         /**
           * Group item text
          */
-        "text": string;
+        "text"?: string;
     }
     interface IxIconButton {
         /**

diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx
@@ -43,7 +43,7 @@ export class ApplicationHeader {
   /**
    * Application name
    */
-  @Prop() name: string;
+  @Prop() name?: string;
 
   @State() breakpoint: Breakpoint = 'lg';
   @State() menuExpanded = false;
@@ -200,7 +200,9 @@ export class ApplicationHeader {
         <div class="logo">
           <slot name="logo"></slot>
         </div>
-        <div class="name">{this.name}</div>
+        <ix-typography format="body-lg" class="name">
+          {this.name}
+        </ix-typography>
         <div class="content">
           {this.breakpoint === 'sm' ? (
             <Fragment>

diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss
@@ -73,10 +73,6 @@ $focusBorderWidth: 1px;
   }
 }
 
-:host(.suppress-selection) {
-  pointer-events: none;
-}
-
 :host(.selected) {
   border-top-width: 0.062rem !important;
   background-color: var(--theme-color-ghost--selected);

diff --git a/packages/core/src/components/group-item/group-item.tsx b/packages/core/src/components/group-item/group-item.tsx
@@ -29,17 +29,17 @@ export class GroupItem {
   /**
    * Group item icon
    */
-  @Prop() icon: string;
+  @Prop() icon?: string;
 
   /**
    * Group item text
    */
-  @Prop() text: string;
+  @Prop() text?: string;
 
   /**
    * Group item secondary text
    */
-  @Prop() secondaryText: string;
+  @Prop() secondaryText?: string;
 
   /**
    * Supress the selection of the group
@@ -49,7 +49,7 @@ export class GroupItem {
   /**
    * Show selected state
    */
-  @Prop() selected: boolean;
+  @Prop() selected: boolean = false;
 
   /**
    * The elements tabindex attribute will get set accordingly.
@@ -60,18 +60,15 @@ export class GroupItem {
   /**
    * Selection changed
    */
-  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;
+  @Event() selectedChanged!: EventEmitter<HTMLIxGroupItemElement>;
 
   /**
    * Index
    */
-  @Prop() index: number;
+  @Prop() index?: number;
 
   @Listen('click', { passive: true })
   clickListen() {
-    if (this.suppressSelection) {
-      return;
-    }
     this.selectedChanged.emit(this.hostElement);
   }
 
@@ -80,7 +77,6 @@ export class GroupItem {
       <Host
         class={{
           selected: this.selected && !this.suppressSelection,
-          'suppress-selection': this.suppressSelection,
         }}
       >
         <button tabindex={this.focusable ? 0 : -1}>