fix(input): default to soft shape

fix(button): default shape and add support for other themes
test(button): add other shapes to shape test
2026-03-13 10:22:08 +08:00 · 2024-04-12 10:26:53 -04:00 · 2024-04-12 10:20:56 -04:00 · 2024-04-11 16:55:24 -04:00 · 2024-04-11 16:08:20 +01:00 · 2024-04-10 16:00:03 -04:00
56 changed files with 798 additions and 70 deletions
--- a/core/api.txt
+++ b/core/api.txt
@@ -347,6 +347,7 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
+ion-chip,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
 ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-chip,css-prop,--background
 ion-chip,css-prop,--color
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -543,9 +543,9 @@ export namespace Components {
         */
        "routerDirection": RouterDirection;
        /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
         */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
         */
@@ -754,6 +754,10 @@ export namespace Components {
          * Display an outline style button.
         */
        "outline": boolean;
+        /**
+          * Define the Chip corner shape, when using the Ionic Theme.
+         */
+        "shape"?: 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -1459,9 +1463,9 @@ export namespace Components {
         */
        "setFocus": () => Promise<void>;
        /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
         */
@@ -5771,9 +5775,9 @@ declare namespace LocalJSX {
         */
        "routerDirection"?: RouterDirection;
        /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
         */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
         */
@@ -5994,6 +5998,10 @@ declare namespace LocalJSX {
          * Display an outline style button.
         */
        "outline"?: boolean;
+        /**
+          * Define the Chip corner shape, when using the Ionic Theme.
+         */
+        "shape"?: 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -6715,9 +6723,9 @@ declare namespace LocalJSX {
         */
        "required"?: boolean;
        /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`.
         */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
         */
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -5,7 +5,6 @@
 // -------------------------------------------------------------------------------

 :host {
-  --border-radius: #{$button-ionic-border-radius};
  --padding-bottom: var(--padding-top);
  --padding-end: #{$button-ionic-padding-end};
  --padding-start: var(--padding-end);
@@ -155,13 +154,20 @@
 // -------------------------------------------------------------------------------

 :host(.button-rectangular) {
-  --border-radius: #{$button-ionic-rectangular-border};
+  --border-radius: #{$button-ionic-rectangular-border-radius};
+}
+
+// Button Shape Soft
+// -------------------------------------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-ionic-soft-border-radius};
 }

 // Button Shape Round
 // -------------------------------------------------------------------------------
 :host(.button-round) {
-  --border-radius: #{$button-ionic-round-border};
+  --border-radius: #{$button-ionic-round-border-radius};
 }

 // Button Focused
--- a/core/src/components/button/button.ionic.vars.scss
+++ b/core/src/components/button/button.ionic.vars.scss
@@ -3,9 +3,6 @@
 // Ionic Button
 // -------------------------------------------------------------------------------

-/// @prop - Border radius of the button
-$button-ionic-border-radius:                                  px-to-rem(8) !default;
-
 /// @prop - Padding top of the button
 $button-ionic-padding-top:                                    px-to-rem(12) !default;

@@ -128,13 +125,19 @@ $button-ionic-xlarge-font-size:                               dynamic-font-max(2
 // -------------------------------------------------------------------------------

 /// @prop - Border radius of the rectangular button
-$button-ionic-rectangular-border:                             0 !default;
+$button-ionic-rectangular-border-radius:                     0 !default;
+
+// Ionic Soft Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-ionic-soft-border-radius:                            px-to-rem(8) !default;

 // Ionic Round Button
 // -------------------------------------------------------------------------------

 /// @prop - Border radius of the round button
-$button-ionic-round-border:                                   px-to-rem(999) !default;
+$button-ionic-round-border-radius:                           px-to-rem(999) !default;

 // Ionic Outline Button
 // -------------------------------------------------------------------------------
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -7,7 +7,6 @@
 // --------------------------------------------------

 :host {
-  --border-radius: #{$button-ios-border-radius};
  --padding-top: #{$button-ios-padding-top};
  --padding-bottom: #{$button-ios-padding-bottom};
  --padding-start: #{$button-ios-padding-start};
@@ -42,7 +41,6 @@
 // --------------------------------------------------

 :host(.button-outline) {
-  --border-radius: #{$button-ios-outline-border-radius};
  --border-width: #{$button-ios-outline-border-width};
  --border-style: #{$button-ios-outline-border-style};
  --background-activated: #{ion-color(primary, base)};
@@ -114,6 +112,12 @@
  font-size: #{$button-ios-small-font-size};
 }

+// iOS Soft Button
+// --------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-ios-soft-border-radius};
+}

 // iOS Round Button
 // --------------------------------------------------
@@ -126,6 +130,13 @@
  --padding-bottom: #{$button-ios-round-padding-bottom};
 }

+// iOS Rectangular Button
+// --------------------------------------------------
+
+:host(.button-rectangular) {
+  --border-radius: #{$button-ios-rectangular-border-radius};
+}
+
 // iOS Strong Button
 // --------------------------------------------------

@@ -155,7 +166,7 @@
    *
    * Since the `ion-button` uses `rem` for the font size, we can't
    * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
    * to account for the ion-button` font size.
    *
    * For example, if the default font size of `ion-button` is 16px
@@ -179,7 +190,7 @@
    *
    * Since the `ion-button` uses `rem` for the font size, we can't
    * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
    * to account for the ion-button` font size.
    *
    * For example, if the default font size of `ion-button` is 13px
@@ -203,7 +214,7 @@
    *
    * Since the `ion-button` uses `rem` for the font size, we can't
    * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
    * to account for the ion-button` font size.
    *
    * For example, if the default font size of `ion-button` is 20px
--- a/core/src/components/button/button.ios.vars.scss
+++ b/core/src/components/button/button.ios.vars.scss
@@ -30,9 +30,6 @@ $button-ios-padding-start:                            $button-ios-padding-end !d
 /// @prop - Minimum height of the button
 $button-ios-min-height:                               3.1em !default;

-/// @prop - Border radius of the button
-$button-ios-border-radius:                            14px !default;
-
 /// @prop - Font size of the button text
 /// The maximum font size is calculated by taking the default font size
 /// and multiplying it by 3, since 310% of the default is the maximum
@@ -104,8 +101,6 @@ $button-ios-outline-border-width:                     1px !default;
 /// @prop - Border style of the outline button
 $button-ios-outline-border-style:                     solid !default;

-/// @prop - Border radius of the outline button
-$button-ios-outline-border-radius:                    $button-ios-border-radius !default;

 // iOS Clear Button
 // --------------------------------------------------
@@ -127,6 +122,13 @@ $button-ios-clear-opacity-activated:                  .4 !default;
 /// @prop - Opacity of the clear button on hover
 $button-ios-clear-opacity-hover:                      .6 !default;

+// iOS Soft Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-ios-soft-border-radius:                            14px !default;
+
+
 // iOS Round Button
 // --------------------------------------------------

@@ -146,6 +148,13 @@ $button-ios-round-padding-start:                      $button-round-padding-star
 $button-ios-round-border-radius:                      $button-round-border-radius !default;


+// iOS Rectangular Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the rectangular button
+$button-ios-rectangular-border-radius:               0 !default;
+
+
 // iOS Decorator Button
 // --------------------------------------------------

--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -5,7 +5,6 @@
 // --------------------------------------------------

 :host {
-  --border-radius: #{$button-md-border-radius};
  --padding-top: #{$button-md-padding-top};
  --padding-bottom: #{$button-md-padding-bottom};
  --padding-start: #{$button-md-padding-start};
@@ -76,6 +75,13 @@
 }


+// Material Design Soft Button
+// --------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-md-soft-border-radius};
+}
+
 // Material Design Round Button
 // --------------------------------------------------

@@ -87,6 +93,12 @@
  --padding-bottom: #{$button-md-round-padding-bottom};
 }

+// Material Design Rectangular Button
+// --------------------------------------------------
+
+:host(.button-rectangular) {
+  --border-radius: #{$button-md-rectangular-border-radius};
+}

 // Material Design Button Sizes
 // --------------------------------------------------
@@ -149,7 +161,7 @@
    *
    * Since the `ion-button` uses `rem` for the font size, we can't
    * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
    * to account for the ion-button` font size.
    *
    * For example, if the default font size of `ion-button` is 14px
@@ -174,7 +186,7 @@
    *
    * Since the `ion-button` uses `rem` for the font size, we can't
    * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
    * to account for the ion-button` font size.
    *
    * For example, if the default font size of `ion-button` is 13px
@@ -199,7 +211,7 @@
    *
    * Since the `ion-button` uses `rem` for the font size, we can't
    * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
    * to account for the ion-button` font size.
    *
    * For example, if the default font size of `ion-button` is 20px
--- a/core/src/components/button/button.md.vars.scss
+++ b/core/src/components/button/button.md.vars.scss
@@ -30,9 +30,6 @@ $button-md-padding-start:                               1.1em !default;
 /// @prop - Minimum height of the button
 $button-md-min-height:                                  36px !default;

-/// @prop - Border radius of the button
-$button-md-border-radius:                               4px !default;
-
 /// @prop - Font size of the button text
 $button-md-font-size:                                   dynamic-font(14px) !default;

@@ -93,6 +90,13 @@ $button-md-small-min-height:                            2.1em !default;
 /// @prop - Font size of the small button
 $button-md-small-font-size:                             dynamic-font(13px) !default;

+// Material Design Round Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-md-soft-border-radius:                          4px !default;
+
+
 // Material Design Round Button
 // --------------------------------------------------

@@ -112,6 +116,13 @@ $button-md-round-padding-start:                         $button-round-padding-st
 $button-md-round-border-radius:                         $button-round-border-radius !default;


+// Material Design Rectangular Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the rectangular button
+$button-md-rectangular-border-radius:                  0 !default;
+
+
 // Material Design Decorator Button
 // --------------------------------------------------

--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -115,9 +115,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
  @Prop() rel: string | undefined;

  /**
-   * Set to `"round"` for a button with more rounded corners.
+   * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button
+   * with fully rounded corners, or `"rectangular" for a button without rounded corners.
+   * Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
   */
-  @Prop({ reflect: true }) shape?: 'round' | 'rectangular';
+  @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular';

  /**
   * Set to `"small"` for a button with less height and padding, to `"default"`
@@ -216,6 +218,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    return 'bounded';
  }

+  /**
+   * Set the default shape for the different themes
+   */
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    if (shape === undefined) {
+      return theme === 'md' ? 'round' : 'soft';
+    }
+
+    return shape;
+  }
+
  /**
   * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
   */
@@ -343,13 +359,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
      color,
      expand,
      hasIconOnly,
-      shape,
      strong,
      inheritedAttributes,
    } = this;

    const theme = getIonTheme(this);
    const finalSize = this.getSize();
+    const finalShape = this.getShape();
    const TagType = href === undefined ? 'button' : ('a' as any);
    const attrs =
      TagType === 'button'
@@ -389,7 +405,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
          [buttonType]: true,
          [`${buttonType}-${expand}`]: expand !== undefined,
          [`${buttonType}-${finalSize}`]: finalSize !== undefined,
-          [`${buttonType}-${shape}`]: shape !== undefined,
+          [`${buttonType}-${finalShape}`]: finalShape !== undefined,
          [`${buttonType}-${fill}`]: true,
          [`${buttonType}-strong`]: strong,
          'in-toolbar': hostContext('ion-toolbar', this.el),
--- a/core/src/components/button/test/shape/index.html
+++ b/core/src/components/button/test/shape/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
-    <title>Button - Round</title>
+    <title>Button - Shape</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -26,7 +26,7 @@
    <ion-app>
      <ion-header>
        <ion-toolbar>
-          <ion-title>Button - Round</ion-title>
+          <ion-title>Button - Shape</ion-title>
        </ion-toolbar>
      </ion-header>

@@ -34,17 +34,174 @@
        <h1>Default</h1>
        <div id="default" class="grid">
          <div>
-            <ion-button size="small" shape="round">Button</ion-button>
+            <ion-button size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button>Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button>
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <div>
+            <ion-button fill="outline" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <!-- Clear buttons have focused state to see shape -->
+          <div>
+            <ion-button fill="clear" size="small" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" size="large" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" size="small" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" size="large" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+
+        <h1>Soft</h1>
+        <div id="soft" class="grid">
+          <div>
+            <ion-button shape="soft" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <div>
+            <ion-button shape="soft" fill="outline" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <!-- Clear buttons have focused state to see shape -->
+          <div>
+            <ion-button shape="soft" fill="clear" size="small" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" size="large" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" size="small" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" size="large" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+
+        <h1>Round</h1>
+        <div id="round" class="grid">
+          <div>
+            <ion-button shape="round" size="small">Button</ion-button>
          </div>
          <div>
            <ion-button shape="round">Button</ion-button>
          </div>
          <div>
-            <ion-button size="large" shape="round">Button</ion-button>
+            <ion-button shape="round" size="large">Button</ion-button>
          </div>
-
          <div>
-            <ion-button size="small" shape="round">
+            <ion-button shape="round" size="small">
              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
            </ion-button>
          </div>
@@ -54,25 +211,22 @@
            </ion-button>
          </div>
          <div>
-            <ion-button size="large" shape="round">
+            <ion-button shape="round" size="large">
              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
            </ion-button>
          </div>
-        </div>

-        <h1>Outline</h1>
-        <div id="outline" class="grid">
          <div>
-            <ion-button size="small" shape="round" fill="outline">Button</ion-button>
+            <ion-button shape="round" fill="outline" size="small">Button</ion-button>
          </div>
          <div>
            <ion-button shape="round" fill="outline">Button</ion-button>
          </div>
          <div>
-            <ion-button size="large" shape="round" fill="outline">Button</ion-button>
+            <ion-button shape="round" fill="outline" size="large">Button</ion-button>
          </div>
          <div>
-            <ion-button size="small" shape="round" fill="outline">
+            <ion-button shape="round" fill="outline" size="small">
              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
            </ion-button>
          </div>
@@ -82,26 +236,23 @@
            </ion-button>
          </div>
          <div>
-            <ion-button size="large" shape="round" fill="outline">
+            <ion-button shape="round" fill="outline" size="large">
              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
            </ion-button>
          </div>
-        </div>

-        <h1>Clear</h1>
-        <!-- The buttons have the `ion-focused` class to  highlight that they are round. Otherwise, they would be invisible. -->
-        <div id="clear" class="grid">
+          <!-- Clear buttons have focused state to see shape -->
          <div>
-            <ion-button size="small" shape="round" fill="clear" class="ion-focused">Button</ion-button>
+            <ion-button shape="round" fill="clear" size="small" class="ion-focused">Button</ion-button>
          </div>
          <div>
            <ion-button shape="round" fill="clear" class="ion-focused">Button</ion-button>
          </div>
          <div>
-            <ion-button size="large" shape="round" fill="clear" class="ion-focused">Button</ion-button>
+            <ion-button shape="round" fill="clear" size="large" class="ion-focused">Button</ion-button>
          </div>
          <div>
-            <ion-button size="small" shape="round" fill="clear" class="ion-focused">
+            <ion-button shape="round" fill="clear" size="small" class="ion-focused">
              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
            </ion-button>
          </div>
@@ -111,12 +262,92 @@
            </ion-button>
          </div>
          <div>
-            <ion-button size="large" shape="round" fill="clear" class="ion-focused">
+            <ion-button shape="round" fill="clear" size="large" class="ion-focused">
              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
            </ion-button>
          </div>
        </div>

+        <h1>Rectangular</h1>
+        <div id="rectangular" class="grid">
+          <div>
+            <ion-button shape="rectangular" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <!-- Clear buttons have focused state to see shape -->
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="small" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="large" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="small" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="large" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+
+        <!-- TODO remove from tests -->
        <h1>Color</h1>
        <div id="color">
          <ion-button shape="round">Default</ion-button>
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -1,7 +1,7 @@
@use "../../themes/ionic.mixins" as mixins;
@use "../../foundations/ionic.vars.scss" as tokens;

-// Chip
+// Ionic Chip
 // --------------------------------------------------

 // TODO(ROU-4870): there is no token yet for these ones, but it should be created in the future, once UX team has figma tokens done
@@ -11,19 +11,21 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 :host {
  --background: #{tokens.$ionic-color-neutral-10};
  --border-color: transparent;
+  --border-radius: #{tokens.$ionic-border-radius-rounded-small};
  --color: #{tokens.$ionic-color-neutral-900};
  --focus-ring-color: #{$ionic-states-focus-primary};
  --focus-ring-width: #{tokens.$ionic-border-size-medium};

  @include mixins.font-smoothing;
  @include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs);
-  @include mixins.border-radius(tokens.$ionic-border-radius-rounded-large);
+  @include mixins.border-radius(var(--border-radius));

  display: inline-flex;

  position: relative;

  align-items: center;
+  justify-content: center;

  gap: tokens.$ionic-space-xxxs;

@@ -39,6 +41,9 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi

  font-family: tokens.$ionic-font-family;
  font-size: tokens.$ionic-font-size-m;
+  font-weight: tokens.$ionic-font-weight-medium;
+
+  line-height: tokens.$ionic-font-line-height-full;

  cursor: pointer;

@@ -82,6 +87,17 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
  pointer-events: none;
 }

+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-round) {
+  --border-radius: #{tokens.$ionic-border-radius-rounded-large};
+}
+
+:host(.chip-rectangular) {
+  --border-radius: #{tokens.$ionic-border-radius-square};
+}
+
 // Chip Icon
 // ---------------------------------------------
 ::slotted(ion-icon) {
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -36,7 +36,13 @@ export class Chip implements ComponentInterface {
   */
  @Prop() disabled = false;

+  /**
+   * Define the Chip corner shape, when using the Ionic Theme.
+   */
+  @Prop() shape?: 'round' | 'rectangular';
+
  render() {
+    const { shape } = this;
    const theme = getIonTheme(this);

    return (
@@ -44,10 +50,12 @@ export class Chip implements ComponentInterface {
        aria-disabled={this.disabled ? 'true' : null}
        class={createColorClasses(this.color, {
          [theme]: true,
+          // TODO(FW-6120): remove the theme==='ionic' when we add support for the `ios` and `md` modes.
+          [`chip-${shape}`]: theme === 'ionic' && shape !== undefined,
          'chip-outline': this.outline,
          'chip-disabled': this.disabled,
          'ion-activatable': true,
-          'ion-focusable': true,
+          'ion-focusable': !this.disabled,
        })}
      >
        <slot></slot>
--- a/core/src/components/chip/test/shape/chip.e2e.ts
+++ b/core/src/components/chip/test/shape/chip.e2e.ts
@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior only applies to Ionic Theme.
+   * TODO(FW-6120): add the `ios` and `md` modes when shape support is added.
+   */
+  test.describe(title('chip: shape'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/chip/test/shape`, config);
+    });
+
+    test.describe('default', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const container = page.locator('#default');
+
+        await expect(container).toHaveScreenshot(screenshot(`chip-default`));
+      });
+    });
+
+    test.describe('round', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const container = page.locator('#round');
+
+        await expect(container).toHaveScreenshot(screenshot(`chip-round`));
+      });
+    });
+
+    test.describe('rectangular', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const container = page.locator('#rectangular');
+
+        await expect(container).toHaveScreenshot(screenshot(`chip-rectangular`));
+      });
+    });
+  });
+});
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/chip/test/shape/index.html
+++ b/core/src/components/chip/test/shape/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chip - Shape</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <h2>Chip - Shape</h2>
+
+        <h3>Shapes</h3>
+        <p>
+          <ion-chip id="default">
+            <ion-label>Default</ion-label>
+          </ion-chip>
+          <ion-chip id="round" shape="round">
+            <ion-label>Round</ion-label>
+          </ion-chip>
+          <ion-chip id="rectangular" shape="rectangular">
+            <ion-label>Rectangular</ion-label>
+          </ion-chip>
+        </p>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      ion-content {
+        --background: #222;
+      }
+      h2,
+      h3 {
+        color: #fff;
+        padding-left: 16px;
+      }
+
+      p {
+        padding-left: 8px;
+      }
+
+      ion-chip + ion-chip {
+        margin-inline-start: 16px;
+      }
+    </style>
+  </body>
+</html>
--- a/core/src/components/chip/test/states/chip.e2e.ts
+++ b/core/src/components/chip/test/states/chip.e2e.ts
@@ -41,3 +41,25 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
    });
  });
 });
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior only applies to Ionic Theme.
+   */
+  test.describe(title('chip: focus state'), () => {
+    test('should render focus state', async ({ page }) => {
+      await page.setContent(
+        `<div id="container" class="ion-padding">
+          <ion-chip class="ion-focused">
+            <ion-label>Focused</ion-label>
+          </ion-chip>
+        </div>`,
+        config
+      );
+
+      const chip = page.locator('#container');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-focused`));
+    });
+  });
+});
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/chip/test/theme-ionic/index.html
+++ b/core/src/components/chip/test/theme-ionic/index.html
@@ -51,6 +51,19 @@
          </ion-chip>
        </p>

