A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
feat(card): set round as the default shape for all themes (#29387)
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 <img width="400px" src="https://github.com/ionic-team/ionic-framework/assets/6577830/51f7028c-990d-48b5-b3e0-9909dae7e31c"> - Updates the `md` theme to use `12px` for `"round"` as this is taken from the [Material Design 3 guidelines](https://m3.material.io/components/cards/specs#daab7734-3b3e-464c-a967-7c7fa14e6478) ## Does this introduce a breaking change? - [x] 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. --------- Co-authored-by: ionitron <hi@ionicframework.com>
B
Brandy Carney committed
7bbbd4b6b8cd10af58613c193e1b65e2d0620213
Parent: 7c7c483
Committed by GitHub <noreply@github.com>
on 5/3/2024, 6:04:30 PM