[DS-487] Renamed Sections (#535)

gsoft-inc · Nov 28, 2024 · 478f081 · 478f081
2 parents 709b356 + 6aeb750
commit 478f081
Show file tree

Hide file tree

Showing 33 changed files with 169 additions and 211 deletions.
diff --git a/.changeset/gentle-islands-search.md 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
@@ -35,7 +35,7 @@ links:
 
 A `ListBox` uses the following components.
 
-<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Section", "Text"]}/>
+<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
 ## Usage
 
@@ -170,6 +170,10 @@ List box items can vary in sizes.
 
 <PropTable component="ListBox" />
 
+### ListBoxSection
+
+<PropTable component="ListBoxSection" />
+
 ### ListBoxItem
 
 <PropTable component="ListBoxItem" />

diff --git a/apps/docs/content/components/collections/Section.mdx b/apps/docs/content/components/collections/Section.mdx
diff --git 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.
 
-<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Section", "Text"]}/>
+<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
 ## Usage
 
@@ -197,5 +197,15 @@ A combo box item can have a description.
 
 ## Props
 
+### ComboBox
+
 <PropTable component="ComboBox" />
 
+### ComboBoxSection
+
+<PropTable component="ListBoxSection" />
+
+### ComboBoxItem
+
+<PropTable component="ListBoxItem" />
+
diff --git 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.
 
-<ComposedComponents components={["Avatar", "Badge", "Header",  "Icon", "Section", "Text"]}/>
+<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
 ## Usage
 
@@ -198,8 +198,18 @@ A select item can have a description.
 
 ## Props
 
+### Select
+
 <PropTable component="Select" />
 
+### SelectSection
+
+<PropTable component="ListBoxSection" />
+
+### SelectItem
+
+<PropTable component="ListBoxItem" />
+
 ## Migration Notes
 
 <MigrateGuide src="Select/docs/migration-notes" />
diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
@@ -152,9 +152,6 @@ export const Previews: Record<string, Preview> = {
     "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
@@ -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 (
-                        <Section id={sectionName}>
+                        <ComboBoxSection id={sectionName}>
                             <Header>{sectionName}</Header>
                             <Collection items={children}>
                                 {item => <ComboBoxItem id={item.id}>{item.role}</ComboBoxItem>}
                             </Collection>
-                        </Section>
+                        </ComboBoxSection>
                     );
                 }}
             </ComboBox>

diff --git 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 (
         <ComboBox label="Roles">
             <ComboBoxItem id="developer">Developer</ComboBoxItem>
             <ComboBoxItem id="manager">Manager</ComboBoxItem>
-            <Section>
+            <ComboBoxSection>
                 <Header>Operations</Header>
                 <ComboBoxItem id="project-coordinator">Project Coordinator</ComboBoxItem>
                 <ComboBoxItem id="qa-specialist">QA Specialist</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Creative Department</Header>
                 <ComboBoxItem id="designer">Designer</ComboBoxItem>
                 <ComboBoxItem id="copywriter">Copywriter</ComboBoxItem>
                 <ComboBoxItem id="ux-researcher">UX Researcher</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     );
 }
diff --git 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 (
         <ComboBox allowsCustomValue label="Roles">
-            <Section key="1">
+            <ComboBoxSection key="1">
                 <Header>Creative Department</Header>
                 <ComboBoxItem id="1">Designer</ComboBoxItem>
                 <ComboBoxItem id="2">Content creator</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
             <ComboBoxItem key="2" id="3">Manager</ComboBoxItem>
         </ComboBox>
     );

diff --git 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 (
         <ComboBox selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
-            <Section key="1">
+            <ComboBoxSection key="1">
                 <Header>Operations</Header>
                 <ComboBoxItem id="1">Project Coordinator</ComboBoxItem>
                 <ComboBoxItem id="2">QA Specialist</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
             <ComboBoxItem key="2" id="3">Manager</ComboBoxItem>
         </ComboBox>
     );

diff --git 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 <T extends object>(
 ) => ReturnType<typeof ComboBox>;
 (_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
@@ -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 => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     play: playFn,
@@ -112,19 +112,19 @@ export const FieldHelperMessage = {
 export const Footer = {
     render: args => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     play: playFn,
@@ -138,19 +138,19 @@ export const Small = {
     play: playFn,
     render: args => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     args: {
@@ -165,19 +165,19 @@ export const Medium = {
     play: playFn,
     render: args => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     args: {