CR

Author: OS-pedrolourenco

core/src/components/tab-button/tab-button.ionic.scss

@@ -72,17 +72,17 @@
   height: globals.$ion-scale-600;
 }
 
-// Toast Shapes
+// Tab Button Shapes
 // -------------------------------------------------------------------------------
 
-:host(.toast-shape-soft) {
-  border-radius: #{globals.$ion-border-radius-200};
+:host(.tab-button-shape-soft) {
+  @include globals.border-radius(globals.$ion-border-radius-200);
 }
 
-:host(.toast-shape-round) {
-  border-radius: #{globals.$ion-border-radius-400};
+:host(.tab-button-shape-round) {
+  @include globals.border-radius(globals.$ion-border-radius-400);
 }
 
-:host(.toast-shape-rectangular) {
-  border-radius: #{globals.$ion-border-radius-0};
+:host(.tab-button-shape-rectangular) {
+  @include globals.border-radius(globals.$ion-border-radius-0);
 }

core/src/components/tab-button/tab-button.tsx

@@ -117,10 +117,11 @@ export class TabButton implements ComponentInterface, AnchorInterface {
   }
 
   private getShape(): string | undefined {
+    const theme = getIonTheme(this);
     const { shape } = this;
 
     // TODO(ROU-11300): Remove theme check when shapes are defined for all themes.
-    if (getIonTheme(this) !== 'ionic') {
+    if (theme !== 'ionic') {
       return undefined;
     }
 
@@ -189,7 +190,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
           [`tab-layout-${layout}`]: true,
           'ion-activatable': true,
           'ion-selectable': true,
-          [`toast-shape-${shape}`]: shape !== undefined,
+          [`tab-button-shape-${shape}`]: shape !== undefined,
           'ion-focusable': true,
         }}
       >

core/src/components/tab-button/test/shape/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>Tab Button - Shape</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
+    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
@@ -19,43 +19,39 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content id="content" style="text-align: center">
+      <ion-content>
         <ion-text>
           (Only available for ionic theme)
         </ion-text>
-        <ion-tab-bar style="margin-top: 16px">
-          <ion-text style="flex: 1">
-            Default Shape
-          </ion-text>
-          <ion-text style="flex: 1">
-            Soft Shape
-          </ion-text>
-          <ion-text style="flex: 1">
-            Round Shape
-          </ion-text>
-          <ion-text style="flex: 1">
-            Rectangular Shape
-          </ion-text>
-        </ion-tab-bar>
 
         <ion-tab-bar>
-          <ion-tab-button id="default-tab-button" style="background: #ff9e99">
+          <ion-tab-button id="default-tab-button">
+            <ion-label>Default Shape</ion-label>
             <ion-icon aria-hidden="true" name="stop-circle"></ion-icon>
           </ion-tab-button>
 
-          <ion-tab-button id="soft-tab-button" shape="soft" style="background: #faf19d">
+          <ion-tab-button id="soft-tab-button" shape="soft">
+            <ion-label>Soft Shape</ion-label>
             <ion-icon aria-hidden="true" name="cloud"></ion-icon>
           </ion-tab-button>
 
-          <ion-tab-button id="round-tab-button" shape="round" style="background: #ff9e99">
+          <ion-tab-button id="round-tab-button" shape="round">
+            <ion-label>Round Shape</ion-label>
             <ion-icon aria-hidden="true" name="stop-circle"></ion-icon>
           </ion-tab-button>
 
-          <ion-tab-button id="rect-tab-button" shape="rectangular" style="background: #a3ff85">
+          <ion-tab-button id="rect-tab-button" shape="rectangular">
+            <ion-label>Rectangular Shape</ion-label>
             <ion-icon aria-hidden="true" name="square"></ion-icon>
           </ion-tab-button>
         </ion-tab-bar>
       </ion-content>
+
+      <style>
+        ion-tab-bar {
+          background: #d4d4d4;
+        }
+      </style>
     </ion-app>
   </body>
 </html>

core/src/components/tab-button/test/shape/tab-button.e2e.ts

@@ -36,10 +36,6 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screens
       await tabButtonFixture.goto(config);
     });
 
-    test('should render the default tab button', async () => {
-      await tabButtonFixture.screenshot('shape-round', screenshot, '#default-tab-button');
-    });
-
     test('should render a soft tab button', async () => {
       await tabButtonFixture.screenshot('shape-soft', screenshot, '#soft-tab-button');
     });