diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss index 0f99d548a7..6c299e0ff7 100644 --- a/core/src/components/segment/segment.md.scss +++ b/core/src/components/segment/segment.md.scss @@ -8,10 +8,23 @@ --background: transparent; } +// Segment: In Toolbar +// -------------------------------------------------- + +:host(.in-toolbar) { + /** + * Segment should inherit the + * height of the toolbar. + * Note: --min-height is initially + * set on ion-toolbar, not ion-segment + */ + min-height: var(--min-height); +} + // Segment: Scrollable // -------------------------------------------------- :host(.segment-scrollable) ::slotted(ion-segment-button) { min-width: auto; -} \ No newline at end of file +} diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts b/core/src/components/segment/test/toolbar/segment.e2e.ts index 917f54b587..17a5c15c18 100644 --- a/core/src/components/segment/test/toolbar/segment.e2e.ts +++ b/core/src/components/segment/test/toolbar/segment.e2e.ts @@ -38,5 +38,33 @@ test.describe('segment: toolbar', () => { expect(await header.screenshot()).toMatchSnapshot(`segment-toolbar-color-${page.getSnapshotSettings()}.png`); }); + + test('should not inherit height when segment is MD and toolbar is iOS', async ({ page, skip }) => { + skip.rtl(); + skip.mode('ios', 'We manually set the mode in this test, so the automatic mode switching is not needed'); + + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/18617', + }); + + await page.setContent(` + + + + First + Second + Third + + + + `); + + const header = page.locator('ion-header'); + + expect(await header.screenshot()).toMatchSnapshot( + `segment-toolbar-height-inherit-${page.getSnapshotSettings()}.png` + ); + }); }); }); diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..58ac72b3e2 Binary files /dev/null and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8394553b5c Binary files /dev/null and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f84d4a8c1d Binary files /dev/null and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss index 1f5f528104..9caf76c144 100644 --- a/core/src/components/toolbar/toolbar.md.scss +++ b/core/src/components/toolbar/toolbar.md.scss @@ -27,15 +27,6 @@ max-width: 100%; } - -// Toolbar: Segment -// -------------------------------------------------- - -::slotted(ion-segment) { - min-height: var(--min-height); -} - - // Material Design Toolbar Buttons // --------------------------------------------------