mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
7bbbd4b6b8
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>