From 93d394fad38e3159828883cdd40e41d448bdd76d Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 10 May 2021 11:38:44 -0700
Subject: [PATCH] fix(dropdown-group): Remove undocumented properties from the
 Host element. #2059 (#2100)

---
 .../calcite-dropdown-group.scss               |  6 ++---
 .../calcite-dropdown-group.tsx                | 22 ++++++++++++++++---
 .../calcite-dropdown-group/resources.ts       |  5 +++++
 3 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 src/components/calcite-dropdown-group/resources.ts

diff --git a/src/components/calcite-dropdown-group/calcite-dropdown-group.scss b/src/components/calcite-dropdown-group/calcite-dropdown-group.scss
index 770d55db1e3..eceaa738791 100644
--- 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
index cff7e8c4114..740251ba5a3 100644
--- 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
new file mode 100644
index 00000000000..6b8261b0769
--- /dev/null
+++ b/src/components/calcite-dropdown-group/resources.ts
@@ -0,0 +1,5 @@
+export const CSS = {
+  containerSmall: "container--s",
+  containerMedium: "container--m",
+  containerLarge: "container--l"
+};