Removed support for dividers in Listbox as this is not accessible (#432)

gsoft-inc · Sep 18, 2024 · 528a132 · 528a132
2 parents 6e7f2f0 + 90945f7
commit 528a132
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 55 deletions.
diff --git a/.changeset/rude-buckets-speak.md b/.changeset/rude-buckets-speak.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+Removed support for dividers in Listbox as this is not accessible
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,4 +1,4 @@
-import { withHopperProvider, viewport } from "@hopper-ui/storybook-addon";
+import { viewport, withHopperProvider } from "@hopper-ui/storybook-addon";
 import {
     Description,
     Stories,
@@ -7,8 +7,8 @@ import {
 } from "@storybook/blocks";
 import type { Preview } from "@storybook/react";
 
-import "./stories.css";
 import "@hopper-ui/tokens/fonts.css";
+import "./stories.css";
 
 const preview: Preview = {
     parameters: {

diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx
@@ -53,7 +53,6 @@ The Section component represents a `section` within a Hopper container.
 
 - [Header](./Listbox#header)
 - [Section](./Listbox#section)
-- [Divider](./Divider)
 - [ListBoxItem](./Listbox#listboxitem)
 
 
@@ -90,12 +89,6 @@ A fluid list box will take up the full width of its container.
 
 <Example src="ListBox/docs/fluid" />
 
-### Divider
-
-Dividers can be added to a list box.
-
-<Example src="ListBox/docs/divider" />
-
 ### Section
 
 A list box can have sections and section headers.

diff --git a/packages/components/src/ListBox/docs/ListBox.stories.tsx b/packages/components/src/ListBox/docs/ListBox.stories.tsx
@@ -5,7 +5,6 @@ import { type Selection, Collection } from "react-aria-components";
 import { useAsyncList } from "react-stately";
 
 import { Badge } from "../../Badge/index.ts";
-import { Divider } from "../../Divider/index.ts";
 import { Header } from "../../Header/index.ts";
 import { IconList } from "../../IconList/index.ts";
 import { Inline } from "../../layout/index.ts";
@@ -14,8 +13,8 @@ import { Text } from "../../typography/Text/index.ts";
 import { ListBox, ListBoxItem } from "../src/index.ts";
 
 /**
- * A ListBox is a disclosure component that appears with a set of actions relevant to a specific control, interface area, data element or application view. 
- * Typically, this context is determined by the user’s current selection prior to invoking the menu. 
+ * A ListBox is a disclosure component that appears with a set of actions relevant to a specific control, interface area, data element or application view.
+ * Typically, this context is determined by the user’s current selection prior to invoking the menu.
  * Listbox can be opened from components such as Selects or Buttons.
  *
  * [View repository](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/components/src/ListBox/src)
@@ -130,7 +129,7 @@ export const SingleSelection = {
     }
 } satisfies Story;
 
-/** 
+/**
  * A ListBox can have a different selection indicator for single select.
  * By default, disallowEmptySelection is set to true when the selection indicator is a radio button.
  */
@@ -150,7 +149,7 @@ export const MultipleSelection = {
         const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(["1"]));
 
         return (
-            <ListBox {...args} 
+            <ListBox {...args}
                 aria-label="list of options"
                 selectedKeys={selectedKeys}
                 onSelectionChange={setSelectedKeys}
@@ -175,7 +174,7 @@ export const MultipleSelection = {
     }
 } satisfies Story;
 
-/** 
+/**
  * A ListBox can have a different selection indicator for multiple select .
  */
 export const MultipleSelectionIndicator = {
@@ -358,7 +357,7 @@ export const Sections = {
                 <ListBoxItem>Item 3</ListBoxItem>
                 <ListBoxItem>Item 4</ListBoxItem>
                 <ListBoxItem>Item 5</ListBoxItem>
-                <Section>
+                <Section >
                     <Header>More Items</Header>
                     <ListBoxItem>Item 6</ListBoxItem>
                     <ListBoxItem>Item 7</ListBoxItem>
@@ -383,33 +382,8 @@ export const Sections = {
     }
 } satisfies Story;
 
-/** 
- * Dividers can be added to a ListBox 
- */
-export const Dividers = {
-    render: args => {
-        return (
-            <ListBox {...args} aria-label="list of options">
-                <ListBoxItem>Item 1</ListBoxItem>
-                <ListBoxItem>Item 2</ListBoxItem>
-                <ListBoxItem>Item 3</ListBoxItem>
-                <ListBoxItem>Item 4</ListBoxItem>
-                <ListBoxItem>Item 5</ListBoxItem>
-                <Divider />
-                <ListBoxItem>Item 7</ListBoxItem>
-                <ListBoxItem>Item 8</ListBoxItem>
-                <ListBoxItem>Item 9</ListBoxItem>
-                <ListBoxItem>Item 10</ListBoxItem>
-            </ListBox>
-        );
-    },
-    args: {
-        selectionMode: "single"
-    }
-} satisfies Story;
-
 /**
- * Items and sections can be populated from a hierarchial data structure. 
+ * Items and sections can be populated from a hierarchial data structure.
  * If a section has a header, the `Collection` component can be used to render the child items.
  */
 export const DynamicLists = {
@@ -445,7 +419,7 @@ export const DynamicLists = {
                 >
                     {item => {
                         const listItem = item as ListItemProps;
-                    
+
                         return <ListBoxItem id={listItem.name}>{listItem.name}</ListBoxItem>;
                     }}
                 </ListBox>
@@ -549,4 +523,4 @@ export const Empty = {
             </ListBox>
         );
     }
-} satisfies Story;
+} satisfies Story;
diff --git a/packages/components/src/ListBox/src/ListBox.module.css b/packages/components/src/ListBox/src/ListBox.module.css
@@ -20,7 +20,7 @@
     --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
     --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
     --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
-    --hop-ListBox-section-border-color: var(--hop-ListBox-border-color); 
+    --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
 
     /* Section Header */
     --hop-ListBox-section-header-color: var(--hop-neutral-text-weak);
@@ -34,10 +34,6 @@
     --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
     --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
 
-    /* Divider */
-    --hop-ListBox-divider-margin-block: var(--hop-space-stack-sm);
-    --hop-ListBox-divider-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
-
     /* Internal Variables */
     --max-width: var(--hop-ListBox-max-width);
     --width: var(--hop-ListBox-width);
@@ -80,7 +76,7 @@
 /* Select section that follows an item */
 .hop-ListBox__item + .hop-ListBox__section {
     --section-margin-block-start: var(--hop-ListBox-section-margin-block);
-    --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color); 
+    --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
 }
 
 /* Select section that has an item right after */
@@ -130,8 +126,3 @@
     /* -0.25rem */
     margin-block-start: var(--hop-ListBox-section-header-top-offset);
 }
-
-.hop-ListBox__divider {
-    margin-block: var(--hop-ListBox-divider-margin-block);
-    margin-inline: var(--hop-ListBox-divider-margin-inline);
-}