From 55783f7a0d812c69f3825d44244f2a96daca74e4 Mon Sep 17 00:00:00 2001 From: matthiashader <144090716+matthiashader@users.noreply.github.com> Date: Wed, 17 Jul 2024 10:23:20 +0200 Subject: [PATCH] fix(core/group): suppress selection will not block native events (#1380) Co-authored-by: AndreasBerliner <41509230+AndreasBerliner@users.noreply.github.com> Co-authored-by: Andreas Berliner Co-authored-by: Lukas Maurer Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/loud-days-burn.md | 5 ++ .changeset/many-singers-exercise.md | 5 ++ .changeset/rare-frogs-marry.md | 5 ++ CONTRIBUTING.md | 2 +- packages/aggrid/scss/ix-aggrid.scss | 14 +++-- packages/core/component-doc.json | 26 ++++++--- packages/core/src/components.d.ts | 16 +++--- .../application-header/application-header.tsx | 6 ++- .../src/components/group-item/group-item.scss | 4 -- .../src/components/group-item/group-item.tsx | 16 +++--- packages/core/src/components/group/group.tsx | 51 ++++++++++-------- .../src/components/group/test/group.ct.ts | 51 +++++++++++++++++- ...-1-chromium---theme-classic-dark-linux.png | Bin 8704 -> 9204 bytes ...1-chromium---theme-classic-light-linux.png | Bin 8802 -> 9247 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 5783 -> 6242 bytes ...1-chromium---theme-classic-light-linux.png | Bin 5720 -> 6162 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 15437 -> 15819 bytes ...1-chromium---theme-classic-light-linux.png | Bin 15609 -> 15924 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 8231 -> 8907 bytes ...1-chromium---theme-classic-light-linux.png | Bin 8162 -> 8733 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 8486 -> 8806 bytes ...1-chromium---theme-classic-light-linux.png | Bin 8489 -> 8806 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 19467 -> 19732 bytes ...1-chromium---theme-classic-light-linux.png | Bin 19336 -> 19593 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 10376 -> 10633 bytes ...1-chromium---theme-classic-light-linux.png | Bin 10448 -> 10768 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 7920 -> 8296 bytes ...1-chromium---theme-classic-light-linux.png | Bin 7915 -> 8306 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 37650 -> 37922 bytes ...1-chromium---theme-classic-light-linux.png | Bin 38227 -> 39082 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 11793 -> 12314 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11613 -> 12054 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 11793 -> 12314 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11613 -> 12054 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12074 -> 12558 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11750 -> 12182 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 18343 -> 19249 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18192 -> 19015 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 18343 -> 19249 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18192 -> 19015 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 6462 -> 6621 bytes ...1-chromium---theme-classic-light-linux.png | Bin 6379 -> 6529 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 24186 -> 24386 bytes ...1-chromium---theme-classic-light-linux.png | Bin 24050 -> 24215 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 10699 -> 10918 bytes ...1-chromium---theme-classic-light-linux.png | Bin 10464 -> 10615 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 13293 -> 13340 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12889 -> 12908 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 11793 -> 12314 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11614 -> 12058 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 11793 -> 12314 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11614 -> 12058 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12074 -> 12558 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11750 -> 12182 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 18343 -> 19249 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18192 -> 19015 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 18343 -> 19249 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18192 -> 19015 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 6462 -> 6621 bytes ...1-chromium---theme-classic-light-linux.png | Bin 6379 -> 6529 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 24642 -> 24865 bytes ...1-chromium---theme-classic-light-linux.png | Bin 24457 -> 24624 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 10713 -> 10875 bytes ...1-chromium---theme-classic-light-linux.png | Bin 10487 -> 10594 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 13293 -> 15045 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12889 -> 14656 bytes .../tests/basic-navigation/mobile/index.html | 12 ++--- ...-1-chromium---theme-classic-dark-linux.png | Bin 15860 -> 15899 bytes ...1-chromium---theme-classic-light-linux.png | Bin 15787 -> 15747 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 18562 -> 18754 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18473 -> 18597 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 18425 -> 18613 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18258 -> 18365 bytes 73 files changed, 147 insertions(+), 66 deletions(-) create mode 100644 .changeset/loud-days-burn.md create mode 100644 .changeset/many-singers-exercise.md create mode 100644 .changeset/rare-frogs-marry.md diff --git a/.changeset/loud-days-burn.md b/.changeset/loud-days-burn.md new file mode 100644 index 0000000000..548939b463 --- /dev/null +++ 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 new file mode 100644 index 0000000000..2da6d96d1c --- /dev/null +++ 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 new file mode 100644 index 0000000000..fd77f4865f --- /dev/null +++ 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 index 4f0ee28d3f..81de06dde9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -73,7 +73,7 @@ Once it's filed: #### 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 index 2396761ef2..d79f694c66 100644 --- 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 index b7d261f528..5cf638e57a 100644 --- 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 index 2917109392..cfe3b94633 100644 --- 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,11 +1064,11 @@ 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. */ @@ -1076,7 +1076,7 @@ export namespace Components { /** * 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 index efc32479f6..f8aa4d3cfa 100644 --- 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 { -
{this.name}
+ + {this.name} +
{this.breakpoint === 'sm' ? ( diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss index ac1044815c..2d230e68bc 100644 --- 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 index 469905c1e6..8bb717e59a 100644 --- 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; + @Event() selectedChanged!: EventEmitter; /** * 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 {