feat(card): set round as the default shape for all themes

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-8x-card)
+
+<h2 id="version-9x-components">Components</h2>
+
+<h4 id="version-9x-card">Card</h4>
+
+- 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.

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
 

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"`.
          */
@@ -5859,9 +5859,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"`.
          */

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};
 }

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;
+}

core/src/components/card/card.ios.vars.scss

@@ -21,9 +21,6 @@ $card-ios-box-shadow-color: rgba(0, 0, 0, 0.12) !default;
 /// @prop - Box shadow of the card
 $card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !default;
 
-/// @prop - Border radius of the card
-$card-ios-border-radius: 8px !default;
-
 /// @prop - Font size of the card
 $card-ios-font-size: dynamic-font(14px) !default;
 

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;
+}

core/src/components/card/card.md.vars.scss

@@ -18,9 +18,6 @@ $card-md-margin-start: 10px !default;
 /// @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) !default;
 
-/// @prop - Border radius of the card
-$card-md-border-radius: 4px !default;
-
 /// @prop - Font size of the card
 $card-md-font-size: dynamic-font(14px) !default;
 

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;

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
       <Host
         class={createColorClasses(this.color, {
           [theme]: true,
-          // TODO(FW-6119): remove theme === 'ionic' when support for other themes is added
-          [`card-${shape}`]: theme === 'ionic' && shape !== undefined,
+          [`card-${shape}`]: shape !== undefined,
           'card-disabled': this.disabled,
           'ion-activatable': this.isClickable(),
         })}

core/src/components/card/test/shape/card.e2e.ts

@@ -2,10 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * Shape is only available in the Ionic theme.
- * TODO(FW-6119): add the `ios` and `md` modes when shape support is added.
+ * This behavior does not vary across directions
  */
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+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);

core/src/components/card/test/shape/index.html

@@ -15,13 +15,11 @@
 
     <!-- Styles only for testing purposes to identify the card shape -->
     <style>
-      :root {
-        --ion-background-color: #dde2ef;
+      ion-content {
+        --background: #dde2ef;
       }
 
-      #default,
-      #round,
-      #rectangular {
+      .container {
         padding: 8px;
       }
     </style>
@@ -37,7 +35,7 @@
 
       <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
         <h1>Default</h1>
-        <div id="default" class="ion-margin-top">
+        <div id="default" class="container">
           <ion-card>
             <ion-card-header>
               <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
@@ -50,8 +48,24 @@ <h1>Default</h1>
             </ion-card-content>
           </ion-card>
         </div>
+
+        <h1>Soft</h1>
+        <div id="soft" class="container">
+          <ion-card shape="soft">
+            <ion-card-header>
+              <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+              <ion-card-title>Card Title</ion-card-title>
+            </ion-card-header>
+
+            <ion-card-content>
+              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.
+            </ion-card-content>
+          </ion-card>
+        </div>
+
         <h1>Round</h1>
-        <div id="round" class="ion-margin-top">
+        <div id="round" class="container">
           <ion-card shape="round">
             <ion-card-header>
               <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
@@ -66,7 +80,7 @@ <h1>Round</h1>
         </div>
 
         <h1>Rectangular</h1>
-        <div id="rectangular" class="ion-margin-top">
+        <div id="rectangular" class="container">
           <ion-card shape="rectangular">
             <ion-card-header>
               <ion-card-subtitle>Card Subtitle</ion-card-subtitle>