A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
feat(chip): set default shape to soft for ios and md theme and round for ionic theme (#29375)
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:  - Updates the `md` theme to use `8px` for `"soft"` as this is taken from the [Material Design 3 guidelines](https://m3.material.io/components/chips/specs#590903f7-2bf5-46ab-9810-d052173f41f1) & 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? - [x] 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. --------- Co-authored-by: ionitron <hi@ionicframework.com>
B
Brandy Carney committed
c78d2e6ec8ff0bc1951a5a3431f82a2346f7d351
Parent: 7bbbd4b
Committed by GitHub <noreply@github.com>
on 5/3/2024, 6:33:55 PM