From d1e0a90df35a5da13bb8f0746e61dac12f184782 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Wed, 23 Nov 2022 16:30:01 +0100 Subject: [PATCH 1/5] fix(core/group): open dropdown after contextmenu click --- packages/core/src/components.d.ts | 13 +++ .../components/group/group-context-menu.scss | 25 ++++++ .../components/group/group-context-menu.tsx | 81 +++++++++++++++++++ packages/core/src/components/group/group.scss | 14 ---- packages/core/src/components/group/group.tsx | 32 +++----- .../components/my-component/my-component.tsx | 32 +++++++- packages/core/stencil.config.ts | 1 - 7 files changed, 162 insertions(+), 36 deletions(-) create mode 100644 packages/core/src/components/group/group-context-menu.scss create mode 100644 packages/core/src/components/group/group-context-menu.tsx diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 667ba9d831a..97efb0c853d 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -587,6 +587,8 @@ export namespace Components { */ "suppressHeaderSelection": boolean; } + interface IxGroupContextMenu { + } interface IxGroupDropdownItem { /** * Group dropdown icon @@ -1774,6 +1776,12 @@ declare global { prototype: HTMLIxGroupElement; new (): HTMLIxGroupElement; }; + interface HTMLIxGroupContextMenuElement extends Components.IxGroupContextMenu, HTMLStencilElement { + } + var HTMLIxGroupContextMenuElement: { + prototype: HTMLIxGroupContextMenuElement; + new (): HTMLIxGroupContextMenuElement; + }; interface HTMLIxGroupDropdownItemElement extends Components.IxGroupDropdownItem, HTMLStencilElement { } var HTMLIxGroupDropdownItemElement: { @@ -2045,6 +2053,7 @@ declare global { "ix-flip-tile": HTMLIxFlipTileElement; "ix-flip-tile-content": HTMLIxFlipTileContentElement; "ix-group": HTMLIxGroupElement; + "ix-group-context-menu": HTMLIxGroupContextMenuElement; "ix-group-dropdown-item": HTMLIxGroupDropdownItemElement; "ix-group-item": HTMLIxGroupItemElement; "ix-icon": HTMLIxIconElement; @@ -2745,6 +2754,8 @@ declare namespace LocalJSX { */ "suppressHeaderSelection"?: boolean; } + interface IxGroupContextMenu { + } interface IxGroupDropdownItem { /** * Group dropdown icon @@ -3719,6 +3730,7 @@ declare namespace LocalJSX { "ix-flip-tile": IxFlipTile; "ix-flip-tile-content": IxFlipTileContent; "ix-group": IxGroup; + "ix-group-context-menu": IxGroupContextMenu; "ix-group-dropdown-item": IxGroupDropdownItem; "ix-group-item": IxGroupItem; "ix-icon": IxIcon; @@ -3790,6 +3802,7 @@ declare module "@stencil/core" { "ix-flip-tile": LocalJSX.IxFlipTile & JSXBase.HTMLAttributes; "ix-flip-tile-content": LocalJSX.IxFlipTileContent & JSXBase.HTMLAttributes; "ix-group": LocalJSX.IxGroup & JSXBase.HTMLAttributes; + "ix-group-context-menu": LocalJSX.IxGroupContextMenu & JSXBase.HTMLAttributes; "ix-group-dropdown-item": LocalJSX.IxGroupDropdownItem & JSXBase.HTMLAttributes; "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes; "ix-icon": LocalJSX.IxIcon & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/group/group-context-menu.scss b/packages/core/src/components/group/group-context-menu.scss new file mode 100644 index 00000000000..5a54971b131 --- /dev/null +++ b/packages/core/src/components/group/group-context-menu.scss @@ -0,0 +1,25 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +:host { + display: block; + position: relative; + margin-top: 5px; + margin-right: 5px; + margin-left: auto; + + ix-icon-button { + &::after { + display: none; + } + } + + .hide { + visibility: collapse; + } +} diff --git a/packages/core/src/components/group/group-context-menu.tsx b/packages/core/src/components/group/group-context-menu.tsx new file mode 100644 index 00000000000..6829daa6d41 --- /dev/null +++ b/packages/core/src/components/group/group-context-menu.tsx @@ -0,0 +1,81 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component, Element, h, Host, State } from '@stencil/core'; + +@Component({ + tag: 'ix-group-context-menu', + styleUrl: './group-context-menu.scss', + scoped: true, +}) +export class GroupContextMenu { + @Element() host!: HTMLIxGroupContextMenuElement; + + @State() showContextMenu = false; + @State() oldApi = false; + + private observer!: MutationObserver; + + get dropdownElement() { + return this.host.querySelector('ix-dropdown'); + } + + // Check if it implemeted with the old component + get groupDropdownItem() { + return this.host.querySelectorAll('ix-group-dropdown-item'); + } + + private configureDropdown(triggerElement: HTMLElement) { + this.dropdownElement.positioningStrategy = 'fixed'; + this.dropdownElement.trigger = triggerElement; + } + + componentDidLoad() { + this.observer = new MutationObserver(() => { + this.showContextMenu = !!this.dropdownElement; + }); + + this.observer.observe(this.host, { + childList: true, + }); + } + + componentWillRender() { + // Check flag if the component itself should render old or new slot behavior + this.oldApi = this.groupDropdownItem.length > 0; + } + + disconnectedCallback() { + this.observer.disconnect(); + } + + render() { + return ( + + + this.dropdownElement ? this.configureDropdown(ref) : null + } + size="24" + ghost={true} + icon="context-menu" + > + + {!this.oldApi ? ( + + ) : ( + + + + )} + + ); + } +} diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss index 4c0950d1724..0bdc5b9e060 100644 --- a/packages/core/src/components/group/group.scss +++ b/packages/core/src/components/group/group.scss @@ -21,20 +21,6 @@ max-width: 19.75rem; border-color: var(--theme-group-item--border-color); - .group-header-context-button { - display: block; - position: relative; - margin-top: 5px; - margin-right: 5px; - margin-left: auto; - - ix-icon-button { - &::after { - display: none; - } - } - } - .group-header { height: 4rem; min-height: 4rem; diff --git a/packages/core/src/components/group/group.tsx b/packages/core/src/components/group/group.tsx index c611be2c055..dbaf7e884ce 100644 --- a/packages/core/src/components/group/group.tsx +++ b/packages/core/src/components/group/group.tsx @@ -8,15 +8,15 @@ */ import { - Component, - Element, - Event, - EventEmitter, - h, - Host, - Listen, - Prop, - State + Component, + Element, + Event, + EventEmitter, + h, + Host, + Listen, + Prop, + State, } from '@stencil/core'; @Component({ @@ -228,17 +228,9 @@ export class Group { -
- (this.dropdownTriggerRef = ref)} - size="24" - ghost={true} - icon="context-menu" - > - - - -
+ + +
; + return ( + + + {/* Currently documentated and release but not working */} + {/* + + */} + + {/* My fix, but this breaks the component api in some kind. */} + + + + + + Test + Test 2 + Test + Test +
My footer
+ + + ); } } diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index 538331aeb13..c703937f280 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -138,7 +138,6 @@ export const config: Config = { ], extras: { appendChildSlotFix: true, - slotChildNodesFix: true, }, namespace: 'siemens-ix', globalStyle: './scss/ix.scss', From 8e2716bd5783fdbbb02cf221d4545cce5cac4987 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 6 Dec 2022 14:38:32 +0100 Subject: [PATCH 2/5] fix: show dropdown --- .../preview-examples/group-context-menu.ts | 4 +- packages/angular/src/components.ts | 19 +++ packages/angular/src/declare-components.ts | 1 + packages/core/component-doc.json | 113 +++++++++++++++--- .../components/group/group-context-menu.tsx | 26 +--- packages/core/src/components/group/readme.md | 22 ---- .../group/test/context-menu/index.html | 29 +++++ .../src/components/group/test/group.e2e.ts | 10 ++ ...-1-chromium---theme-classic-dark-linux.png | Bin 0 -> 17412 bytes ...1-chromium---theme-classic-light-linux.png | Bin 0 -> 16462 bytes .../components/my-component/my-component.tsx | 17 --- packages/documentation/docs/controls/group.md | 9 ++ packages/documentation/src/css/custom.css | 6 +- .../preview-examples/group-context-menu.html | 8 +- .../preview-examples/group-context-menu.tsx | 15 ++- packages/react/src/components.ts | 1 + 16 files changed, 190 insertions(+), 90 deletions(-) create mode 100644 packages/core/src/components/group/test/context-menu/index.html create mode 100644 packages/core/src/components/group/test/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-dark-linux.png create mode 100644 packages/core/src/components/group/test/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-light-linux.png diff --git a/packages/angular-test-app/src/preview-examples/group-context-menu.ts b/packages/angular-test-app/src/preview-examples/group-context-menu.ts index 26b0f0c0bbc..f0f1a22846b 100644 --- a/packages/angular-test-app/src/preview-examples/group-context-menu.ts +++ b/packages/angular-test-app/src/preview-examples/group-context-menu.ts @@ -13,10 +13,10 @@ import { Component } from '@angular/core'; selector: 'app-group-context-menu', template: ` -
+ -
+ diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 426c0c0091a..fb8a5b82b18 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -664,6 +664,25 @@ export class IxGroup { } +export declare interface IxGroupContextMenu extends Components.IxGroupContextMenu {} + +@ProxyCmp({ + defineCustomElementFn: undefined +}) +@Component({ + selector: 'ix-group-context-menu', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) +export class IxGroupContextMenu { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + export declare interface IxGroupDropdownItem extends Components.IxGroupDropdownItem {} @ProxyCmp({ diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts index 20e138e2f75..237d07cc8ee 100644 --- a/packages/angular/src/declare-components.ts +++ b/packages/angular/src/declare-components.ts @@ -26,6 +26,7 @@ export const DIRECTIVES = [ d.IxFlipTile, d.IxFlipTileContent, d.IxGroup, + d.IxGroupContextMenu, d.IxGroupDropdownItem, d.IxGroupItem, d.IxIcon, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 37673bb633b..741366074a3 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -2252,11 +2252,11 @@ "dependents": [ "ix-breadcrumb", "ix-date-picker", - "ix-group", "ix-menu", "ix-menu-avatar", "ix-select", - "ix-split-button" + "ix-split-button", + "my-component" ], "dependencies": [], "dependencyGraph": { @@ -2266,9 +2266,6 @@ "ix-date-picker": [ "ix-dropdown" ], - "ix-group": [ - "ix-dropdown" - ], "ix-menu": [ "ix-dropdown" ], @@ -2280,6 +2277,9 @@ ], "ix-split-button": [ "ix-dropdown" + ], + "my-component": [ + "ix-dropdown" ] }, "props": [ @@ -2575,7 +2575,8 @@ "ix-menu-avatar-item", "ix-select", "ix-select-item", - "ix-split-button-item" + "ix-split-button-item", + "my-component" ], "dependencies": [ "ix-icon" @@ -2601,6 +2602,9 @@ ], "ix-split-button-item": [ "ix-dropdown-item" + ], + "my-component": [ + "ix-dropdown-item" ] }, "props": [ @@ -3224,25 +3228,31 @@ "docs": "", "docsTags": [], "encapsulation": "scoped", - "dependents": [], + "dependents": [ + "my-component" + ], "dependencies": [ "ix-icon", - "ix-icon-button", - "ix-dropdown", + "ix-group-context-menu", "ix-group-item" ], "dependencyGraph": { "ix-group": [ "ix-icon", - "ix-icon-button", - "ix-dropdown", + "ix-group-context-menu", "ix-group-item" ], + "ix-group-context-menu": [ + "ix-icon-button" + ], "ix-icon-button": [ "ix-icon" ], "ix-group-item": [ "ix-icon" + ], + "my-component": [ + "ix-group" ] }, "props": [ @@ -3404,6 +3414,44 @@ } ] }, + { + "dirPath": "./src/components/group", + "filePath": "./src/components/group/group-context-menu.tsx", + "fileName": "group-context-menu.tsx", + "readmePath": "./src/components/group/readme.md", + "usagesDir": "./src/components/group/usage", + "tag": "ix-group-context-menu", + "readme": "\n\n# ix-group\n", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [], + "encapsulation": "scoped", + "dependents": [ + "ix-group" + ], + "dependencies": [ + "ix-icon-button" + ], + "dependencyGraph": { + "ix-group-context-menu": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-icon" + ], + "ix-group": [ + "ix-group-context-menu" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, { "dirPath": "./src/components/group-dropdown-item", "filePath": "./src/components/group-dropdown-item/group-dropdown-item.tsx", @@ -3484,7 +3532,8 @@ "docsTags": [], "encapsulation": "scoped", "dependents": [ - "ix-group" + "ix-group", + "my-component" ], "dependencies": [ "ix-icon" @@ -3495,6 +3544,9 @@ ], "ix-group": [ "ix-group-item" + ], + "my-component": [ + "ix-group-item" ] }, "props": [ @@ -3830,7 +3882,7 @@ "ix-drawer", "ix-expanding-search", "ix-flip-tile", - "ix-group", + "ix-group-context-menu", "ix-map-navigation", "ix-map-navigation-overlay", "ix-menu-about", @@ -3861,7 +3913,7 @@ "ix-flip-tile": [ "ix-icon-button" ], - "ix-group": [ + "ix-group-context-menu": [ "ix-icon-button" ], "ix-map-navigation": [ @@ -9166,8 +9218,37 @@ "docsTags": [], "encapsulation": "scoped", "dependents": [], - "dependencies": [], - "dependencyGraph": {}, + "dependencies": [ + "ix-group", + "ix-dropdown", + "ix-dropdown-item", + "ix-group-item" + ], + "dependencyGraph": { + "my-component": [ + "ix-group", + "ix-dropdown", + "ix-dropdown-item", + "ix-group-item" + ], + "ix-group": [ + "ix-icon", + "ix-group-context-menu", + "ix-group-item" + ], + "ix-group-context-menu": [ + "ix-icon-button" + ], + "ix-icon-button": [ + "ix-icon" + ], + "ix-group-item": [ + "ix-icon" + ], + "ix-dropdown-item": [ + "ix-icon" + ] + }, "props": [], "methods": [], "events": [], diff --git a/packages/core/src/components/group/group-context-menu.tsx b/packages/core/src/components/group/group-context-menu.tsx index 6829daa6d41..b52c451136a 100644 --- a/packages/core/src/components/group/group-context-menu.tsx +++ b/packages/core/src/components/group/group-context-menu.tsx @@ -18,7 +18,6 @@ export class GroupContextMenu { @Element() host!: HTMLIxGroupContextMenuElement; @State() showContextMenu = false; - @State() oldApi = false; private observer!: MutationObserver; @@ -26,7 +25,6 @@ export class GroupContextMenu { return this.host.querySelector('ix-dropdown'); } - // Check if it implemeted with the old component get groupDropdownItem() { return this.host.querySelectorAll('ix-group-dropdown-item'); } @@ -36,19 +34,8 @@ export class GroupContextMenu { this.dropdownElement.trigger = triggerElement; } - componentDidLoad() { - this.observer = new MutationObserver(() => { - this.showContextMenu = !!this.dropdownElement; - }); - - this.observer.observe(this.host, { - childList: true, - }); - } - componentWillRender() { - // Check flag if the component itself should render old or new slot behavior - this.oldApi = this.groupDropdownItem.length > 0; + this.showContextMenu = !!this.dropdownElement; } disconnectedCallback() { @@ -59,7 +46,7 @@ export class GroupContextMenu { return ( this.dropdownElement ? this.configureDropdown(ref) : null } @@ -67,14 +54,7 @@ export class GroupContextMenu { ghost={true} icon="context-menu" > - - {!this.oldApi ? ( - - ) : ( - - - - )} + ); } diff --git a/packages/core/src/components/group/readme.md b/packages/core/src/components/group/readme.md index c580de6bd3e..64b0255221f 100644 --- a/packages/core/src/components/group/readme.md +++ b/packages/core/src/components/group/readme.md @@ -9,28 +9,6 @@ SPDX-License-Identifier: MIT -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------------------- | --------------------------- | ------------------------------------------------------------------------------ | --------- | ----------- | -| `collapsed` | `collapsed` | Whether the group is collapsed or expanded. Defaults to true. | `boolean` | `true` | -| `expandOnHeaderClick` | `expand-on-header-click` | Expand the group if the header is clicked | `boolean` | `false` | -| `header` | `header` | Group header | `string` | `undefined` | -| `index` | `index` | The index of the selected group entry. If undefined no group item is selected. | `number` | `undefined` | -| `selected` | `selected` | Whether the group is selected. | `boolean` | `undefined` | -| `subHeader` | `sub-header` | Group header subtitle | `string` | `undefined` | -| `suppressHeaderSelection` | `suppress-header-selection` | Prevent header from being selectable | `boolean` | `false` | - - -## Events - -| Event | Description | Type | -| ------------------ | ------------------------------------- | ---------------------- | -| `collapsedChanged` | Group collapsed | `CustomEvent` | -| `selectGroup` | Emits when whole group gets selected. | `CustomEvent` | -| `selectItem` | Emits when group item gets selected. | `CustomEvent` | - - ---------------------------------------------- diff --git a/packages/core/src/components/group/test/context-menu/index.html b/packages/core/src/components/group/test/context-menu/index.html new file mode 100644 index 00000000000..e17c64ca290 --- /dev/null +++ b/packages/core/src/components/group/test/context-menu/index.html @@ -0,0 +1,29 @@ + + + + + + + Stencil Component Starter + + + + + + + + + Test + Test + Test + + + + diff --git a/packages/core/src/components/group/test/group.e2e.ts b/packages/core/src/components/group/test/group.e2e.ts index 36785ae7419..06b3bb1e965 100644 --- a/packages/core/src/components/group/test/group.e2e.ts +++ b/packages/core/src/components/group/test/group.e2e.ts @@ -17,4 +17,14 @@ regressionTest.describe('group', () => { maxDiffPixelRatio: 0.05, }); }); + + regressionTest('with context menu', async ({ page }) => { + await page.goto('group/test/context-menu'); + await page.locator('ix-icon-button').click(); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({ + maxDiffPixelRatio: 0.05, + }); + }); + + // ix-icon-button }); diff --git a/packages/core/src/components/group/test/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/group/test/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..829e9550105ed5db5c5c284177c7547d31f0304f GIT binary patch literal 17412 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 - {/* Currently documentated and release but not working */} - {/* - - */} - - {/* My fix, but this breaks the component api in some kind. */} Test - Test 2 Test Test -
My footer
 ); diff --git a/packages/documentation/docs/controls/group.md b/packages/documentation/docs/controls/group.md index 79c08d5db35..e364a589bcd 100644 --- a/packages/documentation/docs/controls/group.md +++ b/packages/documentation/docs/controls/group.md @@ -71,6 +71,15 @@ import SourceAngularGroupContext from './../auto-generated/previews/angular/grou ### Group with context menu +:::note + +During migration from Core UI to iX we discovered an issue inside the slot rendering of the context menu. +Unfortunately we missed to adapt the documentation for version < 1.2.0. + +::: + +To show a context menu place a `ix-dropdown` with `slot="dropdown"` combined with `ix-dropdown-item`'s inside the `ix-group-tag` tag. + diff --git a/packages/documentation/src/css/custom.css b/packages/documentation/src/css/custom.css index 36d8f8d3a9c..61e8226ed67 100644 --- a/packages/documentation/src/css/custom.css +++ b/packages/documentation/src/css/custom.css @@ -43,6 +43,11 @@ body { --bs-alert-bg: var(--theme-color-alarm) !important; } +.theme-admonition-note { + background-color: var(--theme-color-7) !important; + color: var(--theme-color-inv-std-text); +} + .theme-admonition-caution { background-color: var(--theme-color-warning) !important; color: var(--theme-color-inv-std-text); @@ -130,7 +135,6 @@ aside { background-color: #000028; } - .dropdown__menu { box-shadow: var(--theme-box-shadow-lvl-1) !important; } diff --git a/packages/html-test-app/src/preview-examples/group-context-menu.html b/packages/html-test-app/src/preview-examples/group-context-menu.html index 75e8c3e3e00..86bc52fe076 100644 --- a/packages/html-test-app/src/preview-examples/group-context-menu.html +++ b/packages/html-test-app/src/preview-examples/group-context-menu.html @@ -12,10 +12,10 @@ -
- - -
+ + + + diff --git a/packages/react-test-app/src/preview-examples/group-context-menu.tsx b/packages/react-test-app/src/preview-examples/group-context-menu.tsx index 6b6826da560..88e6c5ea4f4 100644 --- a/packages/react-test-app/src/preview-examples/group-context-menu.tsx +++ b/packages/react-test-app/src/preview-examples/group-context-menu.tsx @@ -7,16 +7,21 @@ * LICENSE file in the root directory of this source tree. */ -import { IxGroup, IxGroupDropdownItem, IxGroupItem } from '@siemens/ix-react'; +import { + IxDropdown, + IxDropdownItem, + IxGroup, + IxGroupItem, +} from '@siemens/ix-react'; import React from 'react'; export const GroupContextMenu: React.FC = () => { return ( -
- - -
+ + + + diff --git a/packages/react/src/components.ts b/packages/react/src/components.ts index c39aabf272e..0500bb5761f 100644 --- a/packages/react/src/components.ts +++ b/packages/react/src/components.ts @@ -32,6 +32,7 @@ export const IxFilterChip = /*@__PURE__*/createReactComponent('ix-flip-tile'); export const IxFlipTileContent = /*@__PURE__*/createReactComponent('ix-flip-tile-content'); export const IxGroup = /*@__PURE__*/createReactComponent('ix-group'); +export const IxGroupContextMenu = /*@__PURE__*/createReactComponent('ix-group-context-menu'); export const IxGroupDropdownItem = /*@__PURE__*/createReactComponent('ix-group-dropdown-item'); export const IxGroupItem = /*@__PURE__*/createReactComponent('ix-group-item'); export const IxIcon = /*@__PURE__*/createReactComponent('ix-icon'); From 31fbf3f4db7904e216180db9a832bfa5c39e751a Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 6 Dec 2022 15:02:51 +0100 Subject: [PATCH 3/5] refactor: use margin-block-end and migrate to rem --- packages/core/src/components/group/group-context-menu.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/group/group-context-menu.scss b/packages/core/src/components/group/group-context-menu.scss index 5a54971b131..4f7a40f35d6 100644 --- a/packages/core/src/components/group/group-context-menu.scss +++ b/packages/core/src/components/group/group-context-menu.scss @@ -9,9 +9,9 @@ :host { display: block; position: relative; - margin-top: 5px; - margin-right: 5px; - margin-left: auto; + margin-top: 0.3125rem; + margin-block-end: 0.3125rem; + margin-block-start: auto; ix-icon-button { &::after { From 89f2a825e60988d930966ce483e03eb8fbe3a317 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Tue, 6 Dec 2022 15:17:17 +0100 Subject: [PATCH 4/5] fix(core/group-context-menu): update styling --- packages/core/src/components/group/group-context-menu.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/group/group-context-menu.scss b/packages/core/src/components/group/group-context-menu.scss index 4f7a40f35d6..9179a36a4a1 100644 --- a/packages/core/src/components/group/group-context-menu.scss +++ b/packages/core/src/components/group/group-context-menu.scss @@ -9,9 +9,9 @@ :host { display: block; position: relative; - margin-top: 0.3125rem; - margin-block-end: 0.3125rem; - margin-block-start: auto; + margin-block-start: 0.3125rem; + margin-inline-end: 0.3125rem; + margin-inline-start: auto; ix-icon-button { &::after { From 6e750802127026bc974dd8852fdb81854ab5c814 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Tue, 6 Dec 2022 17:16:24 +0100 Subject: [PATCH 5/5] docs(group): update hint --- packages/documentation/docs/controls/group.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation/docs/controls/group.md b/packages/documentation/docs/controls/group.md index e364a589bcd..28dd10e8feb 100644 --- a/packages/documentation/docs/controls/group.md +++ b/packages/documentation/docs/controls/group.md @@ -73,12 +73,12 @@ import SourceAngularGroupContext from './../auto-generated/previews/angular/grou :::note -During migration from Core UI to iX we discovered an issue inside the slot rendering of the context menu. -Unfortunately we missed to adapt the documentation for version < 1.2.0. +Please note that there is an issue with the slot rendering that can only be fixed with the next major version of Siemens iX. +Luckily there exists a workaround for rendering context menus inside the group component. ::: -To show a context menu place a `ix-dropdown` with `slot="dropdown"` combined with `ix-dropdown-item`'s inside the `ix-group-tag` tag. +To show a context menu place an `ix-dropdown` with `slot="dropdown"` combined with `ix-dropdown-item`'s inside the `ix-group-tag` tag.