diff --git a/core/src/components/segment-button/segment-button.ionic.scss b/core/src/components/segment-button/segment-button.ionic.scss index c5e45aba653..70ed7dbe468 100644 --- a/core/src/components/segment-button/segment-button.ionic.scss +++ b/core/src/components/segment-button/segment-button.ionic.scss @@ -79,6 +79,13 @@ color: var(--color-disabled); } +// Segment Button: Focused +// -------------------------------------------------- + +:host(.ion-focused) .button-inner { + @include globals.focused-state(); +} + // Segment Button: Indicator // -------------------------------------------------- diff --git a/core/src/components/segment/test/states/segment.e2e.ts b/core/src/components/segment/test/states/segment.e2e.ts new file mode 100644 index 00000000000..9f63b5c68b0 --- /dev/null +++ b/core/src/components/segment/test/states/segment.e2e.ts @@ -0,0 +1,29 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('segment: states'), () => { + test('should render focused segment correctly', async ({ page }) => { + await page.setContent( + ` + + + Bookmarks + + + Reading List + + + Shared Links + + + `, + config + ); + + const segment = page.locator('ion-segment'); + + await expect(segment).toHaveScreenshot(screenshot(`segment-focused`)); + }); + }); +}); diff --git a/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f523a360c93 Binary files /dev/null and b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5381677bd0c Binary files /dev/null and b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1c50c7e32ae Binary files /dev/null and b/core/src/components/segment/test/states/segment.e2e.ts-snapshots/segment-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