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

packages/calcite-components/.stylelintrc.cjs

@@ -6,7 +6,7 @@ const customFunctions = [
   "medium-modular-scale",
   "modular-scale",
   "scale-duration",
-  "small-modular-scale",
+  "small-modular-scale"
 ];
 // ⚠️ END OF AUTO-GENERATED CODE
 

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

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+import { Alignment, Appearance, CollapseDirection, FlipContext, Height, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
 import { IconNameOrString } from "./components/icon/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
@@ -98,7 +98,7 @@ import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces
 import { TipMessages } from "./components/tip/assets/tip/t9n";
 import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
-export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+export { Alignment, Appearance, CollapseDirection, FlipContext, Height, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { IconNameOrString } from "./components/icon/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
@@ -833,9 +833,9 @@ export namespace Components {
          */
         "type": string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteCard {
         /**
@@ -1839,6 +1839,11 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
+        "width": Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale": Scale;
     }
     interface CalciteDropdown {
@@ -1896,6 +1901,11 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
+        "width": Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale": Scale;
     }
     interface CalciteDropdownGroup {
@@ -3689,6 +3699,11 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
+        "width": Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale": Scale;
     }
     interface CalciteNavigation {
@@ -3838,9 +3853,9 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteOption {
         /**
@@ -4362,7 +4377,7 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -4457,9 +4472,9 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteSheet {
         /**
@@ -4483,8 +4498,13 @@ export namespace Components {
           * When `true`, prevents focus trapping.
          */
         "focusTrapDisabled": boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Height;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4515,8 +4535,13 @@ export namespace Components {
           * Updates the element(s) that are used within the focus-trap of the component.
          */
         "updateFocusTrapElements": () => Promise<void>;
+        /**
+          * Specifies the width of the component.
+         */
+        "width": Extract<"s" | "m" | "l", Width>;
         /**
           * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale": Scale;
     }
@@ -4534,8 +4559,13 @@ export namespace Components {
           * When `true`, the content area displays like a floating panel.
          */
         "detached": boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Height;
         /**
           * Specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4555,15 +4585,20 @@ export namespace Components {
         "detached": boolean;
         /**
           * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
-          * @deprecated Use `heightScale` instead.
+          * @deprecated Use the `height` property instead.
          */
         "detachedHeightScale": Scale;
         /**
           * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode": DisplayMode1;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Height;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4586,8 +4621,13 @@ export namespace Components {
           * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.
          */
         "resizable": boolean;
+        /**
+          * Specifies the width of the component.
+         */
+        "width": Extract<"s" | "m" | "l", Width>;
         /**
           * When `layout` is `vertical`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale": Scale;
     }
@@ -4900,9 +4940,9 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteStack {
         /**
@@ -5668,7 +5708,7 @@ export namespace Components {
          */
         "value": any;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -8658,9 +8698,9 @@ declare namespace LocalJSX {
          */
         "type"?: string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteCard {
         /**
@@ -9750,6 +9790,11 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
+        "width"?: Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale"?: Scale;
     }
     interface CalciteDropdown {
@@ -9818,6 +9863,11 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
+        "width"?: Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale"?: Scale;
     }
     interface CalciteDropdownGroup {
@@ -11715,6 +11765,11 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
+        "width"?: Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale"?: Scale;
     }
     interface CalciteNavigation {
@@ -11868,9 +11923,9 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteOption {
         /**
@@ -12396,7 +12451,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
@@ -12495,9 +12550,9 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteSheet {
         /**
@@ -12521,8 +12576,13 @@ declare namespace LocalJSX {
           * When `true`, prevents focus trapping.
          */
         "focusTrapDisabled"?: boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Height;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12561,8 +12621,13 @@ declare namespace LocalJSX {
           * Determines where the component will be positioned.
          */
         "position"?: LogicalFlowPosition;
+        /**
+          * Specifies the width of the component.
+         */
+        "width"?: Extract<"s" | "m" | "l", Width>;
         /**
           * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale"?: Scale;
     }
@@ -12580,8 +12645,13 @@ declare namespace LocalJSX {
           * When `true`, the content area displays like a floating panel.
          */
         "detached"?: boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Height;
         /**
           * Specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12601,15 +12671,20 @@ declare namespace LocalJSX {
         "detached"?: boolean;
         /**
           * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
-          * @deprecated Use `heightScale` instead.
+          * @deprecated Use the `height` property instead.
          */
         "detachedHeightScale"?: Scale;
         /**
           * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode"?: DisplayMode1;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Height;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12634,8 +12709,13 @@ declare namespace LocalJSX {
           * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.
          */
         "resizable"?: boolean;
+        /**
+          * Specifies the width of the component.
+         */
+        "width"?: Extract<"s" | "m" | "l", Width>;
         /**
           * When `layout` is `vertical`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale"?: Scale;
     }
@@ -12980,9 +13060,9 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteStack {
         /**
@@ -13760,7 +13840,7 @@ declare namespace LocalJSX {
          */
         "value"?: any;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }

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

@@ -165,8 +165,8 @@ export class Button
    */
   @Prop({ reflect: true }) type = "button";
 
-  /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Width = "auto";
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+  @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
    * Made into a prop for testing purposes only