feat(button): set default shape to soft for ios and round for md and ionic themes

core/api.txt

@@ -234,7 +234,7 @@ ion-button,prop,mode,"ios" | "md",undefined,false,false
 ion-button,prop,rel,string | undefined,undefined,false,false
 ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-button,prop,shape,"rectangular" | "round" | undefined,undefined,false,true
+ion-button,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,true
 ion-button,prop,size,"default" | "large" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,true
 ion-button,prop,strong,boolean,false,false,false
 ion-button,prop,target,string | undefined,undefined,false,false

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 slightly rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular"` for a button without rounded corners. Defaults to `"soft"` for the `"ios"` theme and `"round"` for all other themes.
          */
-        "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.
          */
@@ -5791,9 +5791,9 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with slightly rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular"` for a button without rounded corners. Defaults to `"soft"` for the `"ios"` theme and `"round"` for all other themes.
          */
-        "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.
          */

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

@@ -1,15 +1,16 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./button";
 @import "./button.ionic.vars";
 
 // Ionic Button
 // -------------------------------------------------------------------------------
 
 :host {
-  --border-radius: #{$button-ionic-border-radius};
   --padding-bottom: var(--padding-top);
   --padding-end: #{$button-ionic-padding-end};
   --padding-start: var(--padding-end);
   --padding-top: #{$button-ionic-padding-top};
+  // TODO(FW-6187): set this to a design token when it is added
   --focus-ring-color: #9ec4fd;
   --focus-ring-width: 2px;
 
@@ -62,7 +63,6 @@
 
 /* Extra Small Button */
 :host(.button-xsmall) {
-  --border-radius: #{$button-ionic-xsmall-border-radius};
   --padding-top: #{$button-ionic-xsmall-padding-top};
   --padding-end: #{$button-ionic-xsmall-padding-end};
 
@@ -73,7 +73,6 @@
 
 /* Small Button */
 :host(.button-small) {
-  --border-radius: #{$button-ionic-small-border-radius};
   --padding-top: #{$button-ionic-small-padding-top};
   --padding-end: #{$button-ionic-small-padding-end};
 
@@ -123,45 +122,33 @@
   }
 }
 
-/* Button extra small */
-:host(.button-has-icon-only.button-xsmall) {
-  --padding-end: #{$button-has-icon-only-padding-end-xsmall};
-}
-
-/* Button small */
-:host(.button-has-icon-only.button-small) {
-  --padding-end: #{$button-has-icon-only-padding-end-small};
-}
-
-/* Default */
 :host(.button-has-icon-only) {
-  --padding-end: #{$button-has-icon-only-padding-end};
-}
-
-/* Button large */
-:host(.button-has-icon-only.button-large) {
-  --padding-end: #{$button-has-icon-only-padding-end-large};
-}
+  --padding-top: 0;
+  --padding-bottom: var(--padding-top);
+  --padding-end: var(--padding-top);
+  --padding-start: var(--padding-end);
 
-/* Button extra large */
-:host(.button-has-icon-only.button-xlarge) {
-  --padding-end: #{$button-has-icon-only-padding-end-xlarge};
+  aspect-ratio: 1 / 1;
 }
 
 // Button Shapes
 // -------------------------------------------------------------------------------
 
-// Button Shape Rectangular
-// -------------------------------------------------------------------------------
+:host(.button-soft) {
+  --border-radius: #{globals.$ionic-border-radius-rounded-medium};
+}
 
-:host(.button-rectangular) {
-  --border-radius: #{$button-ionic-rectangular-border};
+:host(.button-soft.button-xsmall),
+:host(.button-soft.button-small) {
+  --border-radius: #{globals.$ionic-border-radius-rounded-small};
 }
 
-// Button Shape Round
-// -------------------------------------------------------------------------------
 :host(.button-round) {
-  --border-radius: #{$button-ionic-round-border};
+  --border-radius: #{globals.$ionic-border-radius-rounded-full};
+}
+
+:host(.button-rectangular) {
+  --border-radius: #{globals.$ionic-border-radius-square};
 }
 
 // Button Focused

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);
-
 /// @prop - Padding top of the button
 $button-ionic-padding-top: px-to-rem(12);
 
@@ -29,9 +26,6 @@ $button-ionic-font-size: dynamic-font-max(14px, 3);
 // Ionic Extra Small Button
 // -------------------------------------------------------------------------------
 
-/// @prop - Border radius of the extra small button
-$button-ionic-xsmall-border-radius: px-to-rem(4);
-
 /// @prop - Padding top of the extra small button
 $button-ionic-xsmall-padding-top: px-to-rem(4);
 
@@ -55,9 +49,6 @@ $button-ionic-xsmall-font-size: dynamic-font-max(12px, 3);
 // Ionic Small Button
 // -------------------------------------------------------------------------------
 
-/// @prop - Border radius of the small button
-$button-ionic-small-border-radius: px-to-rem(4);
-
 /// @prop - Padding top of the small button
 $button-ionic-small-padding-top: px-to-rem(8);
 
@@ -124,41 +115,11 @@ $button-ionic-xlarge-min-height: px-to-rem(56);
 /// and multiplying it by 3, since 310% of the default is the maximum
 $button-ionic-xlarge-font-size: dynamic-font-max(20px, 3);
 
-// Ionic Rectangular Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Border radius of the rectangular button
-$button-ionic-rectangular-border: 0;
-
-// Ionic Round Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Border radius of the round button
-$button-ionic-round-border: px-to-rem(999);
-
 // Ionic Outline Button
 // -------------------------------------------------------------------------------
 
 /// @prop - Border width of the outline button
 $button-ionic-outline-border-width: 1px;
 
 /// @prop - Border style of the outline button
-$button-ionic-outline-border-style: solid;
-
-// Ionic Icon Only Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding end of the icon only button
-$button-has-icon-only-padding-end: px-to-rem(13);
-
-/// @prop - Padding end of the icon only extra small button
-$button-has-icon-only-padding-end-xsmall: px-to-rem(6);
-
-/// @prop - Padding end of the icon only small button
-$button-has-icon-only-padding-end-small: px-to-rem(10);
-
-/// @prop - Padding end of the icon only large button
-$button-has-icon-only-padding-end-large: px-to-rem(16);
-
-/// @prop - Padding end of the icon only extra large button
-$button-has-icon-only-padding-end-xlarge: px-to-rem(18);
+$button-ionic-outline-border-style: solid !default;

core/src/components/button/button.ios.scss

@@ -6,7 +6,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};
@@ -23,7 +22,7 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
-// iOS Solid Button
+// Solid Button
 // --------------------------------------------------
 
 :host(.button-solid) {
@@ -35,11 +34,10 @@
   --background-hover-opacity: 1;
 }
 
