This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch docs/federate-storybook
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/docs/federate-storybook by
this push:
new 2d0769b381 docs: add staticProps for Collapse and DatePicker components
2d0769b381 is described below
commit 2d0769b381df4b602e2d09959b7b31bb86129324
Author: Evan Rusackas <[email protected]>
AuthorDate: Tue Jan 20 19:05:11 2026 -0800
docs: add staticProps for Collapse and DatePicker components
- Added staticProps with items array for Collapse to show panel content
- Added liveExample for Collapse with complete working code
- Added staticProps for DatePicker with full set of common props
- Added liveExample for DatePicker with clean usage example
Co-Authored-By: Claude Opus 4.5 <[email protected]>
---
docs/developer_portal/components/ui/collapse.mdx | 51 ++++++++++++++++-----
docs/developer_portal/components/ui/datepicker.mdx | 27 +++++++++--
.../src/components/Collapse/Collapse.stories.tsx | 52 ++++++++++++++++++++++
.../components/DatePicker/DatePicker.stories.tsx | 33 ++++++++++++++
4 files changed, 147 insertions(+), 16 deletions(-)
diff --git a/docs/developer_portal/components/ui/collapse.mdx
b/docs/developer_portal/components/ui/collapse.mdx
index c7cfb3638d..c3635d0eb1 100644
--- a/docs/developer_portal/components/ui/collapse.mdx
+++ b/docs/developer_portal/components/ui/collapse.mdx
@@ -26,7 +26,7 @@ import { StoryWithControls } from
'../../../src/components/StorybookWrapper';
# Collapse
-The Collapse component from Superset's UI library.
+Collapse component for expandable/collapsible content panels.
## Live Example
@@ -37,33 +37,53 @@ The Collapse component from Superset's UI library.
bordered: true,
accordion: false,
animateArrows: false,
- modalMode: false
+ modalMode: false,
+ items: [
+ {
+ key: "1",
+ label: "Header 1",
+ children: "Content for panel 1"
+ },
+ {
+ key: "2",
+ label: "Header 2",
+ children: "Content for panel 2"
+ }
+ ],
+ defaultActiveKey: [
+ "1"
+ ]
}}
controls={[
{
name: "ghost",
label: "Ghost",
- type: "boolean"
+ type: "boolean",
+ description: "Make the collapse borderless and remove background."
},
{
name: "bordered",
label: "Bordered",
- type: "boolean"
+ type: "boolean",
+ description: "Show border around the collapse."
},
{
name: "accordion",
label: "Accordion",
- type: "boolean"
+ type: "boolean",
+ description: "Allow only one panel to be expanded at a time."
},
{
name: "animateArrows",
label: "Animate Arrows",
- type: "boolean"
+ type: "boolean",
+ description: "Animate the expand/collapse arrows."
},
{
name: "modalMode",
label: "Modal Mode",
- type: "boolean"
+ type: "boolean",
+ description: "Style for use inside modals."
}
]}
/>
@@ -77,6 +97,11 @@ function Demo() {
return (
<Collapse
bordered
+ defaultActiveKey={['1']}
+ items={[
+ { key: '1', label: 'Header 1', children: 'Content for panel 1' },
+ { key: '2', label: 'Header 2', children: 'Content for panel 2' },
+ ]}
/>
);
}
@@ -86,11 +111,13 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `ghost` | `boolean` | `false` | - |
-| `bordered` | `boolean` | `true` | - |
-| `accordion` | `boolean` | `false` | - |
-| `animateArrows` | `boolean` | `false` | - |
-| `modalMode` | `boolean` | `false` | - |
+| `ghost` | `boolean` | `false` | Make the collapse borderless and remove
background. |
+| `bordered` | `boolean` | `true` | Show border around the collapse. |
+| `accordion` | `boolean` | `false` | Allow only one panel to be expanded at a
time. |
+| `animateArrows` | `boolean` | `false` | Animate the expand/collapse arrows. |
+| `modalMode` | `boolean` | `false` | Style for use inside modals. |
+| `items` | `any` | `[{"key":"1","label":"Header 1","children":"Content for
panel 1"},{"key":"2","label":"Header 2","children":"Content for panel 2"}]` |
Array of panel items with key, label, and children. |
+| `defaultActiveKey` | `any` | `["1"]` | - |
## Import
diff --git a/docs/developer_portal/components/ui/datepicker.mdx
b/docs/developer_portal/components/ui/datepicker.mdx
index e12d0454fa..ec59e0e1a2 100644
--- a/docs/developer_portal/components/ui/datepicker.mdx
+++ b/docs/developer_portal/components/ui/datepicker.mdx
@@ -33,8 +33,17 @@ The DatePicker component from Superset's UI library.
<StoryWithControls
component="DatePicker"
props={{
- placeholder: "Placeholder",
- showToday: true
+ placeholder: "Select date",
+ showToday: true,
+ allowClear: false,
+ autoFocus: true,
+ disabled: false,
+ format: "YYYY-MM-DD hh:mm a",
+ inputReadOnly: false,
+ picker: "date",
+ placement: "bottomLeft",
+ size: "middle",
+ showNow: true
}}
controls={[
{
@@ -58,7 +67,8 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<DatePicker
- placeholder="Placeholder"
+ placeholder="Select date"
+ format="YYYY-MM-DD"
showToday
/>
);
@@ -69,8 +79,17 @@ function Demo() {
| Prop | Type | Default | Description |
|------|------|---------|-------------|
-| `placeholder` | `string` | `"Placeholder"` | - |
+| `placeholder` | `string` | `"Select date"` | - |
| `showToday` | `boolean` | `true` | - |
+| `allowClear` | `boolean` | `false` | - |
+| `autoFocus` | `boolean` | `true` | - |
+| `disabled` | `boolean` | `false` | - |
+| `format` | `string` | `"YYYY-MM-DD hh:mm a"` | - |
+| `inputReadOnly` | `boolean` | `false` | - |
+| `picker` | `string` | `"date"` | - |
+| `placement` | `string` | `"bottomLeft"` | - |
+| `size` | `string` | `"middle"` | - |
+| `showNow` | `boolean` | `true` | - |
## Import
diff --git
a/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx
b/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx
index a75646ad6b..db8f440274 100644
---
a/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx
+++
b/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx
@@ -22,6 +22,13 @@ import type { CollapseProps } from './types';
export default {
title: 'Components/Collapse',
component: Collapse,
+ parameters: {
+ docs: {
+ description: {
+ component: 'Collapse component for expandable/collapsible content
panels.',
+ },
+ },
+ },
};
export const InteractiveCollapse = (args: CollapseProps) => (
@@ -52,6 +59,30 @@ InteractiveCollapse.args = {
};
InteractiveCollapse.argTypes = {
+ ghost: {
+ description: 'Make the collapse borderless and remove background.',
+ control: 'boolean',
+ },
+ bordered: {
+ description: 'Show border around the collapse.',
+ control: 'boolean',
+ },
+ accordion: {
+ description: 'Allow only one panel to be expanded at a time.',
+ control: 'boolean',
+ },
+ animateArrows: {
+ description: 'Animate the expand/collapse arrows.',
+ control: 'boolean',
+ },
+ modalMode: {
+ description: 'Style for use inside modals.',
+ control: 'boolean',
+ },
+ items: {
+ description: 'Array of panel items with key, label, and children.',
+ control: false,
+ },
theme: {
table: {
disable: true,
@@ -63,4 +94,25 @@ InteractiveCollapse.parameters = {
actions: {
disable: true,
},
+ docs: {
+ staticProps: {
+ items: [
+ { key: '1', label: 'Header 1', children: 'Content for panel 1' },
+ { key: '2', label: 'Header 2', children: 'Content for panel 2' },
+ ],
+ defaultActiveKey: ['1'],
+ },
+ liveExample: `function Demo() {
+ return (
+ <Collapse
+ bordered
+ defaultActiveKey={['1']}
+ items={[
+ { key: '1', label: 'Header 1', children: 'Content for panel 1' },
+ { key: '2', label: 'Header 2', children: 'Content for panel 2' },
+ ]}
+ />
+ );
+}`,
+ },
};
diff --git
a/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx
b/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx
index 6043effffb..cd6cdb7733 100644
---
a/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx
+++
b/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx
@@ -86,6 +86,39 @@ InteractiveDatePicker.args = {
InteractiveDatePicker.argTypes = interactiveTypes;
+InteractiveDatePicker.parameters = {
+ actions: {
+ disable: true,
+ },
+ docs: {
+ description: {
+ story: 'A date picker component with time selection support.',
+ },
+ staticProps: {
+ allowClear: false,
+ autoFocus: true,
+ disabled: false,
+ format: 'YYYY-MM-DD hh:mm a',
+ inputReadOnly: false,
+ picker: 'date',
+ placement: 'bottomLeft',
+ size: 'middle',
+ showNow: true,
+ showToday: true,
+ placeholder: 'Select date',
+ },
+ liveExample: `function Demo() {
+ return (
+ <DatePicker
+ placeholder="Select date"
+ format="YYYY-MM-DD"
+ showToday
+ />
+ );
+}`,
+ },
+};
+
export const InteractiveRangePicker = (
args: Omit<RangePickerProps, 'picker'> & {
picker?: 'date';
