feat(go-dropdown-menu): prefix and suffix slots and generalise menuit…

…em styles

packages/core/src/components/go-dropdown-menu/go-dropdown-item.scss

@@ -1,15 +0,0 @@
-@import '../../global/scss/dropdown/mixins';
-
-go-dropdown-item {
-  @include dropdown-item-vars;
-
-  [role='menuitem'] {
-    @include dropdown-item;
-  }
-
-  &[disabled] {
-    [role='menuitem'] {
-      @include item-disabled-state;
-    }
-  }
-}

packages/core/src/components/go-dropdown-menu/go-dropdown-menu.scss

@@ -1,13 +1,29 @@
+@import '../../global/scss/dropdown/mixins';
 go-dropdown-menu {
   /**
     @prop --dd-item-gap:
       Gap between dropdown items
       - default: 0
   */
   --dd-item-gap: 0;
+
   .dropdown-menu-inner {
     display: flex;
     flex-direction: column;
     gap: var(--dd-item-gap);
   }
+
+  @include dropdown-item-vars;
+
+  [role='menuitem'] {
+    @include dropdown-item;
+  }
+
+  go-dropdown-item {
+    &[disabled] {
+      [role='menuitem'] {
+        @include item-disabled-state;
+      }
+    }
+  }
 }

packages/core/src/components/go-dropdown-menu/go-dropdown-menu.tsx

@@ -182,6 +182,7 @@ export class GoDropdownMenu implements DropdownProps {
         onOpened={() => this.handleDropdownOpened()}
         onClosed={() => this.handleDropdownClosed()}
         {...dropdownProps}>
+        <slot name="prefix"></slot>
         <div
           role="menu"
           class="dropdown-menu-inner"
@@ -191,6 +192,7 @@ export class GoDropdownMenu implements DropdownProps {
           }}>
           <slot></slot>
         </div>
+        <slot name="suffix"></slot>
       </go-dropdown>
     );
   }

packages/core/src/components/go-dropdown-menu/usage/go-dropdown-menu.md

@@ -1,15 +1,20 @@
-<div>
+<div class="container">
   <go-button id="test" variant="primary">Toggle Dropdown</go-button>
   <go-dropdown-menu id="dd" trigger-selector="#test">
+    <div slot="prefix">
+      <strong>Prefix content</strong>
+    </div>
+    <div slot="suffix">
+      <strong>Suffix content</strong>
+    </div>
+    <a href="#" role="menuitem">Custom menu item</a>
     <go-dropdown-item>Item 1</go-dropdown-item>
     <go-dropdown-item>Item 2</go-dropdown-item>
     <go-dropdown-item disabled>Item disabled</go-dropdown-item>
     <go-dropdown-separator></go-dropdown-separator>
     <go-dropdown-item>Item 3</go-dropdown-item>
   </go-dropdown-menu>
-  <div id="result">
-    Select a dropdown item
-  </div>
+  <div id="result">Select a dropdown item</div>
   <a href="#">Another focusable element</a>
 </div>
 <script>
@@ -19,4 +24,4 @@
     const text = e.detail.innerText;
     result.innerHTML = `selected: ${text}`
   })
-</script>
+</script>