From 1e29a8ef4f34faae67f50cae0189ffb6b17b6584 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 18 Sep 2024 10:15:59 -0400 Subject: [PATCH 1/2] Removed support for dividers in Listbox as this is not accessible --- .changeset/rude-buckets-speak.md | 5 +++ .storybook/preview.tsx | 4 +- .../src/ListBox/docs/ListBox.stories.tsx | 44 ++++--------------- .../src/ListBox/src/ListBox.module.css | 13 +----- 4 files changed, 18 insertions(+), 48 deletions(-) create mode 100644 .changeset/rude-buckets-speak.md diff --git a/.changeset/rude-buckets-speak.md b/.changeset/rude-buckets-speak.md new file mode 100644 index 000000000..193c93459 --- /dev/null +++ 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 index 08d70d62a..f602cac55 100644 --- 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/packages/components/src/ListBox/docs/ListBox.stories.tsx b/packages/components/src/ListBox/docs/ListBox.stories.tsx index 3314c37c4..3b136ebfe 100644 --- 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(new Set(["1"])); return ( - Item 3 Item 4 Item 5 -
+
More Items
Item 6 Item 7 @@ -383,33 +382,8 @@ export const Sections = { } } satisfies Story; -/** - * Dividers can be added to a ListBox - */ -export const Dividers = { - render: args => { - return ( - - Item 1 - Item 2 - Item 3 - Item 4 - Item 5 - - Item 7 - Item 8 - Item 9 - Item 10 - - ); - }, - 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 {listItem.name}; }} @@ -549,4 +523,4 @@ export const Empty = { ); } -} satisfies Story; \ No newline at end of file +} satisfies Story; diff --git a/packages/components/src/ListBox/src/ListBox.module.css b/packages/components/src/ListBox/src/ListBox.module.css index 48daa9f47..414d16f0f 100644 --- 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); -} \ No newline at end of file From 90945f79d7848557dff04e21b81cf72a07d38445 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 18 Sep 2024 12:00:19 -0400 Subject: [PATCH 2/2] removed traces of Divider within Listbox in the documentation --- apps/docs/content/components/collections/Listbox.mdx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx index ecf083cc9..52863d85f 100644 --- 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. -### Divider - -Dividers can be added to a list box. - - - ### Section A list box can have sections and section headers.