Skip to content

feat(app-headless-cms): separator field #4796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
brunozoric wants to merge 5 commits into
base: next
Choose a base branch
from
+422 −21
Draft

feat(app-headless-cms): separator field #4796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e2a58bd
wip(app-headless-cms): separator field
brunozoric Dec 4, 2025
01485c6
wip(app-headless-cms): separator field
brunozoric Dec 5, 2025
76739b2
fix: add "accent" variant
adrians5j Dec 8, 2025
334b95c
fix: add label support to Separator component
adrians5j Dec 8, 2025
5ed3d93
feat: update Separator component to use "accent" variant and simplify…
adrians5j Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 271 additions & 3 deletions packages/admin-ui/src/Separator/Separator.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ export const Documentation: Story = {
variant: "dimmed",
margin: "none",
orientation: "horizontal",
decorative: true
decorative: true,
children: undefined,
labelPosition: "middle"
},
argTypes: {
margin: {
Expand All @@ -37,7 +39,7 @@ export const Documentation: Story = {
variant: {
description: "The visual style variant of the separator.",
control: "select",
options: ["transparent", "base", "dimmed", "muted", "strong"]
options: ["transparent", "base", "dimmed", "muted", "strong", "accent"]
},
orientation: {
description: "The orientation of the separator.",
Expand All @@ -48,6 +50,16 @@ export const Documentation: Story = {
description:
"Whether the separator is purely decorative and should be hidden from screen readers.",
control: "boolean"
},
children: {
description:
"Optional label text to display with the separator. Text will use text-neutral-primary text-md font-semibold styles.",
control: "text"
},
labelPosition: {
description: "Position of the label when children are provided.",
control: "select",
options: ["start", "middle", "end"]
}
},
render: props => {
Expand Down Expand Up @@ -101,7 +113,7 @@ export const Default: Story = {
},
variant: {
control: "select",
options: ["transparent", "base", "dimmed", "muted", "strong"]
options: ["transparent", "base", "dimmed", "muted", "strong", "accent"]
}
}
};
Expand Down Expand Up @@ -213,3 +225,259 @@ export const MoreMargin: Story = {
);
}
};

export const Transparent: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<Heading level={6}>{"Transparent Variant"}</Heading>
<Text size="sm" className={"text-neutral-strong"}>
{"This separator is transparent and not visible"}
</Text>
</div>
<Separator margin={"lg"} variant="transparent" />
<div className="flex items-center h-6 text-sm">
<Text>{"This is text 1."}</Text>
</div>
</div>
);
}
};

export const Base: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<Heading level={6}>{"Base Variant"}</Heading>
<Text size="sm" className={"text-neutral-strong"}>
{"This separator uses bg-white"}
</Text>
</div>
<Separator margin={"lg"} variant="base" />
<div className="flex items-center h-6 text-sm">
<Text>{"This is text 1."}</Text>
</div>
</div>
);
}
};

export const Muted: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<Heading level={6}>{"Muted Variant"}</Heading>
<Text size="sm" className={"text-neutral-strong"}>
{"This separator uses bg-neutral-muted"}
</Text>
</div>
<Separator margin={"lg"} variant="muted" />
<div className="flex items-center h-6 text-sm">
<Text>{"This is text 1."}</Text>
</div>
</div>
);
}
};

export const Strong: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<Heading level={6}>{"Strong Variant"}</Heading>
<Text size="sm" className={"text-neutral-strong"}>
{"This separator uses bg-neutral-strong"}
</Text>
</div>
<Separator margin={"lg"} variant="strong" />
<div className="flex items-center h-6 text-sm">
<Text>{"This is text 1."}</Text>
</div>
</div>
);
}
};

export const Accent: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<Heading level={6}>{"Accent Variant"}</Heading>
<Text size="sm" className={"text-neutral-strong"}>
{"This separator uses bg-primary"}
</Text>
</div>
<Separator margin={"lg"} variant="accent" />
<div className="flex items-center h-6 text-sm">
<Text>{"This is text 1."}</Text>
</div>
</div>
);
}
};

