Fix icons getting cut off, fix dropdown links not including icons (#46)

withstudiocms · Jan 24, 2025 · 29ea967 · 29ea967
1 parent fd9fab4
commit 29ea967
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 68 deletions.
diff --git a/.changeset/warm-moles-sit.md b/.changeset/warm-moles-sit.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Fixes icons getting cut off in certain circumstances and changes dropdown links to include icons
diff --git a/docs/src/components/DropdownScript.astro b/docs/src/components/DropdownScript.astro
@@ -7,4 +7,5 @@
   new DropdownHelper('align-end-dropdown');
   new DropdownHelper('right-click-dropdown');
   new DropdownHelper('options-dropdown');
+  new DropdownHelper('icons-dropdown');
 </script>
diff --git a/docs/src/content/docs/docs/changelog.md b/docs/src/content/docs/docs/changelog.md
@@ -1,55 +1,87 @@
----
-# Warning: This file is generated automatically. Do not edit!
-title: Release Notes
-description: Release notes for the @studiocms/ui package.
-editUrl: false
----
-
-This document contains release notes for the `@studiocms/ui` package.
-For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
-
-## 0.3.2
-
-- [#33](https://github.com/withstudiocms/ui/pull/33) [`58e223c`](https://github.com/withstudiocms/ui/commit/58e223c861321e95c8db064be67e28e4563b4ff3) Thanks [@louisescher](https://github.com/louisescher)! - Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots
-
-## 0.3.1
-
-- [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows
-
-## 0.3.0
-
-- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
-
-  This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
-  an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
-
-  ### Components
-
-  - Added a new `<Tabs />` component based on the tabs on the homepage.
-  - Updated the `<Card />` component to include a new "filled" style.
-
-  ### Utilities
-
-  - Moved the `ThemeHelper` class to its own category in the docs.
-
-  ### Accessibility
-
-  - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
-
-## 0.1.0
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `<Input />` component's available types
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component
-
-- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility
-
-## 0.0.1
-
-- Initial Testing release
+---
+# Warning: This file is generated automatically. Do not edit!
+title: Release Notes
+description: Release notes for the @studiocms/ui package.
+editUrl: false
+---
+
+This document contains release notes for the `@studiocms/ui` package.
+For more information, see the [CHANGELOG file](https://github.com/withstudiocms/ui/blob/main/packages/studiocms_ui/CHANGELOG.md)
+
+## 0.4.2
+
+- [#44](https://github.com/withstudiocms/ui/pull/44) [`99a2f79`](https://github.com/withstudiocms/ui/commit/99a2f7959b4269d47c99c87a06ea6711c74a373e) Thanks [@louisescher](https://github.com/louisescher)! - Fixes compatibility issues with Astro view transitions
+
+## 0.4.1
+
+- [#40](https://github.com/withstudiocms/ui/pull/40) [`641e4b0`](https://github.com/withstudiocms/ui/commit/641e4b09574eb3d54c08b52be65e36233c2bbd6a) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Update publish config and files included
+
+## 0.4.0
+
+- [#36](https://github.com/withstudiocms/ui/pull/36) [`07e2d9e`](https://github.com/withstudiocms/ui/commit/07e2d9e5a473bdcd516bf4d43e8274988ec796e6) Thanks [@louisescher](https://github.com/louisescher)! - Implement Build step and migrate all exported components into virtual modules
+
+  Instead of `@studiocms/ui/components` use `studiocms:ui/components`
+
+  For more information see https://ui.studiocms.dev
+
+- [#36](https://github.com/withstudiocms/ui/pull/36) [`07e2d9e`](https://github.com/withstudiocms/ui/commit/07e2d9e5a473bdcd516bf4d43e8274988ec796e6) Thanks [@louisescher](https://github.com/louisescher)! - Add a few new components:
+
+  - Accordion
+  - Badge
+  - Breadcrumbs
+  - Group
+  - Progress
+  - Sidebar
+
+  Add two new colors
+
+  - `info` (Blue)
+  - `monochrome` (Black/White)
+
+  Add the ability to pass a CSS file for customization of all colors
+
+## 0.3.2
+
+- [#33](https://github.com/withstudiocms/ui/pull/33) [`58e223c`](https://github.com/withstudiocms/ui/commit/58e223c861321e95c8db064be67e28e4563b4ff3) Thanks [@louisescher](https://github.com/louisescher)! - Fix tabs not being displayed correctly & dividers displaying backgrounds for empty slots
+
+## 0.3.1
+
+- [#27](https://github.com/withstudiocms/ui/pull/27) [`6b0b58f`](https://github.com/withstudiocms/ui/commit/6b0b58fbbe2a92d4bce7fa44c587164b8f2f53e5) Thanks [@louisescher](https://github.com/louisescher)! - Add pathe as a dependency to deal with path issues on Windows
+
+## 0.3.0
+
+- [#18](https://github.com/withstudiocms/ui/pull/18) [`e471e11`](https://github.com/withstudiocms/ui/commit/e471e1129a30ff2a5b019366a8eb7bbbf2abb73e) Thanks [@louisescher](https://github.com/louisescher)! - The Accessibility Update
+
+  This version of `@studiocms/ui` includes a lot of improvements to the documentation and components. The most important changes include the move to
+  an integration-based system and a massive keyboard accessibility overhaul (thanks to [HiDeoo](https://github.com/HiDeoo) for the feedback on this)!
+
+  ### Components
+
+  - Added a new `<Tabs />` component based on the tabs on the homepage.
+  - Updated the `<Card />` component to include a new "filled" style.
+
+  ### Utilities
+
+  - Moved the `ThemeHelper` class to its own category in the docs.
+
+  ### Accessibility
+
+  - Overhauled the keyboard accessibility on all components to make them adhere to the ARIA standards.
+
+## 0.1.0
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new footer component, made accessibility improvements and preparations for first stable release
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - - Update `<Input />` component's available types
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a new searchable select component and improved accessibility for normal selects
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Created new UI Library in preparations for the new StudioCMS Dashboard project
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Added a theme helper and theme toggle component
+
+- [#1](https://github.com/withstudiocms/ui/pull/1) [`14be139`](https://github.com/withstudiocms/ui/commit/14be139876aa2c5ab75fea07ee338afefece6f56) Thanks [@Adammatthiesen](https://github.com/Adammatthiesen)! - Adjusted persistent toasts to include an outline for better visibility
+
+## 0.0.1
+
+- Initial Testing release
diff --git a/docs/src/content/docs/docs/components/dropdown.mdx b/docs/src/content/docs/docs/components/dropdown.mdx
@@ -230,6 +230,55 @@ No, you read that right. You can customize the options too. You can individually
   </TabItem>
 </Tabs>
 
+#### Icons
+
+The dropdown items also support icons. You can pass an icon name to the option object:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Dropdown 
+        id='icons-dropdown' 
+        options={[
+          { label: 'Notifications', value: 'notifications', icon: 'bell' },
+          { label: 'Settings', value: 'settings', icon: 'cog-6-tooth' },
+          { label: 'Profile', value: 'profile', icon: 'user' },
+        ]}
+      >
+        <Button color='primary'>
+          Customized Icons
+        </Button>
+      </Dropdown>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro ins={7-14} showLinenumbers title="DropdownIconsExample.astro"
+    ---
+    import { Dropdown, Button } from 'studiocms:ui/components';
+    ---
+
+    <Dropdown 
+      id='dropdown' 
+      options={[
+        { label: 'Notifications', value: 'notifications', icon: 'bell' },
+        { label: 'Settings', value: 'settings', icon: 'cog-6-tooth' },
+        { label: 'Profile', value: 'profile', icon: 'user' },
+      ]}
+    >
+      <Button color='primary'>
+        Customized Icons
+      </Button>
+    </Dropdown>
+    ```
+    ```ts twoslash showLinenumbers title="Script Tag"
+    // @noErrors
+    import { DropdownHelper } from 'studiocms:ui/components';
+
+    const dropdown = new DropdownHelper('dropdown');
+    ```
+  </TabItem>
+</Tabs>
+
 ### Controlling Dropdowns Programmatically
 
 You know how, this entire page, we've been assigning our `DropdownHelper` to a variable? There's a reason for that. The DropdownHelper allows

diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
@@ -102,14 +102,17 @@ const {
         role="option"
         aria-selected="false"
       >
-        {icon && (
-          <Icon width={24} height={24} name={icon} />
-        )}
-        {href ? (
-          <a href={href} class="sui-dropdown-link">{label}</a>
-        ) : (
-          <span>{label}</span>
-        )}
+				{href ? (
+          <a href={href} class="sui-dropdown-link sui-dropdown-line-container">
+          	{icon && (<Icon width={24} height={24} name={icon} />)}
+						<span>{label}</span>
+					</a>
+				) : (
+					<div class="sui-dropdown-line-container">
+						{icon && (<Icon width={24} height={24} name={icon} />)}
+						<span>{label}</span>
+					</div>
+				)}
       </li>
     ))}
   </ul>

diff --git a/packages/studiocms_ui/src/components/Dropdown/dropdown.css b/packages/studiocms_ui/src/components/Dropdown/dropdown.css
@@ -120,19 +120,26 @@
 }
 
 .sui-dropdown-option {
-	padding: .5rem .75rem;
 	cursor: pointer;
 	font-size: .975em;
 	transition: all .15s ease;
 	display: flex;
 	flex-direction: row;
-	gap: .5rem;
 	align-items: center;
 	width: 100%;
 	white-space: normal;
 	user-select: none;
 }
 
+.sui-dropdown-line-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: .5rem .75rem;
+	width: 100%;
+	gap: .5rem;
+}
+
 .sui-dropdown-option:hover,
 .sui-dropdown-option:focus,
 .sui-dropdown-option.focused {
@@ -144,7 +151,6 @@
 }
 
 .sui-dropdown-link {
-	padding: .5rem .75rem;
 	width: 100%;
 	text-decoration: none;
 	color: hsl(var(--text-normal));
@@ -213,6 +219,6 @@
 	justify-content: space-between;
 }
 
-.sui-dropdown-option.has-icon {
+.sui-dropdown-option.has-icon .sui-dropdown-line-container {
 	padding-left: .5rem;
 }
diff --git a/packages/studiocms_ui/src/components/Icon/Icon.astro b/packages/studiocms_ui/src/components/Icon/Icon.astro
@@ -35,7 +35,7 @@ for (const attr in attributes) {
 	renderAttribsHTML += ` ${attr}="${attributes[attr]}"`;
 }
 
-const svg = `<svg xmlns="http://www.w3.org/2000/svg"${renderAttribsHTML}>${body}</svg>`;
+const svg = `<svg style="min-width: ${attributes.height || 24}px" xmlns="http://www.w3.org/2000/svg"${renderAttribsHTML}>${body}</svg>`;
 ---
 
 <Fragment set:html={svg} />