diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss new file mode 100644 index 0000000000..eed21a7480 --- /dev/null +++ b/core/src/components/tab-bar/tab-bar.ionic.scss @@ -0,0 +1,18 @@ +@use "../../foundations/ionic.vars.scss" as tokens; +@import "./tab-bar"; +@import "./tab-bar.ionic.vars"; + +:host { + --background: #{$tabbar-ionic-background}; + --background-activated: #{$tabbar-ionic-background-activated}; + --background-focused: #{$tabbar-ionic-background-focused}; + --color: #{$tabbar-ionic-color}; + --color-selected: #{$tabbar-ionic-color-selected}; + + @include padding(4px, 16px); + + height: 52px; + gap: 12px; + + box-shadow: tokens.$ionic-elevation-2; +} diff --git a/core/src/components/tab-bar/tab-bar.ionic.vars.scss b/core/src/components/tab-bar/tab-bar.ionic.vars.scss new file mode 100644 index 0000000000..7dc6f16742 --- /dev/null +++ b/core/src/components/tab-bar/tab-bar.ionic.vars.scss @@ -0,0 +1,20 @@ +@use "../../foundations/ionic.vars.scss" as tokens; + +// Ionic Tab Bar +// -------------------------------------------------- + +/// @prop - Background color of the tab bar +$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-neutral-0) !default; + +/// @prop - Background color of the tab bar button when activated +// TODO(FW-6186): use design token here when it is added +$tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, #ececec) !default; + +/// @prop - Background color of the tab bar button when focused +$tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent) !default; + +/// @prop - Color of the tab bar button +$tabbar-ionic-color: var(--ion-tab-bar-color, tokens.$ionic-color-neutral-500) !default; + +/// @prop - Color of the selected tab bar button +$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, tokens.$ionic-color-primary-400) !default; diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx index 39d1f91854..e0888b800c 100644 --- a/core/src/components/tab-bar/tab-bar.tsx +++ b/core/src/components/tab-bar/tab-bar.tsx @@ -18,7 +18,7 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface'; styleUrls: { ios: 'tab-bar.ios.scss', md: 'tab-bar.md.scss', - ionic: 'tab-bar.md.scss', + ionic: 'tab-bar.ionic.scss', }, shadow: true, }) diff --git a/core/src/components/tab-bar/test/basic/index.html b/core/src/components/tab-bar/test/basic/index.html index f5ce23ef54..5c4c39ee32 100644 --- a/core/src/components/tab-bar/test/basic/index.html +++ b/core/src/components/tab-bar/test/basic/index.html @@ -17,6 +17,67 @@ + + + + Label + + + + + Label + + + + + Label + + + + + + + Label + + + + + Label + + + + + Label + + + + + Label + + + + + + + Label + + + + + Label + + + + + Label + + + + + Label + + + diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts index 3cee871727..86c26e58d1 100644 --- a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts @@ -1,6 +1,46 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +/** + * This behavior needs to be tested in all modes and directions + */ +configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('tab-bar: basic'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + + Label + + + + + Label + + + + + Label + + + + + Label + + + `, + config + ); + + const tabBar = page.locator('ion-tab-bar'); + + await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-default`)); + }); + }); +}); + /** * This behavior needs to be tested in both modes and directions to * make sure the safe area padding is applied only to that side diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..18dd5f6982 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..56a844729b Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b3f875f29c Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b5295cc1f5 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..20ef395044 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b1e0413561 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..63658a079e Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..206d102076 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..225584c541 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0504f6c9f9 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b73e7c14f9 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f0ec1b41c6 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7a7ad16776 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..86b608d2b9 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6355f796af Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..de78443d11 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..aa9ea25cd2 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..326bf5bf37 Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss new file mode 100644 index 0000000000..93ecf91699 --- /dev/null +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -0,0 +1,40 @@ +@use "../../foundations/ionic.vars.scss" as tokens; +@import "./tab-button"; + +// Ionic Tab Button +// -------------------------------------------------------------- + +:host { + // TODO(FW-6186): use design token here when it is added + --focus-ring-color: #9ec4fd; + --focus-ring-width: 2px; + + @include border-radius(tokens.$ionic-border-radius-rounded-medium); +} + +// Tab Button Focused +// ------------------------------------------------------------------------------- + +.button-native { + overflow: visible; + + &::after { + @include border-radius(inherit); + } +} + +// Only show the focus ring when the tab button is focused +:host(.ion-focused) .button-native { + &::after { + outline: var(--focus-ring-width) solid var(--focus-ring-color); + } +} + +// Tab Button Activated +// ------------------------------------------------------------------------------- + +:host(.ion-activated) .button-native::after { + background: var(--background-activated); + + opacity: var(--background-activated-opacity); +} diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index f970e5a5d7..ab973b9f07 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -23,7 +23,7 @@ import type { styleUrls: { ios: 'tab-button.ios.scss', md: 'tab-button.md.scss', - ionic: 'tab-button.md.scss', + ionic: 'tab-button.ionic.scss', }, shadow: true, })