fix(toolbar): MD height only applies to MD segment (#26042)

resolves #18617

Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
2022-10-10 09:19:13 -05:00
committed by GitHub
parent 01ac2f80a4
commit ab8967936c
6 changed files with 42 additions and 10 deletions

View File

@ -8,6 +8,19 @@
--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
// --------------------------------------------------

View File

@ -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(`
<ion-header>
<ion-toolbar mode="ios" color="primary">
<ion-segment mode="md" value="a">
<ion-segment-button value="a">First</ion-segment-button>
<ion-segment-button value="b">Second</ion-segment-button>
<ion-segment-button value="c" disabled="true">Third</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
`);
const header = page.locator('ion-header');
expect(await header.screenshot()).toMatchSnapshot(
`segment-toolbar-height-inherit-${page.getSnapshotSettings()}.png`
);
});
});
});

View File

@ -27,15 +27,6 @@
max-width: 100%;
}
// Toolbar: Segment
// --------------------------------------------------
::slotted(ion-segment) {
min-height: var(--min-height);
}
// Material Design Toolbar Buttons
// --------------------------------------------------