Remove DropdownItem wrapping

So that for example links are the full width of the dropdown menu
thunderstore-io · Oct 31, 2024 · 01e656a · 01e656a
1 parent fef23d5
commit 01e656a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
@@ -35,10 +35,12 @@ const defaultArgs = {
 const children: ReactElement = (
   <>
     <NewDropDownItem>
-      <NewIcon csMode="inline" noWrapper>
-        <FontAwesomeIcon icon={faStar} />
-      </NewIcon>
-      New
+      <span>
+        <NewIcon csMode="inline" noWrapper>
+          <FontAwesomeIcon icon={faStar} />
+        </NewIcon>
+        New
+      </span>
     </NewDropDownItem>
     <NewDropDownItem>
       <NewLink

diff --git a/packages/cyberstorm-theme/src/components/DropDown/DropDown.css b/packages/cyberstorm-theme/src/components/DropDown/DropDown.css
@@ -26,13 +26,15 @@
   /* DROPDOWN ITEM */
 
   /* Missing tokens */
-  .ts-dropdown__item:where(.ts-variant--primary) {
+  .ts-dropdown:where(.ts-variant--primary)
+    > *:where(:not(.ts-dropdown__divider)) {
     --dropdown__item-padding: var(--space-12) var(--space-16);
     --dropdown__item-color: var(--color-surface-8);
     --dropdown__item-background-color: var(--color-surface-2);
   }
 
-  .ts-dropdown__item:where(.ts-variant--primary)[data-highlighted] {
+  .ts-dropdown:where(.ts-variant--primary)
+    > *:where(:not(.ts-dropdown__divider))[data-highlighted] {
     --dropdown__item-color: var(--color-surface-2);
     --dropdown__item-background-color: var(--color-surface-6);
   }

diff --git a/packages/cyberstorm/src/newComponents/DropDown/DropDown.css b/packages/cyberstorm/src/newComponents/DropDown/DropDown.css
@@ -15,15 +15,15 @@
     animation: var(--dropdown-animation);
   }
 
-  .ts-dropdown__item {
+  .ts-dropdown > *:where(:not(.ts-dropdown__divider)) {
     padding: var(--dropdown__item-padding);
     overflow: hidden;
     color: var(--dropdown__item-color);
     background-color: var(--dropdown__item-background-color);
     outline: none;
   }
 
-  .ts-dropdown__item[data-highlighted] {
+  .ts-dropdown > *:where(:not(.ts-dropdown__divider))[data-highlighted] {
     z-index: 999;
   }
 

diff --git a/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx b/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx
@@ -94,6 +94,7 @@ export function DropDownItem(props: DropDownItemProps) {
         ...componentClasses(csVariant, csSize, csModifiers),
         rootClasses
       )}
+      asChild
     >
       {children}
     </Item>
-Original file line number
+Diff line change
@@ Expand Up / @@ -94,6 +94,7 @@ export function DropDownItem(props: DropDownItemProps) { @@
             ...componentClasses(csVariant, csSize, csModifiers),
             rootClasses
           )}
+          asChild
         >
           {children}
         </Item>
@@ Expand Down @@