-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
1 parent
7bbbd4b
commit c78d2e6
Showing
73 changed files
with
96 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
-218 Bytes
(98%)
...t/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-390 Bytes
(97%)
.../a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-218 Bytes
(98%)
...t/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-202 Bytes
(97%)
...chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-349 Bytes
(94%)
...hip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-196 Bytes
(96%)
...chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-210 Bytes
(97%)
.../chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-484 Bytes
(93%)
...chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-177 Bytes
(97%)
.../chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+17 Bytes
(100%)
...hip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-103 Bytes
(95%)
...ip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-175 Bytes
(92%)
...hip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-1 Byte
(100%)
...hip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-96 Bytes
(95%)
...ip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-191 Bytes
(91%)
...hip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-220 Bytes
(89%)
...test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-127 Bytes
(93%)
...est/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-206 Bytes
(89%)
...test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-152 Bytes
(95%)
.../basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-277 Bytes
(92%)
...basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-150 Bytes
(95%)
.../basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-134 Bytes
(92%)
...p/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-183 Bytes
(88%)
.../test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-248 Bytes
(86%)
...p/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
+497 Bytes
(140%)
...e/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+350 Bytes
(130%)
.../chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+402 Bytes
(130%)
...e/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.29 KB
...p/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.27 KB
.../test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.18 KB
...p/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.25 KB
...ip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.16 KB
...p/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.1 KB
...ip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file modified
BIN
-24 Bytes
(99%)
...ip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file modified
BIN
+12 Bytes
(100%)
...p.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.65 KB
...st/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.66 KB
...t/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.53 KB
...st/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.58 KB
...est/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.53 KB
...st/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.34 KB
...est/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file modified
BIN
+6 Bytes
(100%)
...pe/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.38 KB
...hip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.29 KB
...ip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.29 KB
...hip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.33 KB
...chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.22 KB
...hip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.19 KB
...chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file added
BIN
+1023 Bytes
...hape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+1010 Bytes
...ape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+889 Bytes
...hape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.04 KB
...chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+963 Bytes
...hip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+1012 Bytes
...chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file added
BIN
+1.04 KB
.../chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file added
BIN
+930 Bytes
...chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file added
BIN
+968 Bytes
.../chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
-328 Bytes
(78%)
...p/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file modified
BIN
-229 Bytes
(84%)
.../test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
-282 Bytes
(80%)
...p/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png
Oops, something went wrong.
Binary file modified
BIN
+826 Bytes
(140%)
...s/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
Oops, something went wrong.
Binary file modified
BIN
+689 Bytes
(130%)
.../chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+802 Bytes
(140%)
...s/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
Oops, something went wrong.