feat: add large dropdowns, update styles

whopio · Dec 13, 2023 · 688e424 · 688e424
1 parent 53f9060
commit 688e424
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 36 deletions.
diff --git a/packages/frosted-ui/.storybook/stories/components/dropdown-menu.stories.tsx b/packages/frosted-ui/.storybook/stories/components/dropdown-menu.stories.tsx
@@ -20,42 +20,88 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: (args) => (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <Button variant="soft">Options</Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
-        <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
-
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <DropdownMenu.Item>Move to project…</DropdownMenu.Item>
-            <DropdownMenu.Item>Move to folder…</DropdownMenu.Item>
-            <DropdownMenu.Separator />
-            <DropdownMenu.Item>Advanced options…</DropdownMenu.Item>
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item>Share</DropdownMenu.Item>
-        <DropdownMenu.Item>Add to favorites</DropdownMenu.Item>
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item shortcut="⌘ ⌫" color="danger">
-          Delete
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  ),
+  render: (args) => {
+    type Order = 'ascending' | 'descending';
+    const [order, setOrder] = React.useState<Order>('ascending');
+    const [showHiddenFiles, setShowHiddenFiles] = React.useState(true);
+
+    return (
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button variant="soft">Options</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content size="2">
+          <DropdownMenu.Label>Swag</DropdownMenu.Label>
+          <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
+          <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
+
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent>
+              <DropdownMenu.Item>Move to project…</DropdownMenu.Item>
+              <DropdownMenu.Item>Move to folder…</DropdownMenu.Item>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Item>Advanced options…</DropdownMenu.Item>
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+
+          <DropdownMenu.Separator />
+          <DropdownMenu.RadioGroup
+            value={order}
+            onValueChange={(value) => setOrder(value as Order)}
+          >
+            <DropdownMenu.RadioItem value="ascending">
+              Ascending
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="descending">
+              Descending
+            </DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+          <DropdownMenu.Separator />
+
+          <DropdownMenu.CheckboxItem
+            checked={showHiddenFiles}
+            onCheckedChange={setShowHiddenFiles}
+            shortcut="S+ H"
+          >
+            Show hidden files
+          </DropdownMenu.CheckboxItem>
+
+          <DropdownMenu.Separator />
+
+          <DropdownMenu.Item shortcut="⌘ ⌫" color="danger">
+            Delete
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    );
+  },
 };
 
 export const Size: Story = {
   render: (args) => (
     <Flex gap="3" align="center">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button variant="soft" size="3">
+            Large
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content size="3">
+          <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
+          <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
+
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item shortcut="⌘ ⌫" color="danger">
+            Delete
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <Button variant="soft" size="2">

diff --git a/packages/frosted-ui/src/components/base-menu.css b/packages/frosted-ui/src/components/base-menu.css
@@ -79,8 +79,8 @@
   height: 1px;
   margin-top: var(--space-2);
   margin-bottom: var(--space-2);
-  margin-left: var(--base-menu-item-padding-left);
-  margin-right: var(--base-menu-item-padding-right);
+  margin-left: calc(-1 * var(--base-menu-content-padding) + 1px);
+  margin-right: calc(-1 * var(--base-menu-content-padding) + 1px);
 }
 
 .fui-BaseMenuLabel {
@@ -177,6 +177,40 @@
         --base-menu-item-padding-left: var(--space-5);
       }
     }
+
+    &:where(.fui-r-size-3) {
+      --base-menu-content-padding: var(--space-2);
+      --base-menu-item-padding-left: var(--space-3);
+      --base-menu-item-padding-right: var(--space-3);
+      --base-menu-item-height: var(--space-7);
+      border-radius: var(--radius-5);
+
+      & :where(.fui-BaseMenuItem) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+        border-radius: var(--radius-3);
+      }
+
+      & :where(.fui-BaseMenuLabel) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+      }
+
+      & :where(.fui-BaseMenuItemIndicatorIcon, .fui-BaseMenuSubTriggerIcon) {
+        width: 12px;
+        height: 12px;
+      }
+
+      /* reset with :not:has so we still support browsers without :has */
+      &:where(:not(:has(.fui-BaseMenuCheckboxItem, .fui-BaseMenuRadioItem))) {
+        --base-menu-item-padding-left: var(--space-4);
+      }
+      &:where(:has(.fui-BaseMenuCheckboxItem, .fui-BaseMenuRadioItem)) {
+        --base-menu-item-padding-left: var(--space-6);
+      }
+    }
   }
 }
 
@@ -200,9 +234,10 @@
     background-color: var(--gray-a3);
   }
   & :where(.fui-BaseMenuItem[data-highlighted]) {
-    background-color: var(--accent-a5);
+    background-color: var(--gray-a5);
 
     &:where([data-accent-color]) {
+      background-color: var(--accent-a5);
       color: var(--accent-12);
     }
   }
@@ -214,7 +249,7 @@
   color: var(--gray-a8);
 }
 .fui-BaseMenuShortcut {
-  color: var(--gray-a11);
+  color: var(--gray-a10);
 }
 .fui-BaseMenuItem:where([data-disabled], [data-highlighted]),
 .fui-BaseMenuSubTrigger:where([data-state='open']) {

diff --git a/packages/frosted-ui/src/components/base-menu.props.ts b/packages/frosted-ui/src/components/base-menu.props.ts
@@ -1,7 +1,7 @@
 import type { PropDef } from '../helpers';
 import { colorProp, highContrastProp } from '../helpers';
 
-const contentSizes = ['1', '2'] as const;
+const contentSizes = ['1', '2', '3'] as const;
 
 const baseMenuContentPropDefs = {
   size: { type: 'enum', values: contentSizes, default: '2', responsive: true },