feat(tab-button): add the shape property and styles for the ionic theme (#30057)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Tab button does not have a shape property.


## What is the new behavior?
- Adds support for the shape property in tab button.
- Adds styles for the "soft", "round" and "rectangular" shapes in the
ionic theme
- Defaults the shape to "round" for the ionic theme
- Adds an e2e test for shape with screenshots of all shapes


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Author: OS-pedrolourenco

core/api.txt

@@ -2213,6 +2213,7 @@ ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-star
 ion-tab-button,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-button,prop,rel,string | undefined,undefined,false,false
 ion-tab-button,prop,selected,boolean,false,false,false
+ion-tab-button,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
 ion-tab-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false

core/src/components.d.ts

@@ -3504,6 +3504,10 @@ export namespace Components {
           * The selected tab component
          */
         "selected": boolean;
+        /**
+          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
@@ -8941,6 +8945,10 @@ declare namespace LocalJSX {
           * The selected tab component
          */
         "selected"?: boolean;
+        /**
+          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */

core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png

@@ -8,8 +8,6 @@
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
 
-  @include globals.border-radius(globals.$ion-border-radius-200);
-
   align-content: center;
 
   min-height: globals.$ion-scale-1200;
@@ -73,3 +71,18 @@
   width: globals.$ion-scale-600;
   height: globals.$ion-scale-600;
 }
+
+// Tab Button Shapes
+// -------------------------------------------------------------------------------
+
+:host(.tab-button-shape-soft) {
+  @include globals.border-radius(globals.$ion-border-radius-200);
+}
+
+:host(.tab-button-shape-round) {
+  @include globals.border-radius(globals.$ion-border-radius-400);
+}
+
+:host(.tab-button-shape-rectangular) {
+  @include globals.border-radius(globals.$ion-border-radius-0);
+}

core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png

@@ -68,6 +68,15 @@ export class TabButton implements ComponentInterface, AnchorInterface {
    */
   @Prop({ mutable: true }) selected = false;
 
+  /**
+   * Set to `"soft"` for a tab-button with slightly rounded corners,
+   * `"round"` for a tab-button with fully rounded corners, or `"rectangular"`
+   * for a tab-button without rounded corners.
+   *
+   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
   /**
    * A tab id must be provided for each `ion-tab`. It's used internally to reference
    * the selected tab or by the router to switch between them.
@@ -107,6 +116,22 @@ export class TabButton implements ComponentInterface, AnchorInterface {
     }
   }
 
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    // TODO(ROU-11436): Remove theme check when shapes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (shape === undefined) {
+      return 'round';
+    }
+
+    return shape;
+  }
+
   private selectTab(ev: Event | KeyboardEvent) {
     if (this.tab !== undefined) {
       if (!this.disabled) {
@@ -141,6 +166,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
   render() {
     const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
     const theme = getIonTheme(this);
+    const shape = this.getShape();
     const attrs = {
       download: this.download,
       href,
@@ -164,6 +190,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
           [`tab-layout-${layout}`]: true,
           'ion-activatable': true,
           'ion-selectable': true,
+          [`tab-button-shape-${shape}`]: shape !== undefined,
           'ion-focusable': true,
         }}
       >