Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(chip): set default shape to soft for ios and md theme and round for ionic theme #29375

Merged
merged 15 commits into from May 3, 2024

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Apr 22, 2024

Issue number: internal


What is the current behavior?

The shape property defaults to undefined which evaluates to the "Soft" shape for the ionic theme and the "Round" shape for the ios/md themes.

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

What is the new behavior?

Property Value CSS Value (ionic) CSS Value (ios) CSS Value (md)
"soft" 4px 10px 8px
"round" 999px 999px 999px
"rectangular" 0px 0px 0px
  • Sets the default shape property to "soft" for ios and md themes and "round" for the ionic theme.
  • Updates the border-radius to apply to the shape classes instead of :host
  • Updates the ios theme to use 10px for "soft" as this was taken from the App Store:
    ios-app-store
  • Updates the md theme to use 8px for "soft" as this is taken from the Material Design 3 guidelines & the previous value of 16px is the equivalent of the 999px round shape due to the height being 32px
  • Adds support for the "round" and "rectangular" shapes in ios and md themes

Does this introduce a breaking change?

  • Yes
  • No

BREAKING CHANGE:

The border-radius of the ios and md chip now defaults to 10px and 8px, respectively, instead of 16px in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "round", or override the --border-radius CSS variable to specify a different value.

Copy link

vercel bot commented Apr 22, 2024

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 3, 2024 6:10pm

@github-actions github-actions bot added the package: core @ionic/core package label Apr 22, 2024
@brandyscarney brandyscarney changed the title feat(chip): set soft as the default shape for all themes feat(chip): set soft as the default shape for ios and md theme, round for ionic theme Apr 24, 2024
@brandyscarney brandyscarney changed the title feat(chip): set soft as the default shape for ios and md theme, round for ionic theme feat(chip): set default shape to soft for ios and md theme and round for ionic theme Apr 24, 2024
@brandyscarney brandyscarney marked this pull request as ready for review April 24, 2024 18:14
@brandyscarney brandyscarney requested a review from a team as a code owner April 24, 2024 18:14
@brandyscarney brandyscarney requested review from liamdebeasi and removed request for a team April 24, 2024 18:14
BREAKING.md Outdated Show resolved Hide resolved
@brandyscarney brandyscarney merged commit c78d2e6 into FW-6191 May 3, 2024
45 checks passed
@brandyscarney brandyscarney deleted the FW-6194 branch May 3, 2024 18:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants