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

BREAKING.md

@@ -15,11 +15,16 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ## Version 9.x
 
 - [Components](#version-9x-components)
+ - [Button](#version-9x-button)
  - [Card](#version-9x-card)
  - [Chip](#version-9x-chip)
 
 <h2 id="version-9x-components">Components</h2>
 
+<h4 id="version-9x-button">Button</h4>
+
+- The `border-radius` of the `ios` and `md` button now defaults to `6px` and `999px` instead of `14px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"` for `md` and override the `--border-radius` CSS variable for `ios` to `14px`, or set it to a different value entirely.
+
 <h4 id="version-9x-card">Card</h4>
 
 - The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.

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,30 @@
  }
 }
 
-/* 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-end: var(--padding-top);
 
-/* 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,18 +115,6 @@ $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
 // -------------------------------------------------------------------------------
 
@@ -144,21 +123,3 @@ $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);

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,37 @@
  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;
+}
+
 :host(.button-round) {
- --border-radius: #{$button-ios-round-border-radius};
- --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};
+ --border-radius: 999px;
+}
+
+:host(.button-rectangular) {
+ --border-radius: 0px;
 }
 
-// iOS Strong Button
+// 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 +156,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 +180,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 +204,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