feat(panel, flow-item): add scale property

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts

@@ -61,6 +61,10 @@ describe("calcite-flow-item", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "scale",
+        defaultValue: "m",
+      },
       {
         propertyName: "showBackButton",
         defaultValue: false,

packages/calcite-components/src/components/flow-item/flow-item.tsx

@@ -37,6 +37,7 @@ import { HeadingLevel } from "../functional/Heading";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { CollapseDirection } from "../interfaces";
+import { Scale } from "../interfaces";
 import { FlowItemMessages } from "./assets/flow-item/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -155,6 +156,9 @@ export class FlowItem
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
+  /** Specifies the size of the component. */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
   /**
    * When `true`, displays a back button in the component's header.
    *
@@ -382,6 +386,7 @@ export class FlowItem
             onCalcitePanelToggle={this.handlePanelToggle}
             overlayPositioning={overlayPositioning}
             ref={this.setContainerRef}
+            scale={this.scale}
           >
             {this.renderBackButton()}
             <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />

packages/calcite-components/src/components/flow/flow.stories.ts

@@ -189,3 +189,17 @@ export const noDoubleScrollbars_TestOnly = (): string => html`
     </calcite-flow>
   </div>
 `;
+
+export const scales = (): string => html`
+  <calcite-flow style="height: 100px; width: 300px;">
+    <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="s" />
+  </calcite-flow>
+
+  <calcite-flow style="height: 100px">
+    <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="m" />
+  </calcite-flow>
+
+  <calcite-flow style="height: 100px">
+    <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="l" />
+  </calcite-flow>
+`;

packages/calcite-components/src/components/panel/panel.e2e.ts

@@ -59,6 +59,10 @@ describe("calcite-panel", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "scale",
+        defaultValue: "m",
+      },
     ]);
   });
 

packages/calcite-components/src/components/panel/panel.scss

@@ -20,23 +20,59 @@
 
 :host([scale="s"]) {
   .content-top,
-  .content-bottom {
+  .content-bottom,
+  .footer,
+  .header-content {
     padding: var(--calcite-spacing-sm);
   }
+
+  .header-content {
+    .heading {
+      font-size: theme("fontSize.n1h");
+    }
+
+    .description {
+      font-size: theme("fontSize.n2h");
+    }
+  }
 }
 
 :host([scale="m"]) {
   .content-top,
-  .content-bottom {
+  .content-bottom,
+  .footer,
+  .header-content {
     padding: var(--calcite-spacing-md);
   }
+
+  .header-content {
+    .heading {
+      font-size: theme("fontSize.0h");
+    }
+
+    .description {
+      font-size: theme("fontSize.n1h");
+    }
+  }
 }
 
 :host([scale="l"]) {
   .content-top,
-  .content-bottom {
+  .content-bottom,
+  .footer,
+  .header-content {
     padding: var(--calcite-spacing-xl);
   }
+
+  .header-content {
+    .heading {
+      font-size: theme("fontSize.1h");
+    }
+
+    .description {
+      font-size: theme("fontSize.0h");
+    }
+  }
 }
 
 .content-top,
@@ -90,21 +126,26 @@
     overflow-hidden
     px-3
     py-3.5;
+
   margin-inline-end: auto;
+
   .heading,
   .description {
     @apply block
       break-words
       p-0;
   }
+
   .heading {
-    @apply text-0h mx-0 mt-0 mb-1 font-medium;
+    @apply mx-0 mt-0 mb-1 font-medium text-color-1;
+
     &:only-child {
       @apply mb-0;
     }
   }
+
   .description {
-    @apply text-color-2 text-n1h;
+    @apply text-color-2;
   }
 }
 

packages/calcite-components/src/components/panel/panel.stories.ts

@@ -431,3 +431,39 @@ export const footerSlotPrecedence = (): string => html`
     ${footerHTML}
   </calcite-panel>
 `;
+
+export const scalesFontAndPadding = (): string => html`
+  <calcite-panel
+    heading="This is a heading"
+    description="And that's a description"
+    scale="s"
+    style="height: 220px; margin: 50px;"
+  >
+    <div slot="content-top">Content Top</div>
+    <div>Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</div>
+    <div slot="content-bottom">Content Bottom</div>
+    ${footerHTML}
+  </calcite-panel>
+  <calcite-panel
+    heading="This is a heading"
+    description="And that's a description"
+    scale="m"
+    style="height: 250px; margin: 50px;"
+  >
+    <div slot="content-top">Content Top</div>
+    <div>Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</div>
+    <div slot="content-bottom">Content Bottom</div>
+    ${footerHTML}
+  </calcite-panel>
+  <calcite-panel
+    heading="This is a heading"
+    description="And that's a description"
+    scale="l"
+    style="height: 260px; margin: 50px;"
+  >
+    <div slot="content-top">Content Top</div>
+    <div>Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</div>
+    <div slot="content-bottom">Content Bottom</div>
+    ${footerHTML}
+  </calcite-panel>
+`;

packages/calcite-components/src/components/panel/panel.tsx

@@ -43,6 +43,7 @@ import {
 } from "../../utils/t9n";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { CollapseDirection } from "../interfaces";
+import { Scale } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -156,6 +157,9 @@ export class Panel
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
+  /** Specifies the size of the component. */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -471,6 +475,7 @@ export class Panel
         data-test="collapse"
         icon={collapsed ? icons[0] : icons[1]}
         onClick={this.collapse}
+        scale={this.scale}
         text={collapse}
         title={collapsed ? expand : collapse}
       />
@@ -482,6 +487,7 @@ export class Panel
         data-test="close"
         icon={ICONS.close}
         onClick={this.close}
+        scale={this.scale}
         text={close}
         title={close}
       />
@@ -522,6 +528,7 @@ export class Panel
       >
         <calcite-action
           icon={ICONS.menu}
+          scale={this.scale}
           slot={ACTION_MENU_SLOTS.trigger}
           text={messages.options}
         />

packages/calcite-components/src/demos/flow.html

@@ -39,19 +39,19 @@
 
         <div class="child">
           <calcite-flow custom-item-selectors="custom-flow-item">
-            <calcite-flow-item heading="flow-item-1">
+            <calcite-flow-item heading="flow-item-1" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
-            <custom-flow-item heading="custom-flow-item">
+            <custom-flow-item heading="custom-flow-item" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </custom-flow-item>
-            <calcite-flow-item heading="flow-item-2">
+            <calcite-flow-item heading="flow-item-2" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
@@ -64,10 +64,6 @@
                 icon-start="check"
               ></calcite-button>
               <div slot="footer-end">
-                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-2" icon-start="stairs">
-                </calcite-button>
-                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-3" icon-start="ellipsis">
-                </calcite-button>
                 <calcite-dropdown type="hover">
                   <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="neutral" icon-start="caret-down">
                   </calcite-button>
@@ -103,6 +99,8 @@
 
               connectedCallback() {
                 this.flowItemEl.setAttribute("heading", this.getAttribute("heading"));
+                this.flowItemEl.setAttribute("description", this.getAttribute("description"));
+                this.flowItemEl.setAttribute("scale", this.getAttribute("scale"));
                 this.flowItemEl.setAttribute("show-back-button", this.getAttribute("show-back-button"));
                 this.flowItemEl.setAttribute("menu-open", this.getAttribute("menu-open"));
               }