This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch docs/federate-storybook
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/docs/federate-storybook by
this push:
new 7c2e3cc8a0 fix(docs): show both horizontal and vertical Divider
examples
7c2e3cc8a0 is described below
commit 7c2e3cc8a0426d467a967b8234ce496802e8df8a
Author: Evan Rusackas <[email protected]>
AuthorDate: Tue Jan 20 19:33:53 2026 -0800
fix(docs): show both horizontal and vertical Divider examples
Vertical dividers need surrounding content to be visible (they're meant
for inline separation). Instead of adding complex wrapper support,
simplified the story to:
- Show horizontal divider in interactive controls
- Show both types in the liveExample with proper context
Co-Authored-By: Claude Opus 4.5 <[email protected]>
---
docs/developer_portal/components/ui/divider.mdx | 54 ++++++++++++-------------
1 file changed, 27 insertions(+), 27 deletions(-)
diff --git a/docs/developer_portal/components/ui/divider.mdx
b/docs/developer_portal/components/ui/divider.mdx
index f7abf1ee7a..5933e6d659 100644
--- a/docs/developer_portal/components/ui/divider.mdx
+++ b/docs/developer_portal/components/ui/divider.mdx
@@ -36,14 +36,14 @@ The Divider component from Superset's UI library.
dashed: false,
variant: "solid",
orientation: "center",
- plain: true,
- type: "horizontal"
+ plain: true
}}
controls={[
{
name: "dashed",
label: "Dashed",
- type: "boolean"
+ type: "boolean",
+ description: "Whether line is dashed (deprecated, use variant)."
},
{
name: "variant",
@@ -53,7 +53,8 @@ The Divider component from Superset's UI library.
"dashed",
"dotted",
"solid"
- ]
+ ],
+ description: "Line style of the divider."
},
{
name: "orientation",
@@ -63,26 +64,20 @@ The Divider component from Superset's UI library.
"left",
"right",
"center"
- ]
+ ],
+ description: "Position of title inside divider."
},
{
name: "plain",
label: "Plain",
- type: "boolean"
- },
- {
- name: "type",
- label: "Type",
- type: "select",
- options: [
- "horizontal",
- "vertical"
- ]
+ type: "boolean",
+ description: "Use plain style without bold title."
},
{
name: "orientationMargin",
label: "Orientation Margin",
- type: "text"
+ type: "text",
+ description: "Margin from divider edge to title."
}
]}
/>
@@ -94,12 +89,18 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
- <Divider
- variant="solid"
- orientation="center"
- plain
- type="horizontal"
- />
+ <>
+ <p>Horizontal divider separates sections:</p>
+ <Divider />
+ <p>Vertical divider separates inline elements:</p>
+ <div style={{ display: 'flex', alignItems: 'center' }}>
+ <span>Link</span>
+ <Divider type="vertical" />
+ <span>Link</span>
+ <Divider type="vertical" />
+ <span>Link</span>
+ </div>
+ </>
);
}
```
@@ -108,11 +109,10 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `dashed` | `boolean` | `false` | - |
-| `variant` | `string` | `"solid"` | - |
-| `orientation` | `string` | `"center"` | - |
-| `plain` | `boolean` | `true` | - |
-| `type` | `string` | `"horizontal"` | - |
+| `dashed` | `boolean` | `false` | Whether line is dashed (deprecated, use
variant). |
+| `variant` | `string` | `"solid"` | Line style of the divider. |
+| `orientation` | `string` | `"center"` | Position of title inside divider. |
+| `plain` | `boolean` | `true` | Use plain style without bold title. |
## Import