refactor(dropdown)!: rename width property to widthScale (#8251)

**Related Issue:** #8250 ## Summary BREAKING CHANGE: For consistency, renames `width` property to `widthScale`.
Esri · Dec 1, 2023 · 0ed9d3f · 0ed9d3f
1 parent f48c24f
commit 0ed9d3f
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 32 deletions.
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -145,7 +145,7 @@ describe("calcite-dropdown", () => {
 
     it("renders requested props when valid props are provided", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-dropdown placement="bottom-end" width="l">
+      await page.setContent(html`<calcite-dropdown placement="bottom-end" width-scale="l">
         <calcite-button slot="trigger">Open dropdown</calcite-button>
         <calcite-dropdown-group id="group-1" selection-mode="multiple">
           <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
@@ -157,7 +157,7 @@ describe("calcite-dropdown", () => {
       const element = await page.find("calcite-dropdown");
       const group1 = await element.find("calcite-dropdown-group[id='group-1']");
 
-      expect(element).toEqualAttribute("width", "l");
+      expect(element).toEqualAttribute("width-scale", "l");
       expect(element).toEqualAttribute("placement", "bottom-end");
       expect(group1).toEqualAttribute("selection-mode", "multiple");
     });

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -44,13 +44,13 @@
 }
 
 // width
-:host([width="s"]) {
+:host([width-scale="s"]) {
   --calcite-dropdown-width: theme("spacing.48");
 }
-:host([width="m"]) {
+:host([width-scale="m"]) {
   --calcite-dropdown-width: theme("spacing.56");
 }
-:host([width="l"]) {
+:host([width-scale="l"]) {
   --calcite-dropdown-width: theme("spacing.64");
 }
 

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -23,7 +23,7 @@ export const simple = (): string => html`
     open
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
@@ -68,7 +68,7 @@ export const simpleFullWidth = (): string => html`
       open
       placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
       scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["s", "m", "l"], "m")}"
+      width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
       type="${select("type", ["click", "hover"], "click")}"
       ${boolean("close-on-select-disabled", false)}
       ${boolean("disabled", false)}
@@ -91,7 +91,7 @@ export const withIcons = (): string => html`
     open
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
@@ -129,7 +129,7 @@ export const groupsAndSelectionModes = (): string => html`
     open
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
@@ -157,7 +157,7 @@ export const itemsAsLinks = (): string => html`
     open
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
@@ -190,7 +190,7 @@ export const darkModeRTL_TestOnly = (): string => html`
     class="calcite-mode-dark"
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
@@ -225,7 +225,7 @@ export const itemsAsLinksDarkMode = (): string => html`
     class="calcite-mode-dark"
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
@@ -259,7 +259,7 @@ export const scrollingAfterCertainItems_TestOnly = (): string => html`
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     max-items="${number("max-items", 7, { min: 0, max: 10, step: 1 })}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "m")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
@@ -343,7 +343,7 @@ export const disabled_TestOnly = (): string => html` <calcite-dropdown disabled>
 
 export const flipPositioning_TestOnly = (): string => html`
   <div style="margin:10px;">
-    <calcite-dropdown width="m" placement="${select("placement", menuPlacements, "top")}" open>
+    <calcite-dropdown width-scale="m" placement="${select("placement", menuPlacements, "top")}" open>
       <calcite-button slot="trigger">Open Dropdown</calcite-button>
       <calcite-dropdown-group>
         <calcite-dropdown-item>1</calcite-dropdown-item>
@@ -365,7 +365,7 @@ export const alignedCenter_TestOnly = (): string => html`
       open
       placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
       scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["s", "m", "l"], "m")}"
+      width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
       type="${select("type", ["click", "hover"], "click")}"
       ${boolean("close-on-select-disabled", false)}
       ${boolean("disabled", false)}
@@ -389,7 +389,7 @@ export const alignedCenterRTL_TestOnly = (): string => html`
       open
       placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
       scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["s", "m", "l"], "m")}"
+      width-scale="${select("width-scale", ["s", "m", "l"], "m")}"
       type="${select("type", ["click", "hover"], "click")}"
       ${boolean("close-on-select-disabled", false)}
       ${boolean("disabled", false)}
@@ -439,7 +439,7 @@ export const flipPlacements_TestOnly = (): string => html`
 `;
 
 export const mediumIconForLargeDropdownItem_TestOnly = (): string => html`
-  <calcite-dropdown scale="l" width="m" open>
+  <calcite-dropdown scale="l" width-scale="m" open>
     <calcite-dropdown-group group-title="View">
       <calcite-dropdown-item scale="l">Table</calcite-dropdown-item>
       <calcite-dropdown-item icon-start="grid" scale="l">Grid</calcite-dropdown-item>

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -170,7 +170,7 @@ export class Dropdown
   /**
    * Specifies the width of the component.
    */
-  @Prop({ reflect: true }) width: Scale;
+  @Prop({ reflect: true }) widthScale: Scale;
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";

diff --git a/packages/calcite-components/src/components/split-button/split-button.e2e.ts b/packages/calcite-components/src/components/split-button/split-button.e2e.ts
@@ -194,7 +194,7 @@ describe("calcite-split-button", () => {
       element.setProperty("scale", elementScale);
       await page.waitForChanges();
       const dropdownScale = elementScaleToDropdownScale[elementScale];
-      expect(dropdown).toEqualAttribute("width", dropdownScale);
+      expect(dropdown).toEqualAttribute("width-scale", dropdownScale);
       expect(dropdown).toEqualAttribute("scale", dropdownScale);
       expect(primaryButton).toEqualAttribute("scale", elementScaleToButtonScale[elementScale]);
     }

diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -210,7 +210,7 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
           overlayPositioning={this.overlayPositioning}
           placement="bottom-end"
           scale={this.scale}
-          width={this.scale}
+          width-scale={this.scale}
         >
           <calcite-button
             appearance={this.appearance}

diff --git a/packages/calcite-components/src/demos/dropdown.html b/packages/calcite-components/src/demos/dropdown.html
@@ -53,10 +53,10 @@
 
       <!-- Width S -->
       <div class="parent">
-        <div class="child right-aligned-text">width S</div>
+        <div class="child right-aligned-text">widthScale S</div>
 
         <div class="child">
-          <calcite-dropdown scale="s" width="s">
+          <calcite-dropdown scale="s" width-scale="s">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale S</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -67,7 +67,7 @@
         </div>
 
         <div class="child">
-          <calcite-dropdown scale="m" width="s">
+          <calcite-dropdown scale="m" width-scale="s">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale M</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -78,7 +78,7 @@
         </div>
 
         <div class="child">
-          <calcite-dropdown scale="l" width="s">
+          <calcite-dropdown scale="l" width-scale="s">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale L</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -91,10 +91,10 @@
 
       <!-- Width M -->
       <div class="parent">
-        <div class="child right-aligned-text">width M</div>
+        <div class="child right-aligned-text">widthScale M</div>
 
         <div class="child">
-          <calcite-dropdown scale="s" width="m">
+          <calcite-dropdown scale="s" width-scale="m">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale S</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -105,7 +105,7 @@
         </div>
 
         <div class="child">
-          <calcite-dropdown scale="m" width="m">
+          <calcite-dropdown scale="m" width-scale="m">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale M</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -116,7 +116,7 @@
         </div>
 
         <div class="child">
-          <calcite-dropdown scale="l" width="m">
+          <calcite-dropdown scale="l" width-scale="m">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale L</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -129,10 +129,10 @@
 
       <!-- Width L -->
       <div class="parent">
-        <div class="child right-aligned-text">width L</div>
+        <div class="child right-aligned-text">widthScale L</div>
 
         <div class="child">
-          <calcite-dropdown scale="s" width="l">
+          <calcite-dropdown scale="s" width-scale="l">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale S</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -143,7 +143,7 @@
         </div>
 
         <div class="child">
-          <calcite-dropdown scale="m" width="l">
+          <calcite-dropdown scale="m" width-scale="l">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale M</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>
@@ -154,7 +154,7 @@
         </div>
 
         <div class="child">
-          <calcite-dropdown scale="l" width="l">
+          <calcite-dropdown scale="l" width-scale="l">
             <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale L</calcite-button>
             <calcite-dropdown-group group-title="View">
               <calcite-dropdown-item icon-end="list-bullet" active>List</calcite-dropdown-item>