diff --git a/BREAKING.md b/BREAKING.md index 6430a35ff8..5c8e0c3e4c 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -13,3 +13,12 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md) ## Version 9.x + +- [Components](#version-9x-components) + - [Card](#version-9x-card) + +

Components

+ +

Card

+ +- 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. diff --git a/core/api.txt b/core/api.txt index a22af182dc..cbe5a06288 100644 --- a/core/api.txt +++ b/core/api.txt @@ -282,11 +282,12 @@ ion-card,prop,mode,"ios" | "md",undefined,false,false ion-card,prop,rel,string | undefined,undefined,false,false ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false -ion-card,prop,shape,"rectangular" | "round" | undefined,undefined,false,true +ion-card,prop,shape,"rectangular" | "round" | "soft" | undefined,'round',false,true ion-card,prop,target,string | undefined,undefined,false,false ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-card,prop,type,"button" | "reset" | "submit",'button',false,false ion-card,css-prop,--background +ion-card,css-prop,--border-radius ion-card,css-prop,--color ion-card,part,native diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a329698bd6..a0437f2e43 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -619,9 +619,9 @@ export namespace Components { */ "routerDirection": RouterDirection; /** - * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. + * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. Defaults to `"round"`. */ - "shape"?: 'round' | 'rectangular'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ @@ -5867,9 +5867,9 @@ declare namespace LocalJSX { */ "routerDirection"?: RouterDirection; /** - * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. + * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. Defaults to `"round"`. */ - "shape"?: 'round' | 'rectangular'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png index 462800821f..0ad39653e5 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png index 5c1d450556..14bef91b76 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png index b0a3c8a2fe..58e42f0662 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png index 028a083454..0721910d88 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png index 11423ab6bc..2a6e23ebfd 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png index d4d9922e0a..e92fefb3a0 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png index afe9906d0d..6471687d87 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png index 92ef8ad149..874b0e153f 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png index 3ff447b796..355994f20c 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png index da24098828..481bc6ea89 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png index 4ed9f1545c..e45c36c5c2 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png index d12d6ddb67..56d00617f5 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss index 944d3de75e..78d04ca9e7 100755 --- a/core/src/components/card/card.ionic.scss +++ b/core/src/components/card/card.ionic.scss @@ -18,6 +18,9 @@ color: var(--color); } +// Card Shapes +// --------------------------------------------- + :host(.card-round) { --border-radius: #{globals.$ionic-border-radius-rounded-large}; } diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss index 2ebbc403ff..666a0c32be 100755 --- a/core/src/components/card/card.ios.scss +++ b/core/src/components/card/card.ios.scss @@ -9,7 +9,6 @@ --color: #{$card-ios-color}; @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); - @include border-radius($card-ios-border-radius); transition: transform 500ms $card-ios-transition-timing-function; @@ -21,3 +20,18 @@ :host(.ion-activated) { transform: #{$card-ios-transform-activated}; } + +// Card Shapes +// --------------------------------------------- + +:host(.card-soft) { + --border-radius: 8px; +} + +:host(.card-round) { + --border-radius: 14px; +} + +:host(.card-rectangular) { + --border-radius: 0px; +} diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index d8cf963a68..b6e275288c 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -21,9 +21,6 @@ $card-ios-box-shadow-color: rgba(0, 0, 0, 0.12); /// @prop - Box shadow of the card $card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color; -/// @prop - Border radius of the card -$card-ios-border-radius: 8px; - /// @prop - Font size of the card $card-ios-font-size: dynamic-font(14px); diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss index 1c74a42acd..6fb8847128 100755 --- a/core/src/components/card/card.md.scss +++ b/core/src/components/card/card.md.scss @@ -9,9 +9,23 @@ --color: #{$card-md-color}; @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); - @include border-radius($card-md-border-radius); font-size: $card-md-font-size; box-shadow: $card-md-box-shadow; } + +// Card Shapes +// --------------------------------------------- + +:host(.card-soft) { + --border-radius: 4px; +} + +:host(.card-round) { + --border-radius: 12px; +} + +:host(.card-rectangular) { + --border-radius: 0px; +} diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss index f40132d329..69b8507245 100755 --- a/core/src/components/card/card.md.vars.scss +++ b/core/src/components/card/card.md.vars.scss @@ -18,9 +18,6 @@ $card-md-margin-start: 10px; /// @prop - Box shadow of the card $card-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -/// @prop - Border radius of the card -$card-md-border-radius: 4px; - /// @prop - Font size of the card $card-md-font-size: dynamic-font(14px); diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss index e81166ea4d..04b7fdc825 100755 --- a/core/src/components/card/card.scss +++ b/core/src/components/card/card.scss @@ -7,10 +7,12 @@ /** * @prop --background: Background of the card * @prop --color: Color of the card + * @prop --border-radius: Border radius of the card */ --ion-safe-area-left: 0px; --ion-safe-area-right: 0px; + @include border-radius(var(--border-radius)); @include font-smoothing(); display: block; diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index d408ebe4cb..f52b3fad8d 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -83,9 +83,11 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac @Prop() routerAnimation: AnimationBuilder | undefined; /** - * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. + * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more + * rounded corners, or `"rectangular"` for a card without rounded corners. + * Defaults to `"round"`. */ - @Prop({ reflect: true }) shape?: 'round' | 'rectangular'; + @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular' = 'round'; /** * Specifies where to display the linked URL. @@ -144,8 +146,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac { +configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('card: shape'), () => { test.describe('default', () => { test('should not have visual regressions', async ({ page }) => { @@ -17,6 +16,16 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh }); }); + test.describe('soft', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/card/test/shape`, config); + + const container = page.locator('#soft'); + + await expect(container).toHaveScreenshot(screenshot(`card-soft`)); + }); + }); + test.describe('round', () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/card/test/shape`, config); diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 48fc3a8a76..b951addb84 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 49f04ac1d2..5a30fe5d1f 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png index b517e82218..c82f6975b5 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9617ded9f7 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..56ac47e7ad Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0cdd6e80b4 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e7408b7764 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..85ad43855a Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b6919614cd Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9db10b40a3 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0aed172351 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..013bfe1535 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..db9ed7efe0 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d45fe5aeb8 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cd9534e505 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6e775bcbde..8e0fcb7d4e 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5a30fe5d1f..177cdae979 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..86b633618c Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..adcfc06a55 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0cdd6e80b4 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d379f4d627 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..353c0e62ac Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b6919614cd Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..161af2b59b Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..49f04ac1d2 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b517e82218 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fd3389c7dd Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7fa6b6d18f Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..31f7a64094 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3d7d72609b Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2417bd2a1c Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..31b1a3b4b6 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/index.html b/core/src/components/card/test/shape/index.html index 03f7662693..77eaf9301a 100644 --- a/core/src/components/card/test/shape/index.html +++ b/core/src/components/card/test/shape/index.html @@ -15,13 +15,11 @@ @@ -37,7 +35,7 @@

Default

-
+
Card Subtitle @@ -50,8 +48,24 @@
+ +

Soft

+
+ + + Card Subtitle + Card Title + + + + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week + in the woods. Wash your spirit clean. + + +
+

Round

-
+
Card Subtitle @@ -66,7 +80,7 @@

Rectangular

-
+
Card Subtitle diff --git a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png index 934e65989a..1434be8485 100644 Binary files a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png index 4c6b144823..701a4c75b8 100644 Binary files a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png index 6f99c8dfc8..1de0ff9728 100644 Binary files a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png index 7f5bd5a6a3..161ef11016 100644 Binary files a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png index 2902c904e7..e8dae7b084 100644 Binary files a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png index 02c90c50a6..cde596cf3f 100644 Binary files a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png index dee305bbc1..fde376559e 100644 Binary files a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png index eeb56d5225..bcd3b409c9 100644 Binary files a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png index 4c55ff0926..f5fb577d9c 100644 Binary files a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png differ