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

**Related Issue:** #6980 ## Summary Add `scale` property to `panel` and `flow-item`.
Esri · Jul 8, 2024 · 1cc65e7 · 1cc65e7
1 parent 977c366
commit 1cc65e7
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 12 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -1932,6 +1932,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
         /**
           * Scrolls the component's content to a specified set of coordinates.
           * @example myCalciteFlowItem.scrollContentTo({   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
@@ -3724,6 +3728,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
         /**
           * Scrolls the component's content to a specified set of coordinates.
           * @example myCalciteFlowItem.scrollContentTo({   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
@@ -9797,6 +9805,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
         /**
           * When `true`, displays a back button in the component's header.
          */
@@ -11686,6 +11698,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
     }
     /**
      * @deprecated Use the `calcite-list` component instead.

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/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,

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/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.
    *
@@ -383,6 +387,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} />

diff --git a/packages/calcite-components/src/components/flow/flow.stories.ts b/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>
+`;
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -59,6 +59,10 @@ describe("calcite-panel", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "scale",
+        defaultValue: "m",
+      },
     ]);
   });
 

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/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;
   }
 }
 

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/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>
+`;
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/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}
         />

diff --git a/packages/calcite-components/src/demos/flow.html b/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"));
               }