fix(dropdown): styles for slotted menu (#2713)

Author: bennypowers

elements/pf-dropdown/pf-dropdown.css

@@ -36,44 +36,50 @@ slot[name="trigger"] {
   cursor: pointer;
 }
 
-pf-dropdown-menu {
-  position: absolute;
+pf-dropdown-menu,
+::slotted(pf-dropdown-menu) {
+  position: absolute !important;
   top: var(
     --pf-c-dropdown__menu--Top,
     calc(100% + var(--pf-global--spacer--xs, 0.25rem))
-  );
-  left: 0;
+  ) !important;
+  left: 0 !important;
   z-index: var(
     --pf-c-dropdown__menu--ZIndex,
     var(--pf-global--ZIndex--sm, 200)
-  );
+  ) !important;
   padding-top: var(
     --pf-c-dropdown__menu--PaddingTop,
     var(--pf-global--spacer--sm, 0.5rem)
-  );
+  ) !important;
   padding-bottom: var(
     --pf-c-dropdown__menu--PaddingBottom,
     var(--pf-global--spacer--sm, 0.5rem)
-  );
-  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff);
-  background-clip: padding-box;
+  ) !important;
+  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff) !important;
+  background-clip: padding-box !important;
   box-shadow: var(
     --pf-c-dropdown__menu--BoxShadow,
     var(
       --pf-global--BoxShadow--md,
       0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),
       0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
     )
-  );
-  min-width: 100%;
-  margin: 0;
+  ) !important;
+  min-width: 100% !important;
+  margin: 0 !important;
 }
 
 :host([disabled]) :is(pf-dropdown-menu, ::slotted(pf-dropdown-menu)) {
   pointer-events: none;
   cursor: not-allowed;
 }
 
+.expanded pf-dropdown-menu,
+.expanded ::slotted(pf-dropdown-menu) {
+  display: block !important;
+}
+
 pf-button.disabled::part(button),
 :host([disabled]) ::slotted([slot="trigger"]) {
   color: var(---pf-c-dropdown__menu-item--disabled--Color, #6a6e73) !important;

elements/pf-dropdown/pf-dropdown.ts

@@ -99,29 +99,29 @@ export class PfDropdown extends LitElement {
     const { anchor, alignment, styles = {} } = this.#float;
     const { disabled } = this;
     return html`
-    <div class="${classMap({ expanded, [anchor ?? '']: !!anchor, [alignment ?? '']: !!alignment })}"
-         style="${styleMap(styles)}"
-         @slotchange="${this.#onSlotchange}">
-      <slot name="trigger"
-            @keydown="${this.#onButtonKeydown}"
-            @click="${() => this.toggle()}">
-        <pf-button variant="control"
-                   icon="caret-down"
-                   icon-set="fas">Dropdown</pf-button>
-      </slot>
-      <slot name="menu"
-            class="${classMap({ show: expanded })}"
-            ?hidden="${!this.expanded}"
-            @focusout="${this.#onMenuFocusout}"
-            @keydown="${this.#onMenuKeydown}"
-            @click="${this.#onSelect}">
-        <pf-dropdown-menu id="menu"
-                          part="menu"
-                          ?disabled="${disabled}">
-          <slot></slot>
-        </pf-dropdown-menu>
-      </slot>
-    </div>`;
+      <div class="${classMap({ expanded, [anchor ?? '']: !!anchor, [alignment ?? '']: !!alignment })}"
+           style="${styleMap(styles)}"
+           @slotchange="${this.#onSlotchange}">
+        <slot name="trigger"
+              @keydown="${this.#onButtonKeydown}"
+              @click="${() => this.toggle()}">
+          <pf-button variant="control"
+                     icon="caret-down"
+                     icon-set="fas">Dropdown</pf-button>
+        </slot>
+        <slot name="menu"
+              ?hidden="${!this.expanded}"
+              @focusout="${this.#onMenuFocusout}"
+              @keydown="${this.#onMenuKeydown}"
+              @click="${this.#onSelect}">
+          <pf-dropdown-menu id="menu"
+                            part="menu"
+                            ?disabled="${disabled}">
+            <slot></slot>
+          </pf-dropdown-menu>
+        </slot>
+      </div>
+    `;
   }
 
   override firstUpdated() {