You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2026/01/28 00:37:24 UTC
(superset) branch docs/federate-storybook updated (1c87270c5e0 -> 2c06240b657)
This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a change to branch docs/federate-storybook
in repository https://gitbox.apache.org/repos/asf/superset.git
from 1c87270c5e0 docs(EmptyState): add all props with interactive controls
new 13791c38697 docs(components): add Icons page, examples pattern, and editor improvements
new 2c06240b657 docs(components): fix 10 story migrations for Docs build
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
AGENTS.md | 24 ++
docs/.claude/instructions.md | 115 +++++
.../components/design-system/flex.mdx | 13 +-
.../components/design-system/space.mdx | 13 +-
docs/developer_portal/components/index.mdx | 4 +-
.../components/ui/autocomplete.mdx | 13 +-
docs/developer_portal/components/ui/avatar.mdx | 13 +-
docs/developer_portal/components/ui/badge.mdx | 43 +-
docs/developer_portal/components/ui/breadcrumb.mdx | 13 +-
docs/developer_portal/components/ui/button.mdx | 13 +-
.../developer_portal/components/ui/buttongroup.mdx | 13 +-
docs/developer_portal/components/ui/card.mdx | 13 +-
docs/developer_portal/components/ui/checkbox.mdx | 77 +++-
docs/developer_portal/components/ui/collapse.mdx | 13 +-
docs/developer_portal/components/ui/datepicker.mdx | 13 +-
docs/developer_portal/components/ui/divider.mdx | 13 +-
.../components/ui/editabletitle.mdx | 13 +-
docs/developer_portal/components/ui/emptystate.mdx | 50 ++-
docs/developer_portal/components/ui/favestar.mdx | 38 +-
docs/developer_portal/components/ui/iconbutton.mdx | 52 ++-
docs/developer_portal/components/ui/icons.mdx | 196 ++++++++-
.../developer_portal/components/ui/icontooltip.mdx | 28 +-
docs/developer_portal/components/ui/index.mdx | 3 +-
.../developer_portal/components/ui/infotooltip.mdx | 13 +-
docs/developer_portal/components/ui/input.mdx | 29 +-
docs/developer_portal/components/ui/label.mdx | 13 +-
docs/developer_portal/components/ui/list.mdx | 59 ++-
.../components/ui/listviewcard.mdx | 81 +++-
docs/developer_portal/components/ui/loading.mdx | 140 ++++--
docs/developer_portal/components/ui/menu.mdx | 118 +++--
docs/developer_portal/components/ui/modal.mdx | 134 ++++--
.../components/ui/modaltrigger.mdx | 129 ++++--
docs/developer_portal/components/ui/popover.mdx | 120 +++++-
.../developer_portal/components/ui/progressbar.mdx | 143 ++++++-
docs/developer_portal/components/ui/radio.mdx | 67 ++-
docs/developer_portal/components/ui/select.mdx | 418 +++++++++---------
docs/developer_portal/components/ui/skeleton.mdx | 59 +--
docs/developer_portal/components/ui/slider.mdx | 178 +++++---
docs/developer_portal/components/ui/steps.mdx | 175 ++++++--
docs/developer_portal/components/ui/switch.mdx | 133 ++++--
docs/developer_portal/components/ui/tableview.mdx | 187 ++++++--
docs/developer_portal/components/ui/tabs.mdx | 13 +-
docs/developer_portal/components/ui/timer.mdx | 13 +-
docs/developer_portal/components/ui/tooltip.mdx | 13 +-
docs/developer_portal/components/ui/treeselect.mdx | 115 ++---
docs/developer_portal/components/ui/typography.mdx | 173 ++++++--
.../components/ui/unsavedchangesmodal.mdx | 13 +-
docs/scripts/generate-superset-components.mjs | 139 +++++-
docs/src/components/StorybookWrapper.jsx | 102 ++++-
docs/src/styles/custom.css | 31 ++
.../src/components/Badge/Badge.stories.tsx | 40 +-
.../src/components/Checkbox/Checkbox.stories.tsx | 68 +++
.../EditableTitle/EditableTitle.stories.tsx | 61 +++
.../components/EmptyState/EmptyState.stories.tsx | 121 +++++-
.../src/components/FaveStar/FaveStar.stories.tsx | 41 ++
.../src/components/FaveStar/index.tsx | 2 +-
.../src/components/Grid/Grid.stories.tsx | 247 +++++------
.../components/IconButton/IconButton.stories.tsx | 53 ++-
.../components/IconTooltip/IconTooltip.stories.tsx | 22 +
.../src/components/Icons/Icons.stories.tsx | 178 ++++++++
.../src/components/Input/Input.stories.tsx | 16 +-
.../src/components/Layout/Layout.stories.tsx | 177 +++++---
.../src/components/List/List.stories.tsx | 31 +-
.../ListViewCard/ListViewCard.stories.tsx | 102 ++++-
.../src/components/Loading/Loading.stories.tsx | 105 ++++-
.../src/components/Menu/Menu.stories.tsx | 97 ++++-
.../src/components/Modal/Modal.stories.tsx | 121 +++++-
.../ModalTrigger/ModalTrigger.stories.tsx | 119 +++++-
.../src/components/Popover/Popover.stories.tsx | 141 ++++--
.../components/ProgressBar/ProgressBar.stories.tsx | 171 ++++++--
.../src/components/Radio/Radio.stories.tsx | 72 +++-
.../src/components/Select/Select.stories.tsx | 372 ++++++++++------
.../src/components/Skeleton/Skeleton.stories.tsx | 141 +++---
.../src/components/Slider/Slider.stories.tsx | 174 +++++++-
.../src/components/Steps/Steps.stories.tsx | 142 +++++-
.../src/components/Switch/Switch.stories.tsx | 119 +++++-
.../src/components/TableView/TableView.stories.tsx | 145 ++++++-
.../components/TreeSelect/TreeSelect.stories.tsx | 314 ++++++--------
.../components/Typography/Typography.stories.tsx | 475 ++++++++++++++++-----
79 files changed, 5513 insertions(+), 1948 deletions(-)
create mode 100644 docs/.claude/instructions.md
(superset) 02/02: docs(components): fix 10 story migrations for Docs build
Posted by ru...@apache.org.
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
commit 2c06240b657638eeca746cd5911fad19685f90a8
Author: Evan Rusackas <ev...@rusackas.com>
AuthorDate: Tue Jan 27 16:37:03 2026 -0800
docs(components): fix 10 story migrations for Docs build
Fix stories that were broken or incomplete in the Docs build:
- Menu: add staticProps for items array, examples for vertical/icons
- Modal: add triggerProp/onHideProp pattern so modal doesn't auto-open
- ModalTrigger: fix staticProps triggerNode (string instead of nested Button)
- Popover: add sampleChildren for trigger element, fix content extraction
- ProgressBar: inline args/argTypes (remove spread refs), add all controls
- Select: restructure to CSF2, add staticProps for options, fix garbled controls
- Slider: add descriptions, liveExample, range/marks/vertical examples
- Steps: add staticProps for items array, add vertical/status/dot examples
- Switch: demonstrate title as hover tooltip, add settings panel example
- TableView: add staticProps for columns/data to fix crash, match Storybook data
Generator fixes:
- Clear options on non-select/radio types (fixes false-positive shorthand detection)
StorybookWrapper fixes:
- Skip extractChildren when sampleChildren is provided (fixes Popover content extraction)
Co-Authored-By: Claude Opus 4.5 <no...@anthropic.com>
---
docs/developer_portal/components/ui/menu.mdx | 105 +++++-
docs/developer_portal/components/ui/modal.mdx | 121 ++++--
.../components/ui/modaltrigger.mdx | 116 ++++--
docs/developer_portal/components/ui/popover.mdx | 107 +++++-
.../developer_portal/components/ui/progressbar.mdx | 82 ++++-
docs/developer_portal/components/ui/select.mdx | 405 +++++++++++----------
docs/developer_portal/components/ui/slider.mdx | 165 ++++++---
docs/developer_portal/components/ui/steps.mdx | 162 +++++++--
docs/developer_portal/components/ui/switch.mdx | 120 +++++-
docs/developer_portal/components/ui/tableview.mdx | 172 +++++++--
docs/scripts/generate-superset-components.mjs | 33 +-
docs/src/components/StorybookWrapper.jsx | 45 ++-
.../src/components/Menu/Menu.stories.tsx | 97 ++++-
.../src/components/Modal/Modal.stories.tsx | 121 +++++-
.../ModalTrigger/ModalTrigger.stories.tsx | 119 +++++-
.../src/components/Popover/Popover.stories.tsx | 141 +++++--
.../components/ProgressBar/ProgressBar.stories.tsx | 114 ++++--
.../src/components/Select/Select.stories.tsx | 372 ++++++++++++-------
.../src/components/Slider/Slider.stories.tsx | 174 ++++++++-
.../src/components/Steps/Steps.stories.tsx | 142 +++++++-
.../src/components/Switch/Switch.stories.tsx | 119 +++++-
.../src/components/TableView/TableView.stories.tsx | 145 +++++++-
22 files changed, 2511 insertions(+), 666 deletions(-)
diff --git a/docs/developer_portal/components/ui/menu.mdx b/docs/developer_portal/components/ui/menu.mdx
index bf895c42b9e..7dd4baac68d 100644
--- a/docs/developer_portal/components/ui/menu.mdx
+++ b/docs/developer_portal/components/ui/menu.mdx
@@ -26,24 +26,35 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Menu
-The Menu component from Superset's UI library.
+Navigation menu component supporting horizontal, vertical, and inline modes. Based on Ant Design Menu with Superset styling.
## Live Example
<StoryWithControls
component="Menu"
props={{
- inlineCollapsed: false,
mode: "horizontal",
- multiple: false,
- selectable: true
+ selectable: true,
+ items: [
+ {
+ label: "Dashboards",
+ key: "dashboards"
+ },
+ {
+ label: "Charts",
+ key: "charts"
+ },
+ {
+ label: "Datasets",
+ key: "datasets"
+ },
+ {
+ label: "SQL Lab",
+ key: "sqllab"
+ }
+ ]
}}
controls={[
- {
- name: "inlineCollapsed",
- label: "Inline Collapsed",
- type: "boolean"
- },
{
name: "mode",
label: "Mode",
@@ -52,17 +63,26 @@ The Menu component from Superset's UI library.
"horizontal",
"vertical",
"inline"
- ]
+ ],
+ description: "Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible."
+ },
+ {
+ name: "selectable",
+ label: "Selectable",
+ type: "boolean",
+ description: "Whether menu items can be selected."
},
{
name: "multiple",
label: "Multiple",
- type: "boolean"
+ type: "boolean",
+ description: "Allow multiple items to be selected."
},
{
- name: "selectable",
- label: "Selectable",
- type: "boolean"
+ name: "inlineCollapsed",
+ label: "Inline Collapsed",
+ type: "boolean",
+ description: "Whether the inline menu is collapsed (only applies to inline mode)."
}
]}
/>
@@ -77,6 +97,56 @@ function Demo() {
<Menu
mode="horizontal"
selectable
+ items={[
+ { label: 'Dashboards', key: 'dashboards' },
+ { label: 'Charts', key: 'charts' },
+ { label: 'Datasets', key: 'datasets' },
+ { label: 'SQL Lab', key: 'sqllab' },
+ ]}
+ />
+ );
+}
+```
+
+## Vertical Menu
+
+```tsx live
+function VerticalMenu() {
+ return (
+ <Menu
+ mode="vertical"
+ style={{ width: 200 }}
+ items={[
+ { label: 'Dashboards', key: 'dashboards' },
+ { label: 'Charts', key: 'charts' },
+ { label: 'Datasets', key: 'datasets' },
+ {
+ label: 'Settings',
+ key: 'settings',
+ children: [
+ { label: 'Profile', key: 'profile' },
+ { label: 'Preferences', key: 'preferences' },
+ ],
+ },
+ ]}
+ />
+ );
+}
+```
+
+## Menu with Icons
+
+```tsx live
+function MenuWithIcons() {
+ return (
+ <Menu
+ mode="horizontal"
+ items={[
+ { label: <><Icons.DashboardOutlined /> Dashboards</>, key: 'dashboards' },
+ { label: <><Icons.LineChartOutlined /> Charts</>, key: 'charts' },
+ { label: <><Icons.DatabaseOutlined /> Datasets</>, key: 'datasets' },
+ { label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, key: 'sqllab' },
+ ]}
/>
);
}
@@ -86,10 +156,9 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `inlineCollapsed` | `boolean` | `false` | - |
-| `mode` | `string` | `"horizontal"` | - |
-| `multiple` | `boolean` | `false` | - |
-| `selectable` | `boolean` | `true` | - |
+| `mode` | `string` | `"horizontal"` | Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible. |
+| `selectable` | `boolean` | `true` | Whether menu items can be selected. |
+| `items` | `any` | `[{"label":"Dashboards","key":"dashboards"},{"label":"Charts","key":"charts"},{"label":"Datasets","key":"datasets"},{"label":"SQL Lab","key":"sqllab"}]` | - |
## Import
diff --git a/docs/developer_portal/components/ui/modal.mdx b/docs/developer_portal/components/ui/modal.mdx
index b5be3d4a462..67a984dabb2 100644
--- a/docs/developer_portal/components/ui/modal.mdx
+++ b/docs/developer_portal/components/ui/modal.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Modal
-The Modal component from Superset's UI library.
+Modal dialog component for displaying content that requires user attention or interaction. Supports customizable buttons, drag/resize, and confirmation dialogs.
## Live Example
@@ -34,9 +34,9 @@ The Modal component from Superset's UI library.
component="Modal"
props={{
disablePrimaryButton: false,
- primaryButtonName: "Danger",
- primaryButtonStyle: "danger",
- show: true,
+ primaryButtonName: "Submit",
+ primaryButtonStyle: "primary",
+ show: false,
title: "I'm a modal!",
resizable: false,
draggable: false,
@@ -46,12 +46,14 @@ The Modal component from Superset's UI library.
{
name: "disablePrimaryButton",
label: "Disable Primary Button",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the primary button is disabled."
},
{
name: "primaryButtonName",
label: "Primary Button Name",
- type: "text"
+ type: "text",
+ description: "Text for the primary action button."
},
{
name: "primaryButtonStyle",
@@ -69,30 +71,36 @@ The Modal component from Superset's UI library.
{
name: "show",
label: "Show",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the modal is visible. Use the \"Try It\" example below for a working demo."
},
{
name: "title",
label: "Title",
- type: "text"
+ type: "text",
+ description: "Title displayed in the modal header."
},
{
name: "resizable",
label: "Resizable",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the modal can be resized by dragging corners."
},
{
name: "draggable",
label: "Draggable",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the modal can be dragged by its header."
},
{
name: "width",
label: "Width",
type: "number",
- description: "Width of the modal in pixels or as a string."
+ description: "Width of the modal in pixels."
}
]}
+ triggerProp="show"
+ onHideProp="onHide"
/>
## Try It
@@ -100,15 +108,74 @@ The Modal component from Superset's UI library.
Edit the code below to experiment with the component:
```tsx live
-function Demo() {
+function ModalDemo() {
+ const [isOpen, setIsOpen] = React.useState(false);
return (
- <Modal
- primaryButtonName="Danger"
- primaryButtonStyle="danger"
- show
- title="I'm a modal!"
- width={500}
- />
+ <>
+ <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+ <Modal
+ show={isOpen}
+ onHide={() => setIsOpen(false)}
+ title="Example Modal"
+ primaryButtonName="Submit"
+ onHandledPrimaryAction={() => {
+ alert('Submitted!');
+ setIsOpen(false);
+ }}
+ >
+ <p>This is the modal content. Click Submit or close the modal.</p>
+ </Modal>
+ </>
+ );
+}
+```
+
+## Danger Modal
+
+```tsx live
+function DangerModal() {
+ const [isOpen, setIsOpen] = React.useState(false);
+ return (
+ <>
+ <Button buttonStyle="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
+ <Modal
+ show={isOpen}
+ onHide={() => setIsOpen(false)}
+ title="Confirm Delete"
+ primaryButtonName="Delete"
+ primaryButtonStyle="danger"
+ onHandledPrimaryAction={() => {
+ alert('Deleted!');
+ setIsOpen(false);
+ }}
+ >
+ <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+ </Modal>
+ </>
+ );
+}
+```
+
+## Confirmation Dialogs
+
+```tsx live
+function ConfirmationDialogs() {
+ return (
+ <div style={{ display: 'flex', gap: 8 }}>
+ <Button onClick={() => Modal.confirm({
+ title: 'Confirm Action',
+ content: 'Are you sure you want to proceed?',
+ okText: 'Yes',
+ })}>Confirm</Button>
+ <Button onClick={() => Modal.warning({
+ title: 'Warning',
+ content: 'This action may have consequences.',
+ })}>Warning</Button>
+ <Button onClick={() => Modal.error({
+ title: 'Error',
+ content: 'Something went wrong.',
+ })}>Error</Button>
+ </div>
);
}
```
@@ -117,14 +184,14 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `disablePrimaryButton` | `boolean` | `false` | - |
-| `primaryButtonName` | `string` | `"Danger"` | - |
-| `primaryButtonStyle` | `string` | `"danger"` | The style of the primary action button. |
-| `show` | `boolean` | `true` | - |
-| `title` | `string` | `"I'm a modal!"` | - |
-| `resizable` | `boolean` | `false` | - |
-| `draggable` | `boolean` | `false` | - |
-| `width` | `number` | `500` | Width of the modal in pixels or as a string. |
+| `disablePrimaryButton` | `boolean` | `false` | Whether the primary button is disabled. |
+| `primaryButtonName` | `string` | `"Submit"` | Text for the primary action button. |
+| `primaryButtonStyle` | `string` | `"primary"` | The style of the primary action button. |
+| `show` | `boolean` | `false` | Whether the modal is visible. Use the "Try It" example below for a working demo. |
+| `title` | `string` | `"I'm a modal!"` | Title displayed in the modal header. |
+| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
+| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
+| `width` | `number` | `500` | Width of the modal in pixels. |
## Import
diff --git a/docs/developer_portal/components/ui/modaltrigger.mdx b/docs/developer_portal/components/ui/modaltrigger.mdx
index 350732bd059..1c3eddd84fc 100644
--- a/docs/developer_portal/components/ui/modaltrigger.mdx
+++ b/docs/developer_portal/components/ui/modaltrigger.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# ModalTrigger
-The ModalTrigger component from Superset's UI library.
+A component that renders a trigger element which opens a modal when clicked. Useful for actions that need confirmation or additional input.
## Live Example
@@ -34,66 +34,70 @@ The ModalTrigger component from Superset's UI library.
component="ModalTrigger"
props={{
isButton: true,
- modalTitle: "I am a modal title",
- modalBody: "I am a modal body",
- modalFooter: "I am a modal footer",
- tooltip: "I am a tooltip",
+ modalTitle: "Modal Title",
+ modalBody: "This is the modal body content.",
+ tooltip: "Click to open modal",
width: "600px",
maxWidth: "1000px",
responsive: true,
draggable: false,
- resizable: false
+ resizable: false,
+ triggerNode: "Click to Open Modal"
}}
controls={[
{
name: "isButton",
label: "Is Button",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to wrap the trigger in a button element."
},
{
name: "modalTitle",
label: "Modal Title",
- type: "text"
+ type: "text",
+ description: "Title displayed in the modal header."
},
{
name: "modalBody",
label: "Modal Body",
- type: "text"
- },
- {
- name: "modalFooter",
- label: "Modal Footer",
- type: "text"
+ type: "text",
+ description: "Content displayed in the modal body."
},
{
name: "tooltip",
label: "Tooltip",
- type: "text"
+ type: "text",
+ description: "Tooltip text shown on hover over the trigger."
},
{
name: "width",
label: "Width",
- type: "text"
+ type: "text",
+ description: "Width of the modal (e.g., \"600px\", \"80%\")."
},
{
name: "maxWidth",
label: "Max Width",
- type: "text"
+ type: "text",
+ description: "Maximum width of the modal."
},
{
name: "responsive",
label: "Responsive",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the modal should be responsive."
},
{
name: "draggable",
label: "Draggable",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the modal can be dragged by its header."
},
{
name: "resizable",
label: "Resizable",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the modal can be resized by dragging corners."
}
]}
/>
@@ -107,32 +111,72 @@ function Demo() {
return (
<ModalTrigger
isButton
- modalTitle="I am a modal title"
- modalBody="I am a modal body"
- modalFooter="I am a modal footer"
- tooltip="I am a tooltip"
- width="600px"
- maxWidth="1000px"
+ triggerNode={<span>Click to Open</span>}
+ modalTitle="Example Modal"
+ modalBody={<p>This is the modal content. You can put any React elements here.</p>}
+ width="500px"
responsive
/>
);
}
```
+## With Custom Trigger
+
+```tsx live
+function CustomTrigger() {
+ return (
+ <ModalTrigger
+ triggerNode={
+ <Button buttonStyle="primary">
+ <Icons.PlusOutlined /> Add New Item
+ </Button>
+ }
+ modalTitle="Add New Item"
+ modalBody={
+ <div>
+ <p>Fill out the form to add a new item.</p>
+ <Input placeholder="Item name" />
+ </div>
+ }
+ width="400px"
+ />
+ );
+}
+```
+
+## Draggable & Resizable
+
+```tsx live
+function DraggableModal() {
+ return (
+ <ModalTrigger
+ isButton
+ triggerNode={<span>Open Draggable Modal</span>}
+ modalTitle="Draggable & Resizable"
+ modalBody={<p>Try dragging the header or resizing from the corners!</p>}
+ draggable
+ resizable
+ width="500px"
+ />
+ );
+}
+```
+
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `isButton` | `boolean` | `true` | - |
-| `modalTitle` | `string` | `"I am a modal title"` | - |
-| `modalBody` | `string` | `"I am a modal body"` | - |
-| `modalFooter` | `string` | `"I am a modal footer"` | - |
-| `tooltip` | `string` | `"I am a tooltip"` | - |
-| `width` | `string` | `"600px"` | - |
-| `maxWidth` | `string` | `"1000px"` | - |
-| `responsive` | `boolean` | `true` | - |
-| `draggable` | `boolean` | `false` | - |
-| `resizable` | `boolean` | `false` | - |
+| `isButton` | `boolean` | `true` | Whether to wrap the trigger in a button element. |
+| `modalTitle` | `string` | `"Modal Title"` | Title displayed in the modal header. |
+| `modalBody` | `string` | `"This is the modal body content."` | Content displayed in the modal body. |
+| `tooltip` | `string` | `"Click to open modal"` | Tooltip text shown on hover over the trigger. |
+| `width` | `string` | `"600px"` | Width of the modal (e.g., "600px", "80%"). |
+| `maxWidth` | `string` | `"1000px"` | Maximum width of the modal. |
+| `responsive` | `boolean` | `true` | Whether the modal should be responsive. |
+| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
+| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
+| `triggerNode` | `string` | `"Click to Open Modal"` | The clickable element that opens the modal when clicked. |
## Import
diff --git a/docs/developer_portal/components/ui/popover.mdx b/docs/developer_portal/components/ui/popover.mdx
index eb4eb8ac803..554b469af16 100644
--- a/docs/developer_portal/components/ui/popover.mdx
+++ b/docs/developer_portal/components/ui/popover.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Popover
-The Popover component from Superset's UI library.
+A floating card that appears when hovering or clicking a trigger element. Supports configurable placement, trigger behavior, and custom content.
## Live Example
@@ -42,18 +42,20 @@ The Popover component from Superset's UI library.
{
name: "content",
label: "Content",
- type: "text"
+ type: "text",
+ description: "Content displayed inside the popover body."
},
{
name: "title",
label: "Title",
- type: "text"
+ type: "text",
+ description: "Title displayed in the popover header."
},
{
name: "arrow",
label: "Arrow",
type: "boolean",
- description: "Change arrow's visible state"
+ description: "Whether to show the popover's arrow pointing to the trigger."
},
{
name: "color",
@@ -64,14 +66,36 @@ The Popover component from Superset's UI library.
{
name: "placement",
label: "Placement",
- type: "select"
+ type: "select",
+ options: [
+ "topLeft",
+ "top",
+ "topRight",
+ "leftTop",
+ "left",
+ "leftBottom",
+ "rightTop",
+ "right",
+ "rightBottom",
+ "bottomLeft",
+ "bottom",
+ "bottomRight"
+ ],
+ description: "Position of the popover relative to the trigger element."
},
{
name: "trigger",
label: "Trigger",
- type: "select"
+ type: "select",
+ options: [
+ "hover",
+ "click",
+ "focus"
+ ],
+ description: "Event that triggers the popover to appear."
}
]}
+ sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
/>
## Try It
@@ -85,8 +109,69 @@ function Demo() {
content="Popover sample content"
title="Popover title"
arrow
- color="#fff"
- />
+ >
+ <Button>Hover me</Button>
+ </Popover>
+ );
+}
+```
+
+## Click Trigger
+
+```tsx live
+function ClickPopover() {
+ return (
+ <Popover
+ content="This popover appears on click."
+ title="Click Popover"
+ trigger="click"
+ >
+ <Button>Click me</Button>
+ </Popover>
+ );
+}
+```
+
+## Placements
+
+```tsx live
+function PlacementsDemo() {
+ return (
+ <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center', padding: '60px 0' }}>
+ {['top', 'right', 'bottom', 'left'].map(placement => (
+ <Popover
+ key={placement}
+ content={\`This popover is placed on the \${placement}\`}
+ title={placement}
+ placement={placement}
+ >
+ <Button>{placement}</Button>
+ </Popover>
+ ))}
+ </div>
+ );
+}
+```
+
+## Rich Content
+
+```tsx live
+function RichPopover() {
+ return (
+ <Popover
+ title="Dashboard Info"
+ content={
+ <div>
+ <p><strong>Created by:</strong> Admin</p>
+ <p><strong>Last modified:</strong> Jan 2025</p>
+ <p><strong>Charts:</strong> 12</p>
+ </div>
+ }
+ >
+ <Button buttonStyle="primary">
+ <Icons.InfoCircleOutlined /> View Details
+ </Button>
+ </Popover>
);
}
```
@@ -95,9 +180,9 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `content` | `string` | `"Popover sample content"` | - |
-| `title` | `string` | `"Popover title"` | - |
-| `arrow` | `boolean` | `true` | Change arrow's visible state |
+| `content` | `string` | `"Popover sample content"` | Content displayed inside the popover body. |
+| `title` | `string` | `"Popover title"` | Title displayed in the popover header. |
+| `arrow` | `boolean` | `true` | Whether to show the popover's arrow pointing to the trigger. |
| `color` | `string` | `"#fff"` | The background color of the popover. |
## Import
diff --git a/docs/developer_portal/components/ui/progressbar.mdx b/docs/developer_portal/components/ui/progressbar.mdx
index f7561da5365..b73ae47d14b 100644
--- a/docs/developer_portal/components/ui/progressbar.mdx
+++ b/docs/developer_portal/components/ui/progressbar.mdx
@@ -33,9 +33,20 @@ Progress bar component for displaying completion status. Supports line, circle,
<StoryWithControls
component="ProgressBar"
props={{
- status: "normal"
+ percent: 75,
+ status: "normal",
+ type: "line",
+ striped: false,
+ showInfo: true,
+ strokeLinecap: "round"
}}
controls={[
+ {
+ name: "percent",
+ label: "Percent",
+ type: "number",
+ description: "Completion percentage (0-100)."
+ },
{
name: "status",
label: "Status",
@@ -47,6 +58,52 @@ Progress bar component for displaying completion status. Supports line, circle,
"active"
],
description: "Current status of the progress bar."
+ },
+ {
+ name: "type",
+ label: "Type",
+ type: "select",
+ options: [
+ "line",
+ "circle",
+ "dashboard"
+ ],
+ description: "Display type: line, circle, or dashboard gauge."
+ },
+ {
+ name: "striped",
+ label: "Striped",
+ type: "boolean",
+ description: "Whether to show striped animation on the bar."
+ },
+ {
+ name: "showInfo",
+ label: "Show Info",
+ type: "boolean",
+ description: "Whether to show the percentage text."
+ },
+ {
+ name: "strokeLinecap",
+ label: "Stroke Linecap",
+ type: "select",
+ options: [
+ "round",
+ "butt",
+ "square"
+ ],
+ description: "Shape of the progress bar endpoints."
+ },
+ {
+ name: "strokeColor",
+ label: "Stroke Color",
+ type: "color",
+ description: "Color of the progress bar fill."
+ },
+ {
+ name: "trailColor",
+ label: "Trail Color",
+ type: "color",
+ description: "Color of the unfilled portion."
}
]}
/>
@@ -59,7 +116,10 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<ProgressBar
+ percent={75}
status="normal"
+ type="line"
+ showInfo
/>
);
}
@@ -106,11 +166,31 @@ function StatusDemo() {
}
```
+## Custom Colors
+
+```tsx live
+function CustomColors() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+ <ProgressBar percent={50} strokeColor="#1890ff" />
+ <ProgressBar percent={70} strokeColor="#52c41a" />
+ <ProgressBar percent={30} strokeColor="#faad14" trailColor="#f0f0f0" />
+ <ProgressBar percent={90} strokeColor="#ff4d4f" />
+ </div>
+ );
+}
+```
+
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
+| `percent` | `number` | `75` | Completion percentage (0-100). |
| `status` | `string` | `"normal"` | Current status of the progress bar. |
+| `type` | `string` | `"line"` | Display type: line, circle, or dashboard gauge. |
+| `striped` | `boolean` | `false` | Whether to show striped animation on the bar. |
+| `showInfo` | `boolean` | `true` | Whether to show the percentage text. |
+| `strokeLinecap` | `string` | `"round"` | Shape of the progress bar endpoints. |
## Import
diff --git a/docs/developer_portal/components/ui/select.mdx b/docs/developer_portal/components/ui/select.mdx
index 24929ecddc4..f84be6b30b0 100644
--- a/docs/developer_portal/components/ui/select.mdx
+++ b/docs/developer_portal/components/ui/select.mdx
@@ -26,227 +26,134 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Select
-The Select component from Superset's UI library.
+A versatile select component supporting single and multi-select modes, search filtering, option creation, and both synchronous and asynchronous data sources.
## Live Example
<StoryWithControls
component="Select"
props={{
- autoFocus: true,
+ mode: "single",
+ placeholder: "Select ...",
+ showSearch: true,
allowNewOptions: false,
allowClear: false,
- autoClearSearchValue: false,
allowSelectAll: true,
disabled: false,
- header: "none",
invertSelection: false,
- labelInValue: true,
- maxTagCount: 4,
- mode: "single",
oneLine: false,
- placeholder: "Select ...",
- showSearch: true
+ maxTagCount: 4,
+ options: [
+ {
+ label: "Such an incredibly awesome long long label",
+ value: "long-label-1"
+ },
+ {
+ label: "Another incredibly awesome long long label",
+ value: "long-label-2"
+ },
+ {
+ label: "Option A",
+ value: "A"
+ },
+ {
+ label: "Option B",
+ value: "B"
+ },
+ {
+ label: "Option C",
+ value: "C"
+ },
+ {
+ label: "Option D",
+ value: "D"
+ },
+ {
+ label: "Option E",
+ value: "E"
+ },
+ {
+ label: "Option F",
+ value: "F"
+ },
+ {
+ label: "Option G",
+ value: "G"
+ },
+ {
+ label: "Option H",
+ value: "H"
+ },
+ {
+ label: "Option I",
+ value: "I"
+ }
+ ]
}}
controls={[
{
- name: "autoFocus",
- label: "Auto Focus",
- type: "boolean"
+ name: "mode",
+ label: "Mode",
+ type: "inline-radio",
+ options: [
+ "single",
+ "multiple"
+ ],
+ description: "Whether to allow selection of a single option or multiple."
+ },
+ {
+ name: "placeholder",
+ label: "Placeholder",
+ type: "text",
+ description: "Placeholder text when no option is selected."
+ },
+ {
+ name: "showSearch",
+ label: "Show Search",
+ type: "boolean",
+ description: "Whether to show a search input for filtering."
},
{
name: "allowNewOptions",
label: "Allow New Options",
type: "boolean",
- description: "It enables the user to create new options. Can be used with standard or async select types. Can be used with any mode, single or multiple. False by default."
+ description: "Whether users can create new options by typing a value not in the list."
},
{
name: "allowClear",
label: "Allow Clear",
- type: "boolean"
- },
- {
- name: "autoClearSearchValue",
- label: "Auto Clear Search Value",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to show a clear button to reset the selection."
},
{
name: "allowSelectAll",
label: "Allow Select All",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to show a \"Select All\" option in multiple mode."
},
{
name: "disabled",
label: "Disabled",
- type: "boolean"
- },
- {
- name: "header",
- label: "Header",
- type: "inline-radio",
- options: [
- "none",
- "text",
- "control"
- ],
- description: "It adds a header on top of the Select. Can be any ReactNode."
+ type: "boolean",
+ description: "Whether the select is disabled."
},
{
name: "invertSelection",
label: "Invert Selection",
type: "boolean",
- description: "It shows a stop-outlined icon at the far right of a selected option instead of the default checkmark. Useful to better indicate to the user that by clicking on a selected option it will be de-selected. False by default."
- },
- {
- name: "labelInValue",
- label: "Label In Value",
- type: "boolean"
- },
- {
- name: "maxTagCount",
- label: "Max Tag Count",
- type: "number",
- description: "Sets maxTagCount attribute. The overflow tag is displayed in place of the remaining items. Requires '\"mode=multiple\"'."
- },
- {
- name: "mode",
- label: "Mode",
- type: "inline-radio",
- options: [
- "single",
- "multiple"
- ],
- description: "It defines whether the Select should allow for the selection of multiple options or single. Single by default."
+ description: "Shows a stop icon instead of a checkmark on selected options, indicating deselection on click."
},
{
name: "oneLine",
label: "One Line",
type: "boolean",
- description: "Sets maxTagCount to 1. The overflow tag is always displayed in the same line, line wrapping is disabled. When the dropdown is open, sets maxTagCount to 0, displays only the overflow tag. Requires '\"mode=multiple\"'."
- },
- {
- name: "placeholder",
- label: "Placeholder",
- type: "text"
- },
- {
- name: "showSearch",
- label: "Show Search",
- type: "boolean"
- },
- {
- name: "options",
- label: "Options",
- type: "select",
- options: [
- "Such an incredibly awesome long long label",
- "Such an incredibly awesome long long label",
- "Secret custom prop",
- "Another incredibly awesome long long label",
- "Another incredibly awesome long long label",
- "red",
- "JSX Label",
- "A",
- "A",
- "B",
- "B",
- "C",
- "C",
- "D",
- "D",
- "E",
- "E",
- "F",
- "F",
- "G",
- "G",
- "H",
- "H",
- "I",
- "I"
- ],
- description: "It defines the options of the Select. The options can be static, an array of options. The options can also be async, a promise that returns an array of options."
- },
- {
- name: "control",
- label: "Control",
- type: "select",
- options: [
- "none",
- "text",
- "control"
- ]
- },
- {
- name: "optionsCount",
- label: "Options Count",
- type: "number"
+ description: "Forces tags onto one line with overflow count. Requires multiple mode."
},
{
- name: "pageSize",
- label: "Page Size",
- type: "select",
- options: [
- "Such an incredibly awesome long long label",
- "Such an incredibly awesome long long label",
- "Secret custom prop",
- "Another incredibly awesome long long label",
- "Another incredibly awesome long long label",
- "red",
- "JSX Label",
- "A",
- "A",
- "B",
- "B",
- "C",
- "C",
- "D",
- "D",
- "E",
- "E",
- "F",
- "F",
- "G",
- "G",
- "H",
- "H",
- "I",
- "I"
- ],
- description: "It defines how many results should be included in the query response. Works in async mode only (See the options property)."
- },
- {
- name: "fetchOnlyOnSearch",
- label: "Fetch Only On Search",
- type: "select",
- options: [
- "Such an incredibly awesome long long label",
- "Such an incredibly awesome long long label",
- "Secret custom prop",
- "Another incredibly awesome long long label",
- "Another incredibly awesome long long label",
- "red",
- "JSX Label",
- "A",
- "A",
- "B",
- "B",
- "C",
- "C",
- "D",
- "D",
- "E",
- "E",
- "F",
- "F",
- "G",
- "G",
- "H",
- "H",
- "I",
- "I"
- ],
- description: "It fires a request against the server only after searching. Works in async mode only (See the options property). Undefined by default."
+ name: "maxTagCount",
+ label: "Max Tag Count",
+ type: "number",
+ description: "Maximum number of tags to display in multiple mode before showing an overflow count."
}
]}
/>
@@ -258,16 +165,115 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
- <Select
- autoFocus
- allowSelectAll
- header="none"
- labelInValue
- maxTagCount={4}
- mode="single"
- placeholder="Select ..."
- showSearch
- />
+ <div style={{ width: 300 }}>
+ <Select
+ ariaLabel="demo-select"
+ options={[
+ { label: 'Dashboards', value: 'dashboards' },
+ { label: 'Charts', value: 'charts' },
+ { label: 'Datasets', value: 'datasets' },
+ { label: 'SQL Lab', value: 'sqllab' },
+ { label: 'Settings', value: 'settings' },
+ ]}
+ placeholder="Select ..."
+ showSearch
+ />
+ </div>
+ );
+}
+```
+
+## Multi Select
+
+```tsx live
+function MultiSelectDemo() {
+ return (
+ <div style={{ width: 400 }}>
+ <Select
+ ariaLabel="multi-select"
+ mode="multiple"
+ options={[
+ { label: 'Dashboards', value: 'dashboards' },
+ { label: 'Charts', value: 'charts' },
+ { label: 'Datasets', value: 'datasets' },
+ { label: 'SQL Lab', value: 'sqllab' },
+ { label: 'Settings', value: 'settings' },
+ ]}
+ placeholder="Select items..."
+ allowSelectAll
+ maxTagCount={3}
+ />
+ </div>
+ );
+}
+```
+
+## Allow New Options
+
+```tsx live
+function AllowNewDemo() {
+ return (
+ <div style={{ width: 300 }}>
+ <Select
+ ariaLabel="allow-new-select"
+ mode="multiple"
+ options={[
+ { label: 'Red', value: 'red' },
+ { label: 'Green', value: 'green' },
+ { label: 'Blue', value: 'blue' },
+ ]}
+ placeholder="Type to add tags..."
+ allowNewOptions
+ showSearch
+ />
+ </div>
+ );
+}
+```
+
+## Inverted Selection
+
+```tsx live
+function InvertedDemo() {
+ return (
+ <div style={{ width: 400 }}>
+ <Select
+ ariaLabel="inverted-select"
+ mode="multiple"
+ options={[
+ { label: 'Admin', value: 'admin' },
+ { label: 'Editor', value: 'editor' },
+ { label: 'Viewer', value: 'viewer' },
+ { label: 'Public', value: 'public' },
+ ]}
+ placeholder="Exclude roles..."
+ invertSelection
+ />
+ </div>
+ );
+}
+```
+
+## One Line Mode
+
+```tsx live
+function OneLineDemo() {
+ return (
+ <div style={{ width: 300 }}>
+ <Select
+ ariaLabel="oneline-select"
+ mode="multiple"
+ options={[
+ { label: 'Dashboard 1', value: 'd1' },
+ { label: 'Dashboard 2', value: 'd2' },
+ { label: 'Dashboard 3', value: 'd3' },
+ { label: 'Dashboard 4', value: 'd4' },
+ { label: 'Dashboard 5', value: 'd5' },
+ ]}
+ placeholder="Select dashboards..."
+ oneLine
+ />
+ </div>
);
}
```
@@ -276,20 +282,17 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `autoFocus` | `boolean` | `true` | - |
-| `allowNewOptions` | `boolean` | `false` | It enables the user to create new options. Can be used with standard or async select types. Can be used with any mode, single or multiple. False by default. |
-| `allowClear` | `boolean` | `false` | - |
-| `autoClearSearchValue` | `boolean` | `false` | - |
-| `allowSelectAll` | `boolean` | `true` | - |
-| `disabled` | `boolean` | `false` | - |
-| `header` | `string` | `"none"` | It adds a header on top of the Select. Can be any ReactNode. |
-| `invertSelection` | `boolean` | `false` | It shows a stop-outlined icon at the far right of a selected option instead of the default checkmark. Useful to better indicate to the user that by clicking on a selected option it will be de-selected. False by default. |
-| `labelInValue` | `boolean` | `true` | - |
-| `maxTagCount` | `number` | `4` | Sets maxTagCount attribute. The overflow tag is displayed in place of the remaining items. Requires '"mode=multiple"'. |
-| `mode` | `string` | `"single"` | It defines whether the Select should allow for the selection of multiple options or single. Single by default. |
-| `oneLine` | `boolean` | `false` | Sets maxTagCount to 1. The overflow tag is always displayed in the same line, line wrapping is disabled. When the dropdown is open, sets maxTagCount to 0, displays only the overflow tag. Requires '"mode=multiple"'. |
-| `placeholder` | `string` | `"Select ..."` | - |
-| `showSearch` | `boolean` | `true` | - |
+| `mode` | `string` | `"single"` | Whether to allow selection of a single option or multiple. |
+| `placeholder` | `string` | `"Select ..."` | Placeholder text when no option is selected. |
+| `showSearch` | `boolean` | `true` | Whether to show a search input for filtering. |
+| `allowNewOptions` | `boolean` | `false` | Whether users can create new options by typing a value not in the list. |
+| `allowClear` | `boolean` | `false` | Whether to show a clear button to reset the selection. |
+| `allowSelectAll` | `boolean` | `true` | Whether to show a "Select All" option in multiple mode. |
+| `disabled` | `boolean` | `false` | Whether the select is disabled. |
+| `invertSelection` | `boolean` | `false` | Shows a stop icon instead of a checkmark on selected options, indicating deselection on click. |
+| `oneLine` | `boolean` | `false` | Forces tags onto one line with overflow count. Requires multiple mode. |
+| `maxTagCount` | `number` | `4` | Maximum number of tags to display in multiple mode before showing an overflow count. |
+| `options` | `any` | `[{"label":"Such an incredibly awesome long long label","value":"long-label-1"},{"label":"Another incredibly awesome long long label","value":"long-label-2"},{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"},{"label":"Option E","value":"E"},{"label":"Option F","value":"F"},{"label":"Option G","value":"G"},{"label":"Option H","value":"H"},{"label":"Option I","value":"I"}]` | - |
## Import
diff --git a/docs/developer_portal/components/ui/slider.mdx b/docs/developer_portal/components/ui/slider.mdx
index e32ba506eab..e92e20badd5 100644
--- a/docs/developer_portal/components/ui/slider.mdx
+++ b/docs/developer_portal/components/ui/slider.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Slider
-The Slider component from Superset's UI library.
+A slider input for selecting a value or range from a continuous or stepped interval. Supports single value, range, vertical orientation, marks, and tooltip display.
## Live Example
@@ -40,67 +40,76 @@ The Slider component from Superset's UI library.
disabled: false,
reverse: false,
vertical: false,
- autoFocus: false,
keyboard: true,
dots: false,
- included: true,
- tooltipPosition: "bottom"
+ included: true
}}
controls={[
{
name: "min",
label: "Min",
- type: "number"
+ type: "number",
+ description: "Minimum value of the slider."
},
{
name: "max",
label: "Max",
- type: "number"
+ type: "number",
+ description: "Maximum value of the slider."
},
{
name: "defaultValue",
label: "Default Value",
- type: "number"
+ type: "number",
+ description: "Initial value of the slider."
},
{
name: "step",
label: "Step",
- type: "number"
+ type: "number",
+ description: "Step increment between values. Use null for marks-only mode."
},
{
name: "disabled",
label: "Disabled",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the slider is disabled."
},
{
name: "reverse",
label: "Reverse",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to reverse the slider direction."
},
{
name: "vertical",
label: "Vertical",
- type: "boolean"
- },
- {
- name: "autoFocus",
- label: "Auto Focus",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to display the slider vertically."
},
{
name: "keyboard",
label: "Keyboard",
- type: "boolean"
+ type: "boolean",
+ description: "Whether keyboard arrow keys can control the slider."
},
{
name: "dots",
label: "Dots",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to show dots at each step mark."
},
{
name: "included",
label: "Included",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to highlight the filled portion of the track."
+ },
+ {
+ name: "tooltipOpen",
+ label: "Tooltip Open",
+ type: "boolean",
+ description: "Whether the value tooltip is always visible."
},
{
name: "tooltipPosition",
@@ -119,12 +128,8 @@ The Slider component from Superset's UI library.
"leftBottom",
"rightTop",
"rightBottom"
- ]
- },
- {
- name: "tooltipOpen",
- label: "Tooltip Open",
- type: "boolean"
+ ],
+ description: "Position of the value tooltip relative to the handle."
}
]}
/>
@@ -136,15 +141,85 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
- <Slider
- min={0}
- max={100}
- defaultValue={70}
- step={1}
- keyboard
- included
- tooltipPosition="bottom"
- />
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <Slider
+ min={0}
+ max={100}
+ defaultValue={70}
+ step={1}
+ />
+ </div>
+ );
+}
+```
+
+## Range Slider
+
+```tsx live
+function RangeSliderDemo() {
+ return (
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <h4>Basic Range</h4>
+ <Slider range defaultValue={[20, 70]} min={0} max={100} />
+ <br />
+ <h4>Draggable Track</h4>
+ <Slider range={{ draggableTrack: true }} defaultValue={[30, 60]} min={0} max={100} />
+ </div>
+ );
+}
+```
+
+## With Marks
+
+```tsx live
+function MarksDemo() {
+ return (
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <Slider
+ min={0}
+ max={100}
+ defaultValue={37}
+ marks={{
+ 0: '0°C',
+ 25: '25°C',
+ 50: '50°C',
+ 75: '75°C',
+ 100: '100°C',
+ }}
+ />
+ </div>
+ );
+}
+```
+
+## Stepped and Dots
+
+```tsx live
+function SteppedDemo() {
+ return (
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <h4>Step = 10 with Dots</h4>
+ <Slider min={0} max={100} defaultValue={30} step={10} dots />
+ <br />
+ <h4>Step = 25</h4>
+ <Slider min={0} max={100} defaultValue={50} step={25} dots
+ marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }} />
+ </div>
+ );
+}
+```
+
+## Vertical Slider
+
+```tsx live
+function VerticalDemo() {
+ return (
+ <div style={{ height: 300, display: 'flex', gap: 40, padding: '0 40px' }}>
+ <Slider vertical defaultValue={30} />
+ <Slider vertical range defaultValue={[20, 60]} />
+ <Slider vertical defaultValue={50} dots step={10}
+ marks={{ 0: '0', 50: '50', 100: '100' }} />
+ </div>
);
}
```
@@ -153,18 +228,16 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `min` | `number` | `0` | - |
-| `max` | `number` | `100` | - |
-| `defaultValue` | `number` | `70` | - |
-| `step` | `number` | `1` | - |
-| `disabled` | `boolean` | `false` | - |
-| `reverse` | `boolean` | `false` | - |
-| `vertical` | `boolean` | `false` | - |
-| `autoFocus` | `boolean` | `false` | - |
-| `keyboard` | `boolean` | `true` | - |
-| `dots` | `boolean` | `false` | - |
-| `included` | `boolean` | `true` | - |
-| `tooltipPosition` | `string` | `"bottom"` | - |
+| `min` | `number` | `0` | Minimum value of the slider. |
+| `max` | `number` | `100` | Maximum value of the slider. |
+| `defaultValue` | `number` | `70` | Initial value of the slider. |
+| `step` | `number` | `1` | Step increment between values. Use null for marks-only mode. |
+| `disabled` | `boolean` | `false` | Whether the slider is disabled. |
+| `reverse` | `boolean` | `false` | Whether to reverse the slider direction. |
+| `vertical` | `boolean` | `false` | Whether to display the slider vertically. |
+| `keyboard` | `boolean` | `true` | Whether keyboard arrow keys can control the slider. |
+| `dots` | `boolean` | `false` | Whether to show dots at each step mark. |
+| `included` | `boolean` | `true` | Whether to highlight the filled portion of the track. |
## Import
diff --git a/docs/developer_portal/components/ui/steps.mdx b/docs/developer_portal/components/ui/steps.mdx
index b9354e71671..bf76e0681c9 100644
--- a/docs/developer_portal/components/ui/steps.mdx
+++ b/docs/developer_portal/components/ui/steps.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Steps
-The Steps component from Superset's UI library.
+A navigation component for guiding users through multi-step workflows. Supports horizontal, vertical, and inline layouts with progress tracking.
## Live Example
@@ -34,14 +34,28 @@ The Steps component from Superset's UI library.
component="Steps"
props={{
direction: "horizontal",
- initial: 0,
+ current: 1,
labelPlacement: "horizontal",
progressDot: false,
size: "default",
status: "process",
type: "default",
title: "Step 3",
- description: "Description 3"
+ description: "Description 3",
+ items: [
+ {
+ title: "Connect Database",
+ description: "Configure the connection"
+ },
+ {
+ title: "Create Dataset",
+ description: "Select tables and columns"
+ },
+ {
+ title: "Build Chart",
+ description: "Choose visualization type"
+ }
+ ]
}}
controls={[
{
@@ -51,12 +65,14 @@ The Steps component from Superset's UI library.
options: [
"horizontal",
"vertical"
- ]
+ ],
+ description: "Layout direction of the steps."
},
{
- name: "initial",
- label: "Initial",
- type: "number"
+ name: "current",
+ label: "Current",
+ type: "number",
+ description: "Index of the current step (zero-based)."
},
{
name: "labelPlacement",
@@ -65,12 +81,14 @@ The Steps component from Superset's UI library.
options: [
"horizontal",
"vertical"
- ]
+ ],
+ description: "Position of step labels relative to the step icon."
},
{
name: "progressDot",
label: "Progress Dot",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to use a dot style instead of numbered icons."
},
{
name: "size",
@@ -79,7 +97,8 @@ The Steps component from Superset's UI library.
options: [
"default",
"small"
- ]
+ ],
+ description: "Size of the step icons and text."
},
{
name: "status",
@@ -90,7 +109,8 @@ The Steps component from Superset's UI library.
"process",
"finish",
"error"
- ]
+ ],
+ description: "Status of the current step."
},
{
name: "type",
@@ -100,7 +120,8 @@ The Steps component from Superset's UI library.
"default",
"navigation",
"inline"
- ]
+ ],
+ description: "Visual style: default numbered, navigation breadcrumb, or inline compact."
},
{
name: "title",
@@ -123,32 +144,119 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<Steps
- direction="horizontal"
- initial={0}
- labelPlacement="horizontal"
- size="default"
- status="process"
- type="default"
- title="Step 3"
- description="Description 3"
+ current={1}
+ items={[
+ { title: 'Connect Database', description: 'Configure the connection' },
+ { title: 'Create Dataset', description: 'Select tables and columns' },
+ { title: 'Build Chart', description: 'Choose visualization type' },
+ ]}
/>
);
}
```
+## Vertical Steps
+
+```tsx live
+function VerticalSteps() {
+ return (
+ <Steps
+ direction="vertical"
+ current={1}
+ items={[
+ { title: 'Upload CSV', description: 'Select a file from your computer' },
+ { title: 'Configure Columns', description: 'Set data types and names' },
+ { title: 'Review', description: 'Verify the data looks correct' },
+ { title: 'Import', description: 'Save the dataset' },
+ ]}
+ />
+ );
+}
+```
+
+## Status Indicators
+
+```tsx live
+function StatusSteps() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+ <div>
+ <h4>Error on Step 2</h4>
+ <Steps
+ current={1}
+ status="error"
+ items={[
+ { title: 'Connection', description: 'Configured' },
+ { title: 'Validation', description: 'Failed to validate' },
+ { title: 'Complete' },
+ ]}
+ />
+ </div>
+ <div>
+ <h4>All Complete</h4>
+ <Steps
+ current={3}
+ items={[
+ { title: 'Step 1' },
+ { title: 'Step 2' },
+ { title: 'Step 3' },
+ ]}
+ />
+ </div>
+ </div>
+ );
+}
+```
+
+## Dot Style and Small Size
+
+```tsx live
+function DotAndSmall() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+ <div>
+ <h4>Progress Dots</h4>
+ <Steps
+ progressDot
+ current={1}
+ items={[
+ { title: 'Create', description: 'Define the resource' },
+ { title: 'Configure', description: 'Set parameters' },
+ { title: 'Deploy', description: 'Go live' },
+ ]}
+ />
+ </div>
+ <div>
+ <h4>Small Size</h4>
+ <Steps
+ size="small"
+ current={2}
+ items={[
+ { title: 'Login' },
+ { title: 'Verify' },
+ { title: 'Done' },
+ ]}
+ />
+ </div>
+ </div>
+ );
+}
+```
+
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `direction` | `string` | `"horizontal"` | - |
-| `initial` | `number` | `0` | - |
-| `labelPlacement` | `string` | `"horizontal"` | - |
-| `progressDot` | `boolean` | `false` | - |
-| `size` | `string` | `"default"` | - |
-| `status` | `string` | `"process"` | - |
-| `type` | `string` | `"default"` | - |
+| `direction` | `string` | `"horizontal"` | Layout direction of the steps. |
+| `current` | `number` | `1` | Index of the current step (zero-based). |
+| `labelPlacement` | `string` | `"horizontal"` | Position of step labels relative to the step icon. |
+| `progressDot` | `boolean` | `false` | Whether to use a dot style instead of numbered icons. |
+| `size` | `string` | `"default"` | Size of the step icons and text. |
+| `status` | `string` | `"process"` | Status of the current step. |
+| `type` | `string` | `"default"` | Visual style: default numbered, navigation breadcrumb, or inline compact. |
| `title` | `string` | `"Step 3"` | - |
| `description` | `string` | `"Description 3"` | - |
+| `items` | `any` | `[{"title":"Connect Database","description":"Configure the connection"},{"title":"Create Dataset","description":"Select tables and columns"},{"title":"Build Chart","description":"Choose visualization type"}]` | - |
## Import
diff --git a/docs/developer_portal/components/ui/switch.mdx b/docs/developer_portal/components/ui/switch.mdx
index 44db07d022e..dc87c617f46 100644
--- a/docs/developer_portal/components/ui/switch.mdx
+++ b/docs/developer_portal/components/ui/switch.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Switch
-The Switch component from Superset's UI library.
+A toggle switch for boolean on/off states. Supports loading indicators, sizing, and an HTML title attribute for accessibility tooltips.
## Live Example
@@ -35,29 +35,32 @@ The Switch component from Superset's UI library.
props={{
disabled: false,
loading: false,
- title: "Switch",
- autoFocus: true
+ title: "Toggle feature"
}}
controls={[
{
name: "disabled",
label: "Disabled",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the switch is disabled."
},
{
name: "loading",
label: "Loading",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to show a loading spinner inside the switch."
},
{
name: "title",
label: "Title",
- type: "text"
+ type: "text",
+ description: "HTML title attribute shown as a browser tooltip on hover. Useful for accessibility."
},
{
- name: "autoFocus",
- label: "Auto Focus",
- type: "boolean"
+ name: "checked",
+ label: "Checked",
+ type: "boolean",
+ description: "Whether the switch is on."
},
{
name: "size",
@@ -66,7 +69,8 @@ The Switch component from Superset's UI library.
options: [
"small",
"default"
- ]
+ ],
+ description: "Size of the switch."
}
]}
/>
@@ -77,11 +81,92 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
+ const [checked, setChecked] = React.useState(true);
return (
- <Switch
- title="Switch"
- autoFocus
- />
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch
+ checked={checked}
+ onChange={setChecked}
+ title="Toggle feature"
+ />
+ <span>{checked ? 'On' : 'Off'}</span>
+ <span style={{ color: '#999', fontSize: 12 }}>(hover the switch to see the title tooltip)</span>
+ </div>
+ );
+}
+```
+
+## Switch States
+
+```tsx live
+function SwitchStates() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch defaultChecked title="Enabled switch" />
+ <span>Checked</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch title="Unchecked switch" />
+ <span>Unchecked</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch disabled defaultChecked title="Disabled on" />
+ <span>Disabled (on)</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch disabled title="Disabled off" />
+ <span>Disabled (off)</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch loading defaultChecked title="Loading switch" />
+ <span>Loading</span>
+ </div>
+ </div>
+ );
+}
+```
+
+## Sizes
+
+```tsx live
+function SizesDemo() {
+ return (
+ <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch size="small" defaultChecked title="Small switch" />
+ <span>Small</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch size="default" defaultChecked title="Default switch" />
+ <span>Default</span>
+ </div>
+ </div>
+ );
+}
+```
+
+## Settings Panel
+
+```tsx live
+function SettingsPanel() {
+ const [notifications, setNotifications] = React.useState(true);
+ const [darkMode, setDarkMode] = React.useState(false);
+ const [autoRefresh, setAutoRefresh] = React.useState(true);
+ return (
+ <div style={{ maxWidth: 320, border: '1px solid #e8e8e8', borderRadius: 8, padding: 16 }}>
+ <h4 style={{ marginTop: 0 }}>Dashboard Settings</h4>
+ {[
+ { label: 'Email notifications', checked: notifications, onChange: setNotifications, title: 'Toggle email notifications' },
+ { label: 'Dark mode', checked: darkMode, onChange: setDarkMode, title: 'Toggle dark mode' },
+ { label: 'Auto-refresh data', checked: autoRefresh, onChange: setAutoRefresh, title: 'Toggle auto-refresh' },
+ ].map(({ label, checked, onChange, title }) => (
+ <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid #f0f0f0' }}>
+ <span>{label}</span>
+ <Switch checked={checked} onChange={onChange} title={title} />
+ </div>
+ ))}
+ </div>
);
}
```
@@ -90,10 +175,9 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `disabled` | `boolean` | `false` | - |
-| `loading` | `boolean` | `false` | - |
-| `title` | `string` | `"Switch"` | - |
-| `autoFocus` | `boolean` | `true` | - |
+| `disabled` | `boolean` | `false` | Whether the switch is disabled. |
+| `loading` | `boolean` | `false` | Whether to show a loading spinner inside the switch. |
+| `title` | `string` | `"Toggle feature"` | HTML title attribute shown as a browser tooltip on hover. Useful for accessibility. |
## Import
diff --git a/docs/developer_portal/components/ui/tableview.mdx b/docs/developer_portal/components/ui/tableview.mdx
index 6ad4c615caa..b1446aac650 100644
--- a/docs/developer_portal/components/ui/tableview.mdx
+++ b/docs/developer_portal/components/ui/tableview.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# TableView
-The TableView component from Superset's UI library.
+A data table component with sorting, pagination, text wrapping, and empty state support. Built on react-table.
## Live Example
@@ -36,14 +36,57 @@ The TableView component from Superset's UI library.
accessor: "summary",
Header: "Summary",
sortable: true,
- id: 321,
+ id: 456,
age: 10,
name: "John Smith",
noDataText: "No data here",
- pageSize: 1,
+ pageSize: 2,
showRowCount: true,
withPagination: true,
- scrollTopOnPagination: false
+ scrollTopOnPagination: false,
+ columns: [
+ {
+ accessor: "id",
+ Header: "ID",
+ sortable: true,
+ id: "id"
+ },
+ {
+ accessor: "age",
+ Header: "Age",
+ id: "age"
+ },
+ {
+ accessor: "name",
+ Header: "Name",
+ id: "name"
+ },
+ {
+ accessor: "summary",
+ Header: "Summary",
+ id: "summary"
+ }
+ ],
+ data: [
+ {
+ id: 123,
+ age: 27,
+ name: "Emily",
+ summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ },
+ {
+ id: 321,
+ age: 10,
+ name: "Kate",
+ summary: "Nam id porta neque, a vehicula orci."
+ },
+ {
+ id: 456,
+ age: 10,
+ name: "John Smith",
+ summary: "Maecenas rhoncus elit sit amet purus convallis placerat."
+ }
+ ]
}}
controls={[
{
@@ -79,37 +122,44 @@ The TableView component from Superset's UI library.
{
name: "noDataText",
label: "No Data Text",
- type: "text"
+ type: "text",
+ description: "Text displayed when the table has no data."
},
{
name: "pageSize",
label: "Page Size",
- type: "number"
+ type: "number",
+ description: "Number of rows displayed per page."
},
{
name: "showRowCount",
label: "Show Row Count",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to display the total row count alongside pagination."
},
{
name: "withPagination",
label: "With Pagination",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to show pagination controls below the table."
},
{
name: "scrollTopOnPagination",
label: "Scroll Top On Pagination",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to scroll to the top of the table when changing pages."
},
{
name: "emptyWrapperType",
label: "Empty Wrapper Type",
- type: "select"
+ type: "select",
+ description: "Style of the empty state wrapper."
},
{
name: "initialPageIndex",
label: "Initial Page Index",
- type: "number"
+ type: "number",
+ description: "Initial page to display (zero-based)."
}
]}
/>
@@ -122,16 +172,84 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<TableView
- accessor="summary"
- Header="Summary"
- sortable
- id={321}
- age={10}
- name="John Smith"
- noDataText="No data here"
- pageSize={1}
- showRowCount
+ columns={[
+ { accessor: 'id', Header: 'ID', sortable: true, id: 'id' },
+ { accessor: 'age', Header: 'Age', id: 'age' },
+ { accessor: 'name', Header: 'Name', id: 'name' },
+ { accessor: 'summary', Header: 'Summary', id: 'summary' },
+ ]}
+ data={[
+ { id: 123, age: 27, name: 'Emily', summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+ { id: 321, age: 10, name: 'Kate', summary: 'Nam id porta neque, a vehicula orci.' },
+ { id: 456, age: 10, name: 'John Smith', summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.' },
+ ]}
+ initialSortBy={[{ id: 'name', desc: true }]}
+ pageSize={2}
withPagination
+ showRowCount
+ />
+ );
+}
+```
+
+## Without Pagination
+
+```tsx live
+function NoPaginationDemo() {
+ return (
+ <TableView
+ columns={[
+ { accessor: 'name', Header: 'Name', id: 'name' },
+ { accessor: 'email', Header: 'Email', id: 'email' },
+ { accessor: 'status', Header: 'Status', id: 'status' },
+ ]}
+ data={[
+ { name: 'Alice', email: 'alice@example.com', status: 'Active' },
+ { name: 'Bob', email: 'bob@example.com', status: 'Inactive' },
+ { name: 'Charlie', email: 'charlie@example.com', status: 'Active' },
+ ]}
+ withPagination={false}
+ />
+ );
+}
+```
+
+## Empty State
+
+```tsx live
+function EmptyDemo() {
+ return (
+ <TableView
+ columns={[
+ { accessor: 'name', Header: 'Name', id: 'name' },
+ { accessor: 'value', Header: 'Value', id: 'value' },
+ ]}
+ data={[]}
+ noDataText="No results found"
+ />
+ );
+}
+```
+
+## With Sorting
+
+```tsx live
+function SortingDemo() {
+ return (
+ <TableView
+ columns={[
+ { accessor: 'id', Header: 'ID', id: 'id', sortable: true },
+ { accessor: 'name', Header: 'Name', id: 'name', sortable: true },
+ { accessor: 'score', Header: 'Score', id: 'score', sortable: true },
+ ]}
+ data={[
+ { id: 1, name: 'Dashboard A', score: 95 },
+ { id: 2, name: 'Dashboard B', score: 72 },
+ { id: 3, name: 'Dashboard C', score: 88 },
+ { id: 4, name: 'Dashboard D', score: 64 },
+ ]}
+ initialSortBy={[{ id: 'score', desc: true }]}
+ withPagination={false}
/>
);
}
@@ -144,14 +262,16 @@ function Demo() {
| `accessor` | `string` | `"summary"` | - |
| `Header` | `string` | `"Summary"` | - |
| `sortable` | `boolean` | `true` | - |
-| `id` | `number` | `321` | - |
+| `id` | `number` | `456` | - |
| `age` | `number` | `10` | - |
| `name` | `string` | `"John Smith"` | - |
-| `noDataText` | `string` | `"No data here"` | - |
-| `pageSize` | `number` | `1` | - |
-| `showRowCount` | `boolean` | `true` | - |
-| `withPagination` | `boolean` | `true` | - |
-| `scrollTopOnPagination` | `boolean` | `false` | - |
+| `noDataText` | `string` | `"No data here"` | Text displayed when the table has no data. |
+| `pageSize` | `number` | `2` | Number of rows displayed per page. |
+| `showRowCount` | `boolean` | `true` | Whether to display the total row count alongside pagination. |
+| `withPagination` | `boolean` | `true` | Whether to show pagination controls below the table. |
+| `scrollTopOnPagination` | `boolean` | `false` | Whether to scroll to the top of the table when changing pages. |
+| `columns` | `any` | `[{"accessor":"id","Header":"ID","sortable":true,"id":"id"},{"accessor":"age","Header":"Age","id":"age"},{"accessor":"name","Header":"Name","id":"name"},{"accessor":"summary","Header":"Summary","id":"summary"}]` | - |
+| `data` | `any` | `[{"id":123,"age":27,"name":"Emily","summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"id":321,"age":10,"name":"Kate","summary":"Nam id porta neque, a vehicula orci."},{"id":456,"age":10,"name":"John Smith","summary":"Maecenas rhoncus elit sit amet purus convallis placerat."}]` | - |
## Import
diff --git a/docs/scripts/generate-superset-components.mjs b/docs/scripts/generate-superset-components.mjs
index a7a8b26cd66..c8db5e43d6e 100644
--- a/docs/scripts/generate-superset-components.mjs
+++ b/docs/scripts/generate-superset-components.mjs
@@ -557,6 +557,13 @@ function parseArgTypes(argTypesContent, argTypes, fullContent) {
} else if (controlObjectMatch) {
argTypes[propName].type = controlObjectMatch[1];
}
+
+ // Clear options for non-select/radio types (the shorthand "options" detection
+ // can false-positive when the word "options" appears in description text)
+ const finalType = argTypes[propName].type;
+ if (finalType && !['select', 'radio', 'inline-radio'].includes(finalType)) {
+ delete argTypes[propName].options;
+ }
}
}
@@ -658,6 +665,8 @@ function extractDocsConfig(content, storyNames) {
let liveExample = null;
let examples = null;
let renderComponent = null;
+ let triggerProp = null;
+ let onHideProp = null;
for (const storyName of storyNames) {
// Look for parameters block
@@ -764,6 +773,16 @@ function extractDocsConfig(content, storyNames) {
renderComponent = renderComponentMatch[1];
}
+ // Extract triggerProp/onHideProp - for components like Modal that need a trigger button
+ const triggerPropMatch = parametersContent.match(/triggerProp:\s*['"]([^'"]+)['"]/);
+ if (triggerPropMatch) {
+ triggerProp = triggerPropMatch[1];
+ }
+ const onHidePropMatch = parametersContent.match(/onHideProp:\s*['"]([^'"]+)['"]/);
+ if (onHidePropMatch) {
+ onHideProp = onHidePropMatch[1];
+ }
+
// Extract examples array - for multiple code examples
// Format: examples: [{ title: 'Title', code: `...` }, ...]
const examplesMatch = parametersContent.match(/examples:\s*\[/);
@@ -795,10 +814,10 @@ function extractDocsConfig(content, storyNames) {
}
}
- if (sampleChildren || gallery || staticProps || liveExample || examples || renderComponent) break;
+ if (sampleChildren || gallery || staticProps || liveExample || examples || renderComponent || triggerProp) break;
}
- return { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent };
+ return { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent, triggerProp, onHideProp };
}
/**
@@ -832,7 +851,7 @@ function extractArgsAndControls(content, componentName) {
const storyNames = [`Interactive${componentName}`, `${componentName}Story`, componentName];
// Extract docs config (sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample) from parameters.docs
- const { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent } = extractDocsConfig(content, storyNames);
+ const { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent, triggerProp, onHideProp } = extractDocsConfig(content, storyNames);
for (const storyName of storyNames) {
// Try CSF 3.0 format: export const StoryName: StoryObj = { args: {...}, argTypes: {...} }
@@ -941,7 +960,7 @@ function extractArgsAndControls(content, componentName) {
});
}
- return { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent };
+ return { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent, triggerProp, onHideProp };
}
/**
@@ -950,7 +969,7 @@ function extractArgsAndControls(content, componentName) {
function generateMDX(component, storyContent) {
const { componentName, description, relativePath, category, title, sourceConfig, resolvedImportPath, isDefaultExport } = component;
- const { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent } = extractArgsAndControls(storyContent, componentName);
+ const { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent, triggerProp, onHideProp } = extractArgsAndControls(storyContent, componentName);
// Merge staticProps into args for complex values (arrays, objects) that can't be parsed from inline args
const mergedArgs = { ...args, ...staticProps };
@@ -1056,7 +1075,9 @@ ${hasGallery ? `
props={${propsJson}}
controls={${controlsJson}}${sampleChildrenJson ? `
sampleChildren={${sampleChildrenJson}}` : ''}${sampleChildrenStyleJson ? `
- sampleChildrenStyle={${sampleChildrenStyleJson}}` : ''}
+ sampleChildrenStyle={${sampleChildrenStyleJson}}` : ''}${triggerProp ? `
+ triggerProp="${triggerProp}"` : ''}${onHideProp ? `
+ onHideProp="${onHideProp}"` : ''}
/>
## Try It
diff --git a/docs/src/components/StorybookWrapper.jsx b/docs/src/components/StorybookWrapper.jsx
index ecc774fdda6..fca8a2342d7 100644
--- a/docs/src/components/StorybookWrapper.jsx
+++ b/docs/src/components/StorybookWrapper.jsx
@@ -243,7 +243,8 @@ function generateSampleChildren(sampleChildren, sampleChildrenStyle) {
// Inner component for StoryWithControls (browser-only)
// renderComponent allows overriding which component to actually render (useful when the named
// component is a namespace object like Icons, not a React component)
-function StoryWithControlsInner({ component, renderComponent, props, controls, sampleChildren, sampleChildrenStyle }) {
+// triggerProp: for components like Modal that need a trigger, specify the boolean prop that controls visibility
+function StoryWithControlsInner({ component, renderComponent, props, controls, sampleChildren, sampleChildrenStyle, triggerProp, onHideProp }) {
// Use renderComponent if provided, otherwise use the main component name
const componentToRender = renderComponent || component;
const Component = resolveComponent(componentToRender);
@@ -258,12 +259,28 @@ function StoryWithControlsInner({ component, renderComponent, props, controls, s
};
// Extract children from props (label, children, text, content)
- const { children: propsChildren, restProps } = extractChildren(stateProps);
+ // When sampleChildren is explicitly provided, skip extraction so all props
+ // (like 'content') stay as component props rather than becoming children
+ const { children: propsChildren, restProps } = sampleChildren
+ ? { children: null, restProps: stateProps }
+ : extractChildren(stateProps);
// Filter out undefined values so they don't override component defaults
const filteredProps = Object.fromEntries(
Object.entries(restProps).filter(([, v]) => v !== undefined)
);
+ // Resolve any prop values that are component descriptors
+ // e.g., { component: 'Button', props: { children: 'Click' } }
+ Object.keys(filteredProps).forEach(key => {
+ const value = filteredProps[key];
+ if (value && typeof value === 'object' && value.component) {
+ const PropComponent = resolveComponent(value.component);
+ if (PropComponent) {
+ filteredProps[key] = <PropComponent {...value.props} />;
+ }
+ }
+ });
+
// For List-like components with dataSource but no renderItem, provide a default
if (filteredProps.dataSource && !filteredProps.renderItem) {
const ListItem = resolveComponent('List')?.Item;
@@ -276,6 +293,15 @@ function StoryWithControlsInner({ component, renderComponent, props, controls, s
// Use sample children if provided, otherwise use props children
const children = generateSampleChildren(sampleChildren, sampleChildrenStyle) || propsChildren;
+ // For components with a trigger (like Modal with show/onHide), add handlers
+ const triggerProps = {};
+ if (triggerProp && onHideProp) {
+ triggerProps[onHideProp] = () => updateProp(triggerProp, false);
+ }
+
+ // Get the Button component for trigger buttons
+ const ButtonComponent = resolveComponent('Button');
+
return (
<Providers>
<div className="storybook-with-controls">
@@ -290,7 +316,15 @@ function StoryWithControlsInner({ component, renderComponent, props, controls, s
}}
>
{Component ? (
- <Component {...filteredProps}>{children}</Component>
+ <>
+ {/* Show a trigger button for components like Modal */}
+ {triggerProp && ButtonComponent && (
+ <ButtonComponent onClick={() => updateProp(triggerProp, true)}>
+ Open {component}
+ </ButtonComponent>
+ )}
+ <Component {...filteredProps} {...triggerProps}>{children}</Component>
+ </>
) : (
<div style={{ color: '#999' }}>
Component "{String(component)}" not found
@@ -389,7 +423,8 @@ function StoryWithControlsInner({ component, renderComponent, props, controls, s
// A simple component to display a story with controls
// renderComponent: optional override for which component to render (e.g., 'Icons.InfoCircleOutlined' when component='Icons')
-export function StoryWithControls({ component: Component, renderComponent, props = {}, controls = [], sampleChildren, sampleChildrenStyle }) {
+// triggerProp/onHideProp: for components like Modal that need a button to open (e.g., triggerProp="show", onHideProp="onHide")
+export function StoryWithControls({ component: Component, renderComponent, props = {}, controls = [], sampleChildren, sampleChildrenStyle, triggerProp, onHideProp }) {
return (
<BrowserOnly fallback={<LoadingPlaceholder />}>
{() => (
@@ -400,6 +435,8 @@ export function StoryWithControls({ component: Component, renderComponent, props
controls={controls}
sampleChildren={sampleChildren}
sampleChildrenStyle={sampleChildrenStyle}
+ triggerProp={triggerProp}
+ onHideProp={onHideProp}
/>
)}
</BrowserOnly>
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx
index b7bf895a2f4..1d6671c6773 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx
@@ -21,6 +21,14 @@ import { Menu, MainNav } from '.';
export default {
title: 'Components/Menu',
component: Menu as React.FC,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Navigation menu component supporting horizontal, vertical, and inline modes. Based on Ant Design Menu with Superset styling.',
+ },
+ },
+ },
};
export const MainNavigation = (args: any) => (
@@ -47,18 +55,95 @@ export const InteractiveMenu = (args: any) => (
);
InteractiveMenu.args = {
- defaultSelectedKeys: ['1'],
- inlineCollapsed: false,
mode: 'horizontal',
- multiple: false,
selectable: true,
};
InteractiveMenu.argTypes = {
mode: {
- control: {
- type: 'select',
- },
+ control: 'select',
options: ['horizontal', 'vertical', 'inline'],
+ description: 'Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible.',
+ },
+ selectable: {
+ control: 'boolean',
+ description: 'Whether menu items can be selected.',
+ },
+ multiple: {
+ control: 'boolean',
+ description: 'Allow multiple items to be selected.',
+ },
+ inlineCollapsed: {
+ control: 'boolean',
+ description: 'Whether the inline menu is collapsed (only applies to inline mode).',
+ },
+};
+
+InteractiveMenu.parameters = {
+ docs: {
+ staticProps: {
+ items: [
+ { label: 'Dashboards', key: 'dashboards' },
+ { label: 'Charts', key: 'charts' },
+ { label: 'Datasets', key: 'datasets' },
+ { label: 'SQL Lab', key: 'sqllab' },
+ ],
+ },
+ liveExample: `function Demo() {
+ return (
+ <Menu
+ mode="horizontal"
+ selectable
+ items={[
+ { label: 'Dashboards', key: 'dashboards' },
+ { label: 'Charts', key: 'charts' },
+ { label: 'Datasets', key: 'datasets' },
+ { label: 'SQL Lab', key: 'sqllab' },
+ ]}
+ />
+ );
+}`,
+ examples: [
+ {
+ title: 'Vertical Menu',
+ code: `function VerticalMenu() {
+ return (
+ <Menu
+ mode="vertical"
+ style={{ width: 200 }}
+ items={[
+ { label: 'Dashboards', key: 'dashboards' },
+ { label: 'Charts', key: 'charts' },
+ { label: 'Datasets', key: 'datasets' },
+ {
+ label: 'Settings',
+ key: 'settings',
+ children: [
+ { label: 'Profile', key: 'profile' },
+ { label: 'Preferences', key: 'preferences' },
+ ],
+ },
+ ]}
+ />
+ );
+}`,
+ },
+ {
+ title: 'Menu with Icons',
+ code: `function MenuWithIcons() {
+ return (
+ <Menu
+ mode="horizontal"
+ items={[
+ { label: <><Icons.DashboardOutlined /> Dashboards</>, key: 'dashboards' },
+ { label: <><Icons.LineChartOutlined /> Charts</>, key: 'charts' },
+ { label: <><Icons.DatabaseOutlined /> Datasets</>, key: 'datasets' },
+ { label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, key: 'sqllab' },
+ ]}
+ />
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx
index 0b9c855ca5b..f0083c04091 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx
@@ -24,6 +24,14 @@ import type { ModalProps, ModalFuncProps } from './types';
export default {
title: 'Components/Modal',
component: Modal,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Modal dialog component for displaying content that requires user attention or interaction. Supports customizable buttons, drag/resize, and confirmation dialogs.',
+ },
+ },
+ },
};
export const InteractiveModal = (props: ModalProps) => (
@@ -32,9 +40,9 @@ export const InteractiveModal = (props: ModalProps) => (
InteractiveModal.args = {
disablePrimaryButton: false,
- primaryButtonName: 'Danger',
- primaryButtonStyle: 'danger',
- show: true,
+ primaryButtonName: 'Submit',
+ primaryButtonStyle: 'primary',
+ show: false,
title: "I'm a modal!",
resizable: false,
draggable: false,
@@ -42,19 +50,118 @@ InteractiveModal.args = {
};
InteractiveModal.argTypes = {
+ show: {
+ control: 'boolean',
+ description: 'Whether the modal is visible. Use the "Try It" example below for a working demo.',
+ },
+ title: {
+ control: 'text',
+ description: 'Title displayed in the modal header.',
+ },
+ primaryButtonName: {
+ control: 'text',
+ description: 'Text for the primary action button.',
+ },
primaryButtonStyle: {
- description: 'The style of the primary action button.',
+ control: 'select',
options: ['primary', 'secondary', 'dashed', 'danger', 'link'],
- control: { type: 'select' },
+ description: 'The style of the primary action button.',
},
width: {
- description: 'Width of the modal in pixels or as a string.',
- control: { type: 'number' },
+ control: 'number',
+ description: 'Width of the modal in pixels.',
+ },
+ resizable: {
+ control: 'boolean',
+ description: 'Whether the modal can be resized by dragging corners.',
+ },
+ draggable: {
+ control: 'boolean',
+ description: 'Whether the modal can be dragged by its header.',
+ },
+ disablePrimaryButton: {
+ control: 'boolean',
+ description: 'Whether the primary button is disabled.',
},
onHandledPrimaryAction: { action: 'onHandledPrimaryAction' },
onHide: { action: 'onHide' },
};
+InteractiveModal.parameters = {
+ docs: {
+ triggerProp: 'show',
+ onHideProp: 'onHide',
+ liveExample: `function ModalDemo() {
+ const [isOpen, setIsOpen] = React.useState(false);
+ return (
+ <>
+ <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+ <Modal
+ show={isOpen}
+ onHide={() => setIsOpen(false)}
+ title="Example Modal"
+ primaryButtonName="Submit"
+ onHandledPrimaryAction={() => {
+ alert('Submitted!');
+ setIsOpen(false);
+ }}
+ >
+ <p>This is the modal content. Click Submit or close the modal.</p>
+ </Modal>
+ </>
+ );
+}`,
+ examples: [
+ {
+ title: 'Danger Modal',
+ code: `function DangerModal() {
+ const [isOpen, setIsOpen] = React.useState(false);
+ return (
+ <>
+ <Button buttonStyle="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
+ <Modal
+ show={isOpen}
+ onHide={() => setIsOpen(false)}
+ title="Confirm Delete"
+ primaryButtonName="Delete"
+ primaryButtonStyle="danger"
+ onHandledPrimaryAction={() => {
+ alert('Deleted!');
+ setIsOpen(false);
+ }}
+ >
+ <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+ </Modal>
+ </>
+ );
+}`,
+ },
+ {
+ title: 'Confirmation Dialogs',
+ code: `function ConfirmationDialogs() {
+ return (
+ <div style={{ display: 'flex', gap: 8 }}>
+ <Button onClick={() => Modal.confirm({
+ title: 'Confirm Action',
+ content: 'Are you sure you want to proceed?',
+ okText: 'Yes',
+ })}>Confirm</Button>
+ <Button onClick={() => Modal.warning({
+ title: 'Warning',
+ content: 'This action may have consequences.',
+ })}>Warning</Button>
+ <Button onClick={() => Modal.error({
+ title: 'Error',
+ content: 'Something went wrong.',
+ })}>Error</Button>
+ </div>
+ );
+}`,
+ },
+ ],
+ },
+};
+
export const ModalFunctions = (props: ModalFuncProps) => (
<div>
<Button onClick={() => Modal.error(props)}>Error</Button>
diff --git a/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx
index 739cfecc87a..3fd8bad4bfd 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx
@@ -39,6 +39,14 @@ interface IModalTriggerProps {
export default {
title: 'Components/ModalTrigger',
component: ModalTrigger,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A component that renders a trigger element which opens a modal when clicked. Useful for actions that need confirmation or additional input.',
+ },
+ },
+ },
};
export const InteractiveModalTrigger = (args: IModalTriggerProps) => (
@@ -47,13 +55,116 @@ export const InteractiveModalTrigger = (args: IModalTriggerProps) => (
InteractiveModalTrigger.args = {
isButton: true,
- modalTitle: 'I am a modal title',
- modalBody: 'I am a modal body',
- modalFooter: 'I am a modal footer',
- tooltip: 'I am a tooltip',
+ modalTitle: 'Modal Title',
+ modalBody: 'This is the modal body content.',
+ tooltip: 'Click to open modal',
width: '600px',
maxWidth: '1000px',
responsive: true,
draggable: false,
resizable: false,
};
+
+InteractiveModalTrigger.argTypes = {
+ triggerNode: {
+ control: false,
+ description: 'The clickable element that opens the modal when clicked.',
+ },
+ isButton: {
+ control: 'boolean',
+ description: 'Whether to wrap the trigger in a button element.',
+ },
+ modalTitle: {
+ control: 'text',
+ description: 'Title displayed in the modal header.',
+ },
+ modalBody: {
+ control: 'text',
+ description: 'Content displayed in the modal body.',
+ },
+ tooltip: {
+ control: 'text',
+ description: 'Tooltip text shown on hover over the trigger.',
+ },
+ width: {
+ control: 'text',
+ description: 'Width of the modal (e.g., "600px", "80%").',
+ },
+ maxWidth: {
+ control: 'text',
+ description: 'Maximum width of the modal.',
+ },
+ responsive: {
+ control: 'boolean',
+ description: 'Whether the modal should be responsive.',
+ },
+ draggable: {
+ control: 'boolean',
+ description: 'Whether the modal can be dragged by its header.',
+ },
+ resizable: {
+ control: 'boolean',
+ description: 'Whether the modal can be resized by dragging corners.',
+ },
+};
+
+InteractiveModalTrigger.parameters = {
+ docs: {
+ // Use a simple span for triggerNode since isButton: true wraps it in a button
+ staticProps: {
+ triggerNode: 'Click to Open Modal',
+ },
+ liveExample: `function Demo() {
+ return (
+ <ModalTrigger
+ isButton
+ triggerNode={<span>Click to Open</span>}
+ modalTitle="Example Modal"
+ modalBody={<p>This is the modal content. You can put any React elements here.</p>}
+ width="500px"
+ responsive
+ />
+ );
+}`,
+ examples: [
+ {
+ title: 'With Custom Trigger',
+ code: `function CustomTrigger() {
+ return (
+ <ModalTrigger
+ triggerNode={
+ <Button buttonStyle="primary">
+ <Icons.PlusOutlined /> Add New Item
+ </Button>
+ }
+ modalTitle="Add New Item"
+ modalBody={
+ <div>
+ <p>Fill out the form to add a new item.</p>
+ <Input placeholder="Item name" />
+ </div>
+ }
+ width="400px"
+ />
+ );
+}`,
+ },
+ {
+ title: 'Draggable & Resizable',
+ code: `function DraggableModal() {
+ return (
+ <ModalTrigger
+ isButton
+ triggerNode={<span>Open Draggable Modal</span>}
+ modalTitle="Draggable & Resizable"
+ modalBody={<p>Try dragging the header or resizing from the corners!</p>}
+ draggable
+ resizable
+ width="500px"
+ />
+ );
+}`,
+ },
+ ],
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx
index c7d58485ece..0475286afb2 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx
@@ -22,6 +22,14 @@ import { Button } from '../Button';
export default {
title: 'Components/Popover',
component: Popover,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A floating card that appears when hovering or clicking a trigger element. Supports configurable placement, trigger behavior, and custom content.',
+ },
+ },
+ },
};
export const InteractivePopover = (args: PopoverProps) => (
@@ -37,31 +45,6 @@ export const InteractivePopover = (args: PopoverProps) => (
</Popover>
);
-const PLACEMENTS = {
- label: 'placement',
- options: [
- 'topLeft',
- 'top',
- 'topRight',
- 'leftTop',
- 'left',
- 'leftBottom',
- 'rightTop',
- 'right',
- 'rightBottom',
- 'bottomLeft',
- 'bottom',
- 'bottomRight',
- ],
- defaultValue: null,
-};
-
-const TRIGGERS = {
- label: 'trigger',
- options: ['hover', 'click', 'focus'],
- defaultValue: null,
-};
-
InteractivePopover.args = {
content: 'Popover sample content',
title: 'Popover title',
@@ -70,24 +53,118 @@ InteractivePopover.args = {
};
InteractivePopover.argTypes = {
+ content: {
+ control: 'text',
+ description: 'Content displayed inside the popover body.',
+ },
+ title: {
+ control: 'text',
+ description: 'Title displayed in the popover header.',
+ },
placement: {
- name: PLACEMENTS.label,
control: { type: 'select' },
- options: PLACEMENTS.options,
+ options: [
+ 'topLeft',
+ 'top',
+ 'topRight',
+ 'leftTop',
+ 'left',
+ 'leftBottom',
+ 'rightTop',
+ 'right',
+ 'rightBottom',
+ 'bottomLeft',
+ 'bottom',
+ 'bottomRight',
+ ],
+ description: 'Position of the popover relative to the trigger element.',
},
trigger: {
- name: TRIGGERS.label,
control: { type: 'select' },
- options: TRIGGERS.options,
+ options: ['hover', 'click', 'focus'],
+ description: 'Event that triggers the popover to appear.',
},
arrow: {
- name: 'arrow',
control: { type: 'boolean' },
- description: "Change arrow's visible state",
+ description: "Whether to show the popover's arrow pointing to the trigger.",
},
color: {
- name: 'color',
control: { type: 'color' },
description: 'The background color of the popover.',
},
};
+
+InteractivePopover.parameters = {
+ docs: {
+ sampleChildren: [
+ { component: 'Button', props: { children: 'Hover me' } },
+ ],
+ liveExample: `function Demo() {
+ return (
+ <Popover
+ content="Popover sample content"
+ title="Popover title"
+ arrow
+ >
+ <Button>Hover me</Button>
+ </Popover>
+ );
+}`,
+ examples: [
+ {
+ title: 'Click Trigger',
+ code: `function ClickPopover() {
+ return (
+ <Popover
+ content="This popover appears on click."
+ title="Click Popover"
+ trigger="click"
+ >
+ <Button>Click me</Button>
+ </Popover>
+ );
+}`,
+ },
+ {
+ title: 'Placements',
+ code: `function PlacementsDemo() {
+ return (
+ <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center', padding: '60px 0' }}>
+ {['top', 'right', 'bottom', 'left'].map(placement => (
+ <Popover
+ key={placement}
+ content={\`This popover is placed on the \${placement}\`}
+ title={placement}
+ placement={placement}
+ >
+ <Button>{placement}</Button>
+ </Popover>
+ ))}
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Rich Content',
+ code: `function RichPopover() {
+ return (
+ <Popover
+ title="Dashboard Info"
+ content={
+ <div>
+ <p><strong>Created by:</strong> Admin</p>
+ <p><strong>Last modified:</strong> Jan 2025</p>
+ <p><strong>Charts:</strong> 12</p>
+ </div>
+ }
+ >
+ <Button buttonStyle="primary">
+ <Icons.InfoCircleOutlined /> View Details
+ </Button>
+ </Popover>
+ );
+}`,
+ },
+ ],
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx
index b696b92c7e9..d056a992ad4 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -32,7 +32,7 @@ export default {
};
export const InteractiveProgressBar = (args: ProgressBarProps) => (
- <ProgressBar {...args} type="line" />
+ <ProgressBar {...args} />
);
export const InteractiveProgressCircle = (args: ProgressBarProps) => (
@@ -43,21 +43,30 @@ export const InteractiveProgressDashboard = (args: ProgressBarProps) => (
<ProgressBar {...args} type="dashboard" />
);
-const commonArgs = {
- striped: true,
- percent: 90,
+InteractiveProgressBar.args = {
+ percent: 75,
+ status: 'normal',
+ type: 'line',
+ striped: false,
showInfo: true,
- strokeColor: '#FF0000',
- trailColor: '#000',
strokeLinecap: 'round',
- type: 'line',
};
-const commonArgTypes = {
+InteractiveProgressBar.argTypes = {
percent: {
control: { type: 'number', min: 0, max: 100 },
description: 'Completion percentage (0-100).',
},
+ status: {
+ control: 'select',
+ options: ['normal', 'success', 'exception', 'active'],
+ description: 'Current status of the progress bar.',
+ },
+ type: {
+ control: 'select',
+ options: ['line', 'circle', 'dashboard'],
+ description: 'Display type: line, circle, or dashboard gauge.',
+ },
striped: {
control: 'boolean',
description: 'Whether to show striped animation on the bar.',
@@ -68,7 +77,7 @@ const commonArgTypes = {
},
strokeColor: {
control: 'color',
- description: 'Color of the progress bar.',
+ description: 'Color of the progress bar fill.',
},
trailColor: {
control: 'color',
@@ -79,29 +88,20 @@ const commonArgTypes = {
options: ['round', 'butt', 'square'],
description: 'Shape of the progress bar endpoints.',
},
- type: {
- control: 'select',
- options: ['line', 'circle', 'dashboard'],
- description: 'Display type: line, circle, or dashboard gauge.',
- },
-};
-
-InteractiveProgressBar.args = {
- ...commonArgs,
- status: 'normal',
-};
-
-InteractiveProgressBar.argTypes = {
- ...commonArgTypes,
- status: {
- control: 'select',
- options: ['normal', 'success', 'exception', 'active'],
- description: 'Current status of the progress bar.',
- },
};
InteractiveProgressBar.parameters = {
docs: {
+ liveExample: `function Demo() {
+ return (
+ <ProgressBar
+ percent={75}
+ status="normal"
+ type="line"
+ showInfo
+ />
+ );
+}`,
examples: [
{
title: 'All Progress Types',
@@ -138,16 +138,70 @@ InteractiveProgressBar.parameters = {
))}
</div>
);
+}`,
+ },
+ {
+ title: 'Custom Colors',
+ code: `function CustomColors() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+ <ProgressBar percent={50} strokeColor="#1890ff" />
+ <ProgressBar percent={70} strokeColor="#52c41a" />
+ <ProgressBar percent={30} strokeColor="#faad14" trailColor="#f0f0f0" />
+ <ProgressBar percent={90} strokeColor="#ff4d4f" />
+ </div>
+ );
}`,
},
],
},
};
-InteractiveProgressCircle.args = commonArgs;
+const commonArgs = {
+ striped: true,
+ percent: 90,
+ showInfo: true,
+ strokeColor: '#FF0000',
+ trailColor: '#000',
+ strokeLinecap: 'round',
+ type: 'line',
+};
+const commonArgTypes = {
+ percent: {
+ control: { type: 'number', min: 0, max: 100 },
+ description: 'Completion percentage (0-100).',
+ },
+ striped: {
+ control: 'boolean',
+ description: 'Whether to show striped animation on the bar.',
+ },
+ showInfo: {
+ control: 'boolean',
+ description: 'Whether to show the percentage text.',
+ },
+ strokeColor: {
+ control: 'color',
+ description: 'Color of the progress bar.',
+ },
+ trailColor: {
+ control: 'color',
+ description: 'Color of the unfilled portion.',
+ },
+ strokeLinecap: {
+ control: 'select',
+ options: ['round', 'butt', 'square'],
+ description: 'Shape of the progress bar endpoints.',
+ },
+ type: {
+ control: 'select',
+ options: ['line', 'circle', 'dashboard'],
+ description: 'Display type: line, circle, or dashboard gauge.',
+ },
+};
+
+InteractiveProgressCircle.args = commonArgs;
InteractiveProgressCircle.argTypes = commonArgTypes;
InteractiveProgressDashboard.args = commonArgs;
-
InteractiveProgressDashboard.argTypes = commonArgTypes;
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx
index 3323a487281..5d6f48b4ce3 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx
@@ -16,14 +16,20 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
import { SelectOptionsType, SelectProps } from './types';
import { Select } from '.';
export default {
title: 'Components/Select',
component: Select,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A versatile select component supporting single and multi-select modes, search filtering, option creation, and both synchronous and asynchronous data sources.',
+ },
+ },
+ },
};
const DEFAULT_WIDTH = 200;
@@ -88,145 +94,197 @@ const generateOptions = (opts: SelectOptionsType, count: number) => {
return generated.slice(0, count);
};
-export const InteractiveSelect: StoryObj = {
- render: ({
- header,
- options,
- optionsCount,
- ...args
- }: SelectProps & { header: string; optionsCount: number }) => {
- noop(header);
- return (
- <div
- style={{
- width: DEFAULT_WIDTH,
- }}
- >
- <Select
- {...args}
- options={
- Array.isArray(options)
- ? generateOptions(options, optionsCount)
- : options
- }
- mode="multiple"
- />
- </div>
- );
+export const InteractiveSelect = (args: SelectProps) => (
+ <div style={{ width: DEFAULT_WIDTH }}>
+ <Select
+ ariaLabel="interactive-select"
+ options={options}
+ {...args}
+ />
+ </div>
+);
+
+InteractiveSelect.args = {
+ mode: 'single',
+ placeholder: 'Select ...',
+ showSearch: true,
+ allowNewOptions: false,
+ allowClear: false,
+ allowSelectAll: true,
+ disabled: false,
+ invertSelection: false,
+ oneLine: false,
+ maxTagCount: 4,
+};
+
+InteractiveSelect.argTypes = {
+ mode: {
+ control: 'inline-radio',
+ options: ['single', 'multiple'],
+ description: 'Whether to allow selection of a single option or multiple.',
},
- args: {
- autoFocus: true,
- allowNewOptions: false,
- allowClear: false,
- autoClearSearchValue: false,
- allowSelectAll: true,
- disabled: false,
- header: 'none',
- invertSelection: false,
- labelInValue: true,
- maxTagCount: 4,
- mode: 'single',
- oneLine: false,
- options,
- optionsCount: options.length,
- optionFilterProps: ['value', 'label', 'custom'],
- placeholder: 'Select ...',
- showSearch: true,
+ placeholder: {
+ control: 'text',
+ description: 'Placeholder text when no option is selected.',
},
- argTypes: {
- options: {
- description: `It defines the options of the Select.
- The options can be static, an array of options.
- The options can also be async, a promise that returns an array of options.
- `,
- },
- ariaLabel: {
- description: `It adds the aria-label tag for accessibility standards.
- Must be plain English and localized.
- `,
- },
- labelInValue: {
- table: {
- disable: true,
- },
- },
- name: {
- table: {
- disable: true,
- },
+ showSearch: {
+ control: 'boolean',
+ description: 'Whether to show a search input for filtering.',
+ },
+ allowNewOptions: {
+ control: 'boolean',
+ description: 'Whether users can create new options by typing a value not in the list.',
+ },
+ allowClear: {
+ control: 'boolean',
+ description: 'Whether to show a clear button to reset the selection.',
+ },
+ allowSelectAll: {
+ control: 'boolean',
+ description: 'Whether to show a "Select All" option in multiple mode.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Whether the select is disabled.',
+ },
+ invertSelection: {
+ control: 'boolean',
+ description: 'Shows a stop icon instead of a checkmark on selected options, indicating deselection on click.',
+ },
+ oneLine: {
+ control: 'boolean',
+ description: 'Forces tags onto one line with overflow count. Requires multiple mode.',
+ },
+ maxTagCount: {
+ control: { type: 'number' },
+ description: 'Maximum number of tags to display in multiple mode before showing an overflow count.',
+ },
+};
+
+InteractiveSelect.parameters = {
+ docs: {
+ staticProps: {
+ options: [
+ { label: 'Such an incredibly awesome long long label', value: 'long-label-1' },
+ { label: 'Another incredibly awesome long long label', value: 'long-label-2' },
+ { label: 'Option A', value: 'A' },
+ { label: 'Option B', value: 'B' },
+ { label: 'Option C', value: 'C' },
+ { label: 'Option D', value: 'D' },
+ { label: 'Option E', value: 'E' },
+ { label: 'Option F', value: 'F' },
+ { label: 'Option G', value: 'G' },
+ { label: 'Option H', value: 'H' },
+ { label: 'Option I', value: 'I' },
+ ],
},
- notFoundContent: {
- table: {
- disable: true,
+ liveExample: `function Demo() {
+ return (
+ <div style={{ width: 300 }}>
+ <Select
+ ariaLabel="demo-select"
+ options={[
+ { label: 'Dashboards', value: 'dashboards' },
+ { label: 'Charts', value: 'charts' },
+ { label: 'Datasets', value: 'datasets' },
+ { label: 'SQL Lab', value: 'sqllab' },
+ { label: 'Settings', value: 'settings' },
+ ]}
+ placeholder="Select ..."
+ showSearch
+ />
+ </div>
+ );
+}`,
+ examples: [
+ {
+ title: 'Multi Select',
+ code: `function MultiSelectDemo() {
+ return (
+ <div style={{ width: 400 }}>
+ <Select
+ ariaLabel="multi-select"
+ mode="multiple"
+ options={[
+ { label: 'Dashboards', value: 'dashboards' },
+ { label: 'Charts', value: 'charts' },
+ { label: 'Datasets', value: 'datasets' },
+ { label: 'SQL Lab', value: 'sqllab' },
+ { label: 'Settings', value: 'settings' },
+ ]}
+ placeholder="Select items..."
+ allowSelectAll
+ maxTagCount={3}
+ />
+ </div>
+ );
+}`,
},
- },
- mappedMode: {
- table: {
- disable: true,
+ {
+ title: 'Allow New Options',
+ code: `function AllowNewDemo() {
+ return (
+ <div style={{ width: 300 }}>
+ <Select
+ ariaLabel="allow-new-select"
+ mode="multiple"
+ options={[
+ { label: 'Red', value: 'red' },
+ { label: 'Green', value: 'green' },
+ { label: 'Blue', value: 'blue' },
+ ]}
+ placeholder="Type to add tags..."
+ allowNewOptions
+ showSearch
+ />
+ </div>
+ );
+}`,
},
- },
- mode: {
- description: `It defines whether the Select should allow for
- the selection of multiple options or single. Single by default.
- `,
- control: {
- type: 'inline-radio',
- options: ['single', 'multiple'],
+ {
+ title: 'Inverted Selection',
+ code: `function InvertedDemo() {
+ return (
+ <div style={{ width: 400 }}>
+ <Select
+ ariaLabel="inverted-select"
+ mode="multiple"
+ options={[
+ { label: 'Admin', value: 'admin' },
+ { label: 'Editor', value: 'editor' },
+ { label: 'Viewer', value: 'viewer' },
+ { label: 'Public', value: 'public' },
+ ]}
+ placeholder="Exclude roles..."
+ invertSelection
+ />
+ </div>
+ );
+}`,
},
- },
- allowNewOptions: {
- description: `It enables the user to create new options.
- Can be used with standard or async select types.
- Can be used with any mode, single or multiple. False by default.
- `,
- },
- invertSelection: {
- description: `It shows a stop-outlined icon at the far right of a selected
- option instead of the default checkmark.
- Useful to better indicate to the user that by clicking on a selected
- option it will be de-selected. False by default.
- `,
- },
- optionFilterProps: {
- description: `It allows to define which properties of the option object
- should be looked for when searching.
- By default label and value.
- `,
- },
- oneLine: {
- description: `Sets maxTagCount to 1. The overflow tag is always displayed in
- the same line, line wrapping is disabled.
- When the dropdown is open, sets maxTagCount to 0,
- displays only the overflow tag.
- Requires '"mode=multiple"'.
- `,
- },
- maxTagCount: {
- description: `Sets maxTagCount attribute. The overflow tag is displayed in
- place of the remaining items.
- Requires '"mode=multiple"'.
- `,
- },
- optionsCount: {
- control: {
- type: 'number',
+ {
+ title: 'One Line Mode',
+ code: `function OneLineDemo() {
+ return (
+ <div style={{ width: 300 }}>
+ <Select
+ ariaLabel="oneline-select"
+ mode="multiple"
+ options={[
+ { label: 'Dashboard 1', value: 'd1' },
+ { label: 'Dashboard 2', value: 'd2' },
+ { label: 'Dashboard 3', value: 'd3' },
+ { label: 'Dashboard 4', value: 'd4' },
+ { label: 'Dashboard 5', value: 'd5' },
+ ]}
+ placeholder="Select dashboards..."
+ oneLine
+ />
+ </div>
+ );
+}`,
},
- },
- header: {
- description: `It adds a header on top of the Select. Can be any ReactNode.`,
- control: { type: 'inline-radio', options: ['none', 'text', 'control'] },
- },
- pageSize: {
- description: `It defines how many results should be included in the query response.
- Works in async mode only (See the options property).
- `,
- },
- fetchOnlyOnSearch: {
- description: `It fires a request against the server only after searching.
- Works in async mode only (See the options property).
- Undefined by default.
- `,
- },
+ ],
},
};
@@ -310,3 +368,49 @@ PageScroll.parameters = {
disable: true,
},
};
+
+/**
+ * Extended interactive story for Storybook with additional controls
+ * (header, optionsCount, generateOptions) that are story-specific utilities.
+ */
+export const AdvancedPlayground = (
+ args: SelectProps & { optionsCount: number },
+) => {
+ const { optionsCount, ...selectArgs } = args;
+ return (
+ <div style={{ width: DEFAULT_WIDTH }}>
+ <Select
+ {...selectArgs}
+ options={generateOptions(options, optionsCount)}
+ />
+ </div>
+ );
+};
+
+AdvancedPlayground.args = {
+ autoFocus: true,
+ allowNewOptions: false,
+ allowClear: false,
+ autoClearSearchValue: false,
+ allowSelectAll: true,
+ disabled: false,
+ invertSelection: false,
+ labelInValue: true,
+ maxTagCount: 4,
+ mode: 'multiple',
+ oneLine: false,
+ optionsCount: options.length,
+ optionFilterProps: ['value', 'label', 'custom'],
+ placeholder: 'Select ...',
+ showSearch: true,
+};
+
+AdvancedPlayground.argTypes = {
+ mode: {
+ control: { type: 'inline-radio' },
+ options: ['single', 'multiple'],
+ },
+ optionsCount: {
+ control: { type: 'number' },
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Slider/Slider.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Slider/Slider.stories.tsx
index 121f1fa0484..270805fa425 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Slider/Slider.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Slider/Slider.stories.tsx
@@ -21,6 +21,14 @@ import Slider, { SliderSingleProps, SliderRangeProps } from '.';
export default {
title: 'Components/Slider',
component: Slider,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A slider input for selecting a value or range from a continuous or stepped interval. Supports single value, range, vertical orientation, marks, and tooltip display.',
+ },
+ },
+ },
};
const tooltipPlacement = [
@@ -75,33 +83,181 @@ InteractiveSlider.args = {
max: 100,
defaultValue: 70,
step: 1,
- marks: {},
disabled: false,
reverse: false,
vertical: false,
- autoFocus: false,
keyboard: true,
dots: false,
included: true,
- tooltipPosition: 'bottom',
};
InteractiveSlider.argTypes = {
- onChange: { action: 'onChange' },
- onChangeComplete: { action: 'onChangeComplete' },
+ min: {
+ control: { type: 'number' },
+ description: 'Minimum value of the slider.',
+ },
+ max: {
+ control: { type: 'number' },
+ description: 'Maximum value of the slider.',
+ },
+ defaultValue: {
+ control: { type: 'number' },
+ description: 'Initial value of the slider.',
+ },
+ step: {
+ control: { type: 'number' },
+ description: 'Step increment between values. Use null for marks-only mode.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Whether the slider is disabled.',
+ },
+ reverse: {
+ control: 'boolean',
+ description: 'Whether to reverse the slider direction.',
+ },
+ vertical: {
+ control: 'boolean',
+ description: 'Whether to display the slider vertically.',
+ },
+ keyboard: {
+ control: 'boolean',
+ description: 'Whether keyboard arrow keys can control the slider.',
+ },
+ dots: {
+ control: 'boolean',
+ description: 'Whether to show dots at each step mark.',
+ },
+ included: {
+ control: 'boolean',
+ description: 'Whether to highlight the filled portion of the track.',
+ },
tooltipOpen: {
- control: { type: 'boolean' },
+ control: 'boolean',
+ description: 'Whether the value tooltip is always visible.',
},
tooltipPosition: {
- options: tooltipPlacement,
control: { type: 'select' },
+ options: [
+ 'top',
+ 'left',
+ 'bottom',
+ 'right',
+ 'topLeft',
+ 'topRight',
+ 'bottomLeft',
+ 'bottomRight',
+ 'leftTop',
+ 'leftBottom',
+ 'rightTop',
+ 'rightBottom',
+ ],
+ description: 'Position of the value tooltip relative to the handle.',
+ },
+ onChange: { action: 'onChange' },
+ onChangeComplete: { action: 'onChangeComplete' },
+};
+
+InteractiveSlider.parameters = {
+ docs: {
+ liveExample: `function Demo() {
+ return (
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <Slider
+ min={0}
+ max={100}
+ defaultValue={70}
+ step={1}
+ />
+ </div>
+ );
+}`,
+ examples: [
+ {
+ title: 'Range Slider',
+ code: `function RangeSliderDemo() {
+ return (
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <h4>Basic Range</h4>
+ <Slider range defaultValue={[20, 70]} min={0} max={100} />
+ <br />
+ <h4>Draggable Track</h4>
+ <Slider range={{ draggableTrack: true }} defaultValue={[30, 60]} min={0} max={100} />
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'With Marks',
+ code: `function MarksDemo() {
+ return (
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <Slider
+ min={0}
+ max={100}
+ defaultValue={37}
+ marks={{
+ 0: '0°C',
+ 25: '25°C',
+ 50: '50°C',
+ 75: '75°C',
+ 100: '100°C',
+ }}
+ />
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Stepped and Dots',
+ code: `function SteppedDemo() {
+ return (
+ <div style={{ width: 400, padding: '20px 0' }}>
+ <h4>Step = 10 with Dots</h4>
+ <Slider min={0} max={100} defaultValue={30} step={10} dots />
+ <br />
+ <h4>Step = 25</h4>
+ <Slider min={0} max={100} defaultValue={50} step={25} dots
+ marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }} />
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Vertical Slider',
+ code: `function VerticalDemo() {
+ return (
+ <div style={{ height: 300, display: 'flex', gap: 40, padding: '0 40px' }}>
+ <Slider vertical defaultValue={30} />
+ <Slider vertical range defaultValue={[20, 60]} />
+ <Slider vertical defaultValue={50} dots step={10}
+ marks={{ 0: '0', 50: '50', 100: '100' }} />
+ </div>
+ );
+}`,
+ },
+ ],
},
};
InteractiveRangeSlider.args = {
- ...InteractiveSlider.args,
+ min: 0,
+ max: 100,
defaultValue: [50, 70],
+ step: 1,
+ disabled: false,
+ reverse: false,
+ vertical: false,
+ keyboard: true,
+ dots: false,
+ included: true,
draggableTrack: false,
};
-InteractiveRangeSlider.argTypes = InteractiveSlider.argTypes;
+InteractiveRangeSlider.argTypes = {
+ ...InteractiveSlider.argTypes,
+ draggableTrack: {
+ control: 'boolean',
+ description: 'Whether the track between handles can be dragged to move both handles together.',
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx
index 336c0ef0dd0..cfc0c75f5e2 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx
@@ -22,12 +22,21 @@ import { Steps, type StepsProps } from '.';
export default {
title: 'Components/Steps',
component: Steps as typeof AntdSteps,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A navigation component for guiding users through multi-step workflows. Supports horizontal, vertical, and inline layouts with progress tracking.',
+ },
+ },
+ },
};
export const InteractiveSteps = (args: StepsProps) => <Steps {...args} />;
+
InteractiveSteps.args = {
direction: 'horizontal',
- initial: 0,
+ current: 1,
labelPlacement: 'horizontal',
progressDot: false,
size: 'default',
@@ -51,23 +60,144 @@ InteractiveSteps.args = {
InteractiveSteps.argTypes = {
direction: {
- options: ['horizontal', 'vertical'],
control: { type: 'select' },
+ options: ['horizontal', 'vertical'],
+ description: 'Layout direction of the steps.',
+ },
+ current: {
+ control: { type: 'number' },
+ description: 'Index of the current step (zero-based).',
},
labelPlacement: {
- options: ['horizontal', 'vertical'],
control: { type: 'select' },
+ options: ['horizontal', 'vertical'],
+ description: 'Position of step labels relative to the step icon.',
+ },
+ progressDot: {
+ control: 'boolean',
+ description: 'Whether to use a dot style instead of numbered icons.',
},
size: {
- options: ['default', 'small'],
control: { type: 'select' },
+ options: ['default', 'small'],
+ description: 'Size of the step icons and text.',
},
status: {
- options: ['wait', 'process', 'finish', 'error'],
control: { type: 'select' },
+ options: ['wait', 'process', 'finish', 'error'],
+ description: 'Status of the current step.',
},
type: {
- options: ['default', 'navigation', 'inline'],
control: { type: 'select' },
+ options: ['default', 'navigation', 'inline'],
+ description: 'Visual style: default numbered, navigation breadcrumb, or inline compact.',
+ },
+};
+
+InteractiveSteps.parameters = {
+ docs: {
+ staticProps: {
+ items: [
+ { title: 'Connect Database', description: 'Configure the connection' },
+ { title: 'Create Dataset', description: 'Select tables and columns' },
+ { title: 'Build Chart', description: 'Choose visualization type' },
+ ],
+ },
+ liveExample: `function Demo() {
+ return (
+ <Steps
+ current={1}
+ items={[
+ { title: 'Connect Database', description: 'Configure the connection' },
+ { title: 'Create Dataset', description: 'Select tables and columns' },
+ { title: 'Build Chart', description: 'Choose visualization type' },
+ ]}
+ />
+ );
+}`,
+ examples: [
+ {
+ title: 'Vertical Steps',
+ code: `function VerticalSteps() {
+ return (
+ <Steps
+ direction="vertical"
+ current={1}
+ items={[
+ { title: 'Upload CSV', description: 'Select a file from your computer' },
+ { title: 'Configure Columns', description: 'Set data types and names' },
+ { title: 'Review', description: 'Verify the data looks correct' },
+ { title: 'Import', description: 'Save the dataset' },
+ ]}
+ />
+ );
+}`,
+ },
+ {
+ title: 'Status Indicators',
+ code: `function StatusSteps() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+ <div>
+ <h4>Error on Step 2</h4>
+ <Steps
+ current={1}
+ status="error"
+ items={[
+ { title: 'Connection', description: 'Configured' },
+ { title: 'Validation', description: 'Failed to validate' },
+ { title: 'Complete' },
+ ]}
+ />
+ </div>
+ <div>
+ <h4>All Complete</h4>
+ <Steps
+ current={3}
+ items={[
+ { title: 'Step 1' },
+ { title: 'Step 2' },
+ { title: 'Step 3' },
+ ]}
+ />
+ </div>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Dot Style and Small Size',
+ code: `function DotAndSmall() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+ <div>
+ <h4>Progress Dots</h4>
+ <Steps
+ progressDot
+ current={1}
+ items={[
+ { title: 'Create', description: 'Define the resource' },
+ { title: 'Configure', description: 'Set parameters' },
+ { title: 'Deploy', description: 'Go live' },
+ ]}
+ />
+ </div>
+ <div>
+ <h4>Small Size</h4>
+ <Steps
+ size="small"
+ current={2}
+ items={[
+ { title: 'Login' },
+ { title: 'Verify' },
+ { title: 'Done' },
+ ]}
+ />
+ </div>
+ </div>
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Switch/Switch.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Switch/Switch.stories.tsx
index 508549ac0e3..7fb89cc2ef9 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Switch/Switch.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Switch/Switch.stories.tsx
@@ -21,6 +21,14 @@ import { Switch, type SwitchProps } from '.';
export default {
title: 'Components/Switch',
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A toggle switch for boolean on/off states. Supports loading indicators, sizing, and an HTML title attribute for accessibility tooltips.',
+ },
+ },
+ },
};
export const InteractiveSwitch = ({ checked, ...rest }: SwitchProps) => {
@@ -39,15 +47,120 @@ InteractiveSwitch.args = {
checked: defaultCheckedValue,
disabled: false,
loading: false,
- title: 'Switch',
+ title: 'Toggle feature',
defaultChecked: defaultCheckedValue,
- autoFocus: true,
};
InteractiveSwitch.argTypes = {
+ checked: {
+ control: 'boolean',
+ description: 'Whether the switch is on.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Whether the switch is disabled.',
+ },
+ loading: {
+ control: 'boolean',
+ description: 'Whether to show a loading spinner inside the switch.',
+ },
+ title: {
+ control: 'text',
+ description: 'HTML title attribute shown as a browser tooltip on hover. Useful for accessibility.',
+ },
size: {
- defaultValue: 'default',
control: { type: 'radio' },
options: ['small', 'default'],
+ description: 'Size of the switch.',
+ },
+};
+
+InteractiveSwitch.parameters = {
+ docs: {
+ liveExample: `function Demo() {
+ const [checked, setChecked] = React.useState(true);
+ return (
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch
+ checked={checked}
+ onChange={setChecked}
+ title="Toggle feature"
+ />
+ <span>{checked ? 'On' : 'Off'}</span>
+ <span style={{ color: '#999', fontSize: 12 }}>(hover the switch to see the title tooltip)</span>
+ </div>
+ );
+}`,
+ examples: [
+ {
+ title: 'Switch States',
+ code: `function SwitchStates() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch defaultChecked title="Enabled switch" />
+ <span>Checked</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch title="Unchecked switch" />
+ <span>Unchecked</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch disabled defaultChecked title="Disabled on" />
+ <span>Disabled (on)</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch disabled title="Disabled off" />
+ <span>Disabled (off)</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch loading defaultChecked title="Loading switch" />
+ <span>Loading</span>
+ </div>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Sizes',
+ code: `function SizesDemo() {
+ return (
+ <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch size="small" defaultChecked title="Small switch" />
+ <span>Small</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Switch size="default" defaultChecked title="Default switch" />
+ <span>Default</span>
+ </div>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Settings Panel',
+ code: `function SettingsPanel() {
+ const [notifications, setNotifications] = React.useState(true);
+ const [darkMode, setDarkMode] = React.useState(false);
+ const [autoRefresh, setAutoRefresh] = React.useState(true);
+ return (
+ <div style={{ maxWidth: 320, border: '1px solid #e8e8e8', borderRadius: 8, padding: 16 }}>
+ <h4 style={{ marginTop: 0 }}>Dashboard Settings</h4>
+ {[
+ { label: 'Email notifications', checked: notifications, onChange: setNotifications, title: 'Toggle email notifications' },
+ { label: 'Dark mode', checked: darkMode, onChange: setDarkMode, title: 'Toggle dark mode' },
+ { label: 'Auto-refresh data', checked: autoRefresh, onChange: setAutoRefresh, title: 'Toggle auto-refresh' },
+ ].map(({ label, checked, onChange, title }) => (
+ <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid #f0f0f0' }}>
+ <span>{label}</span>
+ <Switch checked={checked} onChange={onChange} title={title} />
+ </div>
+ ))}
+ </div>
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx
index 08c131060e1..509b4956d66 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx
@@ -21,6 +21,14 @@ import { TableView, TableViewProps, EmptyWrapperType } from '.';
export default {
title: 'Components/TableView',
component: TableView,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'A data table component with sorting, pagination, text wrapping, and empty state support. Built on react-table.',
+ },
+ },
+ },
};
export const InteractiveTableView = (args: TableViewProps) => (
@@ -67,7 +75,7 @@ InteractiveTableView.args = {
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
},
{
- id: 321,
+ id: 456,
age: 10,
name: 'John Smith',
summary:
@@ -76,7 +84,7 @@ InteractiveTableView.args = {
],
initialSortBy: [{ id: 'name', desc: true }],
noDataText: 'No data here',
- pageSize: 1,
+ pageSize: 2,
showRowCount: true,
withPagination: true,
columnsForWrapText: ['Summary'],
@@ -84,22 +92,131 @@ InteractiveTableView.args = {
};
InteractiveTableView.argTypes = {
+ pageSize: {
+ control: { type: 'number', min: 1 },
+ description: 'Number of rows displayed per page.',
+ },
+ withPagination: {
+ control: 'boolean',
+ description: 'Whether to show pagination controls below the table.',
+ },
+ showRowCount: {
+ control: 'boolean',
+ description: 'Whether to display the total row count alongside pagination.',
+ },
+ noDataText: {
+ control: 'text',
+ description: 'Text displayed when the table has no data.',
+ },
+ scrollTopOnPagination: {
+ control: 'boolean',
+ description: 'Whether to scroll to the top of the table when changing pages.',
+ },
emptyWrapperType: {
- control: {
- type: 'select',
- },
+ control: { type: 'select' },
options: [EmptyWrapperType.Default, EmptyWrapperType.Small],
- },
- pageSize: {
- control: {
- type: 'number',
- min: 1,
- },
+ description: 'Style of the empty state wrapper.',
},
initialPageIndex: {
- control: {
- type: 'number',
- min: 0,
+ control: { type: 'number', min: 0 },
+ description: 'Initial page to display (zero-based).',
+ },
+};
+
+InteractiveTableView.parameters = {
+ docs: {
+ staticProps: {
+ columns: [
+ { accessor: 'id', Header: 'ID', sortable: true, id: 'id' },
+ { accessor: 'age', Header: 'Age', id: 'age' },
+ { accessor: 'name', Header: 'Name', id: 'name' },
+ { accessor: 'summary', Header: 'Summary', id: 'summary' },
+ ],
+ data: [
+ { id: 123, age: 27, name: 'Emily', summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+ { id: 321, age: 10, name: 'Kate', summary: 'Nam id porta neque, a vehicula orci.' },
+ { id: 456, age: 10, name: 'John Smith', summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.' },
+ ],
},
+ liveExample: `function Demo() {
+ return (
+ <TableView
+ columns={[
+ { accessor: 'id', Header: 'ID', sortable: true, id: 'id' },
+ { accessor: 'age', Header: 'Age', id: 'age' },
+ { accessor: 'name', Header: 'Name', id: 'name' },
+ { accessor: 'summary', Header: 'Summary', id: 'summary' },
+ ]}
+ data={[
+ { id: 123, age: 27, name: 'Emily', summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+ { id: 321, age: 10, name: 'Kate', summary: 'Nam id porta neque, a vehicula orci.' },
+ { id: 456, age: 10, name: 'John Smith', summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.' },
+ ]}
+ initialSortBy={[{ id: 'name', desc: true }]}
+ pageSize={2}
+ withPagination
+ showRowCount
+ />
+ );
+}`,
+ examples: [
+ {
+ title: 'Without Pagination',
+ code: `function NoPaginationDemo() {
+ return (
+ <TableView
+ columns={[
+ { accessor: 'name', Header: 'Name', id: 'name' },
+ { accessor: 'email', Header: 'Email', id: 'email' },
+ { accessor: 'status', Header: 'Status', id: 'status' },
+ ]}
+ data={[
+ { name: 'Alice', email: 'alice@example.com', status: 'Active' },
+ { name: 'Bob', email: 'bob@example.com', status: 'Inactive' },
+ { name: 'Charlie', email: 'charlie@example.com', status: 'Active' },
+ ]}
+ withPagination={false}
+ />
+ );
+}`,
+ },
+ {
+ title: 'Empty State',
+ code: `function EmptyDemo() {
+ return (
+ <TableView
+ columns={[
+ { accessor: 'name', Header: 'Name', id: 'name' },
+ { accessor: 'value', Header: 'Value', id: 'value' },
+ ]}
+ data={[]}
+ noDataText="No results found"
+ />
+ );
+}`,
+ },
+ {
+ title: 'With Sorting',
+ code: `function SortingDemo() {
+ return (
+ <TableView
+ columns={[
+ { accessor: 'id', Header: 'ID', id: 'id', sortable: true },
+ { accessor: 'name', Header: 'Name', id: 'name', sortable: true },
+ { accessor: 'score', Header: 'Score', id: 'score', sortable: true },
+ ]}
+ data={[
+ { id: 1, name: 'Dashboard A', score: 95 },
+ { id: 2, name: 'Dashboard B', score: 72 },
+ { id: 3, name: 'Dashboard C', score: 88 },
+ { id: 4, name: 'Dashboard D', score: 64 },
+ ]}
+ initialSortBy={[{ id: 'score', desc: true }]}
+ withPagination={false}
+ />
+ );
+}`,
+ },
+ ],
},
};
(superset) 01/02: docs(components): add Icons page, examples pattern, and editor improvements
Posted by ru...@apache.org.
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
commit 13791c38697ae8fc8ae88c8193ba1d4585375c5a
Author: Evan Rusackas <ev...@rusackas.com>
AuthorDate: Fri Jan 23 09:34:57 2026 -0800
docs(components): add Icons page, examples pattern, and editor improvements
Generator enhancements:
- Add `renderComponent` parameter for namespace components like Icons
- Add `examples` array support for multiple code examples per component
- Replace "Source" section with "Improve this page" admonition with edit link
- Remove Icons from skipComponents now that it renders correctly
StorybookWrapper improvements:
- Support `renderComponent` prop to override rendered component
- Handle namespace objects that aren't directly renderable
Story updates with examples:
- Icons: comprehensive categorized gallery (70+ icons in 8 categories)
- ProgressBar: All Progress Types and Status Variants examples
- Radio: Radio Button Variants and Vertical Radio Group examples
- Typography: All Subcomponents and Text Styling Options examples
- Badge, Checkbox, Loading: additional showcase examples
CSS improvements:
- Add max-height (350px) with scroll for live code editors
- Prevents tall code blocks from dominating the page
Documentation:
- Add docs philosophy to AGENTS.md
- Create docs/.claude/instructions.md with patterns and guidelines
- Regenerate all 43 component MDX pages
Co-Authored-By: Claude Opus 4.5 <no...@anthropic.com>
---
AGENTS.md | 24 ++
docs/.claude/instructions.md | 115 +++++
.../components/design-system/flex.mdx | 13 +-
.../components/design-system/space.mdx | 13 +-
docs/developer_portal/components/index.mdx | 4 +-
.../components/ui/autocomplete.mdx | 13 +-
docs/developer_portal/components/ui/avatar.mdx | 13 +-
docs/developer_portal/components/ui/badge.mdx | 43 +-
docs/developer_portal/components/ui/breadcrumb.mdx | 13 +-
docs/developer_portal/components/ui/button.mdx | 13 +-
.../developer_portal/components/ui/buttongroup.mdx | 13 +-
docs/developer_portal/components/ui/card.mdx | 13 +-
docs/developer_portal/components/ui/checkbox.mdx | 77 +++-
docs/developer_portal/components/ui/collapse.mdx | 13 +-
docs/developer_portal/components/ui/datepicker.mdx | 13 +-
docs/developer_portal/components/ui/divider.mdx | 13 +-
.../components/ui/editabletitle.mdx | 13 +-
docs/developer_portal/components/ui/emptystate.mdx | 50 ++-
docs/developer_portal/components/ui/favestar.mdx | 38 +-
docs/developer_portal/components/ui/iconbutton.mdx | 52 ++-
docs/developer_portal/components/ui/icons.mdx | 196 ++++++++-
.../developer_portal/components/ui/icontooltip.mdx | 28 +-
docs/developer_portal/components/ui/index.mdx | 3 +-
.../developer_portal/components/ui/infotooltip.mdx | 13 +-
docs/developer_portal/components/ui/input.mdx | 29 +-
docs/developer_portal/components/ui/label.mdx | 13 +-
docs/developer_portal/components/ui/list.mdx | 59 ++-
.../components/ui/listviewcard.mdx | 81 +++-
docs/developer_portal/components/ui/loading.mdx | 140 ++++--
docs/developer_portal/components/ui/menu.mdx | 13 +-
docs/developer_portal/components/ui/modal.mdx | 13 +-
.../components/ui/modaltrigger.mdx | 13 +-
docs/developer_portal/components/ui/popover.mdx | 13 +-
.../developer_portal/components/ui/progressbar.mdx | 61 ++-
docs/developer_portal/components/ui/radio.mdx | 67 ++-
docs/developer_portal/components/ui/select.mdx | 13 +-
docs/developer_portal/components/ui/skeleton.mdx | 59 +--
docs/developer_portal/components/ui/slider.mdx | 13 +-
docs/developer_portal/components/ui/steps.mdx | 13 +-
docs/developer_portal/components/ui/switch.mdx | 13 +-
docs/developer_portal/components/ui/tableview.mdx | 15 +-
docs/developer_portal/components/ui/tabs.mdx | 13 +-
docs/developer_portal/components/ui/timer.mdx | 13 +-
docs/developer_portal/components/ui/tooltip.mdx | 13 +-
docs/developer_portal/components/ui/treeselect.mdx | 115 ++---
docs/developer_portal/components/ui/typography.mdx | 173 ++++++--
.../components/ui/unsavedchangesmodal.mdx | 13 +-
docs/scripts/generate-superset-components.mjs | 116 ++++-
docs/src/components/StorybookWrapper.jsx | 63 ++-
docs/src/styles/custom.css | 31 ++
.../src/components/Badge/Badge.stories.tsx | 40 +-
.../src/components/Checkbox/Checkbox.stories.tsx | 68 +++
.../EditableTitle/EditableTitle.stories.tsx | 61 +++
.../components/EmptyState/EmptyState.stories.tsx | 121 +++++-
.../src/components/FaveStar/FaveStar.stories.tsx | 41 ++
.../src/components/FaveStar/index.tsx | 2 +-
.../src/components/Grid/Grid.stories.tsx | 247 +++++------
.../components/IconButton/IconButton.stories.tsx | 53 ++-
.../components/IconTooltip/IconTooltip.stories.tsx | 22 +
.../src/components/Icons/Icons.stories.tsx | 178 ++++++++
.../src/components/Input/Input.stories.tsx | 16 +-
.../src/components/Layout/Layout.stories.tsx | 177 +++++---
.../src/components/List/List.stories.tsx | 31 +-
.../ListViewCard/ListViewCard.stories.tsx | 102 ++++-
.../src/components/Loading/Loading.stories.tsx | 105 ++++-
.../components/ProgressBar/ProgressBar.stories.tsx | 87 +++-
.../src/components/Radio/Radio.stories.tsx | 72 +++-
.../src/components/Skeleton/Skeleton.stories.tsx | 141 +++---
.../components/TreeSelect/TreeSelect.stories.tsx | 314 ++++++--------
.../components/Typography/Typography.stories.tsx | 475 ++++++++++++++++-----
70 files changed, 3025 insertions(+), 1305 deletions(-)
diff --git a/AGENTS.md b/AGENTS.md
index 1b676b0157f..b7495c481f9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -80,6 +80,30 @@ superset/
- **UPDATING.md**: Add breaking changes here
- **Docstrings**: Required for new functions/classes
+## Developer Portal: Storybook-to-MDX Documentation
+
+The Developer Portal auto-generates MDX documentation from Storybook stories. **Stories are the single source of truth.**
+
+### Core Philosophy
+- **Fix issues in the STORY, not the generator** - When something doesn't render correctly, update the story file first
+- **Generator should be lightweight** - It extracts and passes through data; avoid special cases
+- **Stories define everything** - Props, controls, galleries, examples all come from story metadata
+
+### Story Requirements for Docs Generation
+- Use `export default { title: '...' }` (inline), not `const meta = ...; export default meta;`
+- Name interactive stories `Interactive${ComponentName}` (e.g., `InteractiveButton`)
+- Define `args` for default prop values
+- Define `argTypes` at the story level (not meta level) with control types and descriptions
+- Use `parameters.docs.gallery` for size×style variant grids
+- Use `parameters.docs.sampleChildren` for components that need children
+- Use `parameters.docs.liveExample` for custom live code blocks
+- Use `parameters.docs.staticProps` for complex object props that can't be parsed inline
+
+### Generator Location
+- Script: `docs/scripts/generate-superset-components.mjs`
+- Wrapper: `docs/src/components/StorybookWrapper.jsx`
+- Output: `docs/developer_portal/components/`
+
## Architecture Patterns
### Security & Features
diff --git a/docs/.claude/instructions.md b/docs/.claude/instructions.md
new file mode 100644
index 00000000000..54db2f6f121
--- /dev/null
+++ b/docs/.claude/instructions.md
@@ -0,0 +1,115 @@
+# Developer Portal Documentation Instructions
+
+## Core Principle: Stories Are the Single Source of Truth
+
+When working on the Storybook-to-MDX documentation system:
+
+**ALWAYS fix the story first. NEVER add workarounds to the generator.**
+
+## Why This Matters
+
+The generator (`scripts/generate-superset-components.mjs`) should be lightweight - it extracts data from stories and passes it through. When you add special cases to the generator:
+- It becomes harder to maintain
+- Stories diverge from their docs representation
+- Future stories need to know about generator quirks
+
+When you fix stories to match the expected patterns:
+- Stories work identically in Storybook and Docs
+- The generator stays simple and predictable
+- Patterns are consistent and learnable
+
+## Story Patterns for Docs Generation
+
+### Required Structure
+```tsx
+// Use inline export default (NOT const meta = ...; export default meta)
+export default {
+ title: 'Components/MyComponent',
+ component: MyComponent,
+};
+
+// Name interactive stories with Interactive prefix
+export const InteractiveMyComponent: Story = {
+ args: {
+ // Default prop values
+ },
+ argTypes: {
+ // Control definitions - MUST be at story level, not meta level
+ propName: {
+ control: { type: 'select' },
+ options: ['a', 'b', 'c'],
+ description: 'What this prop does',
+ },
+ },
+};
+```
+
+### For Components with Variants (size × style grids)
+```tsx
+const sizes = ['small', 'medium', 'large'];
+const variants = ['primary', 'secondary', 'danger'];
+
+InteractiveButton.parameters = {
+ docs: {
+ gallery: {
+ component: 'Button',
+ sizes,
+ styles: variants,
+ sizeProp: 'size',
+ styleProp: 'variant',
+ },
+ },
+};
+```
+
+### For Components Requiring Children
+```tsx
+InteractiveIconTooltip.parameters = {
+ docs: {
+ // Component descriptors with dot notation for nested components
+ sampleChildren: [{ component: 'Icons.InfoCircleOutlined', props: { iconSize: 'l' } }],
+ },
+};
+```
+
+### For Custom Live Code Examples
+```tsx
+InteractiveMyComponent.parameters = {
+ docs: {
+ liveExample: `function Demo() {
+ return <MyComponent prop="value">Content</MyComponent>;
+}`,
+ },
+};
+```
+
+### For Complex Props (objects, arrays)
+```tsx
+InteractiveMenu.parameters = {
+ docs: {
+ staticProps: {
+ items: [
+ { key: '1', label: 'Item 1' },
+ { key: '2', label: 'Item 2' },
+ ],
+ },
+ },
+};
+```
+
+## Common Issues and How to Fix Them (in the Story)
+
+| Issue | Wrong Approach | Right Approach |
+|-------|---------------|----------------|
+| Component not generated | Add pattern to generator | Change story to use inline `export default` |
+| Control shows as text instead of select | Add special case in generator | Add `argTypes` with `control: { type: 'select' }` |
+| Missing children/content | Modify StorybookWrapper | Add `parameters.docs.sampleChildren` |
+| Gallery not showing | Add to generator output | Add `parameters.docs.gallery` config |
+| Wrong live example | Hardcode in generator | Add `parameters.docs.liveExample` |
+
+## Files
+
+- **Generator**: `docs/scripts/generate-superset-components.mjs`
+- **Wrapper**: `docs/src/components/StorybookWrapper.jsx`
+- **Output**: `docs/developer_portal/components/`
+- **Stories**: `superset-frontend/packages/superset-ui-core/src/components/*/`
diff --git a/docs/developer_portal/components/design-system/flex.mdx b/docs/developer_portal/components/design-system/flex.mdx
index 84ac9ce3695..b0a00a45596 100644
--- a/docs/developer_portal/components/design-system/flex.mdx
+++ b/docs/developer_portal/components/design-system/flex.mdx
@@ -132,14 +132,9 @@ function Demo() {
import { Flex } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/design-system-components-flex) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Flex/Flex.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Flex/Flex.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/design-system/space.mdx b/docs/developer_portal/components/design-system/space.mdx
index b8e7f474788..94c4e50d9cb 100644
--- a/docs/developer_portal/components/design-system/space.mdx
+++ b/docs/developer_portal/components/design-system/space.mdx
@@ -105,14 +105,9 @@ function Demo() {
import { Space } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/design-system-components-space) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Space/Space.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Space/Space.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/index.mdx b/docs/developer_portal/components/index.mdx
index f41b9f02a0c..666eba30eb1 100644
--- a/docs/developer_portal/components/index.mdx
+++ b/docs/developer_portal/components/index.mdx
@@ -27,12 +27,12 @@ sidebar_position: 0
Interactive documentation for Superset's UI component library. These components are used throughout Superset and are available for use in extensions and customizations.
-**42 components** documented across 2 categories.
+**43 components** documented across 2 categories.
## Categories
### [Core Components](./ui/)
-40 components
+41 components
### [Layout Components](./design-system/)
2 components
diff --git a/docs/developer_portal/components/ui/autocomplete.mdx b/docs/developer_portal/components/ui/autocomplete.mdx
index d1d9240d1c8..e0d721a7b9a 100644
--- a/docs/developer_portal/components/ui/autocomplete.mdx
+++ b/docs/developer_portal/components/ui/autocomplete.mdx
@@ -207,14 +207,9 @@ function Demo() {
import { AutoComplete } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-autocomplete) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/AutoComplete/AutoComplete.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/AutoComplete/AutoComplete.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/avatar.mdx b/docs/developer_portal/components/ui/avatar.mdx
index 857e45a9bca..96c438d3721 100644
--- a/docs/developer_portal/components/ui/avatar.mdx
+++ b/docs/developer_portal/components/ui/avatar.mdx
@@ -132,14 +132,9 @@ function Demo() {
import { Avatar } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-avatar) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/badge.mdx b/docs/developer_portal/components/ui/badge.mdx
index 9dc8f03f22b..24240d522fe 100644
--- a/docs/developer_portal/components/ui/badge.mdx
+++ b/docs/developer_portal/components/ui/badge.mdx
@@ -107,6 +107,36 @@ function Demo() {
}
```
+## Status Badge
+
+```tsx live
+function StatusBadgeDemo() {
+ const statuses = ['default', 'success', 'processing', 'warning', 'error'];
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+ {statuses.map(status => (
+ <Badge key={status} status={status} text={\`Status: \${status}\`} />
+ ))}
+ </div>
+ );
+}
+```
+
+## Color Gallery
+
+```tsx live
+function ColorGallery() {
+ const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
+ return (
+ <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+ {colors.map(color => (
+ <Badge key={color} count={9} color={color} />
+ ))}
+ </div>
+ );
+}
+```
+
## Props
| Prop | Type | Default | Description |
@@ -122,14 +152,9 @@ function Demo() {
import { Badge } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-badge) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/breadcrumb.mdx b/docs/developer_portal/components/ui/breadcrumb.mdx
index 85fa48babc0..60081b937cf 100644
--- a/docs/developer_portal/components/ui/breadcrumb.mdx
+++ b/docs/developer_portal/components/ui/breadcrumb.mdx
@@ -85,14 +85,9 @@ function Demo() {
import { Breadcrumb } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-breadcrumb) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Breadcrumb/Breadcrumb.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Breadcrumb/Breadcrumb.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/button.mdx b/docs/developer_portal/components/ui/button.mdx
index 44400332510..d36acbbf680 100644
--- a/docs/developer_portal/components/ui/button.mdx
+++ b/docs/developer_portal/components/ui/button.mdx
@@ -134,14 +134,9 @@ function Demo() {
import { Button } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-button) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Button/Button.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Button/Button.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/buttongroup.mdx b/docs/developer_portal/components/ui/buttongroup.mdx
index 80a58d86fa5..6f35bea6159 100644
--- a/docs/developer_portal/components/ui/buttongroup.mdx
+++ b/docs/developer_portal/components/ui/buttongroup.mdx
@@ -80,14 +80,9 @@ function Demo() {
import { ButtonGroup } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-buttongroup) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/ButtonGroup/ButtonGroup.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ButtonGroup/ButtonGroup.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/card.mdx b/docs/developer_portal/components/ui/card.mdx
index e24e8b75a9f..568b476668e 100644
--- a/docs/developer_portal/components/ui/card.mdx
+++ b/docs/developer_portal/components/ui/card.mdx
@@ -109,14 +109,9 @@ function Demo() {
import { Card } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-card) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Card/Card.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Card/Card.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/checkbox.mdx b/docs/developer_portal/components/ui/checkbox.mdx
index 496c4744de6..a7b76e5b5ca 100644
--- a/docs/developer_portal/components/ui/checkbox.mdx
+++ b/docs/developer_portal/components/ui/checkbox.mdx
@@ -40,12 +40,14 @@ Checkbox component that supports both regular and indeterminate states, built on
{
name: "checked",
label: "Checked",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the checkbox is checked."
},
{
name: "indeterminate",
label: "Indeterminate",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the checkbox is in indeterminate state (partially selected)."
}
]}
/>
@@ -64,12 +66,66 @@ function Demo() {
}
```
+## All Checkbox States
+
+```tsx live
+function AllStates() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+ <Checkbox checked={false}>Unchecked</Checkbox>
+ <Checkbox checked={true}>Checked</Checkbox>
+ <Checkbox indeterminate={true}>Indeterminate</Checkbox>
+ <Checkbox disabled>Disabled unchecked</Checkbox>
+ <Checkbox disabled checked>Disabled checked</Checkbox>
+ </div>
+ );
+}
+```
+
+## Select All Pattern
+
+```tsx live
+function SelectAllDemo() {
+ const [selected, setSelected] = React.useState([]);
+ const options = ['Option A', 'Option B', 'Option C'];
+
+ const allSelected = selected.length === options.length;
+ const indeterminate = selected.length > 0 && !allSelected;
+
+ return (
+ <div>
+ <Checkbox
+ checked={allSelected}
+ indeterminate={indeterminate}
+ onChange={(e) => setSelected(e.target.checked ? [...options] : [])}
+ >
+ Select All
+ </Checkbox>
+ <div style={{ marginLeft: 24, marginTop: 8 }}>
+ {options.map(opt => (
+ <div key={opt}>
+ <Checkbox
+ checked={selected.includes(opt)}
+ onChange={() => setSelected(prev =>
+ prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
+ )}
+ >
+ {opt}
+ </Checkbox>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+```
+
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `checked` | `boolean` | `false` | - |
-| `indeterminate` | `boolean` | `false` | - |
+| `checked` | `boolean` | `false` | Whether the checkbox is checked. |
+| `indeterminate` | `boolean` | `false` | Whether the checkbox is in indeterminate state (partially selected). |
## Import
@@ -77,14 +133,9 @@ function Demo() {
import { Checkbox } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-checkbox) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/collapse.mdx b/docs/developer_portal/components/ui/collapse.mdx
index c3635d0eb12..dc930225f6b 100644
--- a/docs/developer_portal/components/ui/collapse.mdx
+++ b/docs/developer_portal/components/ui/collapse.mdx
@@ -125,14 +125,9 @@ function Demo() {
import { Collapse } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-collapse) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/datepicker.mdx b/docs/developer_portal/components/ui/datepicker.mdx
index e961ede71a1..0daebc8058a 100644
--- a/docs/developer_portal/components/ui/datepicker.mdx
+++ b/docs/developer_portal/components/ui/datepicker.mdx
@@ -102,14 +102,9 @@ function Demo() {
import { DatePicker } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-datepicker) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/divider.mdx b/docs/developer_portal/components/ui/divider.mdx
index 2db9331bce4..73bf9aa5b3f 100644
--- a/docs/developer_portal/components/ui/divider.mdx
+++ b/docs/developer_portal/components/ui/divider.mdx
@@ -136,14 +136,9 @@ function Demo() {
import { Divider } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-divider) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Divider/Divider.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Divider/Divider.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/editabletitle.mdx b/docs/developer_portal/components/ui/editabletitle.mdx
index 9f5fa8a3adc..d5e3e2a20c5 100644
--- a/docs/developer_portal/components/ui/editabletitle.mdx
+++ b/docs/developer_portal/components/ui/editabletitle.mdx
@@ -164,14 +164,9 @@ function Demo() {
import { EditableTitle } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-editabletitle) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/emptystate.mdx b/docs/developer_portal/components/ui/emptystate.mdx
index e91fb29d476..aeb7938f311 100644
--- a/docs/developer_portal/components/ui/emptystate.mdx
+++ b/docs/developer_portal/components/ui/emptystate.mdx
@@ -22,12 +22,22 @@ sidebar_label: EmptyState
under the License.
-->
-import { StoryWithControls } from '../../../src/components/StorybookWrapper';
+import { StoryWithControls, ComponentGallery } from '../../../src/components/StorybookWrapper';
# EmptyState
The EmptyState component from Superset's UI library.
+## All Variants
+
+<ComponentGallery
+ component="EmptyState"
+ sizes={["medium"]}
+ styles={["chart.svg","document.svg","empty-charts.svg","empty-dashboard.svg","empty-dataset.svg","empty-query.svg","empty-table.svg","empty.svg","empty_sql_chart.svg","filter-results.svg","filter.svg","star-circle.svg","union.svg","vector.svg"]}
+ sizeProp="size"
+ styleProp="image"
+/>
+
## Live Example
<StoryWithControls
@@ -36,7 +46,7 @@ The EmptyState component from Superset's UI library.
size: "medium",
title: "No Data Available",
description: "There is no data to display at this time.",
- image: "empty",
+ image: "empty.svg",
buttonText: ""
}}
controls={[
@@ -68,11 +78,20 @@ The EmptyState component from Superset's UI library.
label: "Image",
type: "select",
options: [
- "empty",
- "error",
- "filter",
- "document",
- "chart"
+ "chart.svg",
+ "document.svg",
+ "empty-charts.svg",
+ "empty-dashboard.svg",
+ "empty-dataset.svg",
+ "empty-query.svg",
+ "empty-table.svg",
+ "empty.svg",
+ "empty_sql_chart.svg",
+ "filter-results.svg",
+ "filter.svg",
+ "star-circle.svg",
+ "union.svg",
+ "vector.svg"
],
description: "Predefined image to display."
},
@@ -96,7 +115,7 @@ function Demo() {
size="medium"
title="No Results Found"
description="Try adjusting your filters or search terms."
- image="filter"
+ image="filter.svg"
buttonText="Clear Filters"
buttonAction={() => alert('Filters cleared!')}
/>
@@ -111,7 +130,7 @@ function Demo() {
| `size` | `string` | `"medium"` | Size of the empty state component. |
| `title` | `string` | `"No Data Available"` | Main title text. |
| `description` | `string` | `"There is no data to display at this time."` | Description text below the title. |
-| `image` | `string` | `"empty"` | Predefined image to display. |
+| `image` | `string` | `"empty.svg"` | Predefined image to display. |
| `buttonText` | `string` | `""` | Text for optional action button. |
## Import
@@ -120,14 +139,9 @@ function Demo() {
import { EmptyState } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-emptystate) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/favestar.mdx b/docs/developer_portal/components/ui/favestar.mdx
index 177155811f6..263659ac4a6 100644
--- a/docs/developer_portal/components/ui/favestar.mdx
+++ b/docs/developer_portal/components/ui/favestar.mdx
@@ -32,19 +32,29 @@ FaveStar component for marking items as favorites
<StoryWithControls
component="FaveStar"
- props={{}}
+ props={{
+ itemId: 1,
+ isStarred: false,
+ showTooltip: true
+}}
controls={[
+ {
+ name: "itemId",
+ label: "Item ID",
+ type: "number",
+ description: "Unique identifier for the item"
+ },
{
name: "isStarred",
label: "Is Starred",
type: "boolean",
- description: "Indicates if the item is starred"
+ description: "Whether the item is currently starred."
},
{
name: "showTooltip",
label: "Show Tooltip",
type: "boolean",
- description: "Show tooltip on hover"
+ description: "Show tooltip on hover."
}
]}
/>
@@ -57,13 +67,20 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<FaveStar
- // Add props here
+ itemId={1}
+ showTooltip
/>
);
}
```
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `itemId` | `number` | `1` | Unique identifier for the item |
+| `isStarred` | `boolean` | `false` | Whether the item is currently starred. |
+| `showTooltip` | `boolean` | `true` | Show tooltip on hover. |
## Import
@@ -71,14 +88,9 @@ function Demo() {
import { FaveStar } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-favestar) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/iconbutton.mdx b/docs/developer_portal/components/ui/iconbutton.mdx
index 150e91fccd8..387b937e2e7 100644
--- a/docs/developer_portal/components/ui/iconbutton.mdx
+++ b/docs/developer_portal/components/ui/iconbutton.mdx
@@ -32,25 +32,36 @@ The IconButton component is a versatile button that allows you to combine an ico
<StoryWithControls
component="IconButton"
- props={{}}
+ props={{
+ buttonText: "IconButton",
+ altText: "Icon button alt text",
+ padded: true,
+ icon: "https://superset.apache.org/img/superset-logo-horiz.svg"
+}}
controls={[
{
- name: "altText",
- label: "Alt Text",
+ name: "buttonText",
+ label: "Button Text",
type: "text",
- description: "The alt text for the button. If not provided, the button text is used as the alt text by default."
+ description: "The text inside the button."
},
{
- name: "buttonText",
- label: "Button Text",
+ name: "altText",
+ label: "Alt Text",
type: "text",
- description: "The text inside the button"
+ description: "The alt text for the button. If not provided, the button text is used as the alt text by default."
},
{
name: "padded",
label: "Padded",
type: "boolean",
- description: "add padding between icon and button text"
+ description: "Add padding between icon and button text."
+ },
+ {
+ name: "icon",
+ label: "Icon",
+ type: "text",
+ description: "Icon inside the button (URL or path)."
}
]}
/>
@@ -63,13 +74,23 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<IconButton
- // Add props here
+ buttonText="IconButton"
+ altText="Icon button alt text"
+ padded
+ icon="https://superset.apache.org/img/superset-logo-horiz.svg"
/>
);
}
```
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `buttonText` | `string` | `"IconButton"` | The text inside the button. |
+| `altText` | `string` | `"Icon button alt text"` | The alt text for the button. If not provided, the button text is used as the alt text by default. |
+| `padded` | `boolean` | `true` | Add padding between icon and button text. |
+| `icon` | `string` | `"https://superset.apache.org/img/superset-logo-horiz.svg"` | Icon inside the button (URL or path). |
## Import
@@ -77,14 +98,9 @@ function Demo() {
import { IconButton } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-iconbutton) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/icons.mdx b/docs/developer_portal/components/ui/icons.mdx
index 5916a5daa35..97b0b023862 100644
--- a/docs/developer_portal/components/ui/icons.mdx
+++ b/docs/developer_portal/components/ui/icons.mdx
@@ -26,19 +26,17 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Icons
-The Icons component from Superset's UI library.
+Icon library for Apache Superset. Contains over 200 icons based on Ant Design icons with consistent sizing and theming support.
## Live Example
<StoryWithControls
component="Icons"
- props={{}}
+ renderComponent="Icons.InfoCircleOutlined"
+ props={{
+ iconSize: "xl"
+}}
controls={[
- {
- name: "showNames",
- label: "Show Names",
- type: "boolean"
- },
{
name: "iconSize",
label: "Icon Size",
@@ -49,7 +47,13 @@ The Icons component from Superset's UI library.
"l",
"xl",
"xxl"
- ]
+ ],
+ description: "Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px)."
+ },
+ {
+ name: "showNames",
+ label: "Show Names",
+ type: "boolean"
},
{
name: "iconColor",
@@ -66,29 +70,183 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
- <Icons
- // Add props here
- />
+ <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+ <Icons.InfoCircleOutlined iconSize="xl" />
+ <Icons.CheckCircleOutlined iconSize="xl" />
+ <Icons.WarningOutlined iconSize="xl" />
+ <Icons.CloseCircleOutlined iconSize="xl" />
+ </div>
);
}
```
+## Icon Sizes
+```tsx live
+function IconSizes() {
+ const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
+ return (
+ <div style={{ display: 'flex', gap: 24, alignItems: 'end' }}>
+ {sizes.map(size => (
+ <div key={size} style={{ textAlign: 'center' }}>
+ <Icons.DatabaseOutlined iconSize={size} />
+ <div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
+ </div>
+ ))}
+ </div>
+ );
+}
+```
-## Import
+## Icon Gallery
-```tsx
-import { Icons } from '@superset/components';
+```tsx live
+function IconGallery() {
+ const Section = ({ title, children }) => (
+ <div style={{ marginBottom: 24 }}>
+ <div style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>{title}</div>
+ <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>{children}</div>
+ </div>
+ );
+ return (
+ <div>
+ <Section title="Charts">
+ <Icons.LineChartOutlined iconSize="xl" />
+ <Icons.BarChartOutlined iconSize="xl" />
+ <Icons.PieChartOutlined iconSize="xl" />
+ <Icons.AreaChartOutlined iconSize="xl" />
+ <Icons.DashboardOutlined iconSize="xl" />
+ <Icons.FundProjectionScreenOutlined iconSize="xl" />
+ </Section>
+ <Section title="Data">
+ <Icons.DatabaseOutlined iconSize="xl" />
+ <Icons.TableOutlined iconSize="xl" />
+ <Icons.ConsoleSqlOutlined iconSize="xl" />
+ <Icons.FilterOutlined iconSize="xl" />
+ <Icons.FieldNumberOutlined iconSize="xl" />
+ <Icons.FieldTimeOutlined iconSize="xl" />
+ <Icons.FunctionOutlined iconSize="xl" />
+ <Icons.CalculatorOutlined iconSize="xl" />
+ </Section>
+ <Section title="Actions">
+ <Icons.PlusOutlined iconSize="xl" />
+ <Icons.EditOutlined iconSize="xl" />
+ <Icons.DeleteOutlined iconSize="xl" />
+ <Icons.CopyOutlined iconSize="xl" />
+ <Icons.SaveOutlined iconSize="xl" />
+ <Icons.DownloadOutlined iconSize="xl" />
+ <Icons.UploadOutlined iconSize="xl" />
+ <Icons.ReloadOutlined iconSize="xl" />
+ <Icons.SyncOutlined iconSize="xl" />
+ <Icons.SearchOutlined iconSize="xl" />
+ <Icons.ExpandOutlined iconSize="xl" />
+ <Icons.FullscreenOutlined iconSize="xl" />
+ <Icons.ShareAltOutlined iconSize="xl" />
+ <Icons.ExportOutlined iconSize="xl" />
+ </Section>
+ <Section title="Status">
+ <Icons.CheckOutlined iconSize="xl" />
+ <Icons.CheckCircleOutlined iconSize="xl" />
+ <Icons.CloseOutlined iconSize="xl" />
+ <Icons.CloseCircleOutlined iconSize="xl" />
+ <Icons.InfoCircleOutlined iconSize="xl" />
+ <Icons.WarningOutlined iconSize="xl" />
+ <Icons.ExclamationCircleOutlined iconSize="xl" />
+ <Icons.QuestionCircleOutlined iconSize="xl" />
+ <Icons.LoadingOutlined iconSize="xl" />
+ <Icons.StopOutlined iconSize="xl" />
+ </Section>
+ <Section title="Navigation">
+ <Icons.MenuOutlined iconSize="xl" />
+ <Icons.DownOutlined iconSize="xl" />
+ <Icons.UpOutlined iconSize="xl" />
+ <Icons.RightOutlined iconSize="xl" />
+ <Icons.CaretDownOutlined iconSize="xl" />
+ <Icons.CaretUpOutlined iconSize="xl" />
+ <Icons.ArrowRightOutlined iconSize="xl" />
+ <Icons.MoreOutlined iconSize="xl" />
+ <Icons.EllipsisOutlined iconSize="xl" />
+ </Section>
+ <Section title="Objects">
+ <Icons.FileOutlined iconSize="xl" />
+ <Icons.FileTextOutlined iconSize="xl" />
+ <Icons.FileImageOutlined iconSize="xl" />
+ <Icons.BookOutlined iconSize="xl" />
+ <Icons.TagOutlined iconSize="xl" />
+ <Icons.TagsOutlined iconSize="xl" />
+ <Icons.StarOutlined iconSize="xl" />
+ <Icons.BellOutlined iconSize="xl" />
+ <Icons.CalendarOutlined iconSize="xl" />
+ <Icons.ClockCircleOutlined iconSize="xl" />
+ <Icons.MailOutlined iconSize="xl" />
+ <Icons.LinkOutlined iconSize="xl" />
+ <Icons.LockOutlined iconSize="xl" />
+ <Icons.UnlockOutlined iconSize="xl" />
+ <Icons.KeyOutlined iconSize="xl" />
+ </Section>
+ <Section title="Users">
+ <Icons.UserOutlined iconSize="xl" />
+ <Icons.UserAddOutlined iconSize="xl" />
+ <Icons.UsergroupAddOutlined iconSize="xl" />
+ <Icons.LoginOutlined iconSize="xl" />
+ </Section>
+ <Section title="Settings">
+ <Icons.SettingOutlined iconSize="xl" />
+ <Icons.BgColorsOutlined iconSize="xl" />
+ <Icons.FormatPainterOutlined iconSize="xl" />
+ <Icons.HighlightOutlined iconSize="xl" />
+ <Icons.EyeOutlined iconSize="xl" />
+ <Icons.EyeInvisibleOutlined iconSize="xl" />
+ <Icons.SunOutlined iconSize="xl" />
+ <Icons.MoonOutlined iconSize="xl" />
+ </Section>
+ </div>
+ );
+}
```
-## Interactive Demo
+## Icon with Text
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-icons) for an interactive demo.
+```tsx live
+function IconWithText() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.CheckCircleOutlined iconSize="l" style={{ color: '#52c41a' }} />
+ <span>Success message</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.InfoCircleOutlined iconSize="l" style={{ color: '#1890ff' }} />
+ <span>Information message</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.WarningOutlined iconSize="l" style={{ color: '#faad14' }} />
+ <span>Warning message</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.CloseCircleOutlined iconSize="l" style={{ color: '#ff4d4f' }} />
+ <span>Error message</span>
+ </div>
+ </div>
+ );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |
-## Source
+## Import
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx)
+```tsx
+import { Icons } from '@superset/components';
+```
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/icontooltip.mdx b/docs/developer_portal/components/ui/icontooltip.mdx
index 8f3e0303437..df7e0445e94 100644
--- a/docs/developer_portal/components/ui/icontooltip.mdx
+++ b/docs/developer_portal/components/ui/icontooltip.mdx
@@ -39,7 +39,8 @@ The IconTooltip component from Superset's UI library.
{
name: "tooltip",
label: "Tooltip",
- type: "text"
+ type: "text",
+ description: "Text content to display in the tooltip."
},
{
name: "placement",
@@ -58,9 +59,11 @@ The IconTooltip component from Superset's UI library.
"top",
"topLeft",
"topRight"
- ]
+ ],
+ description: "Position of the tooltip relative to the icon."
}
]}
+ sampleChildren={[{"component":"Icons.InfoCircleOutlined","props":{"iconSize":"l"}}]}
/>
## Try It
@@ -70,9 +73,9 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
- <IconTooltip
- tooltip="Tooltip"
- />
+ <IconTooltip tooltip="Helpful information">
+ <Icons.InfoCircleOutlined iconSize="l" />
+ </IconTooltip>
);
}
```
@@ -81,7 +84,7 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `tooltip` | `string` | `"Tooltip"` | - |
+| `tooltip` | `string` | `"Tooltip"` | Text content to display in the tooltip. |
## Import
@@ -89,14 +92,9 @@ function Demo() {
import { IconTooltip } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-icontooltip) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/index.mdx b/docs/developer_portal/components/ui/index.mdx
index 7481e703d15..c6f87083e0d 100644
--- a/docs/developer_portal/components/ui/index.mdx
+++ b/docs/developer_portal/components/ui/index.mdx
@@ -25,7 +25,7 @@ sidebar_position: 1
# Core Components
-40 components available in this category.
+41 components available in this category.
## Components
@@ -47,6 +47,7 @@ sidebar_position: 1
- [Icons](./icons)
- [IconTooltip](./icontooltip)
- [InfoTooltip](./infotooltip)
+- [Input](./input)
- [Label](./label)
- [List](./list)
- [ListViewCard](./listviewcard)
diff --git a/docs/developer_portal/components/ui/infotooltip.mdx b/docs/developer_portal/components/ui/infotooltip.mdx
index c94f218e743..28d0514bdc9 100644
--- a/docs/developer_portal/components/ui/infotooltip.mdx
+++ b/docs/developer_portal/components/ui/infotooltip.mdx
@@ -98,14 +98,9 @@ function Demo() {
import { InfoTooltip } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-infotooltip) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/InfoTooltip/InfoTooltip.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/InfoTooltip/InfoTooltip.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/input.mdx b/docs/developer_portal/components/ui/input.mdx
index c43c8f71e33..1fa8fd59073 100644
--- a/docs/developer_portal/components/ui/input.mdx
+++ b/docs/developer_portal/components/ui/input.mdx
@@ -58,7 +58,17 @@ The Input component from Superset's UI library.
{
name: "type",
label: "Type",
- type: "text"
+ type: "select",
+ options: [
+ "text",
+ "password",
+ "email",
+ "number",
+ "tel",
+ "url",
+ "search"
+ ],
+ description: "HTML input type"
},
{
name: "variant",
@@ -79,7 +89,7 @@ The Input component from Superset's UI library.
},
{
name: "id",
- label: "Id",
+ label: "ID",
type: "text",
description: "HTML id attribute"
},
@@ -135,7 +145,7 @@ function Demo() {
| `allowClear` | `boolean` | `false` | - |
| `disabled` | `boolean` | `false` | - |
| `showCount` | `boolean` | `false` | - |
-| `type` | `string` | `"text"` | - |
+| `type` | `string` | `"text"` | HTML input type |
| `variant` | `string` | `"outlined"` | Input style variant |
## Import
@@ -144,14 +154,9 @@ function Demo() {
import { Input } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-input) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/label.mdx b/docs/developer_portal/components/ui/label.mdx
index 1da2d14668d..a0c8ee6bd48 100644
--- a/docs/developer_portal/components/ui/label.mdx
+++ b/docs/developer_portal/components/ui/label.mdx
@@ -97,14 +97,9 @@ function Demo() {
import { Label } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-label) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Label/Label.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Label/Label.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/list.mdx b/docs/developer_portal/components/ui/list.mdx
index e0ff0884921..3ff0c30cd2d 100644
--- a/docs/developer_portal/components/ui/list.mdx
+++ b/docs/developer_portal/components/ui/list.mdx
@@ -35,29 +35,26 @@ The List component from Superset's UI library.
props={{
bordered: false,
split: true,
- itemLayout: "horizontal",
size: "default",
- loading: false
+ loading: false,
+ dataSource: [
+ "Dashboard Analytics",
+ "User Management",
+ "Data Sources"
+ ]
}}
controls={[
{
name: "bordered",
label: "Bordered",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to show a border around the list."
},
{
name: "split",
label: "Split",
- type: "boolean"
- },
- {
- name: "itemLayout",
- label: "Item Layout",
- type: "select",
- options: [
- "horizontal",
- "vertical"
- ]
+ type: "boolean",
+ description: "Whether to show a divider between items."
},
{
name: "size",
@@ -67,12 +64,14 @@ The List component from Superset's UI library.
"default",
"small",
"large"
- ]
+ ],
+ description: "Size of the list."
},
{
name: "loading",
label: "Loading",
- type: "boolean"
+ type: "boolean",
+ description: "Whether to show a loading indicator."
}
]}
/>
@@ -83,11 +82,12 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
+ const data = ['Dashboard Analytics', 'User Management', 'Data Sources'];
return (
<List
- split
- itemLayout="horizontal"
- size="default"
+ bordered
+ dataSource={data}
+ renderItem={(item) => <List.Item>{item}</List.Item>}
/>
);
}
@@ -97,11 +97,11 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `bordered` | `boolean` | `false` | - |
-| `split` | `boolean` | `true` | - |
-| `itemLayout` | `string` | `"horizontal"` | - |
-| `size` | `string` | `"default"` | - |
-| `loading` | `boolean` | `false` | - |
+| `bordered` | `boolean` | `false` | Whether to show a border around the list. |
+| `split` | `boolean` | `true` | Whether to show a divider between items. |
+| `size` | `string` | `"default"` | Size of the list. |
+| `loading` | `boolean` | `false` | Whether to show a loading indicator. |
+| `dataSource` | `any` | `["Dashboard Analytics","User Management","Data Sources"]` | - |
## Import
@@ -109,14 +109,9 @@ function Demo() {
import { List } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-list) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/listviewcard.mdx b/docs/developer_portal/components/ui/listviewcard.mdx
index 40613adfc20..4d2ea55d81b 100644
--- a/docs/developer_portal/components/ui/listviewcard.mdx
+++ b/docs/developer_portal/components/ui/listviewcard.mdx
@@ -26,18 +26,63 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# ListViewCard
-The ListViewCard component from Superset's UI library.
+ListViewCard is a card component used to display items in list views with an image, title, description, and optional cover sections.
## Live Example
<StoryWithControls
component="ListViewCard"
- props={{}}
+ props={{
+ title: "Superset Card Title",
+ loading: false,
+ url: "/superset/dashboard/births/",
+ imgURL: "https://picsum.photos/seed/superset/300/200",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+ coverLeft: "Left Section",
+ coverRight: "Right Section"
+}}
controls={[
+ {
+ name: "title",
+ label: "Title",
+ type: "text",
+ description: "Title displayed on the card."
+ },
{
name: "loading",
label: "Loading",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the card is in loading state."
+ },
+ {
+ name: "url",
+ label: "URL",
+ type: "text",
+ description: "URL the card links to."
+ },
+ {
+ name: "imgURL",
+ label: "Image URL",
+ type: "text",
+ description: "Primary image URL for the card."
+ },
+ {
+ name: "description",
+ label: "Description",
+ type: "text",
+ description: "Description text displayed on the card."
+ },
+ {
+ name: "coverLeft",
+ label: "Cover Left",
+ type: "text",
+ description: "Content for the left section of the cover."
+ },
+ {
+ name: "coverRight",
+ label: "Cover Right",
+ type: "text",
+ description: "Content for the right section of the cover."
}
]}
/>
@@ -50,13 +95,28 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<ListViewCard
- // Add props here
+ title="Superset Card Title"
+ url="/superset/dashboard/births/"
+ imgURL="https://picsum.photos/seed/superset/300/200"
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
+ coverLeft="Left Section"
+ coverRight="Right Section"
/>
);
}
```
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `"Superset Card Title"` | Title displayed on the card. |
+| `loading` | `boolean` | `false` | Whether the card is in loading state. |
+| `url` | `string` | `"/superset/dashboard/births/"` | URL the card links to. |
+| `imgURL` | `string` | `"https://picsum.photos/seed/superset/300/200"` | Primary image URL for the card. |
+| `description` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."` | Description text displayed on the card. |
+| `coverLeft` | `string` | `"Left Section"` | Content for the left section of the cover. |
+| `coverRight` | `string` | `"Right Section"` | Content for the right section of the cover. |
## Import
@@ -64,14 +124,9 @@ function Demo() {
import { ListViewCard } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-listviewcard) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/loading.mdx b/docs/developer_portal/components/ui/loading.mdx
index f14d1eef998..4033746d776 100644
--- a/docs/developer_portal/components/ui/loading.mdx
+++ b/docs/developer_portal/components/ui/loading.mdx
@@ -33,22 +33,11 @@ The Loading component from Superset's UI library.
<StoryWithControls
component="Loading"
props={{
- image: "",
- className: "",
size: "m",
+ position: "normal",
muted: false
}}
controls={[
- {
- name: "image",
- label: "Image",
- type: "text"
- },
- {
- name: "className",
- label: "Class Name",
- type: "text"
- },
{
name: "size",
label: "Size",
@@ -57,12 +46,8 @@ The Loading component from Superset's UI library.
"s",
"m",
"l"
- ]
- },
- {
- name: "muted",
- label: "Muted",
- type: "boolean"
+ ],
+ description: "Size of the spinner: s (40px), m (70px), or l (100px)."
},
{
name: "position",
@@ -72,7 +57,14 @@ The Loading component from Superset's UI library.
"normal",
"floating",
"inline"
- ]
+ ],
+ description: "Position style: normal (inline flow), floating (overlay), or inline."
+ },
+ {
+ name: "muted",
+ label: "Muted",
+ type: "boolean",
+ description: "Whether to show a muted/subtle version of the spinner."
}
]}
/>
@@ -84,11 +76,91 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
- <Loading
- image=""
- className=""
- size="m"
- />
+ <div>
+ {['normal', 'floating', 'inline'].map(position => (
+ <div
+ key={position}
+ style={{
+ marginBottom: 40,
+ padding: 20,
+ border: '1px solid #eee',
+ position: 'relative',
+ minHeight: 80,
+ }}
+ >
+ <h4 style={{ marginTop: 0 }}>{position}</h4>
+ <Loading position={position} size="m" />
+ </div>
+ ))}
+ </div>
+ );
+}
+```
+
+## Size and Opacity Showcase
+
+```tsx live
+function SizeShowcase() {
+ const sizes = ['s', 'm', 'l'];
+ return (
+ <div style={{ padding: 20 }}>
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, alignItems: 'center' }}>
+ <div><strong>Size</strong></div>
+ <div><strong>Normal</strong></div>
+ <div><strong>Muted</strong></div>
+ <div><strong>Usage</strong></div>
+ {sizes.map(size => (
+ <React.Fragment key={size}>
+ <div style={{ fontWeight: 'bold' }}>
+ {size.toUpperCase()} ({size === 's' ? '40px' : size === 'm' ? '70px' : '100px'})
+ </div>
+ <div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
+ <Loading size={size} position="normal" />
+ </div>
+ <div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
+ <Loading size={size} muted position="normal" />
+ </div>
+ <div style={{ fontSize: 12, color: '#666' }}>
+ {size === 's' && 'Filter bars, inline'}
+ {size === 'm' && 'Explore pages'}
+ {size === 'l' && 'Full page loading'}
+ </div>
+ </React.Fragment>
+ ))}
+ </div>
+ </div>
+ );
+}
+```
+
+## Contextual Examples
+
+```tsx live
+function ContextualDemo() {
+ return (
+ <div style={{ padding: 20 }}>
+ <h4>Filter Bar (size="s", muted)</h4>
+ <div style={{ height: 40, backgroundColor: '#f5f5f5', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 10, marginBottom: 30 }}>
+ <span>Filter 1:</span>
+ <Loading size="s" muted position="normal" />
+ <span>Filter 2:</span>
+ <Loading size="s" muted position="normal" />
+ </div>
+
+ <h4>Dashboard Grid (size="s", muted)</h4>
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 30 }}>
+ {[1, 2, 3].map(i => (
+ <div key={i} style={{ height: 100, backgroundColor: '#fafafa', border: '1px solid #ddd', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+ <Loading size="s" muted position="normal" />
+ </div>
+ ))}
+ </div>
+
+ <h4>Main Loading (size="l")</h4>
+ <div style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px dashed #ccc' }}>
+ <Loading size="l" position="normal" />
+ </div>
+ </div>
);
}
```
@@ -97,10 +169,9 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `image` | `string` | `""` | - |
-| `className` | `string` | `""` | - |
-| `size` | `string` | `"m"` | - |
-| `muted` | `boolean` | `false` | - |
+| `size` | `string` | `"m"` | Size of the spinner: s (40px), m (70px), or l (100px). |
+| `position` | `string` | `"normal"` | Position style: normal (inline flow), floating (overlay), or inline. |
+| `muted` | `boolean` | `false` | Whether to show a muted/subtle version of the spinner. |
## Import
@@ -108,14 +179,9 @@ function Demo() {
import { Loading } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-loading) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/menu.mdx b/docs/developer_portal/components/ui/menu.mdx
index a955ba0e343..bf895c42b9e 100644
--- a/docs/developer_portal/components/ui/menu.mdx
+++ b/docs/developer_portal/components/ui/menu.mdx
@@ -97,14 +97,9 @@ function Demo() {
import { Menu } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-menu) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/modal.mdx b/docs/developer_portal/components/ui/modal.mdx
index 1ac016a53c3..b5be3d4a462 100644
--- a/docs/developer_portal/components/ui/modal.mdx
+++ b/docs/developer_portal/components/ui/modal.mdx
@@ -132,14 +132,9 @@ function Demo() {
import { Modal } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-modal) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/modaltrigger.mdx b/docs/developer_portal/components/ui/modaltrigger.mdx
index 1add663f6c4..350732bd059 100644
--- a/docs/developer_portal/components/ui/modaltrigger.mdx
+++ b/docs/developer_portal/components/ui/modaltrigger.mdx
@@ -140,14 +140,9 @@ function Demo() {
import { ModalTrigger } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-modaltrigger) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/popover.mdx b/docs/developer_portal/components/ui/popover.mdx
index 5ed2aab5684..eb4eb8ac803 100644
--- a/docs/developer_portal/components/ui/popover.mdx
+++ b/docs/developer_portal/components/ui/popover.mdx
@@ -106,14 +106,9 @@ function Demo() {
import { Popover } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-popover) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/progressbar.mdx b/docs/developer_portal/components/ui/progressbar.mdx
index cebc1219174..f7561da5365 100644
--- a/docs/developer_portal/components/ui/progressbar.mdx
+++ b/docs/developer_portal/components/ui/progressbar.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# ProgressBar
-The ProgressBar component from Superset's UI library.
+Progress bar component for displaying completion status. Supports line, circle, and dashboard display types.
## Live Example
@@ -45,7 +45,8 @@ The ProgressBar component from Superset's UI library.
"success",
"exception",
"active"
- ]
+ ],
+ description: "Current status of the progress bar."
}
]}
/>
@@ -64,11 +65,52 @@ function Demo() {
}
```
+## All Progress Types
+
+```tsx live
+function AllTypesDemo() {
+ return (
+ <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
+ <div style={{ flex: 1 }}>
+ <h4>Line</h4>
+ <ProgressBar percent={75} type="line" />
+ </div>
+ <div>
+ <h4>Circle</h4>
+ <ProgressBar percent={75} type="circle" />
+ </div>
+ <div>
+ <h4>Dashboard</h4>
+ <ProgressBar percent={75} type="dashboard" />
+ </div>
+ </div>
+ );
+}
+```
+
+## Status Variants
+
+```tsx live
+function StatusDemo() {
+ const statuses = ['normal', 'success', 'exception', 'active'];
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+ {statuses.map(status => (
+ <div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+ <span style={{ width: 80 }}>{status}</span>
+ <ProgressBar percent={75} status={status} type="line" style={{ flex: 1 }} />
+ </div>
+ ))}
+ </div>
+ );
+}
+```
+
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `status` | `string` | `"normal"` | - |
+| `status` | `string` | `"normal"` | Current status of the progress bar. |
## Import
@@ -76,14 +118,9 @@ function Demo() {
import ProgressBar from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-progressbar) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/radio.mdx b/docs/developer_portal/components/ui/radio.mdx
index 47bad1ef5f3..ee5c2a67bf7 100644
--- a/docs/developer_portal/components/ui/radio.mdx
+++ b/docs/developer_portal/components/ui/radio.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Radio
-The Radio component from Superset's UI library.
+Radio button component for selecting one option from a set. Supports standalone radio buttons, radio buttons styled as buttons, and grouped radio buttons with layout configuration.
## Live Example
@@ -42,22 +42,26 @@ The Radio component from Superset's UI library.
{
name: "value",
label: "Value",
- type: "text"
+ type: "text",
+ description: "The value associated with this radio button."
},
{
name: "disabled",
label: "Disabled",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the radio button is disabled."
},
{
name: "checked",
label: "Checked",
- type: "boolean"
+ type: "boolean",
+ description: "Whether the radio button is checked (controlled mode)."
},
{
name: "children",
label: "Children",
- type: "text"
+ type: "text",
+ description: "Label text displayed next to the radio button."
}
]}
/>
@@ -78,14 +82,46 @@ function Demo() {
}
```
+## Radio Button Variants
+
+```tsx live
+function RadioButtonDemo() {
+ const [value, setValue] = React.useState('line');
+ return (
+ <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
+ <Radio.Button value="line">Line Chart</Radio.Button>
+ <Radio.Button value="bar">Bar Chart</Radio.Button>
+ <Radio.Button value="pie">Pie Chart</Radio.Button>
+ </Radio.Group>
+ );
+}
+```
+
+## Vertical Radio Group
+
+```tsx live
+function VerticalDemo() {
+ const [value, setValue] = React.useState('option1');
+ return (
+ <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+ <Radio value="option1">First option</Radio>
+ <Radio value="option2">Second option</Radio>
+ <Radio value="option3">Third option</Radio>
+ </div>
+ </Radio.Group>
+ );
+}
+```
+
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `value` | `string` | `"radio1"` | - |
-| `disabled` | `boolean` | `false` | - |
-| `checked` | `boolean` | `false` | - |
-| `children` | `string` | `"Radio"` | - |
+| `value` | `string` | `"radio1"` | The value associated with this radio button. |
+| `disabled` | `boolean` | `false` | Whether the radio button is disabled. |
+| `checked` | `boolean` | `false` | Whether the radio button is checked (controlled mode). |
+| `children` | `string` | `"Radio"` | Label text displayed next to the radio button. |
## Import
@@ -93,14 +129,9 @@ function Demo() {
import { Radio } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-radio) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/select.mdx b/docs/developer_portal/components/ui/select.mdx
index 69174cccbea..24929ecddc4 100644
--- a/docs/developer_portal/components/ui/select.mdx
+++ b/docs/developer_portal/components/ui/select.mdx
@@ -297,14 +297,9 @@ function Demo() {
import { Select } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-select) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/skeleton.mdx b/docs/developer_portal/components/ui/skeleton.mdx
index 7463cd89f4f..71ea44a41d9 100644
--- a/docs/developer_portal/components/ui/skeleton.mdx
+++ b/docs/developer_portal/components/ui/skeleton.mdx
@@ -32,37 +32,39 @@ Skeleton loading component with support for avatar, title, paragraph, button, an
<StoryWithControls
component="Skeleton"
- props={{}}
+ props={{
+ active: true,
+ avatar: false,
+ loading: true,
+ title: true,
+ shape: "circle",
+ size: "default",
+ block: false
+}}
controls={[
{
name: "active",
label: "Active",
type: "boolean",
- description: "Show animation effect"
+ description: "Show animation effect."
},
{
name: "avatar",
label: "Avatar",
type: "boolean",
- description: "Show avatar placeholder"
+ description: "Show avatar placeholder."
},
{
name: "loading",
label: "Loading",
type: "boolean",
- description: "Display the skeleton when true"
- },
- {
- name: "paragraph",
- label: "Paragraph",
- type: "false",
- description: "Paragraph skeleton"
+ description: "Display the skeleton when true."
},
{
name: "title",
label: "Title",
type: "boolean",
- description: "Show title placeholder"
+ description: "Show title placeholder."
},
{
name: "shape",
@@ -72,7 +74,7 @@ Skeleton loading component with support for avatar, title, paragraph, button, an
"circle",
"square"
],
- description: "Shape of the avatar"
+ description: "Shape of the avatar/button skeleton."
},
{
name: "size",
@@ -83,13 +85,13 @@ Skeleton loading component with support for avatar, title, paragraph, button, an
"small",
"default"
],
- description: "Set the size of avatar in the skeleton"
+ description: "Size of the skeleton elements."
},
{
name: "block",
label: "Block",
type: "boolean",
- description: "Option to fit button width to its parent width"
+ description: "Option to fit button width to its parent width."
}
]}
/>
@@ -102,13 +104,27 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<Skeleton
- // Add props here
+ active
+ loading
+ title
+ shape="circle"
+ size="default"
/>
);
}
```
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `active` | `boolean` | `true` | Show animation effect. |
+| `avatar` | `boolean` | `false` | Show avatar placeholder. |
+| `loading` | `boolean` | `true` | Display the skeleton when true. |
+| `title` | `boolean` | `true` | Show title placeholder. |
+| `shape` | `string` | `"circle"` | Shape of the avatar/button skeleton. |
+| `size` | `string` | `"default"` | Size of the skeleton elements. |
+| `block` | `boolean` | `false` | Option to fit button width to its parent width. |
## Import
@@ -116,14 +132,9 @@ function Demo() {
import { Skeleton } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-skeleton) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/slider.mdx b/docs/developer_portal/components/ui/slider.mdx
index 82799991a57..e32ba506eab 100644
--- a/docs/developer_portal/components/ui/slider.mdx
+++ b/docs/developer_portal/components/ui/slider.mdx
@@ -172,14 +172,9 @@ function Demo() {
import Slider from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-slider) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Slider/Slider.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Slider/Slider.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/steps.mdx b/docs/developer_portal/components/ui/steps.mdx
index e0e5a847850..b9354e71671 100644
--- a/docs/developer_portal/components/ui/steps.mdx
+++ b/docs/developer_portal/components/ui/steps.mdx
@@ -156,14 +156,9 @@ function Demo() {
import { Steps } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-steps) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/switch.mdx b/docs/developer_portal/components/ui/switch.mdx
index 7dd586daf4d..44db07d022e 100644
--- a/docs/developer_portal/components/ui/switch.mdx
+++ b/docs/developer_portal/components/ui/switch.mdx
@@ -101,14 +101,9 @@ function Demo() {
import { Switch } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-switch) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Switch/Switch.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Switch/Switch.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/tableview.mdx b/docs/developer_portal/components/ui/tableview.mdx
index 8d860dca689..6ad4c615caa 100644
--- a/docs/developer_portal/components/ui/tableview.mdx
+++ b/docs/developer_portal/components/ui/tableview.mdx
@@ -63,7 +63,7 @@ The TableView component from Superset's UI library.
},
{
name: "id",
- label: "Id",
+ label: "ID",
type: "number"
},
{
@@ -159,14 +159,9 @@ function Demo() {
import { TableView } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-tableview) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/tabs.mdx b/docs/developer_portal/components/ui/tabs.mdx
index f77a5b04cbe..3212f706302 100644
--- a/docs/developer_portal/components/ui/tabs.mdx
+++ b/docs/developer_portal/components/ui/tabs.mdx
@@ -139,14 +139,9 @@ function Demo() {
import Tabs from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-tabs) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/timer.mdx b/docs/developer_portal/components/ui/timer.mdx
index 874f99dcd62..8433b5e10b2 100644
--- a/docs/developer_portal/components/ui/timer.mdx
+++ b/docs/developer_portal/components/ui/timer.mdx
@@ -84,14 +84,9 @@ function Demo() {
import { Timer } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-timer) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Timer/Timer.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Timer/Timer.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/tooltip.mdx b/docs/developer_portal/components/ui/tooltip.mdx
index 3b328a0dcc6..b9b160aa2c0 100644
--- a/docs/developer_portal/components/ui/tooltip.mdx
+++ b/docs/developer_portal/components/ui/tooltip.mdx
@@ -121,14 +121,9 @@ function Demo() {
import { Tooltip } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-tooltip) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Tooltip/Tooltip.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Tooltip/Tooltip.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/treeselect.mdx b/docs/developer_portal/components/ui/treeselect.mdx
index 7288a4d14fb..fbda29e7ac8 100644
--- a/docs/developer_portal/components/ui/treeselect.mdx
+++ b/docs/developer_portal/components/ui/treeselect.mdx
@@ -32,7 +32,18 @@ TreeSelect is a select component that allows users to select from a tree structu
<StoryWithControls
component="TreeSelect"
- props={{}}
+ props={{
+ allowClear: true,
+ disabled: false,
+ multiple: false,
+ placeholder: "Please select",
+ showSearch: true,
+ size: "middle",
+ treeCheckable: false,
+ treeDefaultExpandAll: true,
+ treeLine: false,
+ variant: "outlined"
+}}
controls={[
{
name: "allowClear",
@@ -40,42 +51,12 @@ TreeSelect is a select component that allows users to select from a tree structu
type: "boolean",
description: "Whether to allow clearing the selected value."
},
- {
- name: "autoClearSearchValue",
- label: "Auto Clear Search Value",
- type: "boolean",
- description: "Whether to clear the search value automatically."
- },
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the component is disabled."
},
- {
- name: "labelInValue",
- label: "Label In Value",
- type: "boolean",
- description: "Whether to use label in value."
- },
- {
- name: "listHeight",
- label: "List Height",
- type: "number",
- description: "Height of the dropdown list."
- },
- {
- name: "maxTagCount",
- label: "Max Tag Count",
- type: "number",
- description: "Maximum number of tags to display."
- },
- {
- name: "maxTagTextLength",
- label: "Max Tag Text Length",
- type: "number",
- description: "Maximum length of tag text."
- },
{
name: "multiple",
label: "Multiple",
@@ -88,18 +69,6 @@ TreeSelect is a select component that allows users to select from a tree structu
type: "text",
description: "Placeholder text for the input field."
},
- {
- name: "placement",
- label: "Placement",
- type: "select",
- options: [
- "topLeft",
- "topRight",
- "bottomLeft",
- "bottomRight"
- ],
- description: "Placement of the dropdown menu."
- },
{
name: "showSearch",
label: "Show Search",
@@ -117,16 +86,6 @@ TreeSelect is a select component that allows users to select from a tree structu
],
description: "Size of the component."
},
- {
- name: "status",
- label: "Status",
- type: "select",
- options: [
- "error",
- "warning"
- ],
- description: "Status of the component."
- },
{
name: "treeCheckable",
label: "Tree Checkable",
@@ -139,12 +98,6 @@ TreeSelect is a select component that allows users to select from a tree structu
type: "boolean",
description: "Whether to expand all tree nodes by default."
},
- {
- name: "treeIcon",
- label: "Tree Icon",
- type: "boolean",
- description: "Whether to show tree icons."
- },
{
name: "treeLine",
label: "Tree Line",
@@ -158,16 +111,9 @@ TreeSelect is a select component that allows users to select from a tree structu
options: [
"outlined",
"borderless",
- "filled",
- "underlined"
+ "filled"
],
description: "Variant of the component."
- },
- {
- name: "virtual",
- label: "Virtual",
- type: "boolean",
- description: "Whether to use virtual scrolling."
}
]}
/>
@@ -180,13 +126,31 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<TreeSelect
- // Add props here
+ allowClear
+ placeholder="Please select"
+ showSearch
+ size="middle"
+ treeDefaultExpandAll
+ variant="outlined"
/>
);
}
```
-
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `allowClear` | `boolean` | `true` | Whether to allow clearing the selected value. |
+| `disabled` | `boolean` | `false` | Whether the component is disabled. |
+| `multiple` | `boolean` | `false` | Whether to allow multiple selections. |
+| `placeholder` | `string` | `"Please select"` | Placeholder text for the input field. |
+| `showSearch` | `boolean` | `true` | Whether to show the search input. |
+| `size` | `string` | `"middle"` | Size of the component. |
+| `treeCheckable` | `boolean` | `false` | Whether to show checkable tree nodes. |
+| `treeDefaultExpandAll` | `boolean` | `true` | Whether to expand all tree nodes by default. |
+| `treeLine` | `boolean` | `false` | Whether to show tree lines. |
+| `variant` | `string` | `"outlined"` | Variant of the component. |
## Import
@@ -194,14 +158,9 @@ function Demo() {
import { TreeSelect } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-treeselect) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/TreeSelect/TreeSelect.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/TreeSelect/TreeSelect.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/typography.mdx b/docs/developer_portal/components/ui/typography.mdx
index 6ad20ff3937..34c7d010017 100644
--- a/docs/developer_portal/components/ui/typography.mdx
+++ b/docs/developer_portal/components/ui/typography.mdx
@@ -32,91 +32,97 @@ Typography is a component for displaying text with various styles and formats. I
<StoryWithControls
component="Typography"
- props={{}}
+ props={{
+ children: "Sample Text",
+ code: false,
+ copyable: false,
+ delete: false,
+ disabled: false,
+ ellipsis: false,
+ keyboard: false,
+ mark: false,
+ italic: false,
+ underline: false,
+ strong: false
+}}
controls={[
+ {
+ name: "children",
+ label: "Children",
+ type: "text",
+ description: "The text content."
+ },
{
name: "code",
label: "Code",
type: "boolean",
- description: "Code style"
- },
- {
- name: "type",
- label: "Type",
- type: "select",
- options: [
- "secondary",
- "success",
- "warning",
- "danger"
- ],
- description: "Text type"
+ description: "Code style."
},
{
name: "copyable",
label: "Copyable",
type: "boolean",
- description: "Whether to be copyable, customize it via setting an object"
+ description: "Whether the text is copyable."
},
{
name: "delete",
label: "Delete",
type: "boolean",
- description: "Deleted line style"
+ description: "Deleted line style."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
- description: "Disabled content"
- },
- {
- name: "editable",
- label: "Editable",
- type: "boolean",
- description: "Whether to be editable, customize it via setting an object"
+ description: "Disabled content."
},
{
name: "ellipsis",
label: "Ellipsis",
type: "boolean",
- description: "Display ellipsis when text overflows, can not configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually"
+ description: "Display ellipsis when text overflows."
},
{
name: "keyboard",
label: "Keyboard",
type: "boolean",
- description: "Keyboard style"
+ description: "Keyboard style."
},
{
name: "mark",
label: "Mark",
type: "boolean",
- description: "Marked style"
+ description: "Marked/highlighted style."
},
{
name: "italic",
label: "Italic",
type: "boolean",
- description: "Italic style"
+ description: "Italic style."
},
{
name: "underline",
label: "Underline",
type: "boolean",
- description: "Underlined style\t"
- },
- {
- name: "level",
- label: "Level",
- type: "number",
- description: "Set content importance. Match with h1, h2, h3, h4, h5"
+ description: "Underlined style."
},
{
name: "strong",
label: "Strong",
type: "boolean",
- description: "Bold style"
+ description: "Bold style."
+ },
+ {
+ name: "type",
+ label: "Type",
+ type: "select",
+ options: [
+ "secondary",
+ "success",
+ "warning",
+ "danger"
+ ],
+ description: "Text type for semantic coloring."
}
]}
/>
@@ -128,29 +134,102 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
- <Typography
- // Add props here
- />
+ <div>
+ <Typography.Text>Default Text</Typography.Text>
+ <br />
+ <Typography.Text type="secondary">Secondary</Typography.Text>
+ <br />
+ <Typography.Text type="success">Success</Typography.Text>
+ <br />
+ <Typography.Text type="warning">Warning</Typography.Text>
+ <br />
+ <Typography.Text type="danger">Danger</Typography.Text>
+ <br />
+ <Typography.Text code>Code</Typography.Text>
+ <br />
+ <Typography.Text keyboard>Keyboard</Typography.Text>
+ <br />
+ <Typography.Text mark>Marked</Typography.Text>
+ <br />
+ <Typography.Text underline>Underline</Typography.Text>
+ <br />
+ <Typography.Text delete>Deleted</Typography.Text>
+ <br />
+ <Typography.Text strong>Strong</Typography.Text>
+ <br />
+ <Typography.Text italic>Italic</Typography.Text>
+ </div>
);
}
```
+## All Subcomponents
+```tsx live
+function AllSubcomponents() {
+ return (
+ <div>
+ <Typography.Title level={2}>Typography Components</Typography.Title>
+ <Typography.Paragraph>
+ The Typography component includes several subcomponents for different text needs.
+ Use <Typography.Text strong>Title</Typography.Text> for headings,
+ <Typography.Text code>Text</Typography.Text> for inline text styling,
+ and <Typography.Text mark>Paragraph</Typography.Text> for block content.
+ </Typography.Paragraph>
+ <Typography.Link href="https://superset.apache.org" target="_blank">
+ Learn more about Apache Superset
+ </Typography.Link>
+ </div>
+ );
+}
+```
-## Import
+## Text Styling Options
-```tsx
-import { Typography } from '@superset/components';
+```tsx live
+function TextStyles() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+ <Typography.Text code>Code style</Typography.Text>
+ <Typography.Text keyboard>Keyboard style</Typography.Text>
+ <Typography.Text mark>Highlighted text</Typography.Text>
+ <Typography.Text underline>Underlined text</Typography.Text>
+ <Typography.Text delete>Deleted text</Typography.Text>
+ <Typography.Text strong>Bold text</Typography.Text>
+ <Typography.Text italic>Italic text</Typography.Text>
+ <Typography.Text type="success">Success type</Typography.Text>
+ <Typography.Text type="warning">Warning type</Typography.Text>
+ <Typography.Text type="danger">Danger type</Typography.Text>
+ </div>
+ );
+}
```
-## Interactive Demo
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string` | `"Sample Text"` | The text content. |
+| `code` | `boolean` | `false` | Code style. |
+| `copyable` | `boolean` | `false` | Whether the text is copyable. |
+| `delete` | `boolean` | `false` | Deleted line style. |
+| `disabled` | `boolean` | `false` | Disabled content. |
+| `ellipsis` | `boolean` | `false` | Display ellipsis when text overflows. |
+| `keyboard` | `boolean` | `false` | Keyboard style. |
+| `mark` | `boolean` | `false` | Marked/highlighted style. |
+| `italic` | `boolean` | `false` | Italic style. |
+| `underline` | `boolean` | `false` | Underlined style. |
+| `strong` | `boolean` | `false` | Bold style. |
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-typography) for an interactive demo.
-
-## Source
+## Import
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/Typography/Typography.stories.tsx)
+```tsx
+import { Typography } from '@superset/components';
+```
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Typography/Typography.stories.tsx).
+:::
diff --git a/docs/developer_portal/components/ui/unsavedchangesmodal.mdx b/docs/developer_portal/components/ui/unsavedchangesmodal.mdx
index 2323e74ea6b..b6e69a2d583 100644
--- a/docs/developer_portal/components/ui/unsavedchangesmodal.mdx
+++ b/docs/developer_portal/components/ui/unsavedchangesmodal.mdx
@@ -78,14 +78,9 @@ function Demo() {
import { UnsavedChangesModal } from '@superset/components';
```
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/components-unsavedchangesmodal) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/UnsavedChangesModal/UnsavedChangesModal.stories.tsx)
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/UnsavedChangesModal/UnsavedChangesModal.stories.tsx).
+:::
diff --git a/docs/scripts/generate-superset-components.mjs b/docs/scripts/generate-superset-components.mjs
index 7bbaa75b308..a7a8b26cd66 100644
--- a/docs/scripts/generate-superset-components.mjs
+++ b/docs/scripts/generate-superset-components.mjs
@@ -17,6 +17,30 @@
* under the License.
*/
+/**
+ * ============================================================================
+ * PHILOSOPHY: STORIES ARE THE SINGLE SOURCE OF TRUTH
+ * ============================================================================
+ *
+ * When something doesn't render correctly in the docs, FIX THE STORY FIRST.
+ * Do NOT add special cases or workarounds to this generator.
+ *
+ * This generator should be as lightweight as possible - it extracts data from
+ * stories and passes it through to MDX. All configuration belongs in stories:
+ *
+ * - Use `export default { title: '...' }` (inline export, not variable)
+ * - Name stories `Interactive${ComponentName}` for docs generation
+ * - Define `args` and `argTypes` at the story level (not meta level)
+ * - Use `parameters.docs.gallery` for variant grids
+ * - Use `parameters.docs.sampleChildren` for components needing children
+ * - Use `parameters.docs.liveExample` for custom code examples
+ * - Use `parameters.docs.staticProps` for complex props
+ *
+ * If a story doesn't work with this generator, fix the story to match the
+ * expected patterns rather than adding complexity here.
+ * ============================================================================
+ */
+
/**
* This script scans for ALL Storybook stories and generates MDX documentation
* pages for the "Superset Components" section of the developer portal.
@@ -576,6 +600,24 @@ function extractBalancedBrackets(content, startIndex) {
return null;
}
+/**
+ * Convert camelCase prop name to human-readable label
+ * Handles acronyms properly: imgURL -> "Image URL", coverLeft -> "Cover Left"
+ */
+function propNameToLabel(name) {
+ return name
+ // Insert space before uppercase letters that follow lowercase (camelCase boundary)
+ .replace(/([a-z])([A-Z])/g, '$1 $2')
+ // Handle common acronyms - keep them together
+ .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+ // Capitalize first letter
+ .replace(/^./, s => s.toUpperCase())
+ // Fix common acronyms display
+ .replace(/\bUrl\b/g, 'URL')
+ .replace(/\bImg\b/g, 'Image')
+ .replace(/\bId\b/g, 'ID');
+}
+
/**
* Convert JS object literal syntax to JSON
* Handles: single quotes, unquoted keys, trailing commas
@@ -614,6 +656,8 @@ function extractDocsConfig(content, storyNames) {
let gallery = null;
let staticProps = null;
let liveExample = null;
+ let examples = null;
+ let renderComponent = null;
for (const storyName of storyNames) {
// Look for parameters block
@@ -712,13 +756,49 @@ function extractDocsConfig(content, storyNames) {
liveExample = parametersContent.slice(startIndex, endIndex);
}
}
+
+ // Extract renderComponent - allows overriding which component to render
+ // Useful when the title-derived component (e.g., 'Icons') is a namespace, not a component
+ const renderComponentMatch = parametersContent.match(/renderComponent:\s*['"]([^'"]+)['"]/);
+ if (renderComponentMatch) {
+ renderComponent = renderComponentMatch[1];
+ }
+
+ // Extract examples array - for multiple code examples
+ // Format: examples: [{ title: 'Title', code: `...` }, ...]
+ const examplesMatch = parametersContent.match(/examples:\s*\[/);
+ if (examplesMatch) {
+ const examplesStartIndex = examplesMatch.index + examplesMatch[0].length - 1;
+ const examplesArrayContent = extractBalancedBrackets(parametersContent, examplesStartIndex);
+ if (examplesArrayContent) {
+ examples = [];
+ // Find each example object { title: '...', code: `...` }
+ const exampleObjPattern = /\{\s*title:\s*['"]([^'"]+)['"]\s*,\s*code:\s*`/g;
+ let exampleMatch;
+ while ((exampleMatch = exampleObjPattern.exec(examplesArrayContent)) !== null) {
+ const title = exampleMatch[1];
+ const codeStartIndex = exampleMatch.index + exampleMatch[0].length;
+ // Find closing backtick for code
+ let codeEndIndex = codeStartIndex;
+ while (codeEndIndex < examplesArrayContent.length && examplesArrayContent[codeEndIndex] !== '`') {
+ if (examplesArrayContent[codeEndIndex] === '\\' && examplesArrayContent[codeEndIndex + 1] === '`') {
+ codeEndIndex += 2;
+ } else {
+ codeEndIndex++;
+ }
+ }
+ const code = examplesArrayContent.slice(codeStartIndex, codeEndIndex);
+ examples.push({ title, code });
+ }
+ }
+ }
}
}
- if (sampleChildren || gallery || staticProps || liveExample) break;
+ if (sampleChildren || gallery || staticProps || liveExample || examples || renderComponent) break;
}
- return { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample };
+ return { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent };
}
/**
@@ -752,7 +832,7 @@ function extractArgsAndControls(content, componentName) {
const storyNames = [`Interactive${componentName}`, `${componentName}Story`, componentName];
// Extract docs config (sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample) from parameters.docs
- const { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample } = extractDocsConfig(content, storyNames);
+ const { sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent } = extractDocsConfig(content, storyNames);
for (const storyName of storyNames) {
// Try CSF 3.0 format: export const StoryName: StoryObj = { args: {...}, argTypes: {...} }
@@ -820,7 +900,7 @@ function extractArgsAndControls(content, componentName) {
// First pass: props that have default values in args
for (const [key, value] of Object.entries(args)) {
processedProps.add(key);
- const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1');
+ const label = propNameToLabel(key);
const argType = argTypes[key] || {};
if (argType.type) {
@@ -848,7 +928,7 @@ function extractArgsAndControls(content, componentName) {
if (processedProps.has(key)) continue;
if (!argType.type) continue; // Skip if no control type defined
- const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1');
+ const label = propNameToLabel(key);
// Don't add to args - let the component use its own defaults
@@ -861,7 +941,7 @@ function extractArgsAndControls(content, componentName) {
});
}
- return { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample };
+ return { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent };
}
/**
@@ -870,7 +950,7 @@ function extractArgsAndControls(content, componentName) {
function generateMDX(component, storyContent) {
const { componentName, description, relativePath, category, title, sourceConfig, resolvedImportPath, isDefaultExport } = component;
- const { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample } = extractArgsAndControls(storyContent, componentName);
+ const { args, argTypes, controls, sampleChildren, sampleChildrenStyle, gallery, staticProps, liveExample, examples, renderComponent } = extractArgsAndControls(storyContent, componentName);
// Merge staticProps into args for complex values (arrays, objects) that can't be parsed from inline args
const mergedArgs = { ...args, ...staticProps };
@@ -971,7 +1051,8 @@ ${hasGallery ? `
## Live Example
<StoryWithControls
- component="${componentName}"
+ component="${componentName}"${renderComponent ? `
+ renderComponent="${renderComponent}"` : ''}
props={${propsJson}}
controls={${controlsJson}}${sampleChildrenJson ? `
sampleChildren={${sampleChildrenJson}}` : ''}${sampleChildrenStyleJson ? `
@@ -993,7 +1074,13 @@ ${liveExample || `function Demo() {
);
}`}
\`\`\`
+${examples && examples.length > 0 ? examples.map(ex => `
+## ${ex.title}
+\`\`\`tsx live
+${ex.code}
+\`\`\`
+`).join('') : ''}
${Object.keys(args).length > 0 ? `## Props
| Prop | Type | Default | Description |
@@ -1006,17 +1093,12 @@ ${propsTable}` : ''}
${isDefaultExport ? `import ${componentName} from '${componentImportPath}';` : `import { ${componentName} } from '${componentImportPath}';`}
\`\`\`
-## Interactive Demo
-
-View this component in [Storybook](https://apache-superset.github.io/superset-ui/?path=/story/${title.toLowerCase().replace(/\//g, '-').replace(/\s+/g, '-')}) for an interactive demo.
-
-## Source
-
-- [Story file](https://github.com/apache/superset/blob/master/${relativePath})
-
---
-*This page was auto-generated from the component's Storybook story.*
+:::tip[Improve this page]
+This documentation is auto-generated from the component's Storybook story.
+Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/${relativePath}).
+:::
`;
}
diff --git a/docs/src/components/StorybookWrapper.jsx b/docs/src/components/StorybookWrapper.jsx
index dd15cf3d212..ecc774fdda6 100644
--- a/docs/src/components/StorybookWrapper.jsx
+++ b/docs/src/components/StorybookWrapper.jsx
@@ -69,11 +69,25 @@ function getProviders() {
// eslint-disable-next-line @typescript-eslint/no-require-imports
const { themeObject } = require('@apache-superset/core/ui');
// eslint-disable-next-line @typescript-eslint/no-require-imports
- const { App } = require('antd');
+ const { App, ConfigProvider } = require('antd');
+
+ // Configure Ant Design to render portals (tooltips, dropdowns, etc.)
+ // inside the closest .storybook-example container instead of document.body
+ // This fixes positioning issues in the docs pages
+ const getPopupContainer = (triggerNode) => {
+ // Find the closest .storybook-example container
+ const container = triggerNode?.closest?.('.storybook-example');
+ return container || document.body;
+ };
SupersetProviders = ({ children }) => (
<themeObject.SupersetThemeProvider>
- <App>{children}</App>
+ <ConfigProvider
+ getPopupContainer={getPopupContainer}
+ getTargetContainer={() => document.body}
+ >
+ <App>{children}</App>
+ </ConfigProvider>
</themeObject.SupersetThemeProvider>
);
return SupersetProviders;
@@ -84,6 +98,7 @@ function getProviders() {
}
// Resolve component from string name or React component
+// Supports dot notation for nested components (e.g., 'Icons.InfoCircleOutlined')
function resolveComponent(component) {
if (!component) return null;
// If already a component (function/class), return as-is
@@ -91,6 +106,15 @@ function resolveComponent(component) {
// If string, look up in registry
if (typeof component === 'string') {
const registry = getComponentRegistry();
+ // Handle dot notation (e.g., 'Icons.InfoCircleOutlined')
+ if (component.includes('.')) {
+ const parts = component.split('.');
+ let current = registry[parts[0]];
+ for (let i = 1; i < parts.length && current; i++) {
+ current = current[parts[i]];
+ }
+ return typeof current === 'function' ? current : null;
+ }
return registry[component] || null;
}
return null;
@@ -134,6 +158,7 @@ export function StoryExample({ component, props = {} }) {
borderRadius: '4px',
padding: '20px',
marginBottom: '20px',
+ position: 'relative', // Required for portal positioning
}}
>
{Component ? (
@@ -216,8 +241,12 @@ function generateSampleChildren(sampleChildren, sampleChildrenStyle) {
}
// Inner component for StoryWithControls (browser-only)
-function StoryWithControlsInner({ component, props, controls, sampleChildren, sampleChildrenStyle }) {
- const Component = resolveComponent(component);
+// renderComponent allows overriding which component to actually render (useful when the named
+// component is a namespace object like Icons, not a React component)
+function StoryWithControlsInner({ component, renderComponent, props, controls, sampleChildren, sampleChildrenStyle }) {
+ // Use renderComponent if provided, otherwise use the main component name
+ const componentToRender = renderComponent || component;
+ const Component = resolveComponent(componentToRender);
const Providers = getProviders();
const [stateProps, setStateProps] = React.useState(props);
@@ -230,6 +259,20 @@ function StoryWithControlsInner({ component, props, controls, sampleChildren, sa
// Extract children from props (label, children, text, content)
const { children: propsChildren, restProps } = extractChildren(stateProps);
+ // Filter out undefined values so they don't override component defaults
+ const filteredProps = Object.fromEntries(
+ Object.entries(restProps).filter(([, v]) => v !== undefined)
+ );
+
+ // For List-like components with dataSource but no renderItem, provide a default
+ if (filteredProps.dataSource && !filteredProps.renderItem) {
+ const ListItem = resolveComponent('List')?.Item;
+ filteredProps.renderItem = (item) =>
+ ListItem
+ ? React.createElement(ListItem, null, String(item))
+ : React.createElement('div', null, String(item));
+ }
+
// Use sample children if provided, otherwise use props children
const children = generateSampleChildren(sampleChildren, sampleChildrenStyle) || propsChildren;
@@ -243,10 +286,11 @@ function StoryWithControlsInner({ component, props, controls, sampleChildren, sa
borderRadius: '4px',
padding: '20px',
marginBottom: '20px',
+ position: 'relative', // Required for portal positioning
}}
>
{Component ? (
- <Component {...restProps}>{children}</Component>
+ <Component {...filteredProps}>{children}</Component>
) : (
<div style={{ color: '#999' }}>
Component "{String(component)}" not found
@@ -272,10 +316,11 @@ function StoryWithControlsInner({ component, props, controls, sampleChildren, sa
</label>
{control.type === 'select' ? (
<select
- value={stateProps[control.name]}
- onChange={e => updateProp(control.name, e.target.value)}
+ value={stateProps[control.name] ?? ''}
+ onChange={e => updateProp(control.name, e.target.value || undefined)}
style={{ width: '100%', padding: '5px' }}
>
+ <option value="">— None —</option>
{control.options?.map(option => (
<option key={option} value={option}>
{option}
@@ -343,12 +388,14 @@ function StoryWithControlsInner({ component, props, controls, sampleChildren, sa
}
// A simple component to display a story with controls
-export function StoryWithControls({ component: Component, props = {}, controls = [], sampleChildren, sampleChildrenStyle }) {
+// renderComponent: optional override for which component to render (e.g., 'Icons.InfoCircleOutlined' when component='Icons')
+export function StoryWithControls({ component: Component, renderComponent, props = {}, controls = [], sampleChildren, sampleChildrenStyle }) {
return (
<BrowserOnly fallback={<LoadingPlaceholder />}>
{() => (
<StoryWithControlsInner
component={Component}
+ renderComponent={renderComponent}
props={props}
controls={controls}
sampleChildren={sampleChildren}
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index cf5feac223c..4a2d8e8a9c3 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -282,3 +282,34 @@ ul.dropdown__menu svg {
background: none;
background-color: transparent;
}
+
+/* ============================================
+ Live Code Editor Height Limits
+ Prevents tall code blocks from dominating the page
+ ============================================ */
+
+/* Limit the code editor height and make it scrollable */
+/* Target multiple possible class names used by Docusaurus/react-live */
+.playgroundEditor,
+[class*="playgroundEditor"],
+.live-editor,
+[class*="liveEditor"] {
+ max-height: 350px !important;
+ overflow: auto !important;
+}
+
+/* The actual textarea/code area inside the editor */
+.playgroundEditor textarea,
+.playgroundEditor pre,
+[class*="playgroundEditor"] textarea,
+[class*="playgroundEditor"] pre {
+ max-height: 350px !important;
+ overflow: auto !important;
+}
+
+/* Also limit the preview area for consistency */
+.playgroundPreview,
+[class*="playgroundPreview"] {
+ max-height: 400px;
+ overflow: auto;
+}
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx
index 34e2d7ea50c..a90d6625d5a 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx
@@ -111,12 +111,48 @@ InteractiveBadge.argTypes = {
},
showZero: {
description: 'Whether to show badge when count is zero.',
- control: 'boolean',
+ control: { type: 'boolean' },
},
overflowCount: {
description:
'Max count to show. Shows count+ when exceeded (e.g., 99+).',
- control: 'number',
+ control: { type: 'number' },
+ },
+};
+
+InteractiveBadge.parameters = {
+ docs: {
+ description: {
+ story: 'Badge can show a count number or a status indicator dot.',
+ },
+ examples: [
+ {
+ title: 'Status Badge',
+ code: `function StatusBadgeDemo() {
+ const statuses = ['default', 'success', 'processing', 'warning', 'error'];
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+ {statuses.map(status => (
+ <Badge key={status} status={status} text={\`Status: \${status}\`} />
+ ))}
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Color Gallery',
+ code: `function ColorGallery() {
+ const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
+ return (
+ <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+ {colors.map(color => (
+ <Badge key={color} count={9} color={color} />
+ ))}
+ </div>
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx
index afa3c211555..7a994f7a8b1 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx
@@ -67,6 +67,74 @@ InteractiveCheckbox.args = {
indeterminate: false,
};
+InteractiveCheckbox.argTypes = {
+ checked: {
+ control: { type: 'boolean' },
+ description: 'Whether the checkbox is checked.',
+ },
+ indeterminate: {
+ control: { type: 'boolean' },
+ description: 'Whether the checkbox is in indeterminate state (partially selected).',
+ },
+};
+
+InteractiveCheckbox.parameters = {
+ docs: {
+ examples: [
+ {
+ title: 'All Checkbox States',
+ code: `function AllStates() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+ <Checkbox checked={false}>Unchecked</Checkbox>
+ <Checkbox checked={true}>Checked</Checkbox>
+ <Checkbox indeterminate={true}>Indeterminate</Checkbox>
+ <Checkbox disabled>Disabled unchecked</Checkbox>
+ <Checkbox disabled checked>Disabled checked</Checkbox>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Select All Pattern',
+ code: `function SelectAllDemo() {
+ const [selected, setSelected] = React.useState([]);
+ const options = ['Option A', 'Option B', 'Option C'];
+
+ const allSelected = selected.length === options.length;
+ const indeterminate = selected.length > 0 && !allSelected;
+
+ return (
+ <div>
+ <Checkbox
+ checked={allSelected}
+ indeterminate={indeterminate}
+ onChange={(e) => setSelected(e.target.checked ? [...options] : [])}
+ >
+ Select All
+ </Checkbox>
+ <div style={{ marginLeft: 24, marginTop: 8 }}>
+ {options.map(opt => (
+ <div key={opt}>
+ <Checkbox
+ checked={selected.includes(opt)}
+ onChange={() => setSelected(prev =>
+ prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
+ )}
+ >
+ {opt}
+ </Checkbox>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}`,
+ },
+ ],
+ },
+};
+
// All checkbox states including indeterminate
const STATES = [
{
diff --git a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx
index e778e71ed4e..bcadf53679d 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx
@@ -37,10 +37,71 @@ InteractiveEditableTitle.args = {
title: 'Title',
defaultTitle: 'Default title',
placeholder: 'Placeholder',
+ certifiedBy: '',
+ certificationDetails: '',
maxWidth: 100,
autoSize: true,
};
InteractiveEditableTitle.argTypes = {
+ canEdit: {
+ description: 'Whether the title can be edited.',
+ },
+ editing: {
+ description: 'Whether the title is currently in edit mode.',
+ },
+ emptyText: {
+ description: 'Text to display when title is empty.',
+ },
+ noPermitTooltip: {
+ description: 'Tooltip shown when user lacks edit permission.',
+ },
+ showTooltip: {
+ description: 'Whether to show tooltip on hover.',
+ },
+ title: {
+ description: 'The title text to display.',
+ },
+ defaultTitle: {
+ description: 'Default title when none is provided.',
+ },
+ placeholder: {
+ description: 'Placeholder text when editing.',
+ },
+ certifiedBy: {
+ description: 'Name of person/team who certified this item.',
+ },
+ certificationDetails: {
+ description: 'Additional certification details or description.',
+ },
+ maxWidth: {
+ description: 'Maximum width of the title in pixels.',
+ },
+ autoSize: {
+ description: 'Whether to auto-size based on content.',
+ },
onSaveTitle: { action: 'onSaveTitle' },
};
+
+InteractiveEditableTitle.parameters = {
+ actions: {
+ disable: true,
+ },
+ docs: {
+ description: {
+ story: 'An editable title component with optional certification badge.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <EditableTitle
+ title="My Dashboard"
+ canEdit
+ showTooltip
+ certifiedBy="Data Team"
+ certificationDetails="Verified Q1 2024"
+ onSaveTitle={(newTitle) => console.log('Saved:', newTitle)}
+ />
+ );
+}`,
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx
index 2c58d7ca459..f57371e6552 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx
@@ -33,14 +33,6 @@ const emptyStates = [
export default {
title: 'Components/EmptyState',
component: EmptyState,
- argTypes: {
- size: {
- control: { type: 'select' },
- options: ['small', 'medium', 'large'],
- defaultValue: 'medium',
- description: 'Size of the Empty State components',
- },
- },
} as Meta;
export const Gallery: StoryFn<{ size: 'small' | 'medium' | 'large' }> = ({
@@ -65,3 +57,116 @@ export const Gallery: StoryFn<{ size: 'small' | 'medium' | 'large' }> = ({
Gallery.args = {
size: 'medium',
};
+
+Gallery.argTypes = {
+ size: {
+ control: { type: 'select' },
+ options: ['small', 'medium', 'large'],
+ description: 'Size of the Empty State components',
+ },
+};
+
+// Interactive story for docs
+export const InteractiveEmptyState: StoryFn<{
+ size: 'small' | 'medium' | 'large';
+ title: string;
+ description: string;
+ image: string;
+ buttonText: string;
+}> = args => <EmptyState {...args} />;
+
+InteractiveEmptyState.args = {
+ size: 'medium',
+ title: 'No Data Available',
+ description: 'There is no data to display at this time.',
+ image: 'empty.svg',
+ buttonText: '',
+};
+
+InteractiveEmptyState.argTypes = {
+ size: {
+ control: { type: 'select' },
+ options: ['small', 'medium', 'large'],
+ description: 'Size of the empty state component.',
+ },
+ title: {
+ control: { type: 'text' },
+ description: 'Main title text.',
+ },
+ description: {
+ control: { type: 'text' },
+ description: 'Description text below the title.',
+ },
+ image: {
+ control: { type: 'select' },
+ options: [
+ 'chart.svg',
+ 'document.svg',
+ 'empty-charts.svg',
+ 'empty-dashboard.svg',
+ 'empty-dataset.svg',
+ 'empty-query.svg',
+ 'empty-table.svg',
+ 'empty.svg',
+ 'empty_sql_chart.svg',
+ 'filter-results.svg',
+ 'filter.svg',
+ 'star-circle.svg',
+ 'union.svg',
+ 'vector.svg',
+ ],
+ description: 'Predefined image to display.',
+ },
+ buttonText: {
+ control: { type: 'text' },
+ description: 'Text for optional action button.',
+ },
+};
+
+// All available image keys for gallery
+const imageKeys = [
+ 'chart.svg',
+ 'document.svg',
+ 'empty-charts.svg',
+ 'empty-dashboard.svg',
+ 'empty-dataset.svg',
+ 'empty-query.svg',
+ 'empty-table.svg',
+ 'empty.svg',
+ 'empty_sql_chart.svg',
+ 'filter-results.svg',
+ 'filter.svg',
+ 'star-circle.svg',
+ 'union.svg',
+ 'vector.svg',
+];
+
+// Single size for gallery display
+const gallerySizes = ['medium'];
+
+InteractiveEmptyState.parameters = {
+ docs: {
+ description: {
+ story: 'A component for displaying empty states with optional images and actions.',
+ },
+ gallery: {
+ component: 'EmptyState',
+ sizes: gallerySizes,
+ styles: imageKeys,
+ sizeProp: 'size',
+ styleProp: 'image',
+ },
+ liveExample: `function Demo() {
+ return (
+ <EmptyState
+ size="medium"
+ title="No Results Found"
+ description="Try adjusting your filters or search terms."
+ image="filter.svg"
+ buttonText="Clear Filters"
+ buttonAction={() => alert('Filters cleared!')}
+ />
+ );
+}`,
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx
index 6834c4495c2..c567874f62b 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx
@@ -71,3 +71,44 @@ export const Default: Story = {
</div>
),
};
+
+export const InteractiveFaveStar: Story = {
+ args: {
+ itemId: 1,
+ isStarred: false,
+ showTooltip: true,
+ },
+ argTypes: {
+ isStarred: {
+ control: 'boolean',
+ description: 'Whether the item is currently starred.',
+ },
+ showTooltip: {
+ control: 'boolean',
+ description: 'Show tooltip on hover.',
+ },
+ },
+ render: args => (
+ <span style={{ display: 'inline-block' }}>
+ <FaveStar {...args} />
+ </span>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'A star icon for marking items as favorites.',
+ },
+ liveExample: `function Demo() {
+ const [starred, setStarred] = React.useState(false);
+ return (
+ <FaveStar
+ itemId={1}
+ isStarred={starred}
+ showTooltip
+ fetchFaveStar={() => setStarred(!starred)}
+ />
+ );
+}`,
+ },
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/FaveStar/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/FaveStar/index.tsx
index b3c3e379460..dc14536ec32 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/FaveStar/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/FaveStar/index.tsx
@@ -28,7 +28,7 @@ import type { FaveStarProps } from './types';
const StyledLink = styled.a`
${({ theme }) => css`
font-size: ${theme.fontSizeXL}px;
- display: flex;
+ display: inline-flex;
padding: 0 0 0 ${theme.sizeUnit * 2}px;
`};
`;
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx
index 0a09f703ddb..9d08b73e327 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx
@@ -26,18 +26,31 @@ export default {
title: 'Design System/Components/Grid',
component: Row,
subcomponents: { Col },
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'The Grid system of Ant Design is based on a 24-grid layout. The `Row` and `Col` components are used to create flexible and responsive grid layouts.',
+ },
+ },
+ },
+} as Meta<typeof Row>;
+
+type Story = StoryObj<typeof Row>;
+
+export const InteractiveGrid: Story = {
+ args: {
+ align: 'top',
+ justify: 'start',
+ wrap: true,
+ span: 6,
+ offset: 0,
+ },
argTypes: {
- // Row properties
align: {
control: 'select',
options: ['top', 'middle', 'bottom', 'stretch'],
description: 'Vertical alignment of flex items.',
- defaultValue: 'top',
- table: {
- category: 'Row',
- type: { summary: 'string' },
- defaultValue: { summary: 'top' },
- },
},
justify: {
control: 'select',
@@ -50,160 +63,110 @@ export default {
'space-evenly',
],
description: 'Horizontal arrangement of flex items.',
- defaultValue: undefined,
- table: {
- category: 'Row',
- type: { summary: 'string' },
- defaultValue: { summary: 'start' },
- },
- },
- gutter: {
- control: false,
- description: 'Spacing between grids (horizontal and vertical).',
- defaultValue: 0,
- table: {
- category: 'Row',
- type: { summary: 'number | object | array' },
- defaultValue: { summary: '0' },
- },
},
wrap: {
control: 'boolean',
description: 'Whether the flex container is allowed to wrap its items.',
- defaultValue: true,
- table: {
- category: 'Row',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'true' },
- },
},
- // Col properties
span: {
control: 'number',
- description: 'Number of grid columns to span.',
- defaultValue: 24,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 24 },
- },
+ description: 'Number of grid columns to span (out of 24).',
},
offset: {
control: 'number',
description: 'Number of grid columns to offset from the left.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- order: {
- control: 'number',
- description: 'Flex order style of the grid column.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- pull: {
- control: 'number',
- description: 'Number of grid columns to pull to the left.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- push: {
- control: 'number',
- description: 'Number of grid columns to push to the right.',
- defaultValue: 0,
- table: {
- category: 'Col',
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- flex: {
- control: 'text',
- description: 'Flex layout style for the column.',
- table: {
- category: 'Col',
- type: { summary: 'string | number' },
- },
- },
- // Responsive properties (xs, sm, md, etc.)
- xs: {
- control: 'number',
- description:
- 'Settings for extra small screens (< 576px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- sm: {
- control: 'number',
- description:
- 'Settings for small screens (≥ 576px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- md: {
- control: 'number',
- description:
- 'Settings for medium screens (≥ 768px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- lg: {
- control: 'number',
- description:
- 'Settings for large screens (≥ 992px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- xl: {
- control: 'number',
- description:
- 'Settings for extra-large screens (≥ 1200px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
- },
- xxl: {
- control: 'number',
- description:
- 'Settings for extra-extra-large screens (≥ 1600px). Can be a number (span) or object.',
- table: {
- category: 'Col',
- type: { summary: 'number | object' },
- },
},
},
+ render: ({ align, justify, wrap, ...rest }: RowProps & ColProps) => {
+ const [gutter, setGutter] = useState(24);
+ const [vgutter, setVgutter] = useState(24);
+ const [colCount, setColCount] = useState(4);
+ const rowProps = { align, justify, wrap };
+ const colProps = rest;
+
+ const cols = Array.from({ length: colCount }, (_, i) => (
+ <Col
+ key={i}
+ style={{
+ background: '#ddd',
+ padding: '8px',
+ }}
+ {...colProps}
+ >
+ Column {i + 1}
+ </Col>
+ ));
+
+ return (
+ <div style={{ padding: '20px' }}>
+ <div style={{ marginBottom: '16px' }}>
+ <span>Horizontal Gutter: </span>
+ <Slider
+ min={8}
+ max={48}
+ step={8}
+ value={gutter}
+ onChange={setGutter}
+ />
+ </div>
+ <div style={{ marginBottom: '16px' }}>
+ <span>Vertical Gutter: </span>
+ <Slider
+ min={8}
+ max={48}
+ step={8}
+ value={vgutter}
+ onChange={setVgutter}
+ />
+ </div>
+ <div style={{ marginBottom: '16px' }}>
+ <span>Column Count: </span>
+ <Slider
+ min={2}
+ max={12}
+ step={1}
+ value={colCount}
+ onChange={setColCount}
+ />
+ </div>
+ <Row gutter={[gutter, vgutter]} {...rowProps}>
+ {cols}
+ </Row>
+ </div>
+ );
+ },
parameters: {
docs: {
description: {
- component:
- 'The Grid system of Ant Design is based on a 24-grid layout. The `Row` and `Col` components are used to create flexible and responsive grid layouts.',
- },
+ story:
+ 'Grid layout system based on 24 columns with configurable gutters.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <Row gutter={[16, 16]}>
+ <Col span={12}>
+ <div style={{ background: '#ddd', padding: '8px' }}>col-12</div>
+ </Col>
+ <Col span={12}>
+ <div style={{ background: '#ddd', padding: '8px' }}>col-12</div>
+ </Col>
+ <Col span={8}>
+ <div style={{ background: '#ddd', padding: '8px' }}>col-8</div>
+ </Col>
+ <Col span={8}>
+ <div style={{ background: '#ddd', padding: '8px' }}>col-8</div>
+ </Col>
+ <Col span={8}>
+ <div style={{ background: '#ddd', padding: '8px' }}>col-8</div>
+ </Col>
+ </Row>
+ );
+}`,
},
},
-} as Meta<typeof Row>;
-
-type Story = StoryObj<typeof Row>;
+};
+// Keep original for backwards compatibility
export const GridStory: Story = {
render: ({ align, justify, wrap, ...rest }: RowProps & ColProps) => {
const [gutter, setGutter] = useState(24);
diff --git a/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx
index acf1085b3e3..d667a28c929 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx
@@ -22,6 +22,28 @@ import { IconButton } from '.';
export default {
title: 'Components/IconButton',
component: IconButton,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'The IconButton component is a versatile button that allows you to combine an icon with a text label. It is designed for use in situations where you want to display an icon along with some text in a single clickable element.',
+ },
+ a11y: {
+ enabled: true,
+ },
+ },
+ },
+} as Meta<typeof IconButton>;
+
+type Story = StoryObj<typeof IconButton>;
+
+export const InteractiveIconButton: Story = {
+ args: {
+ buttonText: 'IconButton',
+ altText: 'Icon button alt text',
+ padded: true,
+ icon: 'https://superset.apache.org/img/superset-logo-horiz.svg',
+ },
argTypes: {
altText: {
control: 'text',
@@ -33,22 +55,21 @@ export default {
},
buttonText: {
control: 'text',
- description: 'The text inside the button',
+ description: 'The text inside the button.',
table: {
type: { summary: 'string' },
},
},
icon: {
- control: false,
- description: 'Icon inside the button',
+ control: 'text',
+ description: 'Icon inside the button (URL or path).',
table: {
type: { summary: 'string' },
- defaultValue: { summary: 'string' },
},
},
padded: {
control: 'boolean',
- description: 'add padding between icon and button text',
+ description: 'Add padding between icon and button text.',
table: {
type: { summary: 'boolean' },
},
@@ -57,17 +78,21 @@ export default {
parameters: {
docs: {
description: {
- component:
- 'The IconButton component is a versatile button that allows you to combine an icon with a text label. It is designed for use in situations where you want to display an icon along with some text in a single clickable element.',
- },
- a11y: {
- enabled: true,
+ story: 'A button with an icon and text label.',
},
+ liveExample: `function Demo() {
+ return (
+ <IconButton
+ buttonText="Superset"
+ icon="https://superset.apache.org/img/superset-logo-horiz.svg"
+ padded
+ onClick={() => alert('Clicked!')}
+ />
+ );
+}`,
},
},
-} as Meta<typeof IconButton>;
-
-type Story = StoryObj<typeof IconButton>;
+};
export const Default: Story = {
args: {
@@ -78,6 +103,6 @@ export const Default: Story = {
export const CustomIcon: Story = {
args: {
buttonText: 'Custom icon IconButton',
- icon: '/images/sqlite.png',
+ icon: 'https://superset.apache.org/img/superset-logo-horiz.svg',
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx
index d254c8c4cc2..b766ebc425d 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx
@@ -64,5 +64,27 @@ InteractiveIconTooltip.argTypes = {
defaultValue: 'top',
control: { type: 'select' },
options: PLACEMENTS,
+ description: 'Position of the tooltip relative to the icon.',
+ },
+ tooltip: {
+ control: { type: 'text' },
+ description: 'Text content to display in the tooltip.',
+ },
+};
+
+InteractiveIconTooltip.parameters = {
+ docs: {
+ description: {
+ story:
+ 'A tooltip wrapper for icons. Pass an icon component as children and specify tooltip text.',
+ },
+ sampleChildren: [{ component: 'Icons.InfoCircleOutlined', props: { iconSize: 'l' } }],
+ liveExample: `function Demo() {
+ return (
+ <IconTooltip tooltip="Helpful information">
+ <Icons.InfoCircleOutlined iconSize="l" />
+ </IconTooltip>
+ );
+}`,
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx
index 061c2609c63..95a2ec35e1e 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx
@@ -26,6 +26,14 @@ import { BaseIconComponent } from './BaseIcon';
export default {
title: 'Components/Icons',
component: BaseIconComponent,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Icon library for Apache Superset. Contains over 200 icons based on Ant Design icons with consistent sizing and theming support.',
+ },
+ },
+ },
};
const palette: Record<string, string | null> = {
@@ -102,6 +110,10 @@ export const InteractiveIcons = ({
);
};
+InteractiveIcons.args = {
+ iconSize: 'xl',
+};
+
InteractiveIcons.argTypes = {
showNames: {
name: 'Show names',
@@ -112,6 +124,7 @@ InteractiveIcons.argTypes = {
defaultValue: 'xl',
control: { type: 'inline-radio' },
options: ['s', 'm', 'l', 'xl', 'xxl'],
+ description: 'Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px).',
},
iconColor: {
defaultValue: null,
@@ -124,3 +137,168 @@ InteractiveIcons.argTypes = {
},
},
};
+
+InteractiveIcons.parameters = {
+ docs: {
+ // Use a specific icon for the live example since Icons is a namespace, not a component
+ renderComponent: 'Icons.InfoCircleOutlined',
+ liveExample: `function Demo() {
+ return (
+ <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+ <Icons.InfoCircleOutlined iconSize="xl" />
+ <Icons.CheckCircleOutlined iconSize="xl" />
+ <Icons.WarningOutlined iconSize="xl" />
+ <Icons.CloseCircleOutlined iconSize="xl" />
+ </div>
+ );
+}`,
+ examples: [
+ {
+ title: 'Icon Sizes',
+ code: `function IconSizes() {
+ const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
+ return (
+ <div style={{ display: 'flex', gap: 24, alignItems: 'end' }}>
+ {sizes.map(size => (
+ <div key={size} style={{ textAlign: 'center' }}>
+ <Icons.DatabaseOutlined iconSize={size} />
+ <div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
+ </div>
+ ))}
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Icon Gallery',
+ code: `function IconGallery() {
+ const Section = ({ title, children }) => (
+ <div style={{ marginBottom: 24 }}>
+ <div style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>{title}</div>
+ <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>{children}</div>
+ </div>
+ );
+ return (
+ <div>
+ <Section title="Charts">
+ <Icons.LineChartOutlined iconSize="xl" />
+ <Icons.BarChartOutlined iconSize="xl" />
+ <Icons.PieChartOutlined iconSize="xl" />
+ <Icons.AreaChartOutlined iconSize="xl" />
+ <Icons.DashboardOutlined iconSize="xl" />
+ <Icons.FundProjectionScreenOutlined iconSize="xl" />
+ </Section>
+ <Section title="Data">
+ <Icons.DatabaseOutlined iconSize="xl" />
+ <Icons.TableOutlined iconSize="xl" />
+ <Icons.ConsoleSqlOutlined iconSize="xl" />
+ <Icons.FilterOutlined iconSize="xl" />
+ <Icons.FieldNumberOutlined iconSize="xl" />
+ <Icons.FieldTimeOutlined iconSize="xl" />
+ <Icons.FunctionOutlined iconSize="xl" />
+ <Icons.CalculatorOutlined iconSize="xl" />
+ </Section>
+ <Section title="Actions">
+ <Icons.PlusOutlined iconSize="xl" />
+ <Icons.EditOutlined iconSize="xl" />
+ <Icons.DeleteOutlined iconSize="xl" />
+ <Icons.CopyOutlined iconSize="xl" />
+ <Icons.SaveOutlined iconSize="xl" />
+ <Icons.DownloadOutlined iconSize="xl" />
+ <Icons.UploadOutlined iconSize="xl" />
+ <Icons.ReloadOutlined iconSize="xl" />
+ <Icons.SyncOutlined iconSize="xl" />
+ <Icons.SearchOutlined iconSize="xl" />
+ <Icons.ExpandOutlined iconSize="xl" />
+ <Icons.FullscreenOutlined iconSize="xl" />
+ <Icons.ShareAltOutlined iconSize="xl" />
+ <Icons.ExportOutlined iconSize="xl" />
+ </Section>
+ <Section title="Status">
+ <Icons.CheckOutlined iconSize="xl" />
+ <Icons.CheckCircleOutlined iconSize="xl" />
+ <Icons.CloseOutlined iconSize="xl" />
+ <Icons.CloseCircleOutlined iconSize="xl" />
+ <Icons.InfoCircleOutlined iconSize="xl" />
+ <Icons.WarningOutlined iconSize="xl" />
+ <Icons.ExclamationCircleOutlined iconSize="xl" />
+ <Icons.QuestionCircleOutlined iconSize="xl" />
+ <Icons.LoadingOutlined iconSize="xl" />
+ <Icons.StopOutlined iconSize="xl" />
+ </Section>
+ <Section title="Navigation">
+ <Icons.MenuOutlined iconSize="xl" />
+ <Icons.DownOutlined iconSize="xl" />
+ <Icons.UpOutlined iconSize="xl" />
+ <Icons.RightOutlined iconSize="xl" />
+ <Icons.CaretDownOutlined iconSize="xl" />
+ <Icons.CaretUpOutlined iconSize="xl" />
+ <Icons.ArrowRightOutlined iconSize="xl" />
+ <Icons.MoreOutlined iconSize="xl" />
+ <Icons.EllipsisOutlined iconSize="xl" />
+ </Section>
+ <Section title="Objects">
+ <Icons.FileOutlined iconSize="xl" />
+ <Icons.FileTextOutlined iconSize="xl" />
+ <Icons.FileImageOutlined iconSize="xl" />
+ <Icons.BookOutlined iconSize="xl" />
+ <Icons.TagOutlined iconSize="xl" />
+ <Icons.TagsOutlined iconSize="xl" />
+ <Icons.StarOutlined iconSize="xl" />
+ <Icons.BellOutlined iconSize="xl" />
+ <Icons.CalendarOutlined iconSize="xl" />
+ <Icons.ClockCircleOutlined iconSize="xl" />
+ <Icons.MailOutlined iconSize="xl" />
+ <Icons.LinkOutlined iconSize="xl" />
+ <Icons.LockOutlined iconSize="xl" />
+ <Icons.UnlockOutlined iconSize="xl" />
+ <Icons.KeyOutlined iconSize="xl" />
+ </Section>
+ <Section title="Users">
+ <Icons.UserOutlined iconSize="xl" />
+ <Icons.UserAddOutlined iconSize="xl" />
+ <Icons.UsergroupAddOutlined iconSize="xl" />
+ <Icons.LoginOutlined iconSize="xl" />
+ </Section>
+ <Section title="Settings">
+ <Icons.SettingOutlined iconSize="xl" />
+ <Icons.BgColorsOutlined iconSize="xl" />
+ <Icons.FormatPainterOutlined iconSize="xl" />
+ <Icons.HighlightOutlined iconSize="xl" />
+ <Icons.EyeOutlined iconSize="xl" />
+ <Icons.EyeInvisibleOutlined iconSize="xl" />
+ <Icons.SunOutlined iconSize="xl" />
+ <Icons.MoonOutlined iconSize="xl" />
+ </Section>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Icon with Text',
+ code: `function IconWithText() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.CheckCircleOutlined iconSize="l" style={{ color: '#52c41a' }} />
+ <span>Success message</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.InfoCircleOutlined iconSize="l" style={{ color: '#1890ff' }} />
+ <span>Information message</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.WarningOutlined iconSize="l" style={{ color: '#faad14' }} />
+ <span>Warning message</span>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+ <Icons.CloseCircleOutlined iconSize="l" style={{ color: '#ff4d4f' }} />
+ <span>Error message</span>
+ </div>
+ </div>
+ );
+}`,
+ },
+ ],
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx
index 0d0ce36eb92..e452dc90e9d 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx
@@ -16,17 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-import type { Meta, StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
import { Input, InputNumber } from '.';
import type { InputProps, InputNumberProps, TextAreaProps } from './types';
-const meta: Meta<typeof Input> = {
+export default {
title: 'Components/Input',
component: Input,
};
-export default meta;
-
type Story = StoryObj<typeof Input>;
type InputNumberStory = StoryObj<typeof InputNumber>;
type TextAreaStory = StoryObj<typeof Input.TextArea>;
@@ -41,6 +39,16 @@ export const InteractiveInput: Story = {
variant: 'outlined',
},
argTypes: {
+ type: {
+ control: { type: 'select' },
+ options: ['text', 'password', 'email', 'number', 'tel', 'url', 'search'],
+ description: 'HTML input type',
+ table: {
+ category: 'Input',
+ type: { summary: 'string' },
+ defaultValue: { summary: 'text' },
+ },
+ },
defaultValue: {
control: { type: 'text' },
description: 'Default input value',
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Layout/Layout.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Layout/Layout.stories.tsx
index 9040d7b43fd..fb2792b0431 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Layout/Layout.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Layout/Layout.stories.tsx
@@ -28,100 +28,141 @@ export default {
title: 'Design System/Components/Layout',
component: Layout,
subcomponents: { Header, Footer, Sider, Content },
- argTypes: {
- // Layout properties
- className: {
- control: false,
- table: {
- category: 'Layout',
- type: { summary: 'string' },
- defaultValue: { summary: 'undefined' },
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Ant Design Layout component with configurable Sider, Header, Footer, and Content.',
},
},
+ },
+} as Meta<typeof Layout & typeof Sider>;
+
+type Story = StoryObj<typeof Layout>;
+
+export const InteractiveLayout: Story = {
+ args: {
+ hasSider: true,
+ collapsible: true,
+ collapsed: false,
+ theme: 'dark',
+ width: 200,
+ reverseArrow: false,
+ },
+ argTypes: {
hasSider: {
control: 'boolean',
- description: 'Include a sider',
- table: {
- category: 'Layout',
- type: { summary: 'boolean' },
- },
- },
- // Layout.Sider properties
- breakpoint: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
- description: 'Responsive breakpoint for the Sider',
- table: {
- category: 'Sider',
- type: { summary: 'text' },
- },
+ description: 'Include a sider in the layout.',
},
collapsible: {
control: 'boolean',
- description: 'Whether the Sider can be collapsed',
- table: {
- category: 'Sider',
- type: { summary: 'boolean' },
- },
+ description: 'Whether the Sider can be collapsed.',
},
collapsed: {
control: 'boolean',
- description: 'To set the current status of the Sider',
- table: {
- category: 'Sider',
- type: { summary: 'boolean' },
- },
- },
- collapsedWith: {
- control: false,
- description:
- 'Width of the collapsed sidebar, by setting to 0 a special trigger will appear',
- table: {
- category: 'Sider',
- type: { summary: 'number' },
- defaultValue: 80,
- },
- },
- reverseArrow: {
- control: 'boolean',
- description: 'Whether the arrow icon is reversed',
- table: {
- category: 'Sider',
- type: { summary: 'boolean' },
- },
+ description: 'Whether the Sider is collapsed.',
},
theme: {
control: 'select',
options: ['light', 'dark'],
- description: 'Theme for the Sider',
- table: {
- category: 'Sider',
- type: { summary: 'string' },
- defaultValue: { summary: 'dark' },
- },
+ description: 'Theme for the Sider.',
},
width: {
control: 'number',
- description: 'Width of the Sider',
- table: {
- category: 'Sider',
- type: { summary: 'number' },
- defaultValue: { summary: '200' },
- },
+ description: 'Width of the Sider.',
+ },
+ reverseArrow: {
+ control: 'boolean',
+ description: 'Whether the arrow icon is reversed.',
},
},
+ render: ({
+ className,
+ hasSider,
+ ...siderProps
+ }: LayoutProps & SiderProps) => (
+ <Layout
+ className={className}
+ hasSider={hasSider}
+ style={{ minHeight: '400px' }}
+ >
+ {hasSider && (
+ <Sider {...siderProps}>
+ <div
+ className="logo"
+ style={{
+ height: '32px',
+ margin: '16px',
+ background: '#ffffff30',
+ }}
+ />
+ <Menu defaultSelectedKeys={['1']} mode="inline">
+ <Menu.Item key="1" icon={<Icons.MenuUnfoldOutlined />}>
+ Option 1
+ </Menu.Item>
+ <Menu.Item key="2" icon={<Icons.MenuFoldOutlined />}>
+ Option 2
+ </Menu.Item>
+ </Menu>
+ </Sider>
+ )}
+ <Layout>
+ <Header
+ style={{
+ background: '#fff',
+ padding: '0 16px',
+ textAlign: 'center',
+ }}
+ >
+ Header
+ </Header>
+ <Content
+ style={{
+ margin: '16px',
+ padding: '24px',
+ background: '#fff',
+ textAlign: 'center',
+ }}
+ >
+ Content Area
+ </Content>
+ <Footer style={{ textAlign: 'center' }}>
+ Ant Design Layout Footer
+ </Footer>
+ </Layout>
+ </Layout>
+ ),
parameters: {
docs: {
description: {
- component:
- 'Ant Design Layout component with configurable Sider, Header, Footer, and Content.',
+ story:
+ 'Layout component with Header, Footer, Sider, and Content areas.',
},
+ liveExample: `function Demo() {
+ return (
+ <Layout style={{ minHeight: '300px' }}>
+ <Layout.Sider theme="dark" width={200}>
+ <div style={{ color: '#fff', padding: '16px' }}>Sidebar</div>
+ </Layout.Sider>
+ <Layout>
+ <Layout.Header style={{ background: '#fff', padding: '0 16px' }}>
+ Header
+ </Layout.Header>
+ <Layout.Content style={{ margin: '16px', padding: '24px', background: '#fff' }}>
+ Content
+ </Layout.Content>
+ <Layout.Footer style={{ textAlign: 'center' }}>
+ Footer
+ </Layout.Footer>
+ </Layout>
+ </Layout>
+ );
+}`,
},
},
-} as Meta<typeof Layout & typeof Sider>;
-
-type Story = StoryObj<typeof Layout>;
+};
+// Keep original for backwards compatibility
export const LayoutStory: Story = {
render: ({
className,
diff --git a/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx
index efb5bc09372..3a38db424fb 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx
@@ -38,7 +38,6 @@ export const InteractiveList = (args: ListProps<any>) => (
InteractiveList.args = {
bordered: false,
split: true,
- itemLayout: 'horizontal',
size: 'default',
loading: false,
};
@@ -46,20 +45,42 @@ InteractiveList.args = {
InteractiveList.argTypes = {
bordered: {
control: { type: 'boolean' },
+ description: 'Whether to show a border around the list.',
},
split: {
control: { type: 'boolean' },
+ description: 'Whether to show a divider between items.',
},
loading: {
control: { type: 'boolean' },
- },
- itemLayout: {
- control: { type: 'select' },
- options: ['horizontal', 'vertical'],
+ description: 'Whether to show a loading indicator.',
},
size: {
control: { type: 'select' },
options: ['default', 'small', 'large'],
+ description: 'Size of the list.',
+ },
+};
+
+InteractiveList.parameters = {
+ docs: {
+ description: {
+ story:
+ 'A list component for displaying rows of data. Requires dataSource array and renderItem function.',
+ },
+ staticProps: {
+ dataSource: ['Dashboard Analytics', 'User Management', 'Data Sources'],
+ },
+ liveExample: `function Demo() {
+ const data = ['Dashboard Analytics', 'User Management', 'Data Sources'];
+ return (
+ <List
+ bordered
+ dataSource={data}
+ renderItem={(item) => <List.Item>{item}</List.Item>}
+ />
+ );
+}`,
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx
index 70bf20c592a..0b45f38bb35 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx
@@ -16,29 +16,97 @@
* specific language governing permissions and limitations
* under the License.
*/
+import type { Meta, StoryObj } from '@storybook/react';
import { ListViewCard } from '.';
export default {
title: 'Components/ListViewCard',
component: ListViewCard,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'ListViewCard is a card component used to display items in list views with an image, title, description, and optional cover sections.',
+ },
+ },
+ },
+} as Meta<typeof ListViewCard>;
+
+type Story = StoryObj<typeof ListViewCard>;
+
+export const InteractiveListViewCard: Story = {
+ args: {
+ title: 'Superset Card Title',
+ loading: false,
+ url: '/superset/dashboard/births/',
+ imgURL: 'https://picsum.photos/seed/superset/300/200',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+ coverLeft: 'Left Section',
+ coverRight: 'Right Section',
+ },
argTypes: {
- loading: { control: 'boolean' },
+ title: {
+ control: { type: 'text' },
+ description: 'Title displayed on the card.',
+ },
+ loading: {
+ control: { type: 'boolean' },
+ description: 'Whether the card is in loading state.',
+ },
+ url: {
+ name: 'url',
+ control: { type: 'text' },
+ description: 'URL the card links to.',
+ },
+ imgURL: {
+ name: 'imgURL',
+ control: { type: 'text' },
+ description: 'Primary image URL for the card.',
+ },
+ description: {
+ control: { type: 'text' },
+ description: 'Description text displayed on the card.',
+ },
+ coverLeft: {
+ control: { type: 'text' },
+ description: 'Content for the left section of the cover.',
+ },
+ coverRight: {
+ control: { type: 'text' },
+ description: 'Content for the right section of the cover.',
+ },
+ },
+ parameters: {
+ docs: {
+ description: {
+ story:
+ 'A card component for displaying items in list views with images and descriptions.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <ListViewCard
+ title="My Dashboard"
+ description="A sample dashboard card"
+ url="/dashboard/1"
+ imgURL="https://picsum.photos/seed/demo/300/200"
+ coverLeft="Created: Jan 2024"
+ coverRight="Views: 1,234"
+ />
+ );
+}`,
+ },
},
};
-export const SupersetListViewCard = ({
- loading = false,
-}: {
- loading?: boolean;
-}) => (
- <ListViewCard
- title="Superset Card Title"
- loading={loading}
- url="/superset/dashboard/births/"
- imgURL="https://images.unsplash.com/photo-1658163724548-29ef00812a54?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
- imgFallbackURL="https://images.unsplash.com/photo-1658208193219-e859d9771912?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
- coverLeft="Left Section"
- coverRight="Right Section"
- />
-);
+// Keep original for backwards compatibility
+export const SupersetListViewCard: Story = {
+ args: {
+ title: 'Superset Card Title',
+ loading: false,
+ url: '/superset/dashboard/births/',
+ imgURL: 'https://picsum.photos/seed/superset2/300/200',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+ coverLeft: 'Left Section',
+ coverRight: 'Right Section',
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx
index 92300215bb3..5bcc96558d2 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx
@@ -223,25 +223,120 @@ ContextualExamples.parameters = {
export const InteractiveLoading = (args: LoadingProps) => <Loading {...args} />;
InteractiveLoading.args = {
- image: '',
- className: '',
size: 'm',
+ position: 'normal',
muted: false,
};
InteractiveLoading.argTypes = {
position: {
- name: 'position',
control: { type: 'select' },
options: POSITIONS,
+ description:
+ 'Position style: normal (inline flow), floating (overlay), or inline.',
},
size: {
- name: 'size',
control: { type: 'select' },
options: SIZES,
+ description: 'Size of the spinner: s (40px), m (70px), or l (100px).',
},
muted: {
- name: 'muted',
control: { type: 'boolean' },
+ description: 'Whether to show a muted/subtle version of the spinner.',
+ },
+};
+
+InteractiveLoading.parameters = {
+ docs: {
+ description: {
+ story: 'A loading spinner component with configurable size and position.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <div>
+ {['normal', 'floating', 'inline'].map(position => (
+ <div
+ key={position}
+ style={{
+ marginBottom: 40,
+ padding: 20,
+ border: '1px solid #eee',
+ position: 'relative',
+ minHeight: 80,
+ }}
+ >
+ <h4 style={{ marginTop: 0 }}>{position}</h4>
+ <Loading position={position} size="m" />
+ </div>
+ ))}
+ </div>
+ );
+}`,
+ examples: [
+ {
+ title: 'Size and Opacity Showcase',
+ code: `function SizeShowcase() {
+ const sizes = ['s', 'm', 'l'];
+ return (
+ <div style={{ padding: 20 }}>
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, alignItems: 'center' }}>
+ <div><strong>Size</strong></div>
+ <div><strong>Normal</strong></div>
+ <div><strong>Muted</strong></div>
+ <div><strong>Usage</strong></div>
+ {sizes.map(size => (
+ <React.Fragment key={size}>
+ <div style={{ fontWeight: 'bold' }}>
+ {size.toUpperCase()} ({size === 's' ? '40px' : size === 'm' ? '70px' : '100px'})
+ </div>
+ <div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
+ <Loading size={size} position="normal" />
+ </div>
+ <div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
+ <Loading size={size} muted position="normal" />
+ </div>
+ <div style={{ fontSize: 12, color: '#666' }}>
+ {size === 's' && 'Filter bars, inline'}
+ {size === 'm' && 'Explore pages'}
+ {size === 'l' && 'Full page loading'}
+ </div>
+ </React.Fragment>
+ ))}
+ </div>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Contextual Examples',
+ code: `function ContextualDemo() {
+ return (
+ <div style={{ padding: 20 }}>
+ <h4>Filter Bar (size="s", muted)</h4>
+ <div style={{ height: 40, backgroundColor: '#f5f5f5', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 10, marginBottom: 30 }}>
+ <span>Filter 1:</span>
+ <Loading size="s" muted position="normal" />
+ <span>Filter 2:</span>
+ <Loading size="s" muted position="normal" />
+ </div>
+
+ <h4>Dashboard Grid (size="s", muted)</h4>
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 30 }}>
+ {[1, 2, 3].map(i => (
+ <div key={i} style={{ height: 100, backgroundColor: '#fafafa', border: '1px solid #ddd', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+ <Loading size="s" muted position="normal" />
+ </div>
+ ))}
+ </div>
+
+ <h4>Main Loading (size="l")</h4>
+ <div style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px dashed #ccc' }}>
+ <Loading size="l" position="normal" />
+ </div>
+ </div>
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx
index 46182af6e17..b696b92c7e9 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -21,6 +21,14 @@ import ProgressBar, { ProgressBarProps } from '.';
export default {
title: 'Components/ProgressBar',
component: ProgressBar,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Progress bar component for displaying completion status. Supports line, circle, and dashboard display types.',
+ },
+ },
+ },
};
export const InteractiveProgressBar = (args: ProgressBarProps) => (
@@ -46,17 +54,35 @@ const commonArgs = {
};
const commonArgTypes = {
+ percent: {
+ control: { type: 'number', min: 0, max: 100 },
+ description: 'Completion percentage (0-100).',
+ },
+ striped: {
+ control: 'boolean',
+ description: 'Whether to show striped animation on the bar.',
+ },
+ showInfo: {
+ control: 'boolean',
+ description: 'Whether to show the percentage text.',
+ },
+ strokeColor: {
+ control: 'color',
+ description: 'Color of the progress bar.',
+ },
+ trailColor: {
+ control: 'color',
+ description: 'Color of the unfilled portion.',
+ },
strokeLinecap: {
- control: {
- type: 'select',
- },
+ control: 'select',
options: ['round', 'butt', 'square'],
+ description: 'Shape of the progress bar endpoints.',
},
type: {
- control: {
- type: 'select',
- },
+ control: 'select',
options: ['line', 'circle', 'dashboard'],
+ description: 'Display type: line, circle, or dashboard gauge.',
},
};
@@ -68,10 +94,53 @@ InteractiveProgressBar.args = {
InteractiveProgressBar.argTypes = {
...commonArgTypes,
status: {
- control: {
- type: 'select',
- },
+ control: 'select',
options: ['normal', 'success', 'exception', 'active'],
+ description: 'Current status of the progress bar.',
+ },
+};
+
+InteractiveProgressBar.parameters = {
+ docs: {
+ examples: [
+ {
+ title: 'All Progress Types',
+ code: `function AllTypesDemo() {
+ return (
+ <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
+ <div style={{ flex: 1 }}>
+ <h4>Line</h4>
+ <ProgressBar percent={75} type="line" />
+ </div>
+ <div>
+ <h4>Circle</h4>
+ <ProgressBar percent={75} type="circle" />
+ </div>
+ <div>
+ <h4>Dashboard</h4>
+ <ProgressBar percent={75} type="dashboard" />
+ </div>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Status Variants',
+ code: `function StatusDemo() {
+ const statuses = ['normal', 'success', 'exception', 'active'];
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+ {statuses.map(status => (
+ <div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+ <span style={{ width: 80 }}>{status}</span>
+ <ProgressBar percent={75} status={status} type="line" style={{ flex: 1 }} />
+ </div>
+ ))}
+ </div>
+ );
+}`,
+ },
+ ],
},
};
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx
index c0453ed038f..a0cbd3e18db 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx
@@ -25,20 +25,32 @@ export default {
title: 'Components/Radio',
component: Radio,
tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Radio button component for selecting one option from a set. Supports standalone radio buttons, radio buttons styled as buttons, and grouped radio buttons with layout configuration.',
+ },
+ },
+ },
};
const RadioArgsType = {
value: {
control: 'text',
- description: 'The value of the radio button.',
+ description: 'The value associated with this radio button.',
},
disabled: {
control: 'boolean',
- description: 'Whether the radio button is disabled or not.',
+ description: 'Whether the radio button is disabled.',
},
checked: {
control: 'boolean',
- description: 'The checked state of the radio button.',
+ description: 'Whether the radio button is checked (controlled mode).',
+ },
+ children: {
+ control: 'text',
+ description: 'Label text displayed next to the radio button.',
},
};
@@ -83,7 +95,59 @@ export const RadioStory = {
checked: false,
children: 'Radio',
},
- argTypes: RadioArgsType,
+ argTypes: {
+ value: {
+ control: 'text',
+ description: 'The value associated with this radio button.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Whether the radio button is disabled.',
+ },
+ checked: {
+ control: 'boolean',
+ description: 'Whether the radio button is checked (controlled mode).',
+ },
+ children: {
+ control: 'text',
+ description: 'Label text displayed next to the radio button.',
+ },
+ },
+};
+
+RadioStory.parameters = {
+ docs: {
+ examples: [
+ {
+ title: 'Radio Button Variants',
+ code: `function RadioButtonDemo() {
+ const [value, setValue] = React.useState('line');
+ return (
+ <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
+ <Radio.Button value="line">Line Chart</Radio.Button>
+ <Radio.Button value="bar">Bar Chart</Radio.Button>
+ <Radio.Button value="pie">Pie Chart</Radio.Button>
+ </Radio.Group>
+ );
+}`,
+ },
+ {
+ title: 'Vertical Radio Group',
+ code: `function VerticalDemo() {
+ const [value, setValue] = React.useState('option1');
+ return (
+ <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+ <Radio value="option1">First option</Radio>
+ <Radio value="option2">Second option</Radio>
+ <Radio value="option3">Third option</Radio>
+ </div>
+ </Radio.Group>
+ );
+}`,
+ },
+ ],
+ },
};
export const RadioButtonStory = (args: RadioProps) => (
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx
index cafbfdb1de7..70c7f3a7922 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx
@@ -28,118 +28,99 @@ export default {
title: 'Components/Skeleton',
component: Skeleton,
subcomponents: { Avatar, Button, Input, Image },
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Skeleton loading component with support for avatar, title, paragraph, button, and input placeholders.',
+ },
+ },
+ },
+} as Meta<
+ typeof Skeleton & typeof Avatar & typeof Button & typeof Input & typeof Image
+>;
+
+type Story = StoryObj<typeof Skeleton & typeof Button & typeof Avatar>;
+
+export const InteractiveSkeleton: Story = {
+ args: {
+ active: true,
+ avatar: false,
+ loading: true,
+ title: true,
+ shape: 'circle',
+ size: 'default',
+ block: false,
+ },
argTypes: {
- // Skeleton props
active: {
control: 'boolean',
- description: 'Show animation effect',
- table: {
- category: 'Skeleton',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Show animation effect.',
},
avatar: {
control: 'boolean',
- description: 'Show avatar placeholder',
- table: {
- category: 'Skeleton',
- type: { summary: 'boolean | object' },
- defaultValue: { summary: false },
- },
+ description: 'Show avatar placeholder.',
},
loading: {
control: 'boolean',
- description: 'Display the skeleton when true',
- table: {
- category: 'Skeleton',
- type: { summary: 'boolean' },
- },
- },
- paragraph: {
- control: 'false',
- description: 'Paragraph skeleton',
- table: {
- category: 'Skeleton',
- type: { summary: 'boolean | object' },
- defaultValue: { summary: 'true' },
- },
- },
- round: {
- control: false,
- description: 'Show paragraph and title radius when true ',
- table: {
- category: 'Skeleton',
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
+ description: 'Display the skeleton when true.',
},
title: {
control: 'boolean',
- description: 'Show title placeholder',
- table: {
- category: 'Skeleton',
- type: { summary: 'boolean | object' },
- defaultValue: { summary: true },
- },
+ description: 'Show title placeholder.',
},
-
- // Skeleton.Avatar props
shape: {
control: 'select',
- description: 'Shape of the avatar',
+ description: 'Shape of the avatar/button skeleton.',
options: ['circle', 'square'],
- table: {
- name: 'shape',
- category: 'Avatar | Button',
- type: { summary: 'string' },
- },
},
size: {
control: 'select',
options: ['large', 'small', 'default'],
- description: 'Set the size of avatar in the skeleton',
- table: {
- category: 'Avatar | Button',
- type: { summary: 'number | string' },
- },
+ description: 'Size of the skeleton elements.',
},
-
- // Skeleton.Title props
- width: {
- control: false,
- description: 'Set the width of title in the skeleton',
- table: {
- category: 'Title',
- type: { summary: 'number | string' },
- },
- },
-
- // Skeleton.Button props
block: {
control: 'boolean',
- description: 'Option to fit button width to its parent width',
- table: {
- category: 'Button',
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
+ description: 'Option to fit button width to its parent width.',
},
},
+ render: (args: SkeletonProps & AvatarProps & SkeletonButtonProps) => {
+ const avatar = {
+ shape: args.shape,
+ size: args.size,
+ };
+ const button = {
+ block: args.block,
+ shape: args.shape,
+ size: args.size,
+ };
+
+ return (
+ <Space direction="vertical" size="middle">
+ Skeleton
+ <Skeleton {...args} />
+ Avatar
+ <Skeleton.Avatar {...avatar} />
+ Button
+ <Skeleton.Button {...button} />
+ </Space>
+ );
+ },
parameters: {
docs: {
description: {
- component:
- 'Skeleton loading component with support for avatar, title, paragraph, button, and input placeholders.',
+ story: 'A loading placeholder for content that is not yet loaded.',
},
+ liveExample: `function Demo() {
+ return (
+ <Skeleton active avatar paragraph={{ rows: 4 }} />
+ );
+}`,
},
},
-} as Meta<
- typeof Skeleton & typeof Avatar & typeof Button & typeof Input & typeof Image
->;
-
-type Story = StoryObj<typeof Skeleton & typeof Button & typeof Avatar>;
+};
+// Keep original for backwards compatibility
export const SkeletonStory: Story = {
render: (args: SkeletonProps & AvatarProps & SkeletonButtonProps) => {
const avatar = {
diff --git a/superset-frontend/packages/superset-ui-core/src/components/TreeSelect/TreeSelect.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/TreeSelect/TreeSelect.stories.tsx
index 7c0f6e33e0a..338a7561608 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/TreeSelect/TreeSelect.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/TreeSelect/TreeSelect.stories.tsx
@@ -22,238 +22,170 @@ import { TreeSelect, type TreeSelectProps } from '.';
export default {
title: 'Components/TreeSelect',
component: TreeSelect,
- argTypes: {
- allowClear: {
- control: { type: 'boolean' },
- description: 'Whether to allow clearing the selected value.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
- },
- autoClearSearchValue: {
- control: { type: 'boolean' },
- description: 'Whether to clear the search value automatically.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'true' },
- },
- },
- disabled: {
- control: { type: 'boolean' },
- description: 'Whether the component is disabled.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'TreeSelect is a select component that allows users to select from a tree structure.',
},
},
- labelInValue: {
- control: { type: 'boolean' },
- description: 'Whether to use label in value.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
+ },
+} as Meta<typeof TreeSelect>;
+
+type Story = StoryObj<typeof TreeSelect>;
+
+const treeData = [
+ {
+ title: 'Node1',
+ value: '0-0',
+ children: [
+ {
+ title: 'Child Node1',
+ value: '0-0-0',
},
- },
- listHeight: {
- control: { type: 'number' },
- description: 'Height of the dropdown list.',
- defaultValue: 256,
- table: {
- category: 'TreeSelect',
- type: { summary: 'number' },
- defaultValue: { summary: '256' },
+ {
+ title: 'Child Node2',
+ value: '0-0-1',
},
- },
- maxTagCount: {
- control: { type: 'number' },
- description: 'Maximum number of tags to display.',
- table: {
- category: 'TreeSelect',
- type: { summary: 'number' },
+ ],
+ },
+ {
+ title: 'Node2',
+ value: '0-1',
+ children: [
+ {
+ title: 'Child Node3',
+ value: '0-1-0',
},
+ ],
+ },
+];
+
+export const InteractiveTreeSelect: Story = {
+ args: {
+ treeData,
+ allowClear: true,
+ disabled: false,
+ multiple: false,
+ placeholder: 'Please select',
+ showSearch: true,
+ size: 'middle',
+ treeCheckable: false,
+ treeDefaultExpandAll: true,
+ treeLine: false,
+ variant: 'outlined',
+ },
+ argTypes: {
+ allowClear: {
+ control: 'boolean',
+ description: 'Whether to allow clearing the selected value.',
},
- maxTagTextLength: {
- control: { type: 'number' },
- description: 'Maximum length of tag text.',
- defaultValue: 20,
- table: {
- category: 'TreeSelect',
- type: { summary: 'number' },
- },
+ disabled: {
+ control: 'boolean',
+ description: 'Whether the component is disabled.',
},
multiple: {
- control: { type: 'boolean' },
+ control: 'boolean',
description: 'Whether to allow multiple selections.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
},
placeholder: {
- control: { type: 'text' },
+ control: 'text',
description: 'Placeholder text for the input field.',
- defaultValue: 'Please select',
- table: {
- category: 'TreeSelect',
- type: { summary: 'string' },
- },
- },
- placement: {
- control: { type: 'select' },
- options: ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
- description: 'Placement of the dropdown menu.',
- defaultValue: 'bottomLeft',
- table: {
- category: 'TreeSelect',
- type: { summary: 'string' },
- defaultValue: { summary: 'bottomLeft' },
- },
},
showSearch: {
- control: { type: 'boolean' },
+ control: 'boolean',
description: 'Whether to show the search input.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- },
},
size: {
- control: { type: 'select' },
+ control: 'select',
options: ['large', 'middle', 'small'],
description: 'Size of the component.',
- defaultValue: 'middle',
- table: {
- category: 'TreeSelect',
- type: { summary: 'string' },
- },
- },
- status: {
- control: { type: 'select' },
- options: ['error', 'warning'],
- description: 'Status of the component.',
- defaultValue: 'error',
- table: {
- category: 'TreeSelect',
- type: { summary: 'string' },
- },
},
treeCheckable: {
- control: { type: 'boolean' },
+ control: 'boolean',
description: 'Whether to show checkable tree nodes.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
},
treeDefaultExpandAll: {
- control: { type: 'boolean' },
+ control: 'boolean',
description: 'Whether to expand all tree nodes by default.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
- },
- treeIcon: {
- control: { type: 'boolean' },
- description: 'Whether to show tree icons.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
},
treeLine: {
- control: { type: 'boolean' },
+ control: 'boolean',
description: 'Whether to show tree lines.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
},
variant: {
- control: { type: 'select' },
- options: ['outlined', 'borderless', 'filled', 'underlined'],
+ control: 'select',
+ options: ['outlined', 'borderless', 'filled'],
description: 'Variant of the component.',
- defaultValue: 'outlined',
- table: {
- category: 'TreeSelect',
- type: { summary: 'string' },
- defaultValue: { summary: 'outlined' },
- },
- },
- virtual: {
- control: { type: 'boolean' },
- description: 'Whether to use virtual scrolling.',
- defaultValue: false,
- table: {
- category: 'TreeSelect',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'true' },
- },
},
treeData: {
- table: {
- disable: true,
- },
+ table: { disable: true },
},
},
+ render: (args: TreeSelectProps) => (
+ <div style={{ width: 300 }}>
+ <TreeSelect {...args} style={{ width: '100%' }} />
+ </div>
+ ),
parameters: {
docs: {
description: {
- component:
- 'TreeSelect is a select component that allows users to select from a tree structure.',
- },
+ story: 'A select component for choosing from hierarchical tree data.',
+ },
+ staticProps: {
+ treeData: [
+ {
+ title: 'Node1',
+ value: '0-0',
+ children: [
+ { title: 'Child Node1', value: '0-0-0' },
+ { title: 'Child Node2', value: '0-0-1' },
+ ],
+ },
+ {
+ title: 'Node2',
+ value: '0-1',
+ children: [{ title: 'Child Node3', value: '0-1-0' }],
+ },
+ ],
+ },
+ liveExample: `function Demo() {
+ const [value, setValue] = React.useState(undefined);
+ const treeData = [
+ {
+ title: 'Databases',
+ value: 'databases',
+ children: [
+ { title: 'PostgreSQL', value: 'postgres' },
+ { title: 'MySQL', value: 'mysql' },
+ ],
+ },
+ {
+ title: 'Charts',
+ value: 'charts',
+ children: [
+ { title: 'Bar Chart', value: 'bar' },
+ { title: 'Line Chart', value: 'line' },
+ ],
+ },
+ ];
+ return (
+ <TreeSelect
+ style={{ width: 300 }}
+ value={value}
+ onChange={setValue}
+ treeData={treeData}
+ placeholder="Select an item"
+ allowClear
+ treeDefaultExpandAll
+ />
+ );
+}`,
},
},
-} as Meta<typeof TreeSelect>;
-
-type Story = StoryObj<typeof TreeSelect>;
-
-const treeData = [
- {
- title: 'Node1',
- value: '0-0',
- children: [
- {
- title: 'Child Node1',
- value: '0-0-0',
- },
- {
- title: 'Child Node2',
- value: '0-0-1',
- },
- ],
- },
- {
- title: 'Node2',
- value: '0-1',
- children: [
- {
- title: 'Child Node3',
- value: '0-1-0',
- },
- ],
- },
-];
+};
+// Keep original for backwards compatibility
export const Default: Story = {
args: {
treeData,
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Typography/Typography.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Typography/Typography.stories.tsx
index 16700be76f0..2b69ab82735 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Typography/Typography.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Typography/Typography.stories.tsx
@@ -28,146 +28,170 @@ export default {
Paragraph: Typography.Paragraph,
Link: Typography.Link,
},
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Typography is a component for displaying text with various styles and formats. It includes subcomponents like Title, Paragraph, and Link.',
+ },
+ },
+ },
+} as Meta<
+ typeof Typography.Text &
+ typeof Typography.Paragraph &
+ typeof Typography.Link &
+ typeof Typography.Title
+>;
+
+type TextStory = StoryObj<typeof Typography.Text>;
+
+export const InteractiveTypography: TextStory = {
+ args: {
+ children: 'Sample Text',
+ code: false,
+ copyable: false,
+ delete: false,
+ disabled: false,
+ ellipsis: false,
+ keyboard: false,
+ mark: false,
+ italic: false,
+ underline: false,
+ strong: false,
+ type: undefined,
+ },
argTypes: {
+ children: {
+ control: 'text',
+ description: 'The text content.',
+ },
code: {
control: 'boolean',
- description: 'Code style',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Code style.',
},
copyable: {
control: 'boolean',
- description: 'Whether to be copyable, customize it via setting an object',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Whether the text is copyable.',
},
delete: {
control: 'boolean',
- description: 'Deleted line style',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Deleted line style.',
},
disabled: {
control: 'boolean',
- description: 'Disabled content',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
- },
- editable: {
- control: 'boolean',
- description: 'Whether to be editable, customize it via setting an object',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Disabled content.',
},
ellipsis: {
control: 'boolean',
- description:
- 'Display ellipsis when text overflows, can not configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Display ellipsis when text overflows.',
},
keyboard: {
control: 'boolean',
- description: 'Keyboard style',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Keyboard style.',
},
mark: {
control: 'boolean',
- description: 'Marked style',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Marked/highlighted style.',
},
italic: {
control: 'boolean',
- description: 'Italic style',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
- },
- type: {
- control: 'select',
- description: 'Text type',
- options: ['secondary', 'success', 'warning', 'danger'],
- table: {
- category: 'Typography.Text',
- type: { summary: 'string' },
- },
+ description: 'Italic style.',
},
underline: {
control: 'boolean',
- description: 'Underlined style ',
- table: {
- category: 'Typography.Text',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
- },
- level: {
- control: {
- type: 'number',
- min: 1,
- max: 5,
- },
- description: 'Set content importance. Match with h1, h2, h3, h4, h5',
- table: {
- category: 'Typography.Title',
- type: { summary: 'number' },
- },
+ description: 'Underlined style.',
},
strong: {
control: 'boolean',
- description: 'Bold style',
- table: {
- category: 'Typography.Paragraph',
- type: { summary: 'boolean' },
- defaultValue: { summary: 'false' },
- },
+ description: 'Bold style.',
},
- },
- parameters: {
- docs: {
- description: {
- component:
- 'Typography is a component for displaying text with various styles and formats. It includes subcomponents like Title, Paragraph, and Link.',
- },
+ type: {
+ control: 'select',
+ options: [undefined, 'secondary', 'success', 'warning', 'danger'],
+ description: 'Text type for semantic coloring.',
},
},
-} as Meta<
- typeof Typography.Text &
- typeof Typography.Paragraph &
- typeof Typography.Link &
- typeof Typography.Title
->;
+ render: args => <Typography.Text {...args} />,
+};
-type TextStory = StoryObj<typeof Typography.Text>;
+InteractiveTypography.parameters = {
+ docs: {
+ description: {
+ story: 'Text component with various styling options.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <div>
+ <Typography.Text>Default Text</Typography.Text>
+ <br />
+ <Typography.Text type="secondary">Secondary</Typography.Text>
+ <br />
+ <Typography.Text type="success">Success</Typography.Text>
+ <br />
+ <Typography.Text type="warning">Warning</Typography.Text>
+ <br />
+ <Typography.Text type="danger">Danger</Typography.Text>
+ <br />
+ <Typography.Text code>Code</Typography.Text>
+ <br />
+ <Typography.Text keyboard>Keyboard</Typography.Text>
+ <br />
+ <Typography.Text mark>Marked</Typography.Text>
+ <br />
+ <Typography.Text underline>Underline</Typography.Text>
+ <br />
+ <Typography.Text delete>Deleted</Typography.Text>
+ <br />
+ <Typography.Text strong>Strong</Typography.Text>
+ <br />
+ <Typography.Text italic>Italic</Typography.Text>
+ </div>
+ );
+}`,
+ examples: [
+ {
+ title: 'All Subcomponents',
+ code: `function AllSubcomponents() {
+ return (
+ <div>
+ <Typography.Title level={2}>Typography Components</Typography.Title>
+ <Typography.Paragraph>
+ The Typography component includes several subcomponents for different text needs.
+ Use <Typography.Text strong>Title</Typography.Text> for headings,
+ <Typography.Text code>Text</Typography.Text> for inline text styling,
+ and <Typography.Text mark>Paragraph</Typography.Text> for block content.
+ </Typography.Paragraph>
+ <Typography.Link href="https://superset.apache.org" target="_blank">
+ Learn more about Apache Superset
+ </Typography.Link>
+ </div>
+ );
+}`,
+ },
+ {
+ title: 'Text Styling Options',
+ code: `function TextStyles() {
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+ <Typography.Text code>Code style</Typography.Text>
+ <Typography.Text keyboard>Keyboard style</Typography.Text>
+ <Typography.Text mark>Highlighted text</Typography.Text>
+ <Typography.Text underline>Underlined text</Typography.Text>
+ <Typography.Text delete>Deleted text</Typography.Text>
+ <Typography.Text strong>Bold text</Typography.Text>
+ <Typography.Text italic>Italic text</Typography.Text>
+ <Typography.Text type="success">Success type</Typography.Text>
+ <Typography.Text type="warning">Warning type</Typography.Text>
+ <Typography.Text type="danger">Danger type</Typography.Text>
+ </div>
+ );
+}`,
+ },
+ ],
+ },
+};
+// Keep original for backwards compatibility
export const TextStory: TextStory = {
args: {
children: 'Default Text',
@@ -177,14 +201,169 @@ export const TextStory: TextStory = {
type TitleStory = StoryObj<typeof Typography.Title>;
+export const InteractiveTitle: TitleStory = {
+ args: {
+ children: 'Sample Title',
+ level: 1,
+ copyable: false,
+ delete: false,
+ disabled: false,
+ ellipsis: false,
+ mark: false,
+ italic: false,
+ underline: false,
+ type: undefined,
+ },
+ argTypes: {
+ children: {
+ control: 'text',
+ description: 'The title content.',
+ },
+ level: {
+ control: { type: 'number', min: 1, max: 5 },
+ description: 'Set content importance (h1-h5).',
+ },
+ copyable: {
+ control: 'boolean',
+ description: 'Whether the title is copyable.',
+ },
+ delete: {
+ control: 'boolean',
+ description: 'Deleted line style.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Disabled content.',
+ },
+ ellipsis: {
+ control: 'boolean',
+ description: 'Display ellipsis when text overflows.',
+ },
+ mark: {
+ control: 'boolean',
+ description: 'Marked/highlighted style.',
+ },
+ italic: {
+ control: 'boolean',
+ description: 'Italic style.',
+ },
+ underline: {
+ control: 'boolean',
+ description: 'Underlined style.',
+ },
+ type: {
+ control: 'select',
+ options: [undefined, 'secondary', 'success', 'warning', 'danger'],
+ description: 'Title type for semantic coloring.',
+ },
+ },
+ render: args => <Typography.Title {...args} />,
+ parameters: {
+ docs: {
+ description: {
+ story: 'Title component with heading levels h1-h5.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <div>
+ <Typography.Title level={1}>h1. Heading</Typography.Title>
+ <Typography.Title level={2}>h2. Heading</Typography.Title>
+ <Typography.Title level={3}>h3. Heading</Typography.Title>
+ <Typography.Title level={4}>h4. Heading</Typography.Title>
+ <Typography.Title level={5}>h5. Heading</Typography.Title>
+ </div>
+ );
+}`,
+ },
+ },
+};
+
export const TitleStory: TitleStory = {
args: {
children: 'Default Title',
},
render: args => <Typography.Title {...args} />,
};
+
type ParagraphStory = StoryObj<typeof Typography.Paragraph>;
+export const InteractiveParagraph: ParagraphStory = {
+ args: {
+ children:
+ 'This is a paragraph of text. Paragraphs are block-level elements that support various text styling options.',
+ copyable: false,
+ delete: false,
+ disabled: false,
+ ellipsis: false,
+ mark: false,
+ strong: false,
+ italic: false,
+ underline: false,
+ type: undefined,
+ },
+ argTypes: {
+ children: {
+ control: 'text',
+ description: 'The paragraph content.',
+ },
+ copyable: {
+ control: 'boolean',
+ description: 'Whether the paragraph is copyable.',
+ },
+ delete: {
+ control: 'boolean',
+ description: 'Deleted line style.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Disabled content.',
+ },
+ ellipsis: {
+ control: 'boolean',
+ description: 'Display ellipsis when text overflows.',
+ },
+ mark: {
+ control: 'boolean',
+ description: 'Marked/highlighted style.',
+ },
+ strong: {
+ control: 'boolean',
+ description: 'Bold style.',
+ },
+ italic: {
+ control: 'boolean',
+ description: 'Italic style.',
+ },
+ underline: {
+ control: 'boolean',
+ description: 'Underlined style.',
+ },
+ type: {
+ control: 'select',
+ options: [undefined, 'secondary', 'success', 'warning', 'danger'],
+ description: 'Paragraph type for semantic coloring.',
+ },
+ },
+ render: args => <Typography.Paragraph {...args} />,
+ parameters: {
+ docs: {
+ description: {
+ story: 'Paragraph component for block-level text content.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <Typography.Paragraph>
+ This is a paragraph. Paragraphs are used for block-level text content.
+ They support features like <Typography.Text strong>bold</Typography.Text>,
+ <Typography.Text italic> italic</Typography.Text>, and
+ <Typography.Text code> code</Typography.Text> styling.
+ </Typography.Paragraph>
+ );
+}`,
+ },
+ },
+};
+
export const ParagraphStory: ParagraphStory = {
args: {
children: 'Default Paragraph',
@@ -194,6 +373,92 @@ export const ParagraphStory: ParagraphStory = {
type LinkStory = StoryObj<typeof Typography.Link>;
+export const InteractiveLink: LinkStory = {
+ args: {
+ children: 'Click here',
+ href: 'https://superset.apache.org',
+ target: '_blank',
+ copyable: false,
+ delete: false,
+ disabled: false,
+ ellipsis: false,
+ mark: false,
+ strong: false,
+ italic: false,
+ underline: false,
+ type: undefined,
+ },
+ argTypes: {
+ children: {
+ control: 'text',
+ description: 'The link text.',
+ },
+ href: {
+ control: 'text',
+ description: 'The URL the link points to.',
+ },
+ target: {
+ control: 'select',
+ options: ['_blank', '_self', '_parent', '_top'],
+ description: 'Where to open the linked document.',
+ },
+ copyable: {
+ control: 'boolean',
+ description: 'Whether the link is copyable.',
+ },
+ delete: {
+ control: 'boolean',
+ description: 'Deleted line style.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Disabled link.',
+ },
+ ellipsis: {
+ control: 'boolean',
+ description: 'Display ellipsis when text overflows.',
+ },
+ mark: {
+ control: 'boolean',
+ description: 'Marked/highlighted style.',
+ },
+ strong: {
+ control: 'boolean',
+ description: 'Bold style.',
+ },
+ italic: {
+ control: 'boolean',
+ description: 'Italic style.',
+ },
+ underline: {
+ control: 'boolean',
+ description: 'Underlined style.',
+ },
+ type: {
+ control: 'select',
+ options: [undefined, 'secondary', 'success', 'warning', 'danger'],
+ description: 'Link type for semantic coloring.',
+ },
+ },
+ render: args => <Typography.Link {...args} />,
+ parameters: {
+ docs: {
+ description: {
+ story: 'Link component for hyperlinks with text styling options.',
+ },
+ liveExample: `function Demo() {
+ return (
+ <div>
+ <Typography.Link href="https://superset.apache.org" target="_blank">
+ Apache Superset
+ </Typography.Link>
+ </div>
+ );
+}`,
+ },
+ },
+};
+
export const LinkStory: LinkStory = {
args: {
children: 'Default Link',