mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
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:
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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`
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Reference in New Issue
Block a user