feat(tab-button): add the shape property and styles for the ionic theme #30057
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
github-actions
bot
added
package: core
| const { shape } = this; | ||
|
|
||
| // TODO(ROU-11300): Remove theme check when shapes are defined for all themes. | ||
| if (getIonTheme(this) !== 'ionic') { |
There was a problem hiding this comment.
Let's keep this consistent with the other getShape functions.
| const { shape } = this; | |
| // TODO(ROU-11300): Remove theme check when shapes are defined for all themes. | |
| if (getIonTheme(this) !== 'ionic') { | |
| const theme = getIonTheme(this); | |
| const { shape } = this; | |
| // TODO(ROU-11300): Remove theme check when shapes are defined for all themes. | |
| if (theme !== 'ionic') { |
| @@ -164,6 +189,7 @@ export class TabButton implements ComponentInterface, AnchorInterface { | |||
| [`tab-layout-${layout}`]: true, | |||
| 'ion-activatable': true, | |||
| 'ion-selectable': true, | |||
| [`toast-shape-${shape}`]: shape !== undefined, | |||
There was a problem hiding this comment.
| [`toast-shape-${shape}`]: shape !== undefined, | |
| [`tab-shape-${shape}`]: shape !== undefined, |
| @@ -73,3 +71,18 @@ | |||
| width: globals.$ion-scale-600; | |||
| height: globals.$ion-scale-600; | |||
| } | |||
|
|
|||
| // Toast Shapes | |||
There was a problem hiding this comment.
| // Toast Shapes | |
| // Tab Button Shapes |
| // Toast Shapes | ||
| // ------------------------------------------------------------------------------- | ||
|
|
||
| :host(.toast-shape-soft) { |
There was a problem hiding this comment.
| :host(.toast-shape-soft) { | |
| :host(.tab-shape-soft) { |
| border-radius: #{globals.$ion-border-radius-200}; | ||
| } | ||
|
|
||
| :host(.toast-shape-round) { |
There was a problem hiding this comment.
| :host(.toast-shape-round) { | |
| :host(.tab-shape-round) { |
|
|
||
| <ion-tab-bar> | ||
| <ion-tab-button id="default-tab-button" style="background: #ff9e99"> | ||
| <ion-icon aria-hidden="true" name="stop-circle"></ion-icon> |
There was a problem hiding this comment.
Use triangle icons for all the tab buttons. This matches Figma designs and it makes it easier to debug when we stick as close to Figma as possible.
| <ion-icon aria-hidden="true" name="stop-circle"></ion-icon> | |
| <ion-icon aria-hidden="true" name="triangle-outline"></ion-icon> |
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content id="content" style="text-align: center"> |
There was a problem hiding this comment.
Since we want to render a simple and pure version of tab button, remove the style.
| <ion-content id="content" style="text-align: center"> | |
| <ion-content id="content"> |
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content id="content" style="text-align: center"> |
There was a problem hiding this comment.
Is there a reason that an id attribute was added? If not, then remove.
| import { configs, test } from '@utils/test/playwright'; | ||
| import type { E2EPage, E2EPageOptions, ScreenshotFn } from '@utils/test/playwright'; | ||
|
|
||
| class TabButtonFixture { |
There was a problem hiding this comment.
This file was created based on toast/test/shape/toast.e2e.ts which also has a fixture and it made sense for me to have one here in order to access the same page and elements on every test.
| test('should render the default tab button', async () => { | ||
| await tabButtonFixture.screenshot('shape-round', screenshot, '#default-tab-button'); | ||
| }); |
There was a problem hiding this comment.
Remove, defaults are needed to be tested since those are already tested in a default tab bar test.
Issue number: internal
What is the current behavior?
Tab button does not have a shape property.
What is the new behavior?
Does this introduce a breaking change?
Other information