diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index 62f88c90d82..6d482ceffa9 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -2,6 +2,23 @@ ## v2.0.0 +### `ix-group-dropdown-item` removed + +Replaced with standard `ix-dropdown-item` + +___Now___ +```tsx + + + + + + + + + +``` + ### `ix-dropdown` removed deprecated properties - adjustDropdownWidthToReferenceWith 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 5b0316e87e0..c5a854201ed 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 @@ -14,8 +14,8 @@ import { Component } from '@angular/core'; template: ` - - + + diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 62b276c37a4..8b03f17fa37 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -991,28 +991,6 @@ export class IxGroupContextMenu { export declare interface IxGroupContextMenu extends Components.IxGroupContextMenu {} -@ProxyCmp({ - inputs: ['icon', 'label'] -}) -@Component({ - selector: 'ix-group-dropdown-item', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['icon', 'label'], -}) -export class IxGroupDropdownItem { - 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({ inputs: ['focusable', 'icon', 'index', 'secondaryText', 'selected', 'suppressSelection', 'text'] }) diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts index 79002a6cd31..137ad845c1a 100644 --- a/packages/angular/src/declare-components.ts +++ b/packages/angular/src/declare-components.ts @@ -39,7 +39,6 @@ export const DIRECTIVES = [ d.IxFlipTileContent, d.IxGroup, d.IxGroupContextMenu, - d.IxGroupDropdownItem, d.IxGroupItem, d.IxIcon, d.IxIconButton, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index a3016292e94..6f7eac1cf2e 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -3618,7 +3618,6 @@ "encapsulation": "shadow", "dependents": [ "ix-breadcrumb", - "ix-group-dropdown-item", "ix-menu-avatar-item", "ix-menu-category", "ix-select", @@ -3635,9 +3634,6 @@ "ix-breadcrumb": [ "ix-dropdown-item" ], - "ix-group-dropdown-item": [ - "ix-dropdown-item" - ], "ix-menu-avatar-item": [ "ix-dropdown-item" ], @@ -4533,7 +4529,7 @@ "usage": {}, "docs": "", "docsTags": [], - "encapsulation": "scoped", + "encapsulation": "shadow", "dependents": [], "dependencies": [ "ix-icon", @@ -4707,14 +4703,7 @@ "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "keydown", - "target": "window", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { "dirPath": "./src/components/group", @@ -4727,7 +4716,7 @@ "usage": {}, "docs": "", "docsTags": [], - "encapsulation": "scoped", + "encapsulation": "shadow", "dependents": [ "ix-group" ], @@ -4754,71 +4743,6 @@ "parts": [], "listeners": [] }, - { - "dirPath": "./src/components/group-dropdown-item", - "filePath": "./src/components/group-dropdown-item/group-dropdown-item.tsx", - "fileName": "group-dropdown-item.tsx", - "readmePath": "./src/components/group-dropdown-item/readme.md", - "usagesDir": "./src/components/group-dropdown-item/usage", - "tag": "ix-group-dropdown-item", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "scoped", - "dependents": [], - "dependencies": [ - "ix-dropdown-item" - ], - "dependencyGraph": { - "ix-group-dropdown-item": [ - "ix-dropdown-item" - ], - "ix-dropdown-item": [ - "ix-icon" - ] - }, - "props": [ - { - "name": "icon", - "type": "string", - "mutable": false, - "attr": "icon", - "reflectToAttr": false, - "docs": "Group dropdown icon", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "label", - "type": "string", - "mutable": false, - "attr": "label", - "reflectToAttr": false, - "docs": "Group dropdown label", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, { "dirPath": "./src/components/group-item", "filePath": "./src/components/group-item/group-item.tsx", @@ -4830,7 +4754,7 @@ "usage": {}, "docs": "", "docsTags": [], - "encapsulation": "scoped", + "encapsulation": "shadow", "dependents": [ "ix-group" ], diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index bfc469dd050..dc373ca4129 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -895,16 +895,6 @@ export namespace Components { } interface IxGroupContextMenu { } - interface IxGroupDropdownItem { - /** - * Group dropdown icon - */ - "icon": string; - /** - * Group dropdown label - */ - "label": string; - } interface IxGroupItem { /** * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise. @@ -2449,12 +2439,6 @@ declare global { prototype: HTMLIxGroupContextMenuElement; new (): HTMLIxGroupContextMenuElement; }; - interface HTMLIxGroupDropdownItemElement extends Components.IxGroupDropdownItem, HTMLStencilElement { - } - var HTMLIxGroupDropdownItemElement: { - prototype: HTMLIxGroupDropdownItemElement; - new (): HTMLIxGroupDropdownItemElement; - }; interface HTMLIxGroupItemElement extends Components.IxGroupItem, HTMLStencilElement { } var HTMLIxGroupItemElement: { @@ -2833,7 +2817,6 @@ declare global { "ix-flip-tile-content": HTMLIxFlipTileContentElement; "ix-group": HTMLIxGroupElement; "ix-group-context-menu": HTMLIxGroupContextMenuElement; - "ix-group-dropdown-item": HTMLIxGroupDropdownItemElement; "ix-group-item": HTMLIxGroupItemElement; "ix-icon-button": HTMLIxIconButtonElement; "ix-index-button": HTMLIxIndexButtonElement; @@ -3838,16 +3821,6 @@ declare namespace LocalJSX { } interface IxGroupContextMenu { } - interface IxGroupDropdownItem { - /** - * Group dropdown icon - */ - "icon"?: string; - /** - * Group dropdown label - */ - "label"?: string; - } interface IxGroupItem { /** * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise. @@ -5062,7 +5035,6 @@ declare namespace LocalJSX { "ix-flip-tile-content": IxFlipTileContent; "ix-group": IxGroup; "ix-group-context-menu": IxGroupContextMenu; - "ix-group-dropdown-item": IxGroupDropdownItem; "ix-group-item": IxGroupItem; "ix-icon-button": IxIconButton; "ix-index-button": IxIndexButton; @@ -5197,7 +5169,6 @@ declare module "@stencil/core" { "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-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes; "ix-index-button": LocalJSX.IxIndexButton & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/group-dropdown-item/group-dropdown-item.scss b/packages/core/src/components/group-dropdown-item/group-dropdown-item.scss deleted file mode 100644 index a9fb6a30c46..00000000000 --- a/packages/core/src/components/group-dropdown-item/group-dropdown-item.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 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: contents; -} diff --git a/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx b/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx deleted file mode 100644 index 3bfdb0227b9..00000000000 --- a/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 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, h, Host, Prop } from '@stencil/core'; - -@Component({ - tag: 'ix-group-dropdown-item', - styleUrl: 'group-dropdown-item.scss', - scoped: true, -}) -export class GroupDropdownItem { - /** - * Group dropdown label - */ - @Prop() label: string; - - /** - * Group dropdown icon - */ - @Prop() icon: string; - - render() { - return ( - - - - - - ); - } -} diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss index 3dcef5ac75b..973d6bb9195 100644 --- a/packages/core/src/components/group-item/group-item.scss +++ b/packages/core/src/components/group-item/group-item.scss @@ -9,24 +9,35 @@ @import 'common-variables'; @import 'mixins/fonts'; -@import 'mixins/hover'; +@import 'mixins/shadow-dom/hover'; +@import 'mixins/shadow-dom/component'; @import 'mixins/text-truncation'; +$focusBorderWidth: 1px; + :host { + @include ix-component; display: flex; min-height: 2.25rem; height: 2.25rem; - align-items: center; - justify-content: space-between; - padding: $small-space $large-space $small-space 2.5rem; - position: relative; - margin-top: 0.0625rem; - outline: none; - background-color: var(--theme-group-item--background); - - &.last { - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; + + > button { + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: flex-start; + position: relative; + outline: none; + background-color: var(--theme-group-item--background); + border: 1px solid transparent; + color: var(--theme-color-std-text); + + padding-left: 2.5rem; + + &:focus-visible { + border: $focusBorderWidth solid var(--theme-color-focus-bdr); + } } ix-icon { @@ -36,19 +47,20 @@ .group-entry-selection-indicator { position: absolute; - left: 0; - height: 100%; + left: -#{$focusBorderWidth}; + height: calc(100% + #{$focusBorderWidth * 2}); width: $tiny-space; } .group-entry-text { + @include text-default; @include ellipsis(); - flex-grow: 1; } .group-entry-text-secondary { &, span { + @include text-default; @include ellipsis; } @@ -57,39 +69,32 @@ flex-grow: 1; white-space: nowrap; color: var(--theme-color-soft-text); - font-size: 0.875rem; } +} - &:not(.suppress-selection) { - @include hover { - background-color: var(--theme-group-item--background--hover); - border-color: var(--theme-group-item--border-color--hover); - - &.selected { - background-color: var(--theme-group-item--background--selected); - } - } - - @include active { - background-color: var(--theme-group-item--background--active); - border-color: var(--theme-group-item--border-color--active); +:host(.selected) { + border-top-width: 0.062rem !important; + background-color: var(--theme-color-ghost--selected); - &.selected { - background-color: var(--theme-group-item--background--selected); - } - } + .group-entry-selection-indicator { + background-color: var(--theme-group-item-indicator--background--selected); } +} - &.selected { - border-top-width: 0.062rem !important; - background-color: var(--theme-group-item--background--selected); +:host(:not(.suppress-selection):hover) { + background-color: var(--theme-color-ghost--selected-hover); + border-color: var(--theme-group-item--border-color--hover); +} - .group-entry-selection-indicator { - background-color: var(--theme-group-item-indicator--background--selected); - } - } +:host(:not(.suppress-selection).selected:hover) { + background-color: var(--theme-color-ghost--selected-hover); +} - @include focus-visible { - border: 1px solid var(--theme-color-focus-bdr) !important; - } +:host(:not(.suppress-selection):active) { + background-color: var(--theme-color-ghost--selected-active); + border-color: var(--theme-group-item--border-color--active); +} + +:host(:not(.suppress-selection).selected:active) { + background-color: var(--theme-color-ghost--selected-active); } diff --git a/packages/core/src/components/group-item/group-item.tsx b/packages/core/src/components/group-item/group-item.tsx index 41008951a87..469905c1e60 100644 --- a/packages/core/src/components/group-item/group-item.tsx +++ b/packages/core/src/components/group-item/group-item.tsx @@ -21,7 +21,7 @@ import { @Component({ tag: 'ix-group-item', styleUrl: 'group-item.scss', - scoped: true, + shadow: true, }) export class GroupItem { @Element() hostElement!: HTMLIxGroupItemElement; @@ -82,21 +82,22 @@ export class GroupItem { selected: this.selected && !this.suppressSelection, 'suppress-selection': this.suppressSelection, }} - tabindex={this.focusable ? 0 : -1} > -
- {this.icon ? : null} - {this.text ? ( - - {this.text} - - ) : null} - {this.secondaryText ? ( - - {this.secondaryText} - - ) : null} - + ); } diff --git a/packages/core/src/components/group/group-context-menu.scss b/packages/core/src/components/group/group-context-menu.scss index 2b290f0f69c..d50a9c79a69 100644 --- a/packages/core/src/components/group/group-context-menu.scss +++ b/packages/core/src/components/group/group-context-menu.scss @@ -9,16 +9,14 @@ :host { display: block; position: relative; + + height: 2rem; + width: 2rem; + margin-block-start: 0.3125rem; margin-inline-end: 0.3125rem; margin-inline-start: 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 index 1e73cfbf708..3406a87f843 100644 --- a/packages/core/src/components/group/group-context-menu.tsx +++ b/packages/core/src/components/group/group-context-menu.tsx @@ -8,32 +8,53 @@ */ import { Component, Element, h, Host, State } from '@stencil/core'; +import { getSlottedElements } from '../utils/shadow-dom'; @Component({ tag: 'ix-group-context-menu', styleUrl: './group-context-menu.scss', - scoped: true, + shadow: true, }) export class GroupContextMenu { - @Element() host!: HTMLIxGroupContextMenuElement; + @Element() hostElement!: HTMLIxGroupContextMenuElement; @State() showContextMenu = false; - get dropdownElement() { - return this.host.querySelector('ix-dropdown'); + private getTrigger() { + return this.hostElement; } - get groupDropdownItem() { - return this.host.querySelectorAll('ix-group-dropdown-item'); + private configureDropdown( + dropdownElement: HTMLIxDropdownElement, + triggerElement: HTMLElement + ) { + dropdownElement.positioningStrategy = 'fixed'; + dropdownElement.trigger = triggerElement; } - private configureDropdown(triggerElement: HTMLElement) { - this.dropdownElement.positioningStrategy = 'fixed'; - this.dropdownElement.trigger = triggerElement; - } + private onSlotChange() { + const slot = this.hostElement.shadowRoot.querySelector('slot'); + if (!slot) { + return; + } + const elements = getSlottedElements(slot); + this.showContextMenu = elements.length !== 0; + + const dropdownElement = elements.find( + (elm: Element) => elm.tagName === 'IX-DROPDOWN' + ); + + const triggerElement = this.getTrigger(); + + if (!triggerElement) { + return; + } + + if (!dropdownElement) { + return; + } - componentWillRender() { - this.showContextMenu = !!this.dropdownElement; + this.configureDropdown(dropdownElement, triggerElement); } render() { @@ -41,14 +62,11 @@ export class GroupContextMenu { - this.dropdownElement ? this.configureDropdown(ref) : null - } size="24" ghost={true} icon="context-menu" > - + this.onSlotChange()}> ); } diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss index b46e2ec74be..10912e59f7f 100644 --- a/packages/core/src/components/group/group.scss +++ b/packages/core/src/components/group/group.scss @@ -142,13 +142,20 @@ .group-content { display: flex; flex-direction: column; + gap: 1px; + margin-top: 1px; } .footer { + visibility: collapse; height: auto; min-height: 0; } + .footer-visible { + visibility: visible; + } + .hidden { display: none; } diff --git a/packages/core/src/components/group/group.tsx b/packages/core/src/components/group/group.tsx index f157bb96220..d6447c38260 100644 --- a/packages/core/src/components/group/group.tsx +++ b/packages/core/src/components/group/group.tsx @@ -12,20 +12,23 @@ import { Element, Event, EventEmitter, + Fragment, h, Host, - Listen, Prop, State, } from '@stencil/core'; import { createMutationObserver } from '../utils/mutation-observer'; +import { hasSlottedElements } from '../utils/shadow-dom'; @Component({ tag: 'ix-group', styleUrl: 'group.scss', - scoped: true, + shadow: true, }) export class Group { + @Element() hostElement!: HTMLIxGroupElement; + /** * Prevent header from being selectable */ @@ -77,9 +80,12 @@ export class Group { */ @Event() collapsedChanged: EventEmitter; - @Element() hostElement!: HTMLIxGroupElement; - @State() itemSelected = false; + @State() dropdownTriggerRef: HTMLElement; + @State() slotSize = this.groupItems.length; + @State() footerVisible = false; + + private observer: MutationObserver; get dropdownItems() { return Array.from( @@ -94,41 +100,7 @@ export class Group { } get groupContent() { - return this.hostElement.querySelector('.group-content'); - } - - get footer() { - return this.hostElement.querySelector('.footer'); - } - - @State() dropdownTriggerRef: HTMLElement; - - @State() slotSize = this.groupItems.length; - - constructor() {} - - @Listen('keydown', { - target: 'window', - }) - async onKeyDown(event: KeyboardEvent) { - const targetElement = event.target as HTMLElement; - - if (!this.hostElement.contains(targetElement)) { - return; - } - - if (event.code === 'Enter' || event.code === 'NumpadEnter') { - if (targetElement.classList.contains('group-header')) { - if (this.suppressHeaderSelection) { - this.collapsed = !this.collapsed; - } else { - this.selected = !this.selected; - } - } else if (targetElement.matches('ix-group-item')) { - const groupItem = targetElement as HTMLIxGroupItemElement; - groupItem.selected = !groupItem.selected; - } - } + return this.hostElement.shadowRoot.querySelector('.group-content'); } private onExpandClick(event: Event) { @@ -169,6 +141,16 @@ export class Group { } } + private onSlotChange() { + const slot = this.hostElement.shadowRoot.querySelector( + 'slot[name="footer"]' + ); + + if (slot) { + this.footerVisible = hasSlottedElements(slot); + } + } + componentWillRender() { this.groupItems.forEach((item, index) => { if (this.selected === true) { @@ -179,19 +161,9 @@ export class Group { } item.selected = index === this.index; item.index = index; - item.classList.remove('last'); - if (!this.footer?.children.length && index === this.slotSize - 1) { - item.classList.add('last'); - } }); - - if (this.footer?.childElementCount > 1) { - this.groupContent.appendChild(this.footer); - } } - private observer: MutationObserver; - componentDidLoad() { this.observer = createMutationObserver(() => { this.slotSize = this.groupItems.length; @@ -268,19 +240,26 @@ export class Group {
- -
-
- - - + {!this.collapsed ? ( + + + + this.onSlotChange()} + > + + + ) : null}
); diff --git a/packages/core/src/components/utils/shadow-dom.ts b/packages/core/src/components/utils/shadow-dom.ts index 9e8998c08a1..c8aa56719ca 100644 --- a/packages/core/src/components/utils/shadow-dom.ts +++ b/packages/core/src/components/utils/shadow-dom.ts @@ -12,3 +12,11 @@ export function closestElement(selector: string, el: any) { closestElement(selector, (el.getRootNode() as any).host) ); } + +export function getSlottedElements(slot: any) { + return slot.assignedElements({ flatten: true }); +} + +export function hasSlottedElements(slot: any) { + return slot.assignedElements({ flatten: true }).length !== 0; +} diff --git a/packages/core/src/tests/group/group.e2e.ts b/packages/core/src/tests/group/group.e2e.ts index 0538dc4c14d..08f28f07b5d 100644 --- a/packages/core/src/tests/group/group.e2e.ts +++ b/packages/core/src/tests/group/group.e2e.ts @@ -13,17 +13,13 @@ import { regressionTest } from '@utils/test'; regressionTest.describe('group', () => { regressionTest('basic', async ({ page }) => { await page.goto('group/basic'); - expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({ - maxDiffPixelRatio: 0.05, - }); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); regressionTest('with context menu', async ({ page }) => { await page.goto('group/context-menu'); await page.locator('ix-icon-button').click(); - expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({ - maxDiffPixelRatio: 0.05, - }); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); regressionTest('selected', async ({ page }) => { @@ -37,10 +33,8 @@ regressionTest.describe('group', () => { await page.goto('group/basic'); await page.locator('.btn-expand-header .glyph').click(); await page.locator('text=Example text 1').first().click(); - await page.locator('text=Example text 1').first().hover(); + await page.locator('text=Example text 2').first().hover(); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); - - // ix-icon-button }); diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-dark-linux.png index 5a373349905..bfcc5540d9d 100644 Binary files a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-light-linux.png index b145bcd474d..b02b6e0f652 100644 Binary files a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png index 7610dbedb7b..170f7e97d78 100644 Binary files a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png index 4ab55eca54c..2768a82ec24 100644 Binary files a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-dark-linux.png index 829e9550105..6b8b015df3a 100644 Binary files a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-light-linux.png index 6b59d04ee28..df3380d8e6c 100644 Binary files a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-with-context-menu-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index cc00dd59d5e..02e3e727f57 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -87,7 +87,7 @@ export const config: Config = { components: ['ix-flip-tile', 'ix-flip-tile-content'], }, { - components: ['ix-group', 'ix-group-dropdown-item', 'ix-group-item'], + components: ['ix-group', 'ix-group-item'], }, { components: ['ix-icon'], diff --git a/packages/documentation/docs/controls/group.md b/packages/documentation/docs/controls/group.md index 7c6b23068cc..f3041d10525 100644 --- a/packages/documentation/docs/controls/group.md +++ b/packages/documentation/docs/controls/group.md @@ -6,9 +6,6 @@ import Events from './../auto-generated/ix-group/events.md'; import ItemProps from './../auto-generated/ix-group-item/props.md'; import ItemEvents from './../auto-generated/ix-group-item/events.md'; -import DropdownItemProps from './../auto-generated/ix-group-dropdown-item/props.md'; -import DropdownItemEvents from './../auto-generated/ix-group-dropdown-item/events.md'; - import SourceGroup from './../auto-generated/previews/web-component/group.md' import SourceGroupSuppressed from './../auto-generated/previews/web-component/group-header-suppressed.md' import SourceGroupCustomEntry from './../auto-generated/previews/web-component/group-custom-entry.md' @@ -106,13 +103,3 @@ frameworks={{ ### Events - -## Properties (ix-group-dropdown-item) - -### Props - - - -### Events - - diff --git a/packages/react/src/components.ts b/packages/react/src/components.ts index 2df4b70a45d..cc83a3eb089 100644 --- a/packages/react/src/components.ts +++ b/packages/react/src/components.ts @@ -45,7 +45,6 @@ export const IxFlipTile = /*@__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'); export const IxIconButton = /*@__PURE__*/createReactComponent('ix-icon-button'); diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 80a15f31ccb..01e88490108 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -340,12 +340,6 @@ export const IxGroup = /*@__PURE__*/ defineContainer('ix-group', un export const IxGroupContextMenu = /*@__PURE__*/ defineContainer('ix-group-context-menu', undefined); -export const IxGroupDropdownItem = /*@__PURE__*/ defineContainer('ix-group-dropdown-item', undefined, [ - 'label', - 'icon' -]); - - export const IxGroupItem = /*@__PURE__*/ defineContainer('ix-group-item', undefined, [ 'icon', 'text',