+        <h3>Shapes</h3>
+        <p>
+          <ion-chip shape="soft">
+            <ion-label>Soft</ion-label>
+          </ion-chip>
+          <ion-chip shape="round">
+            <ion-label>Round</ion-label>
+          </ion-chip>
+          <ion-chip shape="rectangular">
+            <ion-label>Rectangular</ion-label>
+          </ion-chip>
+        </p>
+
        <h3>With Icon</h3>
        <p>
          <ion-chip>
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -5,13 +5,16 @@

 :host(.input-fill-outline) {
  --border-color: #{$background-color-step-300};
-  --border-radius: 4px;
  --padding-start: 16px;
  --padding-end: 16px;

  min-height: 56px;
 }

+:host(.input-fill-outline.input-shape-soft) {
+  --border-radius: 4px;
+}
+
 :host(.input-fill-outline.input-shape-round) {
  --border-radius: 28px;
  --padding-start: 32px;
--- a/core/src/components/input/input.md.solid.scss
+++ b/core/src/components/input/input.md.solid.scss
@@ -6,13 +6,16 @@
 :host(.input-fill-solid) {
  --background: #{$background-color-step-50};
  --border-color: #{$background-color-step-500};
-  --border-radius: 4px;
  --padding-start: 16px;
  --padding-end: 16px;

  min-height: 56px;
 }

+:host(.input-fill-solid.input-shape-soft) {
+  --border-radius: 4px;
+}
+
 /**
 * The solid fill style has a border
 * at the bottom of the input wrapper.
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -242,8 +242,14 @@ export class Input implements ComponentInterface {

  /**
   * The shape of the input. If "round" it will have an increased border radius.
+   *
   */
-  @Prop() shape?: 'round';
+  /**
+   * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input
+   * with fully rounded corners, or `"rectangular" for an input without rounded corners.
+   * Defaults to `"soft"`.
+   */
+  @Prop() shape?: 'soft' | 'round' = 'soft';

  /**
   * If `true`, the element will have its spelling and grammar checked.
--- a/core/src/css/link.ionic.scss
+++ b/core/src/css/link.ionic.scss
@@ -0,0 +1,120 @@
+@use "../foundations/ionic.vars" as tokens;
+
+// Link: Shared Styles (Standalone & Underline)
+// -------------------------------------------------------------------------------
+@mixin link-shared {
+  display: inline-flex;
+
+  align-items: center;
+
+  gap: 4px;
+
+  transition: color 0.2s ease-in-out;
+
+  font-weight: 400;
+
+  text-decoration-color: inherit;
+
+  text-underline-offset: 2px;
+
+  cursor: pointer;
+
+  // Link: Visited
+  // -------------------------------------------------------------------------------
+
+  &:visited {
+    color: tokens.$ionic-color-info-500;
+  }
+}
+
+// Link: Standalone
+// -------------------------------------------------------------------------------
+
+@mixin ionic-link {
+  @include link-shared;
+
+  // Link: Standalone - Hover
+  // -------------------------------------------------------------------------------
+
+  @media (any-hover: hover) {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  color: tokens.$ionic-color-info-400;
+
+  text-decoration: none;
+
+  // Link: Standalone - Focus
+  // -------------------------------------------------------------------------------
+
+  &:focus,
+  &.ion-focused {
+    outline: 2px solid tokens.$ionic-color-primary-100;
+    outline-offset: 2px;
+
+    text-decoration: underline;
+  }
+
+  // Link: Standalone - Active
+  // -------------------------------------------------------------------------------
+
+  &:active,
+  &.ion-activated {
+    color: tokens.$ionic-color-info-500;
+
+    text-decoration: underline;
+  }
+}
+
+a.ionic-link,
+:not(a).ionic-link a {
+  @include ionic-link;
+}
+
+// Link: Underline
+// -------------------------------------------------------------------------------
+
+@mixin ionic-link-underline {
+  @include link-shared;
+
+  // Link: Underline - Hover
+  // -------------------------------------------------------------------------------
+
+  @media (any-hover: hover) {
+    &:hover {
+      color: tokens.$ionic-color-info-400;
+    }
+  }
+
+  color: currentColor;
+
+  text-decoration: underline;
+
+  // Link: Underline - Focus
+  // -------------------------------------------------------------------------------
+
+  &:focus,
+  &.ion-focused {
+    outline: 2px solid tokens.$ionic-color-primary-100;
+    outline-offset: 2px;
+
+    color: currentColor;
+
+    text-decoration: none;
+  }
+
+  // Link: Underline - Active
+  // -------------------------------------------------------------------------------
+
+  &:active,
+  &.ion-activated {
+    color: tokens.$ionic-color-info-500;
+  }
+}
+
+a.ionic-link-underline,
+:not(a).ionic-link-underline a {
+  @include ionic-link-underline;
+}
--- a/core/src/css/test/link/basic/index.html
+++ b/core/src/css/test/link/basic/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Link - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/link.ionic.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .links div {
+        padding: 8px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Link - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <h3>Standalone (.ionic-link)</h3>
+        <div class="links" id="standalone">
+          <div><a class="ionic-link" href="#">Link - Default</a></div>
+          <div><a class="ionic-link ion-activated" href="#">Link - Active</a></div>
+          <div><a class="ionic-link ion-focused" href="#">Link - Focused</a></div>
+          <div><a class="ionic-link" href="">Link - Visited</a></div>
+          <div>
+            <a class="ionic-link" href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
+          </div>
+        </div>
+
+        <h3>Underline (.ionic-link-underline)</h3>
+        <div class="links" id="underline">
+          <div><a class="ionic-link-underline" href="#">Underline - Default</a></div>
+          <div><a class="ionic-link-underline ion-activated" href="#">Underline - Active</a></div>
+          <div><a class="ionic-link-underline ion-focused" href="#">Underline - Focused</a></div>
+          <div><a class="ionic-link-underline" href="">Underline - Visited</a></div>
+          <div>
+            <a class="ionic-link-underline" href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
+          </div>
+        </div>
+
+        <h3>Links in Content</h3>
+        <div class="links" id="links-in-content">
+          <div>
+            Lorem ipsum dolor sit amet consectetur, <a class="ionic-link" href="#">default link</a> adipisicing elit.
+          </div>
+          <div>
+            Lorem ipsum dolor sit amet consectetur,
+            <a class="ionic-link-underline" href="#">underline link</a> adipisicing elit.
+          </div>
+        </div>
+
+        <h3>Parent Element</h3>
+        <div class="links">
+          <div class="ionic-link" id="standalone-nested">
+            <p>Lorem ipsum dolor sit amet consectetur, <a href="#">default link</a> adipisicing elit.</p>
+          </div>
+          <div class="ionic-link-underline" id="underline-nested">
+            <p>Lorem ipsum dolor sit amet consectetur, <a href="#">underline link</a> adipisicing elit.</p>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/css/test/link/basic/link.e2e.ts
+++ b/core/src/css/test/link/basic/link.e2e.ts
@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Link global classes are only available in the Ionic theme.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('link global classes'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/css/test/link/basic/index.html', config);
+    });
+
+    test.describe('.ion-link class', () => {
+      test('should apply to anchor elements', async ({ page }) => {
+        const standalone = page.locator('#standalone');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-standalone'));
+      });
+
+      test('should apply to child anchor elements', async ({ page }) => {
+        const standalone = page.locator('#standalone-nested');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-standalone-nested'));
+      });
+    });
+
+    test.describe('.ion-link-underline class', () => {
+      test('should apply to anchor elements', async ({ page }) => {
+        const standalone = page.locator('#underline');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-underline'));
+      });
+
+      test('should apply to child anchor elements', async ({ page }) => {
+        const standalone = page.locator('#underline-nested');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-underline-nested'));
+      });
+    });
+  });
+});
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-font-weights-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/foundations/_design-tokens.json
+++ b/core/src/foundations/_design-tokens.json
@@ -273,6 +273,9 @@
      },
      "display-m": {
        "$value": "48px"
+      },
+      "full": {
+        "$value": "100%"
      }
    },
    "size": {
@@ -317,6 +320,9 @@
      "regular": {
        "$value": "400"
      },
+      "medium": {
+        "$value": "500"
+      },
      "semi-bold": {
        "$value": "600"
      },
--- a/core/src/foundations/ionic.root.scss
+++ b/core/src/foundations/ionic.root.scss
@@ -89,6 +89,7 @@
  --ionic-font-line-height-xxl: 36px;
  --ionic-font-line-height-display-s: 44px;
  --ionic-font-line-height-display-m: 48px;
+  --ionic-font-line-height-full: 100%;
  --ionic-font-size-h1: 28px;
  --ionic-font-size-h2: 32px;
  --ionic-font-size-h3: 24px;
@@ -102,6 +103,7 @@
  --ionic-font-size-l: 16px;
  --ionic-font-weight-light: 300;
  --ionic-font-weight-regular: 400;
+  --ionic-font-weight-medium: 500;
  --ionic-font-weight-semi-bold: 600;
  --ionic-font-weight-bold: 700;
  --ionic-space-none: 0;
--- a/core/src/foundations/ionic.utility.scss
+++ b/core/src/foundations/ionic.utility.scss
@@ -478,6 +478,9 @@
 .ionic-font-line-height-display-m {
  line-height: $ionic-font-line-height-display-m;
 }
+.ionic-font-line-height-full {
+  line-height: $ionic-font-line-height-full;
+}
 .ionic-font-size-h1 {
  font-size: $ionic-font-size-h1;
 }
@@ -517,6 +520,9 @@
 .ionic-font-weight-regular {
  font-weight: $ionic-font-weight-regular;
 }
+.ionic-font-weight-medium {
+  font-weight: $ionic-font-weight-medium;
+}
 .ionic-font-weight-semi-bold {
  font-weight: $ionic-font-weight-semi-bold;
 }
--- a/core/src/foundations/ionic.vars.scss
+++ b/core/src/foundations/ionic.vars.scss
@@ -88,6 +88,7 @@ $ionic-font-line-height-xl: var(--ionic-font-line-height-xl, 32px);
 $ionic-font-line-height-xxl: var(--ionic-font-line-height-xxl, 36px);
 $ionic-font-line-height-display-s: var(--ionic-font-line-height-display-s, 44px);
 $ionic-font-line-height-display-m: var(--ionic-font-line-height-display-m, 48px);
+$ionic-font-line-height-full: var(--ionic-font-line-height-full, 100%);
 $ionic-font-size-h1: var(--ionic-font-size-h1, 28px);
 $ionic-font-size-h2: var(--ionic-font-size-h2, 32px);
 $ionic-font-size-h3: var(--ionic-font-size-h3, 24px);
@@ -101,6 +102,7 @@ $ionic-font-size-m: var(--ionic-font-size-m, 14px);
 $ionic-font-size-l: var(--ionic-font-size-l, 16px);
 $ionic-font-weight-light: var(--ionic-font-weight-light, 300);
 $ionic-font-weight-regular: var(--ionic-font-weight-regular, 400);
+$ionic-font-weight-medium: var(--ionic-font-weight-medium, 500);
 $ionic-font-weight-semi-bold: var(--ionic-font-weight-semi-bold, 600);
 $ionic-font-weight-bold: var(--ionic-font-weight-bold, 700);
 $ionic-space-none: var(--ionic-space-none, 0);
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -550,14 +550,14 @@ setting the checked property.


@ProxyCmp({
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme']
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme']
 })
@Component({
  selector: 'ion-chip',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme'],
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'],
 })
 export class IonChip {
  protected el: HTMLElement;
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -613,14 +613,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}

@ProxyCmp({
  defineCustomElementFn: defineIonChip,
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme']
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme']
 })
@Component({
  selector: 'ion-chip',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme'],
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'],
  standalone: true
 })
 export class IonChip {
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -228,7 +228,8 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
 export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', defineIonChip, [
  'color',
  'outline',
-  'disabled'
+  'disabled',
+  'shape'
 ]);
Author	SHA1	Message	Date
Brandy Carney	15048095b3	fix(input): default to soft shape	2024-04-12 10:26:53 -04:00
Brandy Carney	33a7186575	fix(button): default shape and add support for other themes	2024-04-12 10:20:56 -04:00
Brandy Carney	940e96d41f	test(button): add other shapes to shape test	2024-04-11 16:55:24 -04:00
Bernardo Cardoso	95daa05a49	feat(chip): add shape to ionic theme (#29303 ) Issue number: None --------- <!-- 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 new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added new prop `shape`, only supported on Ionic Theme. - Added scss for the different shapes. - Added missing scss for font-weight and line-height. - Added missing tests for focus state and new tests for shape. - Added new font weight and line-height design tokens. This change uncovered an issue on the IOnic Typography tests that resulted on snapshots differences. - Added & updated new snapshot baselines. ## 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. --> --------- Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Sean Perkins <sean@ionic.io> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>	2024-04-11 16:08:20 +01:00
Sean Perkins	a57be0941d	feat(css): global link classes for standalone and underline (#29298 ) 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? <!-- Please describe the current behavior that you are modifying. --> N/A ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Adds two global classes for `.ionic-link` (standalone) and `.ionic-link-underline` (underline) appearances. - The global classes apply when directly applied to an anchor element (`a`) or when used on a parent container that renders a link internally. Usage Developers will need to import the link global stylesheet at this time to leverage the following CSS classes. ```html <!-- Basic Usage --> <a href="#" class="ionic-link">Standalone</a> <a href="#" class="ionic-link-underline">Underline</a> <!-- Nested Usage --> <div class="ionic-link"> <a href="#">Standalone</a> </div> <div class="ionic-link-underline"> <a href="#">Underline</a> </div> ``` Focus and Activated States Developers should apply the `ion-focusable` and `ion-activatable` classes to the anchor elements to enable proper styling on a mobile device. For web-only usages, the fallback `:focus` and `:active` pseudo states will apply correctly. ```html <!-- Basic Usage --> <a href="#" class="ionic-link ion-focusable ion-activatable">Standalone</a> <a href="#" class="ionic-link-underline ion-focusable ion-activatable">Underline</a> ``` ### Design Changes This section is areas of the implementation that are not consistent with the design and why. 1. Font size: Link font sizing is inherited from its content. This is to provide visual consistency when using a link within a paragraph or existing text content. Links should not have an explicit font size, but can be customized by the developer if a specific font size is desired. 2. Color: `currentColor` was used in place of `$ionic-color-neutral-900`. This is to provide better visual consistency when a link is used within content. Text color should be set on the body or text content, which would apply neutral-900 in places where it is applied. 3. The text underline offset in the designs is ~3px, but all of the design implementation is on a 4px grid. We've landed on 2px for the offset here. Discussed with Design and these proposed changes were verbally approved. ## 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. 4. Update the BREAKING.md file with the breaking change. 5. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/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. -->	2024-04-10 16:00:03 -04:00