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(card): set round as the default shape for all themes #29387

Merged
merged 11 commits into from May 3, 2024

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Apr 23, 2024

Issue number: internal


What is the current behavior?

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

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

What is the new behavior?

Property Value CSS Value (ionic) CSS Value (ios) CSS Value (md)
"soft" 4px 8px 4px
"round" 16px 14px 12px
"rectangular" 0px 0px 0px
  • Adds support for the "soft" shape using the existing values for undefined
  • Sets the default shape property to "round" for all themes and updates the border-radius to apply to the shape classes instead of :host
  • Adds support for the "round" and "rectangular" shapes in ios and md
  • Updates the ios theme to use 14px for "round" as this is taken from the card in the iOS App Store
  • Updates the md theme to use 12px for "round" as this is taken from the Material Design 3 guidelines

Does this introduce a breaking change?

  • Yes
  • No

BREAKING CHANGE:

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.

Copy link

vercel bot commented Apr 23, 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 3:59pm

@github-actions github-actions bot added the package: core @ionic/core package label Apr 23, 2024
@brandyscarney brandyscarney changed the title Fw 6193 feat(card): set round as the default shape for all themes Apr 23, 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 thetaPC and removed request for a team April 24, 2024 18:14
BREAKING.md Outdated Show resolved Hide resolved
@brandyscarney brandyscarney merged commit 7bbbd4b into FW-6191 May 3, 2024
45 checks passed
@brandyscarney brandyscarney deleted the FW-6193 branch May 3, 2024 18:04
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

3 participants