From d72c8f3bd05a329496a566c9d25c5bc55db55e30 Mon Sep 17 00:00:00 2001 From: Louis Escher Date: Mon, 2 Dec 2024 18:25:54 +0100 Subject: [PATCH 1/2] Add dropdown links with an href option, add relevant docs --- .../src/components/Dropdown/Dropdown.astro | 20 +++++++++++-- .../src/components/Dropdown/dropdown.ts | 3 +- .../studiocms-ui/components/dropdown.mdx | 28 ++++++++++--------- 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro index c9aeba680..4f936b4d4 100644 --- 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 @@ -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 index 4bd2f8127..dd3e3067e 100644 --- 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; @@ -118,6 +118,7 @@ class DropdownHelper { this.active = true; + // this.dropdown.style.height = `${this.dropdown.children.length * optionHeight}px`; if (isMobile || this.fullWidth) { this.dropdown.style.maxWidth = `${parentWidth}px`; this.dropdown.style.minWidth = 'unset'; 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 index eb81cbad6..5852271db 100644 --- 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,7 +167,7 @@ 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: @@ -175,12 +175,13 @@ No, you read that right. You can customize the options too. You can individually