Merge branch 'alpha' into feature/guides

gsoft-inc · Nov 29, 2024 · 88b3779 · 88b3779
2 parents aca3c00 + 5a905d9
commit 88b3779
Show file tree

Hide file tree

Showing 36 changed files with 171 additions and 215 deletions.
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/apps/docs/examples/overview/Section.svg b/apps/docs/examples/overview/Section.svg
diff --git a/apps/docs/examples/overview/index.ts b/apps/docs/examples/overview/index.ts
@@ -32,7 +32,6 @@ import PasswordField from "./PasswordField.svg";
 import Popover from "./Popover.svg";
 import RadioGroup from "./RadioGroup.svg";
 import SearchField from "./SearchField.svg";
-import Section from "./Section.svg";
 import Select from "./Select.svg";
 import Spinner from "./Spinner.svg";
 import Stack from "./Stack.svg";
@@ -81,7 +80,6 @@ export const OverviewComponents: OverviewComponentsType = {
     Popover,
     RadioGroup,
     SearchField,
-    Section,
     Select,
     Spinner,
     Stack,

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @hopper-ui/components
 
+## 1.3.35
+
+### Patch Changes
+
+- 865ddbe: There is no longer a generic Section component. We now have ListBoxSection, SelectSection and ComboBoxSection.
+
 ## 1.3.34
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@hopper-ui/components",
     "author": "Workleap",
-    "version": "1.3.34",
+    "version": "1.3.35",
     "description": "The components package.",
     "license": "Apache-2.0",
     "repository": {

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: {