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

[brandyscarney]

Issue number: internal

---

What is the current behavior?

The shape property defaults to "soft" for ios and "round" for the md and ionic themes.

Default button size:

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
undefined	8px	14px	4px
"round"	999px	unsupported	unsupported
"rectangular"	0px	unsupported	unsupported

Large button size:

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
undefined	8px	16px	4px

Small button size:

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
undefined	4px	6px	4px

What is the new behavior?

The shape property defaults to undefined which evaluates to the "Soft" shape for all themes.

Default button size:

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
"soft"	8px	6px	4px
"round"	999px	999px	999px
"rectangular"	0px	0px	0px

Large button size:

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
soft	8px	8px	4px

Small button size:

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
soft	4px	4px	4px

• Adds support for the "soft" shape in the ionic theme using the existing values for undefined
• Adds support for the "rectangular" and "round" shapes in ios and md using 0px and 999px border radius
• Sets the default shape property to "round" for the ionic and md themes and "soft" for ios and updates the border-radius to apply to the shape classes instead of :host
• Updates the "soft" shape border radius for ios in the various sizes to match the buttons created in SwiftUI (their "rounded" is our "soft"):
• Fixed the icon only buttons in the "ionic" theme so that they are not styled based on the size while always following the proper aspect ratio. This was broken for the default size due to an incorrect padding value & I made it so we don't have to specify the padding for each size:

Before	After

Does this introduce a breaking change?

• [x] Yes
• [ ] No

BREAKING CHANGE:

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.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2024 7:17pm