-// iOS Outline Button
+// Outline Button
 // --------------------------------------------------
 
 :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)};
@@ -49,7 +47,7 @@
   --color-activated: #{ion-color(primary, contrast)};
 }
 
-// iOS Clear Button
+// Clear Button
 // --------------------------------------------------
 
 :host(.button-clear) {
@@ -63,7 +61,7 @@
   font-weight: #{$button-ios-clear-font-weight};
 }
 
-// iOS Toolbar Buttons
+// Toolbar Buttons
 // --------------------------------------------------
 
 /**
@@ -81,11 +79,10 @@
   font-weight: 400;
 }
 
-// iOS Button Sizes
+// Button Sizes
 // --------------------------------------------------
 
 :host(.button-large) {
-  --border-radius: #{$button-ios-large-border-radius};
   --padding-top: #{$button-ios-large-padding-top};
   --padding-start: #{$button-ios-large-padding-start};
   --padding-end: #{$button-ios-large-padding-end};
@@ -97,7 +94,6 @@
 }
 
 :host(.button-small) {
-  --border-radius: #{$button-ios-small-border-radius};
   --padding-top: #{$button-ios-small-padding-top};
   --padding-start: #{$button-ios-small-padding-start};
   --padding-end: #{$button-ios-small-padding-end};
@@ -108,25 +104,42 @@
   font-size: #{$button-ios-small-font-size};
 }
 
-// iOS Round Button
+// Button Shapes
 // --------------------------------------------------
 
+:host(.button-soft) {
+  --border-radius: 6px;
+}
+
+:host(.button-soft.button-large) {
+  --border-radius: 8px;
+}
+
+:host(.button-soft.button-small) {
+  --border-radius: 4px;
+}
+
+// TODO(FW-6202): remove the custom padding styles
 :host(.button-round) {
-  --border-radius: #{$button-ios-round-border-radius};
+  --border-radius: 999px;
   --padding-top: #{$button-ios-round-padding-top};
   --padding-start: #{$button-ios-round-padding-start};
   --padding-end: #{$button-ios-round-padding-end};
   --padding-bottom: #{$button-ios-round-padding-bottom};
 }
 
-// iOS Strong Button
+:host(.button-rectangular) {
+  --border-radius: 0px;
+}
+
+// Strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {
   font-weight: #{$button-ios-strong-font-weight};
 }
 
-// iOS Icon Only Button
+// Icon Only Button
 // --------------------------------------------------
 
 :host(.button-has-icon-only) {
@@ -148,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 16px
@@ -172,7 +185,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
@@ -196,7 +209,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

core/src/components/button/button.ios.vars.scss

@@ -30,9 +30,6 @@ $button-ios-padding-start: $button-ios-padding-end;
 /// @prop - Minimum height of the button
 $button-ios-min-height: 3.1em;
 
-/// @prop - Border radius of the button
-$button-ios-border-radius: 14px;
-
 /// @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
@@ -59,9 +56,6 @@ $button-ios-large-padding-start: $button-ios-large-padding-end;
 /// @prop - Minimum height of the large button
 $button-ios-large-min-height: 3.1em;
 
-/// @prop - Border radius of the large button
-$button-ios-large-border-radius: 16px;
-
 /// @prop - Font size of the large button
 /// 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
@@ -85,9 +79,6 @@ $button-ios-small-padding-start: $button-ios-small-padding-end;
 /// @prop - Minimum height of the small button
 $button-ios-small-min-height: 2.1em;
 
-/// @prop - Border radius of the small button
-$button-ios-small-border-radius: 6px;
-
 /// @prop - Font size of the small button
 /// 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
@@ -102,9 +93,6 @@ $button-ios-outline-border-width: 1px;
 /// @prop - Border style of the outline button
 $button-ios-outline-border-style: solid;
 
-/// @prop - Border radius of the outline button
-$button-ios-outline-border-radius: $button-ios-border-radius;
-
 // iOS Clear Button
 // --------------------------------------------------
 
@@ -140,9 +128,6 @@ $button-ios-round-padding-bottom: $button-round-padding-bottom;
 /// @prop - Padding start of the round button
 $button-ios-round-padding-start: $button-round-padding-start;
 
-/// @prop - Border radius of the round button
-$button-ios-round-border-radius: $button-round-border-radius;
-
 // iOS Decorator Button
 // --------------------------------------------------