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(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