diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss index d6fdd6c1f0e..24be8e61b3a 100644 --- a/packages/core/src/components/group-item/group-item.scss +++ b/packages/core/src/components/group-item/group-item.scss @@ -66,11 +66,21 @@ @include hover { background-color: var(--theme-group-item--background--hover); border-color: var(--theme-group-item--border-color--hover); + + &.selected { + border-color: var(--theme-group-item--border-color--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); + + &.selected { + border-color: var(--theme-group-item--border-color--selected); + background-color: var(--theme-group-item--background--selected); + } } } diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss index 83d8ab6bf1f..00711bae0f9 100644 --- a/packages/core/src/components/group/group.scss +++ b/packages/core/src/components/group/group.scss @@ -36,11 +36,21 @@ @include hover { background-color: var(--theme-group-item--background--hover); border-color: var(--theme-group-item--border-color--hover); + + &.selected { + border: var(--theme-primary-bdr-2); + 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); + + &.selected { + border: var(--theme-primary-bdr-2); + background-color: var(--theme-group-item--background--selected); + } } @include focus-visible { diff --git a/packages/core/src/tests/group/basic/index.html b/packages/core/src/tests/group/basic/index.html index 786a844c682..8fab7b69e6a 100644 --- a/packages/core/src/tests/group/basic/index.html +++ b/packages/core/src/tests/group/basic/index.html @@ -14,7 +14,7 @@ Stencil Component Starter - + diff --git a/packages/core/src/tests/group/group.e2e.ts b/packages/core/src/tests/group/group.e2e.ts index fe74c537270..39ea7598743 100644 --- a/packages/core/src/tests/group/group.e2e.ts +++ b/packages/core/src/tests/group/group.e2e.ts @@ -26,5 +26,21 @@ regressionTest.describe('group', () => { }); }); + regressionTest('selected', async ({ page }) => { + await page.goto('group/basic'); + await page.click("[id='group']"); + await page.hover("[id='group']"); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('item selected', async ({ page }) => { + await page.goto('group/basic'); + await page.locator('.btn-expand-header').click(); + await page.locator('text=Example text 1').first().click(); + await page.locator('text=Example text 1').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-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 new file mode 100644 index 00000000000..c679336d54d Binary files /dev/null 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 new file mode 100644 index 00000000000..f985ffe7fe9 Binary files /dev/null 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-selected-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..2782dabdfd1 Binary files /dev/null and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..9ea6b89fd57 Binary files /dev/null and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png differ