Merge remote-tracking branch 'origin/nov-30' into nov-30

withstudiocms · Dec 3, 2024 · 00fc550 · 00fc550
2 parents 55c1cfd + c43dc2a
commit 00fc550
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
@@ -9,6 +9,7 @@ type Option = {
 	disabled?: boolean;
 	color?: StudioCMSColorway;
   icon?: HeroIconName;
+  href?: string;
 };
 
 type Props = {
@@ -34,17 +35,21 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     <slot />
   </div>
   <ul class="dropdown above" class:list={[align]} role="listbox" id={`${id}-dropdown`} transition:persist transition:persist-props>
-    {options.map(({ value, disabled, color, label, icon }) => (
+    {options.map(({ value, disabled, color, label, icon, href }) => (
       <li
         class="dropdown-option"
         role="option"
         data-value={value}
-        class:list={[disabled && "disabled", icon && "has-icon", color]}
+        class:list={[disabled && "disabled", icon && "has-icon", color, href && "has-href"]}
       >
         {icon && (
           <Icon width={24} height={24} name={icon} />
         )}
-        <span>{label}</span>
+        {href ? (
+          <a href={href} class="dropdown-link">{label}</a>
+        ) : (
+          <span>{label}</span>
+        )}
       </li>
     ))}
   </ul>
@@ -188,6 +193,15 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     background-color: hsl(var(--background-step-3));
   }
 
+  .dropdown-option.has-href {
+    padding: 0;
+  }
+
+  .dropdown-link {
+    padding: .5rem .75rem;
+    width: 100%;
+  }
+
   .dropdown-option.primary {
     color: hsl(var(--primary-base));
   }

diff --git a/packages/studiocms_ui/src/components/Dropdown/dropdown.ts b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
@@ -99,7 +99,7 @@ class DropdownHelper {
 		} = this.toggleEl.getBoundingClientRect();
 		const { width: dropdownWidth } = this.dropdown.getBoundingClientRect();
 
-		const optionHeight = 44;
+		const optionHeight = 43.28;
 		const totalBorderSize = 2;
 		const margin = 4;
 

diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/dropdown.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/dropdown.mdx
@@ -167,20 +167,21 @@ You can disable a dropdown by passing the `disabled` prop.
 
 ### Option Options
 
-No, you read that right. You can customize the options too. You can individually disable them and also change their color to any of the default colors:
+No, you read that right. You can customize the options too. You can individually disable them, turn them into links and also change their color to any of the default colors:
 
 <Tabs>
   <TabItem label="Preview">
     <PreviewCard>
       <Dropdown 
         id='options-dropdown' 
         options={[
-          { label: 'Default', value: 'default', color: 'default'},
-          { label: 'Primary', value: 'primary', color: 'primary'},
-          { label: 'Success', value: 'success', color: 'success'},
-          { label: 'Warning', value: 'warning', color: 'warning'},
-          { label: 'Danger', value: 'danger', color: 'danger'},
-          { label: 'Disabled', value: 'disabled', disabled: 'true'},
+          { label: 'Default', value: 'default', color: 'default' },
+          { label: 'Primary', value: 'primary', color: 'primary' },
+          { label: 'Success', value: 'success', color: 'success' },
+          { label: 'Warning', value: 'warning', color: 'warning' },
+          { label: 'Danger', value: 'danger', color: 'danger' },
+          { label: 'Disabled', value: 'disabled', disabled: true },
+          { label: 'As Link', value: 'custom-href', href: '/' },
         ]}
       >
         <Button color="primary">
@@ -198,12 +199,13 @@ No, you read that right. You can customize the options too. You can individually
     <Dropdown 
       id='dropdown' 
       options={[
-        { label: 'Default', value: 'default', color: 'default'},
-        { label: 'Primary', value: 'primary', color: 'primary'},
-        { label: 'Success', value: 'success', color: 'success'},
-        { label: 'Warning', value: 'warning', color: 'warning'},
-        { label: 'Danger', value: 'danger', color: 'danger'},
-        { label: 'Disabled', value: 'disabled', disabled: 'true'},
+        { label: 'Default', value: 'default', color: 'default' },
+        { label: 'Primary', value: 'primary', color: 'primary' },
+        { label: 'Success', value: 'success', color: 'success' },
+        { label: 'Warning', value: 'warning', color: 'warning' },
+        { label: 'Danger', value: 'danger', color: 'danger' },
+        { label: 'Disabled', value: 'disabled', disabled: true },
+        { label: 'As Link', value: 'custom-href', href: '/' },
       ]}
     >
       <Button color="primary">