SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 0 TypeScript

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:

![ios-app-store](https://github.com/ionic-team/ionic-framework/assets/6577830/14008de2-a953-4b27-81da-13dd481c5e39)
- 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