diff --git a/.changeset/gentle-islands-search.md b/.changeset/gentle-islands-search.md new file mode 100644 index 000000000..c0ef91211 --- /dev/null +++ b/.changeset/gentle-islands-search.md @@ -0,0 +1,5 @@ +--- +"@hopper-ui/components": patch +--- + +There is no longer a generic Section component. We now have ListBoxSection, SelectSection and ComboBoxSection. diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx index 4b9560939..f57446e5c 100644 --- a/apps/docs/content/components/collections/Listbox.mdx +++ b/apps/docs/content/components/collections/Listbox.mdx @@ -35,7 +35,7 @@ links: A `ListBox` uses the following components. - + ## Usage @@ -170,6 +170,10 @@ List box items can vary in sizes. +### ListBoxSection + + + ### ListBoxItem diff --git a/apps/docs/content/components/collections/Section.mdx b/apps/docs/content/components/collections/Section.mdx deleted file mode 100644 index f4ac59823..000000000 --- a/apps/docs/content/components/collections/Section.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Section -description: A Section serves as a versatile container component, encapsulating an HTML section element. -category: "collections" -links: - source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Section/src/Section.tsx ---- - -Section is a subcomponent of [Listbox](./Listbox), it's used within [Combobox](./ComboBox) and [Select](./Select). - - - - - ## Guidelines - - TODO: If we have some guidelines about this component's usage - - ### Accessibility ? - - TODO: If we have some guidelines about this component and accessibility - - -## Anatomy - -### Composed Components - -A `Section` is used in the following components. - - - - - - TODO: We have anatomy screenshots from the Figma, we could most likely use them here - - ### Concepts - - TODO: links to related concepts - - - - ## Advanced customization - - ### Contexts - TODO: Example of context + content about the context - - ### Custom Children - - TODO: Example of passing custom childrens to the components to fake a slot - - ### Custom Component - - TODO: Example of creating a custom version of this component - - -## Props - - diff --git a/apps/docs/content/components/pickers/ComboBox.mdx b/apps/docs/content/components/pickers/ComboBox.mdx index 218de98c8..6c39f259b 100644 --- a/apps/docs/content/components/pickers/ComboBox.mdx +++ b/apps/docs/content/components/pickers/ComboBox.mdx @@ -42,7 +42,7 @@ The Section component represents a `section` within a Hopper container. A `ComboBox` uses the following components. - + ## Usage @@ -197,5 +197,15 @@ A combo box item can have a description. ## Props +### ComboBox + +### ComboBoxSection + + + +### ComboBoxItem + + + diff --git a/apps/docs/content/components/pickers/Select.mdx b/apps/docs/content/components/pickers/Select.mdx index df304820c..b36b72a3f 100644 --- a/apps/docs/content/components/pickers/Select.mdx +++ b/apps/docs/content/components/pickers/Select.mdx @@ -41,7 +41,7 @@ The Section component represents a `section` within a Hopper container. A `Select` uses the following components. - + ## Usage @@ -198,8 +198,18 @@ A select item can have a description. ## Props +### Select + +### SelectSection + + + +### SelectItem + + + ## Migration Notes diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts index 754b7a66a..75e6cf828 100644 --- a/apps/docs/examples/Preview.ts +++ b/apps/docs/examples/Preview.ts @@ -152,9 +152,6 @@ export const Previews: Record = { "ListBox/docs/multipleSizes": { component: lazy(() => import("@/../../packages/components/src/ListBox/docs/multipleSizes.tsx")) }, - "Section/docs/preview": { - component: lazy(() => import("@/../../packages/components/src/Section/docs/preview.tsx")) - }, "tag/docs/preview": { component: lazy(() => import("@/../../packages/components/src/tag/docs/preview.tsx")) }, diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx index 5115c8819..b7984e91f 100644 --- a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx +++ b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx @@ -1,4 +1,4 @@ -import { Collection, ComboBox, ComboBoxItem, Header, Inline, Section } from "@hopper-ui/components"; +import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header, Inline } from "@hopper-ui/components"; interface ListItemProps { id: number | string; @@ -57,12 +57,12 @@ export default function Example() { const { role: sectionName, children } = section; return ( -
+
{sectionName}
{item => {item.role}} -
+ ); }} diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx index ffefb1fe5..685ae932d 100644 --- a/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx +++ b/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx @@ -1,21 +1,21 @@ -import { ComboBox, ComboBoxItem, Header, Section } from "@hopper-ui/components"; +import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components"; export default function Example() { return ( Developer Manager -
+
Operations
Project Coordinator QA Specialist -
-
+ +
Creative Department
Designer Copywriter UX Researcher -
+ ); } diff --git a/packages/components/src/ComboBox/docs/allowCustomValue.tsx b/packages/components/src/ComboBox/docs/allowCustomValue.tsx index 13fc9e9cf..78562b830 100644 --- a/packages/components/src/ComboBox/docs/allowCustomValue.tsx +++ b/packages/components/src/ComboBox/docs/allowCustomValue.tsx @@ -1,13 +1,13 @@ -import { ComboBox, ComboBoxItem, Header, Section } from "@hopper-ui/components"; +import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components"; export default function Example() { return ( -
+
Creative Department
Designer Content creator -
+ Manager ); diff --git a/packages/components/src/ComboBox/docs/controlled.tsx b/packages/components/src/ComboBox/docs/controlled.tsx index 81bcffdda..032be4c3a 100644 --- a/packages/components/src/ComboBox/docs/controlled.tsx +++ b/packages/components/src/ComboBox/docs/controlled.tsx @@ -1,4 +1,4 @@ -import { ComboBox, ComboBoxItem, Header, type Key, Section } from "@hopper-ui/components"; +import { ComboBox, ComboBoxItem, ComboBoxSection, Header, type Key } from "@hopper-ui/components"; import { useState } from "react"; export default function Example() { @@ -14,11 +14,11 @@ export default function Example() { return ( -
+
Operations
Project Coordinator QA Specialist -
+ Manager ); diff --git a/packages/components/src/ComboBox/src/ComboBox.tsx b/packages/components/src/ComboBox/src/ComboBox.tsx index 7de157898..843a20892 100644 --- a/packages/components/src/ComboBox/src/ComboBox.tsx +++ b/packages/components/src/ComboBox/src/ComboBox.tsx @@ -24,6 +24,7 @@ import { useFormProps } from "../../Form/index.ts"; import { HelperMessage } from "../../HelperMessage/index.ts"; import { Footer } from "../../layout/index.ts"; import { ListBox, ListBoxItem, type ListBoxProps, type SelectionIndicator } from "../../ListBox/index.ts"; +import { ListBoxSection } from "../../ListBoxSection/index.ts"; import { Popover, type PopoverProps } from "../../overlays/index.ts"; import { ToggleArrow } from "../../ToggleArrow/index.ts"; import { Label, TextContext } from "../../typography/index.ts"; @@ -383,4 +384,4 @@ const _ComboBox = forwardRef(ComboBox) as ( ) => ReturnType; (_ComboBox as NamedExoticComponent).displayName = "ComboBox"; -export { _ComboBox as ComboBox, ListBoxItem as ComboBoxItem }; +export { _ComboBox as ComboBox, ListBoxItem as ComboBoxItem, ListBoxSection as ComboBoxSection }; diff --git a/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx b/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx index a31da6e83..bdf8ae6a4 100644 --- a/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx +++ b/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx @@ -1,4 +1,4 @@ -import { Button, ComboBox, ComboBoxItem, type ComboBoxProps, Header, Inline, Section, Stack, Text } from "@hopper-ui/components"; +import { Button, ComboBox, ComboBoxItem, type ComboBoxProps, ComboBoxSection, Header, Inline, Stack, Text } from "@hopper-ui/components"; import { AddIcon, SparklesIcon } from "@hopper-ui/icons"; import { Div } from "@hopper-ui/styled-system"; import type { Meta, StoryFn, StoryObj } from "@storybook/react"; @@ -62,19 +62,19 @@ export const OnlyItems = { export const Sections = { render: args => ( -
+
Cats
Zoomy Voodoo Dusty Rengar -
-
+ +
Dogs
Teemo Scooter Prince -
+ ), play: playFn, @@ -112,19 +112,19 @@ export const FieldHelperMessage = { export const Footer = { render: args => ( -
+
Cats
Zoomy Voodoo Dusty Rengar -
-
+ +
Dogs
Teemo Scooter Prince -
+ ), play: playFn, @@ -138,19 +138,19 @@ export const Small = { play: playFn, render: args => ( -
+
Cats
Zoomy Voodoo Dusty Rengar -
-
+ +
Dogs
Teemo Scooter Prince -
+ ), args: { @@ -165,19 +165,19 @@ export const Medium = { play: playFn, render: args => ( -
+
Cats
Zoomy Voodoo Dusty Rengar -
-
+ +
Dogs
Teemo Scooter Prince -
+ ), args: { diff --git a/packages/components/src/ListBox/docs/ListBox.stories.tsx b/packages/components/src/ListBox/docs/ListBox.stories.tsx index 550c11240..50167dd86 100644 --- a/packages/components/src/ListBox/docs/ListBox.stories.tsx +++ b/packages/components/src/ListBox/docs/ListBox.stories.tsx @@ -8,7 +8,7 @@ import { Badge } from "../../Badge/index.ts"; import { Header } from "../../Header/index.ts"; import { IconList } from "../../IconList/index.ts"; import { Inline } from "../../layout/index.ts"; -import { Section } from "../../Section/index.ts"; +import { ListBoxSection } from "../../ListBoxSection/index.ts"; import { Text } from "../../typography/Text/index.ts"; import { ListBox, ListBoxItem } from "../src/index.ts"; @@ -159,13 +159,13 @@ export const MultipleSelection = { Item 3 Item 4 Item 5 -
+ Item 6 Item 7 Item 8 Item 9 Item 10 -
+ ); }, @@ -357,22 +357,22 @@ export const Sections = { Item 3 Item 4 Item 5 -
+
More Items
Item 6 Item 7 Item 8 Item 9 Item 10 -
-
+ +
Even More Items
Item 11 Item 12 Item 13 Item 14 Item 15 -
+ Item 16 ); @@ -432,12 +432,12 @@ export const DynamicLists = { const listSection = section as ListSectionProps; return ( -
+
{listSection.name}
{item => {item.name}} -
+ ); }} diff --git a/packages/components/src/ListBox/docs/dynamicLists.tsx b/packages/components/src/ListBox/docs/dynamicLists.tsx index 04a517b82..d07191e92 100644 --- a/packages/components/src/ListBox/docs/dynamicLists.tsx +++ b/packages/components/src/ListBox/docs/dynamicLists.tsx @@ -1,4 +1,4 @@ -import { Header, Inline, ListBox, ListBoxItem, Section, Collection } from "@hopper-ui/components"; +import { Collection, Header, Inline, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components"; interface ListItemProps { id: number | string; @@ -59,12 +59,12 @@ export default function Example() { const listSection = section as ListSectionProps; return ( -
+
{listSection.name}
{item => {item.name}} -
+ ); }} diff --git a/packages/components/src/ListBox/docs/multipleSelected.tsx b/packages/components/src/ListBox/docs/multipleSelected.tsx index 9c0db7c7f..e77012570 100644 --- a/packages/components/src/ListBox/docs/multipleSelected.tsx +++ b/packages/components/src/ListBox/docs/multipleSelected.tsx @@ -1,4 +1,4 @@ -import { ListBox, ListBoxItem, Section, Header } from "@hopper-ui/components"; +import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components"; import { useState } from "react"; import type { Selection } from "react-aria-components"; @@ -12,18 +12,18 @@ export default function Example() { selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} > -
+
Self review
Overdue In progress Submitted -
-
+ +
Manager review
Overdue In progress Submitted -
+ ); } diff --git a/packages/components/src/ListBox/docs/section.tsx b/packages/components/src/ListBox/docs/section.tsx index feaca1a00..84f5dee2b 100644 --- a/packages/components/src/ListBox/docs/section.tsx +++ b/packages/components/src/ListBox/docs/section.tsx @@ -1,21 +1,21 @@ -import { Header, ListBox, ListBoxItem, Section } from "@hopper-ui/components"; +import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components"; export default function Example() { return ( Developer Manager -
+
Creative Department
Designer Copywriter UX Researcher -
-
+ +
Operations
Project Coordinator QA Specialist -
+ Product Owner ); diff --git a/packages/components/src/ListBox/src/ListBox.tsx b/packages/components/src/ListBox/src/ListBox.tsx index dad4f3a3c..bd3fd81f8 100644 --- a/packages/components/src/ListBox/src/ListBox.tsx +++ b/packages/components/src/ListBox/src/ListBox.tsx @@ -6,7 +6,7 @@ import { Collection, composeRenderProps, type ListBoxRenderProps, ListBox as RAC import { HeaderContext } from "../../Header/index.ts"; import { useLocalizedString } from "../../i18n/index.ts"; -import { SectionContext } from "../../Section/index.ts"; +import { ListBoxSectionContext } from "../../ListBoxSection/index.ts"; import { Text, type TextSize } from "../../typography/Text/index.ts"; import { composeClassnameRenderProps, cssModule, isFunction, type SizeAdapter, SlotProvider } from "../../utils/index.ts"; @@ -147,7 +147,7 @@ function ListBox(props: ListBoxProps, ref: ForwardedRef( (_ListBox as NamedExoticComponent).displayName = "ListBox"; export { _ListBox as ListBox }; + diff --git a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx index 811779915..d0d49ab22 100644 --- a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx +++ b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx @@ -8,7 +8,7 @@ import { Badge } from "../../../Badge/index.ts"; import { Header } from "../../../Header/index.ts"; import { IconList } from "../../../IconList/index.ts"; import { Inline, Stack } from "../../../layout/index.ts"; -import { Section } from "../../../Section/index.ts"; +import { ListBoxSection } from "../../../ListBoxSection/index.ts"; import { Text } from "../../../typography/Text/index.ts"; import { ListBox, ListBoxItem, type ListBoxProps } from "../../index.ts"; @@ -81,31 +81,31 @@ export const Default = {

Sections

-
+
Visited
Earth Mars Saturn -
-
+ +
Not Visited
Jupiter Mercury Neptune Uranus -
+

Mixed Section and Items

Earth Mars Saturn -
+
Visited
Jupiter Mercury Neptune -
+ Uranus

Items with Start Icon

diff --git a/packages/components/src/Section/index.ts b/packages/components/src/ListBoxSection/index.ts similarity index 100% rename from packages/components/src/Section/index.ts rename to packages/components/src/ListBoxSection/index.ts diff --git a/packages/components/src/Section/src/Section.tsx b/packages/components/src/ListBoxSection/src/ListBoxSection.tsx similarity index 52% rename from packages/components/src/Section/src/Section.tsx rename to packages/components/src/ListBoxSection/src/ListBoxSection.tsx index a3f55a1cd..3f2d7ba07 100644 --- a/packages/components/src/Section/src/Section.tsx +++ b/packages/components/src/ListBoxSection/src/ListBoxSection.tsx @@ -1,16 +1,16 @@ import { useStyledSystem, type StyledComponentProps } from "@hopper-ui/styled-system"; import clsx from "clsx"; import { forwardRef, type CSSProperties, type ForwardedRef, type NamedExoticComponent } from "react"; -import { ListBoxSection as RACSection, useContextProps, type SectionProps as RACSectionProps } from "react-aria-components"; +import { ListBoxSection as RACListBoxSection, useContextProps, type SectionProps as RACSectionProps } from "react-aria-components"; -import { SectionContext } from "./SectionContext.ts"; +import { ListBoxSectionContext } from "./ListBoxSectionContext.ts"; -export const GlobalSectionCssSelector = "hop-Section"; +export const GlobalSectionCssSelector = "hop-ListBoxSection"; -export interface SectionProps extends StyledComponentProps> {} +export interface ListBoxSectionProps extends StyledComponentProps> {} -function Section(props: SectionProps, ref: ForwardedRef) { - [props, ref] = useContextProps(props, ref, SectionContext); +function ListBoxSection(props: ListBoxSectionProps, ref: ForwardedRef) { + [props, ref] = useContextProps(props, ref, ListBoxSectionContext); const { stylingProps, ...ownProps } = useStyledSystem(props); const { className, @@ -31,14 +31,14 @@ function Section(props: SectionProps, ref: ForwardedRef {children} - + ); } @@ -47,9 +47,9 @@ function Section(props: SectionProps, ref: ForwardedRef( - props: SectionProps & { ref?: ForwardedRef } -) => ReturnType; -(_Section as NamedExoticComponent).displayName = "Section"; +const _ListBoxSection = forwardRef(ListBoxSection) as ( + props: ListBoxSectionProps & { ref?: ForwardedRef } +) => ReturnType; +(_ListBoxSection as NamedExoticComponent).displayName = "ListBoxSection"; -export { _Section as Section }; +export { _ListBoxSection as ListBoxSection }; diff --git a/packages/components/src/ListBoxSection/src/ListBoxSectionContext.ts b/packages/components/src/ListBoxSection/src/ListBoxSectionContext.ts new file mode 100644 index 000000000..4694c8038 --- /dev/null +++ b/packages/components/src/ListBoxSection/src/ListBoxSectionContext.ts @@ -0,0 +1,10 @@ +import { createContext } from "react"; +import type { ContextValue } from "react-aria-components"; + +import type { ListBoxSectionProps } from "./ListBoxSection.tsx"; + +// any is what's used in RAC +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const ListBoxSectionContext = createContext, HTMLElement>>({}); + +ListBoxSectionContext.displayName = "ListBoxSectionContext"; diff --git a/packages/components/src/ListBoxSection/src/index.ts b/packages/components/src/ListBoxSection/src/index.ts new file mode 100644 index 000000000..a40cedf44 --- /dev/null +++ b/packages/components/src/ListBoxSection/src/index.ts @@ -0,0 +1,3 @@ +export * from "./ListBoxSection.tsx"; +export * from "./ListBoxSectionContext.ts"; + diff --git a/packages/components/src/Section/tests/jest/Section.ssr.test.tsx b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.ssr.test.tsx similarity index 71% rename from packages/components/src/Section/tests/jest/Section.ssr.test.tsx rename to packages/components/src/ListBoxSection/tests/jest/ListBoxSection.ssr.test.tsx index f1ba31edd..2bab769fd 100644 --- a/packages/components/src/Section/tests/jest/Section.ssr.test.tsx +++ b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.ssr.test.tsx @@ -3,13 +3,13 @@ */ import { renderToString } from "react-dom/server"; -import { Section } from "../../src/Section.tsx"; +import { ListBoxSection } from "../../src/ListBoxSection.tsx"; describe("Section", () => { it("should render on the server", () => { const renderOnServer = () => renderToString( -
Text
+ Text ); expect(renderOnServer).not.toThrow(); diff --git a/packages/components/src/Section/tests/jest/Section.test.tsx b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.test.tsx similarity index 55% rename from packages/components/src/Section/tests/jest/Section.test.tsx rename to packages/components/src/ListBoxSection/tests/jest/ListBoxSection.test.tsx index 20aa220ab..ba9703503 100644 --- a/packages/components/src/Section/tests/jest/Section.test.tsx +++ b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.test.tsx @@ -2,33 +2,33 @@ import { render, screen } from "@hopper-ui/test-utils"; import { createRef } from "react"; import { ListBox } from "react-aria-components"; -import { Section } from "../../src/Section.tsx"; +import { ListBoxSection } from "../../src/ListBoxSection.tsx"; -describe("Section", () => { +describe("ListBoxSection", () => { it("should render with default class", () => { - render(
Test
); + render(Test); const element = screen.getByRole("group"); - expect(element).toHaveClass("hop-Section"); + expect(element).toHaveClass("hop-ListBoxSection"); }); it("should support custom class", () => { - render(
Test
); + render(Test); const element = screen.getByRole("group"); - expect(element).toHaveClass("hop-Section"); + expect(element).toHaveClass("hop-ListBoxSection"); expect(element).toHaveClass("test"); }); it("should support custom style", () => { - render(
Test
); + render(Test); const element = screen.getByRole("group"); expect(element).toHaveStyle({ marginTop: "var(--hop-space-stack-sm)", marginBottom: "13px" }); }); it("should support DOM props", () => { - render(
Test
); + render(Test); const element = screen.getByRole("group"); expect(element).toHaveAttribute("data-foo", "bar"); @@ -36,7 +36,7 @@ describe("Section", () => { it("should support refs", () => { const ref = createRef(); - render(
Test
); + render(Test); expect(ref.current).not.toBeNull(); expect(ref.current instanceof HTMLElement).toBeTruthy(); diff --git a/packages/components/src/Section/docs/preview.tsx b/packages/components/src/Section/docs/preview.tsx deleted file mode 100644 index fd7aae93f..000000000 --- a/packages/components/src/Section/docs/preview.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Header, ListBox, ListBoxItem, Section } from "@hopper-ui/components"; - -export default function Example() { - return ( - -
-
Creative Department
- Designer - Copywriter - UX Researcher -
- - ); -} diff --git a/packages/components/src/Section/src/SectionContext.ts b/packages/components/src/Section/src/SectionContext.ts deleted file mode 100644 index 8536733bd..000000000 --- a/packages/components/src/Section/src/SectionContext.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { createContext } from "react"; -import type { ContextValue } from "react-aria-components"; - -import type { SectionProps } from "./Section.tsx"; - -// any is what's used in RAC -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const SectionContext = createContext, HTMLElement>>({}); - -SectionContext.displayName = "SectionContext"; diff --git a/packages/components/src/Section/src/index.ts b/packages/components/src/Section/src/index.ts deleted file mode 100644 index 7049f42e5..000000000 --- a/packages/components/src/Section/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Section.tsx"; -export * from "./SectionContext.ts"; diff --git a/packages/components/src/Select/docs/controlled.tsx b/packages/components/src/Select/docs/controlled.tsx index ae9224098..a4d67ce26 100644 --- a/packages/components/src/Select/docs/controlled.tsx +++ b/packages/components/src/Select/docs/controlled.tsx @@ -1,4 +1,4 @@ -import { Header, Section, Select, SelectItem, type Key } from "@hopper-ui/components"; +import { Header, Select, SelectItem, SelectSection, type Key } from "@hopper-ui/components"; import { useState } from "react"; export default function Example() { @@ -14,11 +14,11 @@ export default function Example() { return ( ); diff --git a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx index b5beb53cf..2c1bb6ffe 100644 --- a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx +++ b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx @@ -1,4 +1,4 @@ -import { Collection, Header, Inline, Section, Select, SelectItem } from "@hopper-ui/components"; +import { Collection, Header, Inline, Select, SelectItem, SelectSection } from "@hopper-ui/components"; interface ListItemProps { id: number | string; @@ -51,12 +51,12 @@ export default function Example() { const { role: sectionName, children } = section; return ( -
+
{sectionName}
{item => {item.role}} -
+ ); }} diff --git a/packages/components/src/Select/docs/selectDropdown/section.tsx b/packages/components/src/Select/docs/selectDropdown/section.tsx index 9246c097f..64463d58b 100644 --- a/packages/components/src/Select/docs/selectDropdown/section.tsx +++ b/packages/components/src/Select/docs/selectDropdown/section.tsx @@ -1,21 +1,21 @@ -import { Header, Section, Select, SelectItem } from "@hopper-ui/components"; +import { Header, Select, SelectItem, SelectSection } from "@hopper-ui/components"; export default function Example() { return ( ); diff --git a/packages/components/src/Select/src/Select.tsx b/packages/components/src/Select/src/Select.tsx index 1cb15422b..a6e90e3b3 100644 --- a/packages/components/src/Select/src/Select.tsx +++ b/packages/components/src/Select/src/Select.tsx @@ -20,6 +20,7 @@ import { useFormProps } from "../../Form/index.ts"; import { HelperMessage } from "../../HelperMessage/index.ts"; import { Footer } from "../../layout/index.ts"; import { ListBox, ListBoxItem, type ListBoxProps, type SelectionIndicator } from "../../ListBox/index.ts"; +import { ListBoxSection } from "../../ListBoxSection/index.ts"; import { Popover, type PopoverProps } from "../../overlays/index.ts"; import { ToggleArrow } from "../../ToggleArrow/index.ts"; import { Label, TextContext } from "../../typography/index.ts"; @@ -313,4 +314,4 @@ const _Select = forwardRef(Select) as ( ) => ReturnType; (_Select as NamedExoticComponent).displayName = "Select"; -export { _Select as Select, ListBoxItem as SelectItem }; +export { _Select as Select, ListBoxItem as SelectItem, ListBoxSection as SelectSection }; diff --git a/packages/components/src/Select/tests/chromatic/Select.stories.tsx b/packages/components/src/Select/tests/chromatic/Select.stories.tsx index 7c54ce296..31f50c1d7 100644 --- a/packages/components/src/Select/tests/chromatic/Select.stories.tsx +++ b/packages/components/src/Select/tests/chromatic/Select.stories.tsx @@ -1,4 +1,4 @@ -import { Select, SelectItem, type SelectProps } from "@hopper-ui/components"; +import { Select, SelectItem, type SelectProps, SelectSection } from "@hopper-ui/components"; import { AddIcon, SparklesIcon } from "@hopper-ui/icons"; import { Div } from "@hopper-ui/styled-system"; import type { Meta, StoryFn, StoryObj } from "@storybook/react"; @@ -7,7 +7,6 @@ import { userEvent, within } from "@storybook/test"; import { Button } from "../../../buttons/index.ts"; import { Header } from "../../../Header/index.ts"; import { Inline, Stack } from "../../../layout/index.ts"; -import { Section } from "../../../Section/index.ts"; import { Text } from "../../../typography/Text/index.ts"; const meta = { @@ -68,19 +67,19 @@ export const OnlyItems = { export const Sections = { render: args => ( ), play: playFn, @@ -90,19 +89,19 @@ export const Sections = { export const Footer = { render: args => ( ), play: playFn, @@ -112,19 +111,19 @@ export const Footer = { export const TextFooter = { render: args => ( ), play: playFn, @@ -134,19 +133,19 @@ export const TextFooter = { export const Small = { render: args => ( ), args: { @@ -160,19 +159,19 @@ export const Small = { export const Medium = { render: args => ( ), args: { diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index ef6646513..82700efca 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -16,9 +16,9 @@ export * from "./inputs/index.ts"; export * from "./layout/index.ts"; export * from "./Link/index.ts"; export * from "./ListBox/index.ts"; +export * from "./ListBoxSection/index.ts"; export * from "./overlays/Popover/index.ts"; export * from "./radio/index.ts"; -export * from "./Section/index.ts"; export * from "./Select/index.ts"; export * from "./Spinner/index.ts"; export * from "./switch/index.ts";