fix(dropdown-group): title scale with dropdown scale (#9360)

**Related Issue:** #9350 ## Summary `calcite-dropdown-group` title font-size scales with dropdown scale.
Esri · May 23, 2024 · 3529cdd · 3529cdd
1 parent e95f40f
commit 3529cdd
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 24 deletions.
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
@@ -4,28 +4,7 @@
 }
 
 .container {
-  text-align: start;
-}
-
-.container--s {
-  @apply text-n2h;
-  .dropdown-title {
-    @apply p-2;
-  }
-}
-
-.container--m {
-  @apply text-n1h;
-  .dropdown-title {
-    @apply p-3;
-  }
-}
-
-.container--l {
-  @apply text-0h;
-  .dropdown-title {
-    @apply p-4;
-  }
+  @apply text-start;
 }
 
 .dropdown-title {
@@ -46,4 +25,25 @@
   background-color: theme("borderColor.color.3");
 }
 
+:host([scale="s"]) {
+  @apply text-n2h;
+  .dropdown-title {
+    @apply p-2;
+  }
+}
+
+:host([scale="m"]) {
+  @apply text-n1h;
+  .dropdown-title {
+    @apply p-3;
+  }
+}
+
+:host([scale="l"]) {
+  @apply text-0h;
+  .dropdown-title {
+    @apply p-4;
+  }
+}
+
 @include base-component();
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
@@ -40,7 +40,7 @@ export class DropdownGroup {
    *
    * @internal
    */
-  @Prop() scale: Scale = "m";
+  @Prop({ reflect: true }) scale: Scale = "m";
 
   /**
    * Specifies the selection mode of the component, where:
@@ -104,7 +104,6 @@ export class DropdownGroup {
         <div
           class={{
             [CSS.container]: true,
-            [`${CSS.container}--${this.scale}`]: true,
           }}
         >
           {dropdownSeparator}

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -501,3 +501,44 @@ export const settingFullWidthEnablesTriggerTruncation_TestOnly = (): string =>
       </calcite-dropdown-group>
     </calcite-dropdown>
   </div>`;
+
+export const openInAllScales = (): string => html`
+  <style>
+    .container {
+      display: inline-flex;
+      flex-direction: column;
+      width: 10rem;
+      padding: 25px;
+      flex-basis: 200px;
+    }
+  </style>
+  <div class="container">
+    <calcite-dropdown scale="s" width-scale="s" open>
+      <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" selected>List</calcite-dropdown-item>
+        <calcite-dropdown-item icon-end="grid">Grid</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  </div>
+
+  <div class="container">
+    <calcite-dropdown scale="m" width-scale="s" open>
+      <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" selected>List</calcite-dropdown-item>
+        <calcite-dropdown-item icon-end="grid">Grid</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  </div>
+
+  <div class="container">
+    <calcite-dropdown scale="l" width-scale="s" open>
+      <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" selected>List</calcite-dropdown-item>
+        <calcite-dropdown-item icon-end="grid">Grid</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -175,6 +175,7 @@ export class Dropdown
   @Watch("scale")
   handlePropsChange(): void {
     this.updateItems();
+    this.updateGroupScale();
   }
 
   //--------------------------------------------------------------------------
@@ -495,8 +496,13 @@ export class Dropdown
     this.groups = groups;
 
     this.updateItems();
+    this.updateGroupScale();
   };
 
+  private updateGroupScale(): void {
+    this.groups?.forEach((group) => (group.scale = this.scale));
+  }
+
   resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
     entries.forEach((entry) => {
       const { target } = entry;