Skip to content

Commit

Permalink
[DS-487] Renamed Sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicky-comeau
vicky-comeau committed Nov 28, 2024
1 parent 87196c5 commit 865ddbe
Show file tree
Hide file tree
Showing 28 changed files with 145 additions and 137 deletions.
5 changes: 5 additions & 0 deletions .changeset/gentle-islands-search.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hopper-ui/components": patch
---

There is no longer a generic Section component. We now have ListBoxSection, SelectSection and ComboBoxSection.
6 changes: 3 additions & 3 deletions packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
6 changes: 3 additions & 3 deletions packages/components/src/ComboBox/docs/allowCustomValue.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/ComboBox/docs/controlled.tsx
View file
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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>
);
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/ComboBox/src/ComboBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 };
34 changes: 17 additions & 17 deletions packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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: {
Expand All @@ -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: {
Expand Down
18 changes: 9 additions & 9 deletions packages/components/src/ListBox/docs/ListBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -159,13 +159,13 @@ export const MultipleSelection = {
<ListBoxItem id="3">Item 3</ListBoxItem>
<ListBoxItem id="4">Item 4</ListBoxItem>
<ListBoxItem id="5">Item 5</ListBoxItem>
<Section aria-label="section">
<ListBoxSection aria-label="section">
<ListBoxItem id="6">Item 6</ListBoxItem>
<ListBoxItem id="7">Item 7</ListBoxItem>
<ListBoxItem id="8">Item 8</ListBoxItem>
<ListBoxItem id="9">Item 9</ListBoxItem>
<ListBoxItem id="10">Item 10</ListBoxItem>
</Section>
</ListBoxSection>
</ListBox>
);
},
Expand Down Expand Up @@ -357,22 +357,22 @@ export const Sections = {
<ListBoxItem>Item 3</ListBoxItem>
<ListBoxItem>Item 4</ListBoxItem>
<ListBoxItem>Item 5</ListBoxItem>
<Section >
<ListBoxSection >
<Header>More Items</Header>
<ListBoxItem>Item 6</ListBoxItem>
<ListBoxItem>Item 7</ListBoxItem>
<ListBoxItem>Item 8</ListBoxItem>
<ListBoxItem>Item 9</ListBoxItem>
<ListBoxItem>Item 10</ListBoxItem>
</Section>
<Section>
</ListBoxSection>
<ListBoxSection>
<Header>Even More Items</Header>
<ListBoxItem>Item 11</ListBoxItem>
<ListBoxItem>Item 12</ListBoxItem>
<ListBoxItem>Item 13</ListBoxItem>
<ListBoxItem>Item 14</ListBoxItem>
<ListBoxItem>Item 15</ListBoxItem>
</Section>
</ListBoxSection>
<ListBoxItem>Item 16</ListBoxItem>
</ListBox>
);
Expand Down Expand Up @@ -432,12 +432,12 @@ export const DynamicLists = {
const listSection = section as ListSectionProps;

return (
<Section id={listSection.name}>
<ListBoxSection id={listSection.name}>
<Header>{listSection.name}</Header>
<Collection items={listSection.children}>
{item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
</Collection>
</Section>
</ListBoxSection>
);
}}
</ListBox>
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/ListBox/docs/dynamicLists.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -59,12 +59,12 @@ export default function Example() {
const listSection = section as ListSectionProps;

return (
<Section id={listSection.name}>
<ListBoxSection id={listSection.name}>
<Header>{listSection.name}</Header>
<Collection items={listSection.children}>
{item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
</Collection>
</Section>
</ListBoxSection>
);
}}
</ListBox>
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/ListBox/docs/multipleSelected.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -12,18 +12,18 @@ export default function Example() {
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<Section aria-label="section">
<ListBoxSection aria-label="section">
<Header>Self review</Header>
<ListBoxItem id="1">Overdue</ListBoxItem>
<ListBoxItem id="2">In progress</ListBoxItem>
<ListBoxItem id="3">Submitted</ListBoxItem>
</Section>
<Section aria-label="section">
</ListBoxSection>
<ListBoxSection aria-label="section">
<Header>Manager review</Header>
<ListBoxItem id="4">Overdue</ListBoxItem>
<ListBoxItem id="5">In progress</ListBoxItem>
<ListBoxItem id="6">Submitted</ListBoxItem>
</Section>
</ListBoxSection>
</ListBox>
);
}
10 changes: 5 additions & 5 deletions packages/components/src/ListBox/docs/section.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<ListBox selectionMode="single" aria-label="list of options">
<ListBoxItem>Developer</ListBoxItem>
<ListBoxItem>Manager</ListBoxItem>
<Section>
<ListBoxSection>
<Header>Creative Department</Header>
<ListBoxItem>Designer</ListBoxItem>
<ListBoxItem>Copywriter</ListBoxItem>
<ListBoxItem>UX Researcher</ListBoxItem>
</Section>
<Section>
</ListBoxSection>
<ListBoxSection>
<Header>Operations</Header>
<ListBoxItem>Project Coordinator</ListBoxItem>
<ListBoxItem>QA Specialist</ListBoxItem>
</Section>
</ListBoxSection>
<ListBoxItem>Product Owner</ListBoxItem>
</ListBox>
);
Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/ListBox/src/ListBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -147,7 +147,7 @@ function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTM
[HeaderContext, {
className: styles["hop-ListBox__section-header"]
}],
[SectionContext, {
[ListBoxSectionContext, {
className: styles["hop-ListBox__section"]
}],
[ListBoxItemContext, {
Expand Down Expand Up @@ -199,3 +199,4 @@ const _ListBox = forwardRef(ListBox) as <T>(
(_ListBox as NamedExoticComponent).displayName = "ListBox";

export { _ListBox as ListBox };

Loading

0 comments on commit 865ddbe

Please sign in to comment.