feat: deprecate widthScale/heightScale in favor of width/height (#10786)

**Related Issue:** #6172

## Summary
Refactor to consolidate `width/height` and `widthScale/heightScale` into
a single property `width` with `s / m / l / auto / full` as options, and
`height` with `s / m / l`. Deprecate `widthScale` and `heightScale`
properties and the `half` value.

Components addressed:

- `button`
- `dialog`
- `dropdown`
- `notice`
- `segmented-control`
- `select`
- `sheet`
- `shell-panel`
- `split-button`

deprecate: deprecate widthScale/heightScale properties in favor of
width/height.

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

@@ -184,8 +184,8 @@ export class Button
    */
   @property({ reflect: true }) type = "button";
 
-  /** Specifies the width of the component. */
-  @property({ reflect: true }) width: Width = "auto";
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+  @property({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   // #endregion
 

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

@@ -127,6 +127,10 @@ describe("calcite-dialog", () => {
         propertyName: "widthScale",
         value: "s",
       },
+      {
+        propertyName: "width",
+        value: "s",
+      },
     ]);
   });
 

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

@@ -189,32 +189,32 @@ calcite-panel {
  * Sizes
  */
 @mixin dialog-size($size, $width) {
-  :host([width-scale="#{$size}"]) .dialog {
+  .width-#{$size} {
     inline-size: var(--calcite-dialog-size-x, $width);
     block-size: var(--calcite-dialog-size-y, auto);
   }
 
   @media screen and (max-width: $width + 2 * $baseline) {
-    :host([width-scale="#{$size}"]) {
-      .dialog {
-        @apply m-0
+    .width-#{$size} {
+      @apply m-0
           h-full
           max-h-full
           w-full
           max-w-full;
-        inset-inline-start: 0;
-        inset-block-start: var(--calcite-internal-dialog-animation-offset);
-        &--opening {
-          &-active {
-            inset-block-start: 0;
-          }
+      inset-inline-start: 0;
+      inset-block-start: var(--calcite-internal-dialog-animation-offset);
+    }
+    .width-#{$size}.dialog {
+      &--opening {
+        &-active {
+          inset-block-start: 0;
         }
       }
     }
   }
 }
 
-:host([width="small"]) .dialog {
+.width-s {
   @apply w-auto;
 }
 

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

@@ -19,8 +19,9 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { Kind, Scale } from "../interfaces";
+import { Kind, Scale, Width } from "../interfaces";
 import { componentOnReady } from "../../utils/component";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { HeadingLevel } from "../functional/Heading";
@@ -231,9 +232,16 @@ export class Dialog
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
+  /**
+   * Specifies the width of the component.
+   *
+   * @deprecated Use the `width` property instead.
+   */
   @property({ reflect: true }) widthScale: Scale = "m";
 
+  /** Specifies the width of the component. */
+  @property({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
+
   // #endregion
 
   // #region Public Methods
@@ -786,7 +794,12 @@ export class Dialog
           ariaDescription={description}
           ariaLabel={heading}
           ariaModal={this.modal}
-          class={CSS.dialog}
+          class={{
+            [CSS.dialog]: true,
+            [getDimensionClass("width", this.width, this.widthScale)]: !!(
+              this.width || this.widthScale
+            ),
+          }}
           onKeyDown={this.handleKeyDown}
           ref={this.setTransitionEl}
           role="dialog"

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

@@ -53,6 +53,14 @@ describe("calcite-dropdown", () => {
         propertyName: "scale",
         value: "m",
       },
+      {
+        propertyName: "widthScale",
+        value: "m",
+      },
+      {
+        propertyName: "width",
+        value: "m",
+      },
       {
         propertyName: "placement",
         value: "bottom-start",

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

@@ -40,13 +40,13 @@
 }
 
 // width
-:host([width-scale="s"]) {
+.width-s {
   --calcite-dropdown-width: theme("spacing.48");
 }
-:host([width-scale="m"]) {
+.width-m {
   --calcite-dropdown-width: theme("spacing.56");
 }
-:host([width-scale="l"]) {
+.width-l {
   --calcite-dropdown-width: theme("spacing.64");
 }
 

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

@@ -29,8 +29,9 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { RequestedItem } from "../dropdown-group/interfaces";
-import { Scale } from "../interfaces";
+import { Scale, Width } from "../interfaces";
 import type { DropdownItem } from "../dropdown-item/dropdown-item";
 import type { DropdownGroup } from "../dropdown-group/dropdown-group";
 import { ItemKeyboardEvent } from "./interfaces";
@@ -153,9 +154,16 @@ export class Dropdown
   /** Specifies the action to open the component from the container element. */
   @property({ reflect: true }) type: "hover" | "click" = "click";
 
-  /** Specifies the width of the component. */
+  /**
+   * Specifies the width of the component.
+   *
+   * @deprecated Use the `width` property instead.
+   */
   @property({ reflect: true }) widthScale: Scale;
 
+  /** Specifies the width of the component. */
+  @property({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
+
   // #endregion
 
   // #region Public Methods
@@ -646,7 +654,16 @@ export class Dropdown
             onSlotChange={this.updateTriggers}
           />
         </div>
-        <div ariaHidden={!open} class={CSS.wrapper} ref={this.setFloatingEl}>
+        <div
+          ariaHidden={!open}
+          class={{
+            [CSS.wrapper]: true,
+            [getDimensionClass("width", this.width, this.widthScale)]: !!(
+              this.width || this.widthScale
+            ),
+          }}
+          ref={this.setFloatingEl}
+        >
           <div
             aria-labelledby={`${guid}-menubutton`}
             class={{

packages/calcite-components/src/components/interfaces.ts

@@ -2,6 +2,7 @@
 export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
 export type FlipContext = "both" | "start" | "end";
+export type Height = Scale;
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export type Layout =
   | "horizontal"
@@ -28,7 +29,7 @@ export type SelectionMode =
   | "multiple";
 export type Scale = "s" | "m" | "l";
 export type Status = "invalid" | "valid" | "idle";
-export type Width = "auto" | "half" | "full";
+export type Width = Scale | "auto" | "half" | "full";
 export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
 export type CollapseDirection = "down" | "up";
 export type Dir = "ltr" | "rtl";

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

@@ -1,6 +1,6 @@
 import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, vi } from "vitest";
-import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
+import { defaults, focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { GlobalTestProps, isElementFocused, skipAnimations, waitForAnimationFrame } from "../../tests/utils";
 import { CSS, SLOTS } from "./resources";
@@ -28,6 +28,15 @@ describe("calcite-modal", () => {
     t9n("calcite-modal");
   });
 
+  describe("defaults", () => {
+    defaults("calcite-modal", [
+      {
+        propertyName: "widthScale",
+        defaultValue: "m",
+      },
+    ]);
+  });
+
   it("should hide closeButton when disabled", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-modal></calcite-modal>");

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

@@ -104,8 +104,8 @@ export class Notice extends LitElement implements LoadableComponent, OpenCloseCo
   /** Specifies the size of the component. */
   @property({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
-  @property({ reflect: true }) width: Width = "auto";
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+  @property({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   // #endregion
 

packages/calcite-components/src/components/segmented-control/segmented-control.tsx

@@ -143,7 +143,7 @@ export class SegmentedControl
   /** The component's `selectedItem` value. */
   @property() value: string = null;
 
-  /** Specifies the width of the component. */
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
   @property({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   // #endregion

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

@@ -157,8 +157,8 @@ export class Select
   /** The component's `selectedOption` value. */
   @property() value: string = null;
 
-  /** Specifies the width of the component. */
-  @property({ reflect: true }) width: Width = "auto";
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+  @property({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   // #endregion
 

packages/calcite-components/src/components/sheet/resources.ts

@@ -4,4 +4,5 @@ export const CSS = {
   containerOpen: "container--open",
   content: "content",
   containerEmbedded: "container--embedded",
+  height: "height",
 };

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

@@ -1,7 +1,7 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, vi } from "vitest";
 import { html } from "../../../support/formatting";
-import { accessible, defaults, focusable, hidden, openClose, renders } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, openClose, reflects, renders } from "../../tests/commonTests";
 import { GlobalTestProps, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
 import { CSS } from "./resources";
 import type { Sheet } from "./sheet";
@@ -41,7 +41,36 @@ describe("calcite-sheet properties", () => {
         propertyName: "opened",
         defaultValue: false,
       },
+      {
+        propertyName: "widthScale",
+        defaultValue: "m",
+      },
+      {
+        propertyName: "heightScale",
+        defaultValue: "m",
+      },
     ]);
+
+    describe("reflects", () => {
+      reflects("calcite-sheet", [
+        {
+          propertyName: "height",
+          value: "m",
+        },
+        {
+          propertyName: "heightScale",
+          value: "m",
+        },
+        {
+          propertyName: "width",
+          value: "m",
+        },
+        {
+          propertyName: "widthScale",
+          value: "m",
+        },
+      ]);
+    });
   });
 
   describe("renders", () => {

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

@@ -115,37 +115,37 @@
   min-inline-size: calc(100% - 1.5rem);
 }
 
-:host([position^="inline"][width-scale="s"]) {
+:host([position^="inline"]) .width-s {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px);
 }
 
-:host([position^="inline"][width-scale="m"]) {
+:host([position^="inline"]) .width-m {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px);
 }
 
-:host([position^="inline"][width-scale="l"]) {
+:host([position^="inline"]) .width-l {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px);
 }
 
-:host([position^="block"][height-scale="s"]) {
+:host([position^="block"]) .height-s {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh);
 }
 
-:host([position^="block"][height-scale="m"]) {
+:host([position^="block"]) .height-m {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh);
 }
 
-:host([position^="block"][height-scale="l"]) {
+:host([position^="block"]) .height-l {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh);