fix(dropdown-group): Remove undocumented properties from the Host ele…

…ment. #2059 (#2100)
Esri · May 10, 2021 · 93d394f · 93d394f
1 parent 3632ede
commit 93d394f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/components/calcite-dropdown-group/calcite-dropdown-group.scss b/src/components/calcite-dropdown-group/calcite-dropdown-group.scss
@@ -1,18 +1,18 @@
-:host([scale="s"]) {
+.container--s {
   @apply text--2h;
   .dropdown-title {
     @apply p-2;
   }
 }
 
-:host([scale="m"]) {
+.container--m {
   @apply text--1h;
   .dropdown-title {
     @apply p-3;
   }
 }
 
-:host([scale="l"]) {
+.container--l {
   @apply text-1h;
   .dropdown-title {
     @apply p-4;

diff --git a/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx b/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx
@@ -12,6 +12,8 @@ import {
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { GroupRegistration, ItemRegistration } from "../calcite-dropdown/interfaces";
 import { SelectionMode } from "./interfaces";
+import { Scale } from "../interfaces";
+import { CSS } from "./resources";
 
 @Component({
   tag: "calcite-dropdown-group",
@@ -39,6 +41,11 @@ export class CalciteDropdownGroup {
    none (no active items), defaults to single */
   @Prop({ reflect: true }) selectionMode: SelectionMode = "single";
 
+  /**
+   * Specifies the size of the action.
+   */
+  @Prop({ reflect: true }) scale: Scale;
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -91,7 +98,7 @@ export class CalciteDropdownGroup {
 
   render(): VNode {
     const dir = getElementDir(this.el);
-    const scale = getElementProp(this.el, "scale", "m");
+    const scale: Scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (
       <span aria-hidden="true" class="dropdown-title" ref={this.setDropdownTitleRef}>
         {this.groupTitle}
@@ -104,8 +111,17 @@ export class CalciteDropdownGroup {
       ) : null;
 
     return (
-      <Host role="menu" scale={scale} title={this.groupTitle}>
-        <div dir={dir}>
+      <Host role="menu">
+        <div
+          class={{
+            container: true,
+            [CSS.containerSmall]: scale === "s",
+            [CSS.containerMedium]: scale === "m",
+            [CSS.containerLarge]: scale === "l"
+          }}
+          dir={dir}
+          title={this.groupTitle}
+        >
           {dropdownSeparator}
           {groupTitle}
           <slot />

diff --git a/src/components/calcite-dropdown-group/resources.ts b/src/components/calcite-dropdown-group/resources.ts
@@ -0,0 +1,5 @@
+export const CSS = {
+  containerSmall: "container--s",
+  containerMedium: "container--m",
+  containerLarge: "container--l"
+};