export const AllVariants: Story = {
render: () => {
return (
<div className="space-y-8">
<div>
<Heading level={6}>{"Transparent"}</Heading>
<Separator margin={"lg"} variant="transparent" />
<Text size="sm">{"Not visible"}</Text>
</div>
<div>
<Heading level={6}>{"Base"}</Heading>
<Separator margin={"lg"} variant="base" />
<Text size="sm">{"bg-white"}</Text>
</div>
<div>
<Heading level={6}>{"Dimmed (default)"}</Heading>
<Separator margin={"lg"} variant="dimmed" />
<Text size="sm">{"bg-neutral-dimmed"}</Text>
</div>
<div>
<Heading level={6}>{"Muted"}</Heading>
<Separator margin={"lg"} variant="muted" />
<Text size="sm">{"bg-neutral-muted"}</Text>
</div>
<div>
<Heading level={6}>{"Strong"}</Heading>
<Separator margin={"lg"} variant="strong" />
<Text size="sm">{"bg-neutral-strong"}</Text>
</div>
<div>
<Heading level={6}>{"Accent"}</Heading>
<Separator margin={"lg"} variant="accent" />
<Text size="sm">{"bg-primary"}</Text>
</div>
</div>
);
}
};

export const WithLabelMiddle: Story = {
render: () => {
return (
<div className="space-y-8">
<div>
<Heading level={6}>{"Separator with label in the middle"}</Heading>
<Text size="sm" className="text-neutral-strong mb-4">
{"Label is positioned in the center (default)"}
</Text>
<Separator variant="dimmed" labelPosition="middle">
{"OR"}
</Separator>
</div>
<div>
<Separator variant="muted" labelPosition="middle">
{"Section Title"}
</Separator>
</div>
<div>
<Separator variant="accent" labelPosition="middle">
{"Important"}
</Separator>
</div>
</div>
);
}
};

export const WithLabelStart: Story = {
render: () => {
return (
<div className="space-y-8">
<div>
<Heading level={6}>{"Separator with label at start"}</Heading>
<Text size="sm" className="text-neutral-strong mb-4">
{"Label is positioned at the beginning"}
</Text>
<Separator variant="dimmed" labelPosition="start">
{"Start"}
</Separator>
</div>
<div>
<Separator variant="muted" labelPosition="start">
{"Section 1"}
</Separator>
</div>
<div>
<Separator variant="accent" labelPosition="start">
{"New Feature"}
</Separator>
</div>
</div>
);
}
};

export const WithLabelEnd: Story = {
render: () => {
return (
<div className="space-y-8">
<div>
<Heading level={6}>{"Separator with label at end"}</Heading>
<Text size="sm" className="text-neutral-strong mb-4">
{"Label is positioned at the end"}
</Text>
<Separator variant="dimmed" labelPosition="end">
{"End"}
</Separator>
</div>
<div>
<Separator variant="muted" labelPosition="end">
{"See More"}
</Separator>
</div>
<div>
<Separator variant="accent" labelPosition="end">
{"Continue"}
</Separator>
</div>
</div>
);
}
};

export const WithLabelVertical: Story = {
render: () => {
return (
<div>
<Heading level={6} className="mb-4">
{"Vertical separator with labels"}
</Heading>
<div className="flex gap-8" style={{ height: "200px" }}>
<div className="flex flex-col items-center">
<Text size="sm" className="text-neutral-strong mb-2">
{"Start"}
</Text>
<Separator orientation="vertical" variant="dimmed" labelPosition="start">
{"Top"}
</Separator>
</div>
<div className="flex flex-col items-center">
<Text size="sm" className="text-neutral-strong mb-2">
{"Middle"}
</Text>
<Separator orientation="vertical" variant="muted" labelPosition="middle">
{"Center"}
</Separator>
</div>
<div className="flex flex-col items-center">
<Text size="sm" className="text-neutral-strong mb-2">
{"End"}
</Text>
<Separator orientation="vertical" variant="accent" labelPosition="end">
{"Bottom"}
</Separator>
</div>
</div>
</div>
);
}
};
Loading
Loading