QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-08-04 04:52:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(build): migrate from Prettier to Oxfmt for performant code formatting (#42434)

Browse Source
This commit is contained in:
Đỗ Trọng Hải
2026-08-04 00:27:05 +07:00
committed by GitHub
parent 10f7927603
commit e4ef84ca72
2328 changed files with 90728 additions and 32682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/developer_docs_versioned_docs/version-6.1.0/components/TODO.md
View File

@@ -68,4 +68,4 @@ Future phases will add support for these sources.
---
*Auto-generated by generate-superset-components.mjs*
_Auto-generated by generate-superset-components.mjs_

190
docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/dropdowncontainer.mdx
View File

@@ -33,72 +33,72 @@ DropdownContainer arranges items horizontally and moves overflowing items into a
<StoryWithControls
component="DropdownContainer"
props={{
style: {
maxWidth: 360
},
items: [
{
id: "item-0",
element: {
component: "Tag",
props: {
children: "Region",
color: "blue"
}
}
style: {
maxWidth: 360,
},
{
id: "item-1",
element: {
component: "Tag",
props: {
children: "Category",
color: "blue"
}
}
},
{
id: "item-2",
element: {
component: "Tag",
props: {
children: "Date Range",
color: "blue"
}
}
},
{
id: "item-3",
element: {
component: "Tag",
props: {
children: "Status",
color: "blue"
}
}
},
{
id: "item-4",
element: {
component: "Tag",
props: {
children: "Owner",
color: "blue"
}
}
},
{
id: "item-5",
element: {
component: "Tag",
props: {
children: "Priority",
color: "blue"
}
}
}
]
}}
items: [
{
id: 'item-0',
element: {
component: 'Tag',
props: {
children: 'Region',
color: 'blue',
},
},
},
{
id: 'item-1',
element: {
component: 'Tag',
props: {
children: 'Category',
color: 'blue',
},
},
},
{
id: 'item-2',
element: {
component: 'Tag',
props: {
children: 'Date Range',
color: 'blue',
},
},
},
{
id: 'item-3',
element: {
component: 'Tag',
props: {
children: 'Status',
color: 'blue',
},
},
},
{
id: 'item-4',
element: {
component: 'Tag',
props: {
children: 'Owner',
color: 'blue',
},
},
},
{
id: 'item-5',
element: {
component: 'Tag',
props: {
children: 'Priority',
color: 'blue',
},
},
},
],
}}
controls={[]}
/>
@@ -110,18 +110,30 @@ Edit the code below to experiment with the component:
function Demo() {
const items = Array.from({ length: 6 }, (_, i) => ({
id: 'item-' + i,
element: React.createElement('div', {
style: {
minWidth: 120,
padding: '4px 12px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: 4,
element: React.createElement(
'div',
{
style: {
minWidth: 120,
padding: '4px 12px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: 4,
},
},
}, 'Filter ' + (i + 1)),
'Filter ' + (i + 1),
),
}));
return (
<div style={{ width: 400, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
<div
style={{
width: 400,
resize: 'horizontal',
overflow: 'auto',
border: '1px solid #e8e8e8',
padding: 16,
}}
>
<DropdownContainer items={items} />
<div style={{ marginTop: 8, color: '#999', fontSize: 12 }}>
Drag the right edge to resize and see items overflow into a dropdown
@@ -138,21 +150,37 @@ function SelectFilters() {
const items = ['Region', 'Category', 'Date Range', 'Status', 'Owner'].map(
(label, i) => ({
id: 'filter-' + i,
element: React.createElement('div', {
style: { minWidth: 150, padding: '4px 12px', background: '#f5f5f5', border: '1px solid #d9d9d9', borderRadius: 4 },
}, label + ': All'),
})
element: React.createElement(
'div',
{
style: {
minWidth: 150,
padding: '4px 12px',
background: '#f5f5f5',
border: '1px solid #d9d9d9',
borderRadius: 4,
},
},
label + ': All',
),
}),
);
return (
<div style={{ width: 500, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
<div
style={{
width: 500,
resize: 'horizontal',
overflow: 'auto',
border: '1px solid #e8e8e8',
padding: 16,
}}
>
<DropdownContainer items={items} />
</div>
);
}
```
## Import
```tsx

146
docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/flex.mdx
View File

@@ -33,70 +33,62 @@ The Flex component from Superset's UI library.
<StoryWithControls
component="Flex"
props={{
vertical: false,
wrap: "nowrap",
justify: "normal",
align: "normal",
flex: "normal",
gap: "small"
}}
vertical: false,
wrap: 'nowrap',
justify: 'normal',
align: 'normal',
flex: 'normal',
gap: 'small',
}}
controls={[
{
name: "vertical",
label: "Vertical",
type: "boolean"
},
{
name: "wrap",
label: "Wrap",
type: "select",
options: [
"nowrap",
"wrap",
"wrap-reverse"
]
},
{
name: "justify",
label: "Justify",
type: "select",
options: [
"start",
"center",
"space-between",
"space-around",
"space-evenly"
]
},
{
name: "align",
label: "Align",
type: "select",
options: [
"start",
"center",
"end",
"stretch"
]
},
{
name: "flex",
label: "Flex",
type: "string"
},
{
name: "gap",
label: "Gap",
type: "select",
options: [
"small",
"medium",
"large"
]
}
]}
sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
{
name: 'vertical',
label: 'Vertical',
type: 'boolean',
},
{
name: 'wrap',
label: 'Wrap',
type: 'select',
options: ['nowrap', 'wrap', 'wrap-reverse'],
},
{
name: 'justify',
label: 'Justify',
type: 'select',
options: [
'start',
'center',
'space-between',
'space-around',
'space-evenly',
],
},
{
name: 'align',
label: 'Align',
type: 'select',
options: ['start', 'center', 'end', 'stretch'],
},
{
name: 'flex',
label: 'Flex',
type: 'string',
},
{
name: 'gap',
label: 'Gap',
type: 'select',
options: ['small', 'medium', 'large'],
},
]}
sampleChildren={['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']}
sampleChildrenStyle={{
padding: '8px 16px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: '4px',
}}
/>
## Try It
@@ -157,9 +149,17 @@ function JustifyAlign() {
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
{['flex-start', 'center', 'flex-end', 'space-between', 'space-around'].map(justify => (
{[
'flex-start',
'center',
'flex-end',
'space-between',
'space-around',
].map(justify => (
<div key={justify}>
<span style={{ marginBottom: 4, display: 'block', color: '#666' }}>{justify}</span>
<span style={{ marginBottom: 4, display: 'block', color: '#666' }}>
{justify}
</span>
<Flex style={boxStyle} justify={justify} align="center">
<div style={itemStyle} />
<div style={itemStyle} />
@@ -174,14 +174,14 @@ function JustifyAlign() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `vertical` | `boolean` | `false` | - |
| `wrap` | `string` | `"nowrap"` | - |
| `justify` | `string` | `"normal"` | - |
| `align` | `string` | `"normal"` | - |
| `flex` | `string` | `"normal"` | - |
| `gap` | `string` | `"small"` | - |
| Prop | Type | Default | Description |
| ---------- | --------- | ---------- | ----------- |
| `vertical` | `boolean` | `false` | - |
| `wrap` | `string` | `"nowrap"` | - |
| `justify` | `string` | `"normal"` | - |
| `align` | `string` | `"normal"` | - |
| `flex` | `string` | `"normal"` | - |
| `gap` | `string` | `"small"` | - |
## Import

262
docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/grid.mdx
View File

@@ -34,52 +34,87 @@ The Grid system of Ant Design is based on a 24-grid layout. The `Row` and `Col`
component="Grid"
renderComponent="Row"
props={{
align: "top",
justify: "start",
wrap: true,
gutter: 16
}}
align: 'top',
justify: 'start',
wrap: true,
gutter: 16,
}}
controls={[
{
name: "align",
label: "Align",
type: "select",
options: [
"top",
"middle",
"bottom",
"stretch"
],
description: "Vertical alignment of columns within the row."
},
{
name: "justify",
label: "Justify",
type: "select",
options: [
"start",
"end",
"center",
"space-around",
"space-between",
"space-evenly"
],
description: "Horizontal distribution of columns within the row."
},
{
name: "wrap",
label: "Wrap",
type: "boolean",
description: "Whether columns are allowed to wrap to the next line."
},
{
name: "gutter",
label: "Gutter",
type: "number",
description: "Spacing between columns in pixels."
}
]}
sampleChildren={[{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4 (tall)","style":{"background":"#e6f4ff","padding":"24px 8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}}]}
{
name: 'align',
label: 'Align',
type: 'select',
options: ['top', 'middle', 'bottom', 'stretch'],
description: 'Vertical alignment of columns within the row.',
},
{
name: 'justify',
label: 'Justify',
type: 'select',
options: [
'start',
'end',
'center',
'space-around',
'space-between',
'space-evenly',
],
description: 'Horizontal distribution of columns within the row.',
},
{
name: 'wrap',
label: 'Wrap',
type: 'boolean',
description: 'Whether columns are allowed to wrap to the next line.',
},
{
name: 'gutter',
label: 'Gutter',
type: 'number',
description: 'Spacing between columns in pixels.',
},
]}
sampleChildren={[
{
component: 'Col',
props: {
span: 4,
children: 'col-4',
style: {
background: '#e6f4ff',
padding: '8px',
border: '1px solid #91caff',
textAlign: 'center',
},
},
},
{
component: 'Col',
props: {
span: 4,
children: 'col-4 (tall)',
style: {
background: '#e6f4ff',
padding: '24px 8px',
border: '1px solid #91caff',
textAlign: 'center',
},
},
},
{
component: 'Col',
props: {
span: 4,
children: 'col-4',
style: {
background: '#e6f4ff',
padding: '8px',
border: '1px solid #91caff',
textAlign: 'center',
},
},
},
]}
/>
## Try It
@@ -91,19 +126,59 @@ function Demo() {
return (
<Row gutter={[16, 16]}>
<Col span={12}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
<div
style={{
background: '#e6f4ff',
padding: '8px',
border: '1px solid #91caff',
}}
>
col-12
</div>
</Col>
<Col span={12}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
<div
style={{
background: '#e6f4ff',
padding: '8px',
border: '1px solid #91caff',
}}
>
col-12
</div>
</Col>
<Col span={8}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
<div
style={{
background: '#e6f4ff',
padding: '8px',
border: '1px solid #91caff',
}}
>
col-8
</div>
</Col>
<Col span={8}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
<div
style={{
background: '#e6f4ff',
padding: '8px',
border: '1px solid #91caff',
}}
>
col-8
</div>
</Col>
<Col span={8}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
<div
style={{
background: '#e6f4ff',
padding: '8px',
border: '1px solid #91caff',
}}
>
col-8
</div>
</Col>
</Row>
);
@@ -117,22 +192,50 @@ function ResponsiveGrid() {
return (
<Row gutter={[16, 16]}>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
<div
style={{
background: '#e6f4ff',
padding: '16px',
border: '1px solid #91caff',
textAlign: 'center',
}}
>
Responsive
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
<div
style={{
background: '#e6f4ff',
padding: '16px',
border: '1px solid #91caff',
textAlign: 'center',
}}
>
Responsive
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
<div
style={{
background: '#e6f4ff',
padding: '16px',
border: '1px solid #91caff',
textAlign: 'center',
}}
>
Responsive
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
<div
style={{
background: '#e6f4ff',
padding: '16px',
border: '1px solid #91caff',
textAlign: 'center',
}}
>
Responsive
</div>
</Col>
@@ -145,24 +248,45 @@ function ResponsiveGrid() {
```tsx live
function AlignmentDemo() {
const boxStyle = { background: '#e6f4ff', padding: '16px 0', border: '1px solid #91caff', textAlign: 'center' };
const boxStyle = {
background: '#e6f4ff',
padding: '16px 0',
border: '1px solid #91caff',
textAlign: 'center',
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<Row justify="start" gutter={8}>
<Col span={4}><div style={boxStyle}>start</div></Col>
<Col span={4}><div style={boxStyle}>start</div></Col>
<Col span={4}>
<div style={boxStyle}>start</div>
</Col>
<Col span={4}>
<div style={boxStyle}>start</div>
</Col>
</Row>
<Row justify="center" gutter={8}>
<Col span={4}><div style={boxStyle}>center</div></Col>
<Col span={4}><div style={boxStyle}>center</div></Col>
<Col span={4}>
<div style={boxStyle}>center</div>
</Col>
<Col span={4}>
<div style={boxStyle}>center</div>
</Col>
</Row>
<Row justify="end" gutter={8}>
<Col span={4}><div style={boxStyle}>end</div></Col>
<Col span={4}><div style={boxStyle}>end</div></Col>
<Col span={4}>
<div style={boxStyle}>end</div>
</Col>
<Col span={4}>
<div style={boxStyle}>end</div>
</Col>
</Row>
<Row justify="space-between" gutter={8}>
<Col span={4}><div style={boxStyle}>between</div></Col>
<Col span={4}><div style={boxStyle}>between</div></Col>
<Col span={4}>
<div style={boxStyle}>between</div>
</Col>
<Col span={4}>
<div style={boxStyle}>between</div>
</Col>
</Row>
</div>
);
@@ -171,12 +295,12 @@ function AlignmentDemo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `string` | `"top"` | Vertical alignment of columns within the row. |
| `justify` | `string` | `"start"` | Horizontal distribution of columns within the row. |
| `wrap` | `boolean` | `true` | Whether columns are allowed to wrap to the next line. |
| `gutter` | `number` | `16` | Spacing between columns in pixels. |
| Prop | Type | Default | Description |
| --------- | --------- | --------- | ----------------------------------------------------- |
| `align` | `string` | `"top"` | Vertical alignment of columns within the row. |
| `justify` | `string` | `"start"` | Horizontal distribution of columns within the row. |
| `wrap` | `boolean` | `true` | Whether columns are allowed to wrap to the next line. |
| `gutter` | `number` | `16` | Spacing between columns in pixels. |
## Import

82
docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/layout.mdx
View File

@@ -33,20 +33,47 @@ Ant Design Layout component with configurable Sider, Header, Footer, and Content
<StoryWithControls
component="Layout"
props={{
hasSider: false,
style: {
minHeight: 200
}
}}
hasSider: false,
style: {
minHeight: 200,
},
}}
controls={[
{
name: "hasSider",
label: "Has Sider",
type: "boolean",
description: "Whether the layout contains a Sider sub-component."
}
]}
sampleChildren={[{"component":"Layout.Header","props":{"children":"Header","style":{"background":"#001529","color":"#fff","padding":"0 24px","lineHeight":"64px"}}},{"component":"Layout.Content","props":{"children":"Content Area","style":{"padding":"24px","background":"#fff","flex":1}}},{"component":"Layout.Footer","props":{"children":"Footer","style":{"textAlign":"center","background":"#f5f5f5","padding":"12px"}}}]}
{
name: 'hasSider',
label: 'Has Sider',
type: 'boolean',
description: 'Whether the layout contains a Sider sub-component.',
},
]}
sampleChildren={[
{
component: 'Layout.Header',
props: {
children: 'Header',
style: {
background: '#001529',
color: '#fff',
padding: '0 24px',
lineHeight: '64px',
},
},
},
{
component: 'Layout.Content',
props: {
children: 'Content Area',
style: { padding: '24px', background: '#fff', flex: 1 },
},
},
{
component: 'Layout.Footer',
props: {
children: 'Footer',
style: { textAlign: 'center', background: '#f5f5f5', padding: '12px' },
},
},
]}
/>
## Try It
@@ -64,12 +91,12 @@ function Demo() {
<Layout.Header style={{ background: '#fff', padding: '0 16px' }}>
Header
</Layout.Header>
<Layout.Content style={{ margin: '16px', padding: '24px', background: '#fff' }}>
<Layout.Content
style={{ margin: '16px', padding: '24px', background: '#fff' }}
>
Content
</Layout.Content>
<Layout.Footer style={{ textAlign: 'center' }}>
Footer
</Layout.Footer>
<Layout.Footer style={{ textAlign: 'center' }}>Footer</Layout.Footer>
</Layout>
</Layout>
);
@@ -82,10 +109,19 @@ function Demo() {
function ContentOnly() {
return (
<Layout>
<Layout.Header style={{ background: '#001529', color: '#fff', padding: '0 24px', lineHeight: '64px' }}>
<Layout.Header
style={{
background: '#001529',
color: '#fff',
padding: '0 24px',
lineHeight: '64px',
}}
>
Application Header
</Layout.Header>
<Layout.Content style={{ padding: '24px', minHeight: '200px', background: '#fff' }}>
<Layout.Content
style={{ padding: '24px', minHeight: '200px', background: '#fff' }}
>
Main content area without a sidebar
</Layout.Content>
<Layout.Footer style={{ textAlign: 'center', background: '#f5f5f5' }}>
@@ -120,10 +156,10 @@ function RightSidebar() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `hasSider` | `boolean` | `false` | Whether the layout contains a Sider sub-component. |
| `style` | `any` | `{"minHeight":200}` | - |
| Prop | Type | Default | Description |
| ---------- | --------- | ------------------- | -------------------------------------------------- |
| `hasSider` | `boolean` | `false` | Whether the layout contains a Sider sub-component. |
| `style` | `any` | `{"minHeight":200}` | - |
## Import

145
docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/metadatabar.mdx
View File

@@ -33,66 +33,59 @@ MetadataBar displays a row of metadata items (SQL info, owners, last modified, t
<StoryWithControls
component="MetadataBar"
props={{
title: "Added to 3 dashboards",
createdBy: "Jane Smith",
modifiedBy: "Jane Smith",
description: "To preview the list of dashboards go to More settings.",
items: [
{
type: "sql",
title: "Click to view query"
},
{
type: "owner",
createdBy: "Jane Smith",
owners: [
"John Doe",
"Mary Wilson"
],
createdOn: "a week ago"
},
{
type: "lastModified",
value: "a week ago",
modifiedBy: "Jane Smith"
},
{
type: "tags",
values: [
"management",
"research",
"poc"
]
},
{
type: "dashboards",
title: "Added to 3 dashboards",
description: "To preview the list of dashboards go to More settings."
}
]
}}
title: 'Added to 3 dashboards',
createdBy: 'Jane Smith',
modifiedBy: 'Jane Smith',
description: 'To preview the list of dashboards go to More settings.',
items: [
{
type: 'sql',
title: 'Click to view query',
},
{
type: 'owner',
createdBy: 'Jane Smith',
owners: ['John Doe', 'Mary Wilson'],
createdOn: 'a week ago',
},
{
type: 'lastModified',
value: 'a week ago',
modifiedBy: 'Jane Smith',
},
{
type: 'tags',
values: ['management', 'research', 'poc'],
},
{
type: 'dashboards',
title: 'Added to 3 dashboards',
description: 'To preview the list of dashboards go to More settings.',
},
],
}}
controls={[
{
name: "title",
label: "Title",
type: "text"
},
{
name: "createdBy",
label: "Created By",
type: "text"
},
{
name: "modifiedBy",
label: "Modified By",
type: "text"
},
{
name: "description",
label: "Description",
type: "text"
}
]}
{
name: 'title',
label: 'Title',
type: 'text',
},
{
name: 'createdBy',
label: 'Created By',
type: 'text',
},
{
name: 'modifiedBy',
label: 'Modified By',
type: 'text',
},
{
name: 'description',
label: 'Description',
type: 'text',
},
]}
/>
## Try It
@@ -125,7 +118,12 @@ function Demo() {
```tsx live
function MinimalMetadata() {
const items = [
{ type: 'owner', createdBy: 'Admin', owners: ['Admin'], createdOn: 'yesterday' },
{
type: 'owner',
createdBy: 'Admin',
owners: ['Admin'],
createdOn: 'yesterday',
},
{ type: 'lastModified', value: '2 hours ago', modifiedBy: 'Admin' },
];
return <MetadataBar items={items} />;
@@ -138,11 +136,20 @@ function MinimalMetadata() {
function FullMetadata() {
const items = [
{ type: 'sql', title: 'SELECT * FROM ...' },
{ type: 'owner', createdBy: 'Jane Smith', owners: ['Jane Smith', 'John Doe', 'Bob Wilson'], createdOn: '2 weeks ago' },
{
type: 'owner',
createdBy: 'Jane Smith',
owners: ['Jane Smith', 'John Doe', 'Bob Wilson'],
createdOn: '2 weeks ago',
},
{ type: 'lastModified', value: '3 days ago', modifiedBy: 'John Doe' },
{ type: 'tags', values: ['production', 'finance', 'quarterly'] },
{ type: 'dashboards', title: 'Used in 12 dashboards' },
{ type: 'description', value: 'This chart shows quarterly revenue breakdown by region and product line.' },
{
type: 'description',
value:
'This chart shows quarterly revenue breakdown by region and product line.',
},
{ type: 'rows', title: '1.2M rows' },
{ type: 'table', title: 'public.revenue_data' },
];
@@ -152,13 +159,13 @@ function FullMetadata() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"Added to 3 dashboards"` | - |
| `createdBy` | `string` | `"Jane Smith"` | - |
| `modifiedBy` | `string` | `"Jane Smith"` | - |
| `description` | `string` | `"To preview the list of dashboards go to More settings."` | - |
| `items` | `any` | `[{"type":"sql","title":"Click to view query"},{"type":"owner","createdBy":"Jane Smith","owners":["John Doe","Mary Wilson"],"createdOn":"a week ago"},{"type":"lastModified","value":"a week ago","modifiedBy":"Jane Smith"},{"type":"tags","values":["management","research","poc"]},{"type":"dashboards","title":"Added to 3 dashboards","description":"To preview the list of dashboards go to More settings."}]` | - |
| Prop | Type | Default | Description |
| ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `title` | `string` | `"Added to 3 dashboards"` | - |
| `createdBy` | `string` | `"Jane Smith"` | - |
| `modifiedBy` | `string` | `"Jane Smith"` | - |
| `description` | `string` | `"To preview the list of dashboards go to More settings."` | - |
| `items` | `any` | `[{"type":"sql","title":"Click to view query"},{"type":"owner","createdBy":"Jane Smith","owners":["John Doe","Mary Wilson"],"createdOn":"a week ago"},{"type":"lastModified","value":"a week ago","modifiedBy":"Jane Smith"},{"type":"tags","values":["management","research","poc"]},{"type":"dashboards","title":"Added to 3 dashboards","description":"To preview the list of dashboards go to More settings."}]` | - |
## Import

91
docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/space.mdx
View File

@@ -33,49 +33,42 @@ The Space component from Superset's UI library.
<StoryWithControls
component="Space"
props={{
direction: "horizontal",
size: "small",
wrap: false
}}
direction: 'horizontal',
size: 'small',
wrap: false,
}}
controls={[
{
name: "direction",
label: "Direction",
type: "select",
options: [
"vertical",
"horizontal"
]
},
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"middle",
"large"
]
},
{
name: "wrap",
label: "Wrap",
type: "boolean"
},
{
name: "align",
label: "Align",
type: "select",
options: [
"start",
"end",
"center",
"baseline"
]
}
]}
sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
{
name: 'direction',
label: 'Direction',
type: 'select',
options: ['vertical', 'horizontal'],
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['small', 'middle', 'large'],
},
{
name: 'wrap',
label: 'Wrap',
type: 'boolean',
},
{
name: 'align',
label: 'Align',
type: 'select',
options: ['start', 'end', 'center', 'baseline'],
},
]}
sampleChildren={['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']}
sampleChildrenStyle={{
padding: '8px 16px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: '4px',
}}
/>
## Try It
@@ -136,7 +129,9 @@ function SpaceSizes() {
<h4>{size}</h4>
<Space size={size}>
{items.map(item => (
<div key={item} style={itemStyle}>{item}</div>
<div key={item} style={itemStyle}>
{item}
</div>
))}
</Space>
</div>
@@ -148,11 +143,11 @@ function SpaceSizes() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `direction` | `string` | `"horizontal"` | - |
| `size` | `string` | `"small"` | - |
| `wrap` | `boolean` | `false` | - |
| Prop | Type | Default | Description |
| ----------- | --------- | -------------- | ----------- |
| `direction` | `string` | `"horizontal"` | - |
| `size` | `string` | `"small"` | - |
| `wrap` | `boolean` | `false` | - |
## Import

391
docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/table.mdx
View File

@@ -33,187 +33,182 @@ A data table component with sorting, pagination, row selection, resizable column
<StoryWithControls
component="Table"
props={{
size: "small",
bordered: false,
loading: false,
sticky: true,
resizable: false,
reorderable: false,
usePagination: false,
key: 5,
name: "1GB USB Flash Drive",
category: "Portable Storage",
price: 9.99,
height: 350,
defaultPageSize: 5,
pageSizeOptions: [
"5",
"10"
],
data: [
{
key: 1,
name: "Floppy Disk 10 pack",
category: "Disk Storage",
price: 9.99
},
{
key: 2,
name: "DVD 100 pack",
category: "Optical Storage",
price: 27.99
},
{
key: 3,
name: "128 GB SSD",
category: "Harddrive",
price: 49.99
},
{
key: 4,
name: "4GB 144mhz",
category: "Memory",
price: 19.99
},
{
key: 5,
name: "1GB USB Flash Drive",
category: "Portable Storage",
price: 9.99
},
{
key: 6,
name: "256 GB SSD",
category: "Harddrive",
price: 89.99
},
{
key: 7,
name: "1 TB SSD",
category: "Harddrive",
price: 349.99
},
{
key: 8,
name: "16 GB DDR4",
category: "Memory",
price: 59.99
},
{
key: 9,
name: "32 GB DDR5",
category: "Memory",
price: 129.99
},
{
key: 10,
name: "Blu-ray 50 pack",
category: "Optical Storage",
price: 34.99
},
{
key: 11,
name: "64 GB USB Drive",
category: "Portable Storage",
price: 14.99
},
{
key: 12,
name: "2 TB HDD",
category: "Harddrive",
price: 59.99
}
],
columns: [
{
title: "Name",
dataIndex: "name",
key: "name",
width: 200
},
{
title: "Category",
dataIndex: "category",
key: "category",
width: 150
},
{
title: "Price",
dataIndex: "price",
key: "price",
width: 100
}
]
}}
controls={[
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"middle",
"large"
size: 'small',
bordered: false,
loading: false,
sticky: true,
resizable: false,
reorderable: false,
usePagination: false,
key: 5,
name: '1GB USB Flash Drive',
category: 'Portable Storage',
price: 9.99,
height: 350,
defaultPageSize: 5,
pageSizeOptions: ['5', '10'],
data: [
{
key: 1,
name: 'Floppy Disk 10 pack',
category: 'Disk Storage',
price: 9.99,
},
{
key: 2,
name: 'DVD 100 pack',
category: 'Optical Storage',
price: 27.99,
},
{
key: 3,
name: '128 GB SSD',
category: 'Harddrive',
price: 49.99,
},
{
key: 4,
name: '4GB 144mhz',
category: 'Memory',
price: 19.99,
},
{
key: 5,
name: '1GB USB Flash Drive',
category: 'Portable Storage',
price: 9.99,
},
{
key: 6,
name: '256 GB SSD',
category: 'Harddrive',
price: 89.99,
},
{
key: 7,
name: '1 TB SSD',
category: 'Harddrive',
price: 349.99,
},
{
key: 8,
name: '16 GB DDR4',
category: 'Memory',
price: 59.99,
},
{
key: 9,
name: '32 GB DDR5',
category: 'Memory',
price: 129.99,
},
{
key: 10,
name: 'Blu-ray 50 pack',
category: 'Optical Storage',
price: 34.99,
},
{
key: 11,
name: '64 GB USB Drive',
category: 'Portable Storage',
price: 14.99,
},
{
key: 12,
name: '2 TB HDD',
category: 'Harddrive',
price: 59.99,
},
],
description: "Table size."
},
{
name: "bordered",
label: "Bordered",
type: "boolean",
description: "Whether to show all table borders."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether the table is in a loading state."
},
{
name: "sticky",
label: "Sticky",
type: "boolean",
description: "Whether the table header is sticky."
},
{
name: "resizable",
label: "Resizable",
type: "boolean",
description: "Whether columns can be resized by dragging column edges."
},
{
name: "reorderable",
label: "Reorderable",
type: "boolean",
description: "EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts."
},
{
name: "usePagination",
label: "Use Pagination",
type: "boolean",
description: "Whether to enable pagination. When enabled, the table displays 5 rows per page."
},
{
name: "key",
label: "Key",
type: "number"
},
{
name: "name",
label: "Name",
type: "text"
},
{
name: "category",
label: "Category",
type: "text"
},
{
name: "price",
label: "Price",
type: "number"
}
]}
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 200,
},
{
title: 'Category',
dataIndex: 'category',
key: 'category',
width: 150,
},
{
title: 'Price',
dataIndex: 'price',
key: 'price',
width: 100,
},
],
}}
controls={[
{
name: 'size',
label: 'Size',
type: 'select',
options: ['small', 'middle', 'large'],
description: 'Table size.',
},
{
name: 'bordered',
label: 'Bordered',
type: 'boolean',
description: 'Whether to show all table borders.',
},
{
name: 'loading',
label: 'Loading',
type: 'boolean',
description: 'Whether the table is in a loading state.',
},
{
name: 'sticky',
label: 'Sticky',
type: 'boolean',
description: 'Whether the table header is sticky.',
},
{
name: 'resizable',
label: 'Resizable',
type: 'boolean',
description: 'Whether columns can be resized by dragging column edges.',
},
{
name: 'reorderable',
label: 'Reorderable',
type: 'boolean',
description:
'EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts.',
},
{
name: 'usePagination',
label: 'Use Pagination',
type: 'boolean',
description:
'Whether to enable pagination. When enabled, the table displays 5 rows per page.',
},
{
name: 'key',
label: 'Key',
type: 'number',
},
{
name: 'name',
label: 'Name',
type: 'text',
},
{
name: 'category',
label: 'Category',
type: 'text',
},
{
name: 'price',
label: 'Price',
type: 'number',
},
]}
/>
## Try It
@@ -278,24 +273,24 @@ function LoadingTable() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `string` | `"small"` | Table size. |
| `bordered` | `boolean` | `false` | Whether to show all table borders. |
| `loading` | `boolean` | `false` | Whether the table is in a loading state. |
| `sticky` | `boolean` | `true` | Whether the table header is sticky. |
| `resizable` | `boolean` | `false` | Whether columns can be resized by dragging column edges. |
| `reorderable` | `boolean` | `false` | EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts. |
| `usePagination` | `boolean` | `false` | Whether to enable pagination. When enabled, the table displays 5 rows per page. |
| `key` | `number` | `5` | - |
| `name` | `string` | `"1GB USB Flash Drive"` | - |
| `category` | `string` | `"Portable Storage"` | - |
| `price` | `number` | `9.99` | - |
| `height` | `number` | `350` | - |
| `defaultPageSize` | `number` | `5` | - |
| `pageSizeOptions` | `any` | `["5","10"]` | - |
| `data` | `any` | `[{"key":1,"name":"Floppy Disk 10 pack","category":"Disk Storage","price":9.99},{"key":2,"name":"DVD 100 pack","category":"Optical Storage","price":27.99},{"key":3,"name":"128 GB SSD","category":"Harddrive","price":49.99},{"key":4,"name":"4GB 144mhz","category":"Memory","price":19.99},{"key":5,"name":"1GB USB Flash Drive","category":"Portable Storage","price":9.99},{"key":6,"name":"256 GB SSD","category":"Harddrive","price":89.99},{"key":7,"name":"1 TB SSD","category":"Harddrive","price":349.99},{"key":8,"name":"16 GB DDR4","category":"Memory","price":59.99},{"key":9,"name":"32 GB DDR5","category":"Memory","price":129.99},{"key":10,"name":"Blu-ray 50 pack","category":"Optical Storage","price":34.99},{"key":11,"name":"64 GB USB Drive","category":"Portable Storage","price":14.99},{"key":12,"name":"2 TB HDD","category":"Harddrive","price":59.99}]` | - |
| `columns` | `any` | `[{"title":"Name","dataIndex":"name","key":"name","width":200},{"title":"Category","dataIndex":"category","key":"category","width":150},{"title":"Price","dataIndex":"price","key":"price","width":100}]` | - |
| Prop | Type | Default | Description |
| ----------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `size` | `string` | `"small"` | Table size. |
| `bordered` | `boolean` | `false` | Whether to show all table borders. |
| `loading` | `boolean` | `false` | Whether the table is in a loading state. |
| `sticky` | `boolean` | `true` | Whether the table header is sticky. |
| `resizable` | `boolean` | `false` | Whether columns can be resized by dragging column edges. |
| `reorderable` | `boolean` | `false` | EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts. |
| `usePagination` | `boolean` | `false` | Whether to enable pagination. When enabled, the table displays 5 rows per page. |
| `key` | `number` | `5` | - |
| `name` | `string` | `"1GB USB Flash Drive"` | - |
| `category` | `string` | `"Portable Storage"` | - |
| `price` | `number` | `9.99` | - |
| `height` | `number` | `350` | - |
| `defaultPageSize` | `number` | `5` | - |
| `pageSizeOptions` | `any` | `["5","10"]` | - |
| `data` | `any` | `[{"key":1,"name":"Floppy Disk 10 pack","category":"Disk Storage","price":9.99},{"key":2,"name":"DVD 100 pack","category":"Optical Storage","price":27.99},{"key":3,"name":"128 GB SSD","category":"Harddrive","price":49.99},{"key":4,"name":"4GB 144mhz","category":"Memory","price":19.99},{"key":5,"name":"1GB USB Flash Drive","category":"Portable Storage","price":9.99},{"key":6,"name":"256 GB SSD","category":"Harddrive","price":89.99},{"key":7,"name":"1 TB SSD","category":"Harddrive","price":349.99},{"key":8,"name":"16 GB DDR4","category":"Memory","price":59.99},{"key":9,"name":"32 GB DDR5","category":"Memory","price":129.99},{"key":10,"name":"Blu-ray 50 pack","category":"Optical Storage","price":34.99},{"key":11,"name":"64 GB USB Drive","category":"Portable Storage","price":14.99},{"key":12,"name":"2 TB HDD","category":"Harddrive","price":59.99}]` | - |
| `columns` | `any` | `[{"title":"Name","dataIndex":"name","key":"name","width":200},{"title":"Category","dataIndex":"category","key":"category","width":150},{"title":"Price","dataIndex":"price","key":"price","width":100}]` | - |
## Import

91
docs/developer_docs_versioned_docs/version-6.1.0/components/extension/alert.mdx
View File

@@ -33,48 +33,43 @@ Alert component for displaying important messages to users. Wraps Ant Design Ale
<StoryWithControls
component="Alert"
props={{
closable: true,
type: "info",
message: "This is a sample alert message.",
description: "Sample description for additional context.",
showIcon: true
}}
closable: true,
type: 'info',
message: 'This is a sample alert message.',
description: 'Sample description for additional context.',
showIcon: true,
}}
controls={[
{
name: "closable",
label: "Closable",
type: "boolean",
description: "Whether the Alert can be closed with a close button."
},
{
name: "type",
label: "Type",
type: "select",
options: [
"info",
"error",
"warning",
"success"
],
description: "Type of the alert (e.g., info, error, warning, success)."
},
{
name: "message",
label: "Message",
type: "text"
},
{
name: "description",
label: "Description",
type: "text"
},
{
name: "showIcon",
label: "Show Icon",
type: "boolean",
description: "Whether to display an icon in the Alert."
}
]}
{
name: 'closable',
label: 'Closable',
type: 'boolean',
description: 'Whether the Alert can be closed with a close button.',
},
{
name: 'type',
label: 'Type',
type: 'select',
options: ['info', 'error', 'warning', 'success'],
description: 'Type of the alert (e.g., info, error, warning, success).',
},
{
name: 'message',
label: 'Message',
type: 'text',
},
{
name: 'description',
label: 'Description',
type: 'text',
},
{
name: 'showIcon',
label: 'Show Icon',
type: 'boolean',
description: 'Whether to display an icon in the Alert.',
},
]}
/>
## Try It
@@ -97,13 +92,13 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `closable` | `boolean` | `true` | Whether the Alert can be closed with a close button. |
| `type` | `string` | `"info"` | Type of the alert (e.g., info, error, warning, success). |
| `message` | `string` | `"This is a sample alert message."` | - |
| `description` | `string` | `"Sample description for additional context."` | - |
| `showIcon` | `boolean` | `true` | Whether to display an icon in the Alert. |
| Prop | Type | Default | Description |
| ------------- | --------- | ---------------------------------------------- | -------------------------------------------------------- |
| `closable` | `boolean` | `true` | Whether the Alert can be closed with a close button. |
| `type` | `string` | `"info"` | Type of the alert (e.g., info, error, warning, success). |
| `message` | `string` | `"This is a sample alert message."` | - |
| `description` | `string` | `"Sample description for additional context."` | - |
| `showIcon` | `boolean` | `true` | Whether to display an icon in the Alert. |
## Import

14
docs/developer_docs_versioned_docs/version-6.1.0/components/index.mdx
View File

@@ -38,11 +38,15 @@ A design system is a complete set of standards intended to manage design at scal
The Superset Design System uses [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles with adapted terminology:
| Atomic Design | Atoms | Molecules | Organisms | Templates | Pages / Screens |
|---|:---:|:---:|:---:|:---:|:---:|
| **Superset Design** | Foundations | Components | Patterns | Templates | Features |
| Atomic Design | Atoms | Molecules | Organisms | Templates | Pages / Screens |
| ------------------- | :---------: | :--------: | :-------: | :-------: | :-------------: |
| **Superset Design** | Foundations | Components | Patterns | Templates | Features |
<img src="/img/atomic-design.png" alt="Atoms = Foundations, Molecules = Components, Organisms = Patterns, Templates = Templates, Pages / Screens = Features" style={{maxWidth: '100%'}} />
<img
src="/img/atomic-design.png"
alt="Atoms = Foundations, Molecules = Components, Organisms = Patterns, Templates = Templates, Pages / Screens = Features"
style={{ maxWidth: '100%' }}
/>
## Usage
@@ -67,4 +71,4 @@ This component library is actively being documented. See the [Components TODO](.
---
*Auto-generated from Storybook stories in the [Design System/Introduction](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/DesignSystem.stories.tsx) story.*
_Auto-generated from Storybook stories in the [Design System/Introduction](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/DesignSystem.stories.tsx) story._

287
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/autocomplete.mdx
View File

@@ -33,146 +33,135 @@ AutoComplete component for search functionality.
<StoryWithControls
component="AutoComplete"
props={{
placeholder: "Type to search...",
options: [
{
value: "Dashboard",
label: "Dashboard"
placeholder: 'Type to search...',
options: [
{
value: 'Dashboard',
label: 'Dashboard',
},
{
value: 'Chart',
label: 'Chart',
},
{
value: 'Dataset',
label: 'Dataset',
},
{
value: 'Database',
label: 'Database',
},
{
value: 'Query',
label: 'Query',
},
],
style: {
width: 300,
},
{
value: "Chart",
label: "Chart"
},
{
value: "Dataset",
label: "Dataset"
},
{
value: "Database",
label: "Database"
},
{
value: "Query",
label: "Query"
}
],
style: {
width: 300
},
filterOption: true
}}
filterOption: true,
}}
controls={[
{
name: "placeholder",
label: "Placeholder",
type: "text",
description: "Placeholder text for AutoComplete"
},
{
name: "style",
label: "Style",
type: "object",
description: "Custom styles for AutoComplete"
},
{
name: "value",
label: "Value",
type: "text",
description: "Selected option"
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Disable the AutoComplete"
},
{
name: "popupMatchSelectWidth",
label: "Popup Match Select Width",
type: "number",
description: "Width of the dropdown"
},
{
name: "allowClear",
label: "Allow Clear",
type: "boolean",
description: "Show clear button"
},
{
name: "autoFocus",
label: "Auto Focus",
type: "boolean",
description: "If get focus when component mounted"
},
{
name: "backfill",
label: "Backfill",
type: "boolean",
description: "If backfill selected item the input when using keyboard"
},
{
name: "popupClassName",
label: "Popup Class Name",
type: "text",
description: "The className of dropdown menu"
},
{
name: "filterOption",
label: "Filter Option",
type: "boolean",
description: "Enable filtering of options based on input"
},
{
name: "notFoundContent",
label: "Not Found Content",
type: "text",
description: "Specify content to show when no result matches."
},
{
name: "open",
label: "Open",
type: "boolean",
description: "Controlled open state of dropdown"
},
{
name: "status",
label: "Status",
type: "select",
options: [
"error",
"warning"
],
description: "Set validation status"
},
{
name: "size",
label: "Size",
type: "select",
options: [
"large",
"middle",
"small"
],
description: "The size of the input box"
},
{
name: "variant",
label: "Variant",
type: "select",
options: [
"outlined",
"borderless",
"filled"
],
description: "Variants of input"
},
{
name: "virtual",
label: "Virtual",
type: "boolean",
description: "Disable virtual scroll when set to false"
}
]}
{
name: 'placeholder',
label: 'Placeholder',
type: 'text',
description: 'Placeholder text for AutoComplete',
},
{
name: 'style',
label: 'Style',
type: 'object',
description: 'Custom styles for AutoComplete',
},
{
name: 'value',
label: 'Value',
type: 'text',
description: 'Selected option',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Disable the AutoComplete',
},
{
name: 'popupMatchSelectWidth',
label: 'Popup Match Select Width',
type: 'number',
description: 'Width of the dropdown',
},
{
name: 'allowClear',
label: 'Allow Clear',
type: 'boolean',
description: 'Show clear button',
},
{
name: 'autoFocus',
label: 'Auto Focus',
type: 'boolean',
description: 'If get focus when component mounted',
},
{
name: 'backfill',
label: 'Backfill',
type: 'boolean',
description: 'If backfill selected item the input when using keyboard',
},
{
name: 'popupClassName',
label: 'Popup Class Name',
type: 'text',
description: 'The className of dropdown menu',
},
{
name: 'filterOption',
label: 'Filter Option',
type: 'boolean',
description: 'Enable filtering of options based on input',
},
{
name: 'notFoundContent',
label: 'Not Found Content',
type: 'text',
description: 'Specify content to show when no result matches.',
},
{
name: 'open',
label: 'Open',
type: 'boolean',
description: 'Controlled open state of dropdown',
},
{
name: 'status',
label: 'Status',
type: 'select',
options: ['error', 'warning'],
description: 'Set validation status',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['large', 'middle', 'small'],
description: 'The size of the input box',
},
{
name: 'variant',
label: 'Variant',
type: 'select',
options: ['outlined', 'borderless', 'filled'],
description: 'Variants of input',
},
{
name: 'virtual',
label: 'Virtual',
type: 'boolean',
description: 'Disable virtual scroll when set to false',
},
]}
/>
## Try It
@@ -184,8 +173,14 @@ function Demo() {
return (
<AutoComplete
placeholder="Type to search..."
options={[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]}
style={{"width":300}}
options={[
{ value: 'Dashboard', label: 'Dashboard' },
{ value: 'Chart', label: 'Chart' },
{ value: 'Dataset', label: 'Dataset' },
{ value: 'Database', label: 'Database' },
{ value: 'Query', label: 'Query' },
]}
style={{ width: 300 }}
filterOption
/>
);
@@ -194,12 +189,12 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `placeholder` | `string` | `"Type to search..."` | Placeholder text for AutoComplete |
| `options` | `any` | `[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]` | The dropdown options |
| `style` | `any` | `{"width":300}` | Custom styles for AutoComplete |
| `filterOption` | `boolean` | `true` | Enable filtering of options based on input |
| Prop | Type | Default | Description |
| -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `placeholder` | `string` | `"Type to search..."` | Placeholder text for AutoComplete |
| `options` | `any` | `[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]` | The dropdown options |
| `style` | `any` | `{"width":300}` | Custom styles for AutoComplete |
| `filterOption` | `boolean` | `true` | Enable filtering of options based on input |
## Import

135
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/avatar.mdx
View File

@@ -33,65 +33,58 @@ The Avatar component from Superset's UI library.
<StoryWithControls
component="Avatar"
props={{
children: "AB",
alt: "",
gap: 4,
shape: "circle",
size: "default",
src: "",
draggable: false
}}
children: 'AB',
alt: '',
gap: 4,
shape: 'circle',
size: 'default',
src: '',
draggable: false,
}}
controls={[
{
name: "children",
label: "Children",
type: "text",
description: "Text or initials to display inside the avatar."
},
{
name: "alt",
label: "Alt",
type: "text"
},
{
name: "gap",
label: "Gap",
type: "number",
description: "Letter spacing inside the avatar."
},
{
name: "shape",
label: "Shape",
type: "select",
options: [
"circle",
"square"
],
description: "The shape of the avatar."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"default",
"large"
],
description: "The size of the avatar."
},
{
name: "src",
label: "Src",
type: "text",
description: "Image URL for the avatar. If provided, overrides children."
},
{
name: "draggable",
label: "Draggable",
type: "boolean"
}
]}
{
name: 'children',
label: 'Children',
type: 'text',
description: 'Text or initials to display inside the avatar.',
},
{
name: 'alt',
label: 'Alt',
type: 'text',
},
{
name: 'gap',
label: 'Gap',
type: 'number',
description: 'Letter spacing inside the avatar.',
},
{
name: 'shape',
label: 'Shape',
type: 'select',
options: ['circle', 'square'],
description: 'The shape of the avatar.',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['small', 'default', 'large'],
description: 'The size of the avatar.',
},
{
name: 'src',
label: 'Src',
type: 'text',
description: 'Image URL for the avatar. If provided, overrides children.',
},
{
name: 'draggable',
label: 'Draggable',
type: 'boolean',
},
]}
/>
## Try It
@@ -101,13 +94,7 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Avatar
alt=""
gap={4}
shape="circle"
size="default"
src=""
>
<Avatar alt="" gap={4} shape="circle" size="default" src="">
AB
</Avatar>
);
@@ -116,15 +103,15 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `string` | `"AB"` | Text or initials to display inside the avatar. |
| `alt` | `string` | `""` | - |
| `gap` | `number` | `4` | Letter spacing inside the avatar. |
| `shape` | `string` | `"circle"` | The shape of the avatar. |
| `size` | `string` | `"default"` | The size of the avatar. |
| `src` | `string` | `""` | Image URL for the avatar. If provided, overrides children. |
| `draggable` | `boolean` | `false` | - |
| Prop | Type | Default | Description |
| ----------- | --------- | ----------- | ---------------------------------------------------------- |
| `children` | `string` | `"AB"` | Text or initials to display inside the avatar. |
| `alt` | `string` | `""` | - |
| `gap` | `number` | `4` | Letter spacing inside the avatar. |
| `shape` | `string` | `"circle"` | The shape of the avatar. |
| `size` | `string` | `"default"` | The size of the avatar. |
| `src` | `string` | `""` | Image URL for the avatar. If provided, overrides children. |
| `draggable` | `boolean` | `false` | - |
## Import

127
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/badge.mdx
View File

@@ -33,62 +33,59 @@ The Badge component from Superset's UI library.
<StoryWithControls
component="Badge"
props={{
count: 5,
size: "default",
showZero: false,
overflowCount: 99
}}
count: 5,
size: 'default',
showZero: false,
overflowCount: 99,
}}
controls={[
{
name: "count",
label: "Count",
type: "number",
description: "Number to show in the badge."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"default",
"small"
],
description: "Size of the badge."
},
{
name: "showZero",
label: "Show Zero",
type: "boolean",
description: "Whether to show badge when count is zero."
},
{
name: "overflowCount",
label: "Overflow Count",
type: "number",
description: "Max count to show. Shows count+ when exceeded (e.g., 99+)."
},
{
name: "color",
label: "Color",
type: "select",
options: [
"pink",
"red",
"yellow",
"orange",
"cyan",
"green",
"blue",
"purple",
"geekblue",
"magenta",
"volcano",
"gold",
"lime"
],
description: "Custom background color for the badge."
}
]}
{
name: 'count',
label: 'Count',
type: 'number',
description: 'Number to show in the badge.',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['default', 'small'],
description: 'Size of the badge.',
},
{
name: 'showZero',
label: 'Show Zero',
type: 'boolean',
description: 'Whether to show badge when count is zero.',
},
{
name: 'overflowCount',
label: 'Overflow Count',
type: 'number',
description: 'Max count to show. Shows count+ when exceeded (e.g., 99+).',
},
{
name: 'color',
label: 'Color',
type: 'select',
options: [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
],
description: 'Custom background color for the badge.',
},
]}
/>
## Try It
@@ -97,13 +94,7 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Badge
count={5}
size="default"
overflowCount={99}
/>
);
return <Badge count={5} size="default" overflowCount={99} />;
}
```
@@ -139,12 +130,12 @@ function ColorGallery() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `count` | `number` | `5` | Number to show in the badge. |
| `size` | `string` | `"default"` | Size of the badge. |
| `showZero` | `boolean` | `false` | Whether to show badge when count is zero. |
| `overflowCount` | `number` | `99` | Max count to show. Shows count+ when exceeded (e.g., 99+). |
| Prop | Type | Default | Description |
| --------------- | --------- | ----------- | ---------------------------------------------------------- |
| `count` | `number` | `5` | Number to show in the badge. |
| `size` | `string` | `"default"` | Size of the badge. |
| `showZero` | `boolean` | `false` | Whether to show badge when count is zero. |
| `overflowCount` | `number` | `99` | Max count to show. Shows count+ when exceeded (e.g., 99+). |
## Import

46
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/breadcrumb.mdx
View File

@@ -33,29 +33,29 @@ Breadcrumb component for displaying navigation paths.
<StoryWithControls
component="Breadcrumb"
props={{
items: [
{
title: "Home",
href: "/"
},
{
title: "Library",
href: "/library"
},
{
title: "Data"
}
],
separator: "/"
}}
items: [
{
title: 'Home',
href: '/',
},
{
title: 'Library',
href: '/library',
},
{
title: 'Data',
},
],
separator: '/',
}}
controls={[
{
name: "separator",
label: "Separator",
type: "text",
description: "Custom separator between items"
}
]}
{
name: 'separator',
label: 'Separator',
type: 'text',
description: 'Custom separator between items',
},
]}
/>
## Try It
@@ -77,8 +77,6 @@ function Demo() {
}
```
## Import
```tsx

126
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/button.mdx
View File

@@ -22,7 +22,10 @@ sidebar_label: Button
under the License.
-->
import { StoryWithControls, ComponentGallery } from '../../../../src/components/StorybookWrapper';
import {
StoryWithControls,
ComponentGallery,
} from '../../../../src/components/StorybookWrapper';
# Button
@@ -32,8 +35,8 @@ The Button component from Superset's UI library.
<ComponentGallery
component="Button"
sizes={["xsmall","small","default"]}
styles={["primary","secondary","dashed","danger","link"]}
sizes={['xsmall', 'small', 'default']}
styles={['primary', 'secondary', 'dashed', 'danger', 'link']}
sizeProp="buttonSize"
styleProp="buttonStyle"
/>
@@ -43,64 +46,54 @@ The Button component from Superset's UI library.
<StoryWithControls
component="Button"
props={{
buttonStyle: "primary",
buttonSize: "default",
children: "Button!"
}}
buttonStyle: 'primary',
buttonSize: 'default',
children: 'Button!',
}}
controls={[
{
name: "buttonStyle",
label: "Button Style",
type: "select",
options: [
"primary",
"secondary",
"dashed",
"danger",
"link"
],
description: "The style variant of the button."
},
{
name: "buttonSize",
label: "Button Size",
type: "select",
options: [
"xsmall",
"small",
"default"
],
description: "The size of the button."
},
{
name: "children",
label: "Children",
type: "text",
description: "The button text or content."
},
{
name: "target",
label: "Target",
type: "select"
},
{
name: "href",
label: "Href",
type: "select"
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the button is disabled."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show loading spinner."
}
]}
{
name: 'buttonStyle',
label: 'Button Style',
type: 'select',
options: ['primary', 'secondary', 'dashed', 'danger', 'link'],
description: 'The style variant of the button.',
},
{
name: 'buttonSize',
label: 'Button Size',
type: 'select',
options: ['xsmall', 'small', 'default'],
description: 'The size of the button.',
},
{
name: 'children',
label: 'Children',
type: 'text',
description: 'The button text or content.',
},
{
name: 'target',
label: 'Target',
type: 'select',
},
{
name: 'href',
label: 'Href',
type: 'select',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Whether the button is disabled.',
},
{
name: 'loading',
label: 'Loading',
type: 'boolean',
description: 'Whether to show loading spinner.',
},
]}
/>
## Try It
@@ -110,10 +103,7 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Button
buttonStyle="primary"
buttonSize="default"
>
<Button buttonStyle="primary" buttonSize="default">
Button!
</Button>
);
@@ -122,11 +112,11 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| Prop | Type | Default | Description |
| ------------- | -------- | ----------- | -------------------------------- |
| `buttonStyle` | `string` | `"primary"` | The style variant of the button. |
| `buttonSize` | `string` | `"default"` | The size of the button. |
| `children` | `string` | `"Button!"` | The button text or content. |
| `buttonSize` | `string` | `"default"` | The size of the button. |
| `children` | `string` | `"Button!"` | The button text or content. |
## Import

49
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/buttongroup.mdx
View File

@@ -33,23 +33,36 @@ ButtonGroup is a container that groups multiple Button components together with
<StoryWithControls
component="ButtonGroup"
props={{
expand: false
}}
expand: false,
}}
controls={[
{
name: "expand",
label: "Expand",
type: "boolean",
description: "When true, buttons expand to fill available width."
},
{
name: "className",
label: "Class Name",
type: "text",
description: "CSS class name for custom styling."
}
]}
sampleChildren={[{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 1"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 2"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 3"}}]}
{
name: 'expand',
label: 'Expand',
type: 'boolean',
description: 'When true, buttons expand to fill available width.',
},
{
name: 'className',
label: 'Class Name',
type: 'text',
description: 'CSS class name for custom styling.',
},
]}
sampleChildren={[
{
component: 'Button',
props: { buttonStyle: 'tertiary', children: 'Button 1' },
},
{
component: 'Button',
props: { buttonStyle: 'tertiary', children: 'Button 2' },
},
{
component: 'Button',
props: { buttonStyle: 'tertiary', children: 'Button 3' },
},
]}
/>
## Try It
@@ -70,8 +83,8 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| Prop | Type | Default | Description |
| -------- | --------- | ------- | -------------------------------------------------- |
| `expand` | `boolean` | `false` | When true, buttons expand to fill available width. |
## Import

30
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/cachedlabel.mdx
View File

@@ -34,19 +34,19 @@ The CachedLabel component from Superset's UI library.
component="CachedLabel"
props={{}}
controls={[
{
name: "cachedTimestamp",
label: "Cached Timestamp",
type: "text",
description: "ISO timestamp of when the data was cached"
},
{
name: "className",
label: "Class Name",
type: "text",
description: "Additional CSS class for the label"
}
]}
{
name: 'cachedTimestamp',
label: 'Cached Timestamp',
type: 'text',
description: 'ISO timestamp of when the data was cached',
},
{
name: 'className',
label: 'Class Name',
type: 'text',
description: 'Additional CSS class for the label',
},
]}
/>
## Try It
@@ -57,14 +57,12 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<CachedLabel
// Add props here
// Add props here
/>
);
}
```
## Import
```tsx

108
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/card.mdx
View File

@@ -33,51 +33,52 @@ A container component for grouping related content. Supports titles, borders, lo
<StoryWithControls
component="Card"
props={{
padded: true,
title: "Dashboard Overview",
children: "This card displays a summary of your dashboard metrics and recent activity.",
bordered: true,
loading: false,
hoverable: false
}}
padded: true,
title: 'Dashboard Overview',
children:
'This card displays a summary of your dashboard metrics and recent activity.',
bordered: true,
loading: false,
hoverable: false,
}}
controls={[
{
name: "padded",
label: "Padded",
type: "boolean",
description: "Whether the card content has padding."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title text displayed at the top of the card."
},
{
name: "children",
label: "Children",
type: "text",
description: "The content inside the card."
},
{
name: "bordered",
label: "Bordered",
type: "boolean",
description: "Whether to show a border around the card."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show a loading skeleton."
},
{
name: "hoverable",
label: "Hoverable",
type: "boolean",
description: "Whether the card lifts on hover."
}
]}
{
name: 'padded',
label: 'Padded',
type: 'boolean',
description: 'Whether the card content has padding.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Title text displayed at the top of the card.',
},
{
name: 'children',
label: 'Children',
type: 'text',
description: 'The content inside the card.',
},
{
name: 'bordered',
label: 'Bordered',
type: 'boolean',
description: 'Whether to show a border around the card.',
},
{
name: 'loading',
label: 'Loading',
type: 'boolean',
description: 'Whether to show a loading skeleton.',
},
{
name: 'hoverable',
label: 'Hoverable',
type: 'boolean',
description: 'Whether the card lifts on hover.',
},
]}
/>
## Try It
@@ -88,7 +89,8 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<Card title="Dashboard Overview" bordered>
This card displays a summary of your dashboard metrics and recent activity.
This card displays a summary of your dashboard metrics and recent
activity.
</Card>
);
}
@@ -119,14 +121,14 @@ function CardStates() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `padded` | `boolean` | `true` | Whether the card content has padding. |
| `title` | `string` | `"Dashboard Overview"` | Title text displayed at the top of the card. |
| `children` | `string` | `"This card displays a summary of your dashboard metrics and recent activity."` | The content inside the card. |
| `bordered` | `boolean` | `true` | Whether to show a border around the card. |
| `loading` | `boolean` | `false` | Whether to show a loading skeleton. |
| `hoverable` | `boolean` | `false` | Whether the card lifts on hover. |
| Prop | Type | Default | Description |
| ----------- | --------- | ------------------------------------------------------------------------------- | -------------------------------------------- |
| `padded` | `boolean` | `true` | Whether the card content has padding. |
| `title` | `string` | `"Dashboard Overview"` | Title text displayed at the top of the card. |
| `children` | `string` | `"This card displays a summary of your dashboard metrics and recent activity."` | The content inside the card. |
| `bordered` | `boolean` | `true` | Whether to show a border around the card. |
| `loading` | `boolean` | `false` | Whether to show a loading skeleton. |
| `hoverable` | `boolean` | `false` | Whether the card lifts on hover. |
## Import

57
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/checkbox.mdx
View File

@@ -33,23 +33,24 @@ Checkbox component that supports both regular and indeterminate states, built on
<StoryWithControls
component="Checkbox"
props={{
checked: false,
indeterminate: false
}}
checked: false,
indeterminate: false,
}}
controls={[
{
name: "checked",
label: "Checked",
type: "boolean",
description: "Whether the checkbox is checked."
},
{
name: "indeterminate",
label: "Indeterminate",
type: "boolean",
description: "Whether the checkbox is in indeterminate state (partially selected)."
}
]}
{
name: 'checked',
label: 'Checked',
type: 'boolean',
description: 'Whether the checkbox is checked.',
},
{
name: 'indeterminate',
label: 'Indeterminate',
type: 'boolean',
description:
'Whether the checkbox is in indeterminate state (partially selected).',
},
]}
/>
## Try It
@@ -60,7 +61,7 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<Checkbox
// Add props here
// Add props here
/>
);
}
@@ -76,7 +77,9 @@ function AllStates() {
<Checkbox checked={true}>Checked</Checkbox>
<Checkbox indeterminate={true}>Indeterminate</Checkbox>
<Checkbox disabled>Disabled unchecked</Checkbox>
<Checkbox disabled checked>Disabled checked</Checkbox>
<Checkbox disabled checked>
Disabled checked
</Checkbox>
</div>
);
}
@@ -97,7 +100,7 @@ function SelectAllDemo() {
<Checkbox
checked={allSelected}
indeterminate={indeterminate}
onChange={(e) => setSelected(e.target.checked ? [...options] : [])}
onChange={e => setSelected(e.target.checked ? [...options] : [])}
>
Select All
</Checkbox>
@@ -106,9 +109,13 @@ function SelectAllDemo() {
<div key={opt}>
<Checkbox
checked={selected.includes(opt)}
onChange={() => setSelected(prev =>
prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
)}
onChange={() =>
setSelected(prev =>
prev.includes(opt)
? prev.filter(x => x !== opt)
: [...prev, opt],
)
}
>
{opt}
</Checkbox>
@@ -122,9 +129,9 @@ function SelectAllDemo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `checked` | `boolean` | `false` | Whether the checkbox is checked. |
| Prop | Type | Default | Description |
| --------------- | --------- | ------- | -------------------------------------------------------------------- |
| `checked` | `boolean` | `false` | Whether the checkbox is checked. |
| `indeterminate` | `boolean` | `false` | Whether the checkbox is in indeterminate state (partially selected). |
## Import

84
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/collapse.mdx
View File

@@ -33,39 +33,39 @@ The Collapse component from Superset's UI library.
<StoryWithControls
component="Collapse"
props={{
ghost: false,
bordered: true,
accordion: false,
animateArrows: false,
modalMode: false
}}
ghost: false,
bordered: true,
accordion: false,
animateArrows: false,
modalMode: false,
}}
controls={[
{
name: "ghost",
label: "Ghost",
type: "boolean"
},
{
name: "bordered",
label: "Bordered",
type: "boolean"
},
{
name: "accordion",
label: "Accordion",
type: "boolean"
},
{
name: "animateArrows",
label: "Animate Arrows",
type: "boolean"
},
{
name: "modalMode",
label: "Modal Mode",
type: "boolean"
}
]}
{
name: 'ghost',
label: 'Ghost',
type: 'boolean',
},
{
name: 'bordered',
label: 'Bordered',
type: 'boolean',
},
{
name: 'accordion',
label: 'Accordion',
type: 'boolean',
},
{
name: 'animateArrows',
label: 'Animate Arrows',
type: 'boolean',
},
{
name: 'modalMode',
label: 'Modal Mode',
type: 'boolean',
},
]}
/>
## Try It
@@ -74,23 +74,19 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Collapse
bordered
/>
);
return <Collapse bordered />;
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `ghost` | `boolean` | `false` | - |
| `bordered` | `boolean` | `true` | - |
| `accordion` | `boolean` | `false` | - |
| `animateArrows` | `boolean` | `false` | - |
| `modalMode` | `boolean` | `false` | - |
| Prop | Type | Default | Description |
| --------------- | --------- | ------- | ----------- |
| `ghost` | `boolean` | `false` | - |
| `bordered` | `boolean` | `true` | - |
| `accordion` | `boolean` | `false` | - |
| `animateArrows` | `boolean` | `false` | - |
| `modalMode` | `boolean` | `false` | - |
## Import

80
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/datepicker.mdx
View File

@@ -33,34 +33,34 @@ The DatePicker component from Superset's UI library.
<StoryWithControls
component="DatePicker"
props={{
placeholder: "Select date",
showNow: true,
allowClear: false,
autoFocus: true,
disabled: false,
format: "YYYY-MM-DD hh:mm a",
inputReadOnly: false,
picker: "date",
placement: "bottomLeft",
size: "middle",
showTime: {
format: "hh:mm a",
needConfirm: false
}
}}
placeholder: 'Select date',
showNow: true,
allowClear: false,
autoFocus: true,
disabled: false,
format: 'YYYY-MM-DD hh:mm a',
inputReadOnly: false,
picker: 'date',
placement: 'bottomLeft',
size: 'middle',
showTime: {
format: 'hh:mm a',
needConfirm: false,
},
}}
controls={[
{
name: "placeholder",
label: "Placeholder",
type: "text"
},
{
name: "showNow",
label: "Show Now",
type: "boolean",
description: "Show \"Now\" button to select current date and time."
}
]}
{
name: 'placeholder',
label: 'Placeholder',
type: 'text',
},
{
name: 'showNow',
label: 'Show Now',
type: 'boolean',
description: 'Show "Now" button to select current date and time.',
},
]}
/>
## Try It
@@ -82,19 +82,19 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `placeholder` | `string` | `"Select date"` | - |
| `showNow` | `boolean` | `true` | Show "Now" button to select current date and time. |
| `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"` | - |
| `showTime` | `any` | `{"format":"hh:mm a","needConfirm":false}` | - |
| Prop | Type | Default | Description |
| --------------- | --------- | ------------------------------------------ | -------------------------------------------------- |
| `placeholder` | `string` | `"Select date"` | - |
| `showNow` | `boolean` | `true` | Show "Now" button to select current date and time. |
| `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"` | - |
| `showTime` | `any` | `{"format":"hh:mm a","needConfirm":false}` | - |
## Import

129
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/divider.mdx
View File

@@ -33,65 +33,54 @@ The Divider component from Superset's UI library.
<StoryWithControls
component="Divider"
props={{
dashed: false,
variant: "solid",
orientation: "center",
orientationMargin: "",
plain: true,
type: "horizontal"
}}
dashed: false,
variant: 'solid',
orientation: 'center',
orientationMargin: '',
plain: true,
type: 'horizontal',
}}
controls={[
{
name: "dashed",
label: "Dashed",
type: "boolean",
description: "Whether line is dashed (deprecated, use variant)."
},
{
name: "variant",
label: "Variant",
type: "select",
options: [
"dashed",
"dotted",
"solid"
],
description: "Line style of the divider."
},
{
name: "orientation",
label: "Orientation",
type: "select",
options: [
"left",
"right",
"center"
],
description: "Position of title inside divider."
},
{
name: "orientationMargin",
label: "Orientation Margin",
type: "text",
description: "Margin from divider edge to title."
},
{
name: "plain",
label: "Plain",
type: "boolean",
description: "Use plain style without bold title."
},
{
name: "type",
label: "Type",
type: "select",
options: [
"horizontal",
"vertical"
],
description: "Direction of the divider."
}
]}
{
name: 'dashed',
label: 'Dashed',
type: 'boolean',
description: 'Whether line is dashed (deprecated, use variant).',
},
{
name: 'variant',
label: 'Variant',
type: 'select',
options: ['dashed', 'dotted', 'solid'],
description: 'Line style of the divider.',
},
{
name: 'orientation',
label: 'Orientation',
type: 'select',
options: ['left', 'right', 'center'],
description: 'Position of title inside divider.',
},
{
name: 'orientationMargin',
label: 'Orientation Margin',
type: 'text',
description: 'Margin from divider edge to title.',
},
{
name: 'plain',
label: 'Plain',
type: 'boolean',
description: 'Use plain style without bold title.',
},
{
name: 'type',
label: 'Type',
type: 'select',
options: ['horizontal', 'vertical'],
description: 'Direction of the divider.',
},
]}
/>
## Try It
@@ -103,8 +92,12 @@ function Demo() {
return (
<>
<p>Horizontal divider with title (orientationMargin applies here):</p>
<Divider orientation="left" orientationMargin={0}>Left Title</Divider>
<Divider orientation="right" orientationMargin={50}>Right Title</Divider>
<Divider orientation="left" orientationMargin={0}>
Left Title
</Divider>
<Divider orientation="right" orientationMargin={50}>
Right Title
</Divider>
<Divider>Center Title</Divider>
<p>Vertical divider (use container gap for spacing):</p>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
@@ -121,14 +114,14 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `dashed` | `boolean` | `false` | Whether line is dashed (deprecated, use variant). |
| `variant` | `string` | `"solid"` | Line style of the divider. |
| `orientation` | `string` | `"center"` | Position of title inside divider. |
| `orientationMargin` | `string` | `""` | Margin from divider edge to title. |
| `plain` | `boolean` | `true` | Use plain style without bold title. |
| `type` | `string` | `"horizontal"` | Direction of the divider. |
| Prop | Type | Default | Description |
| ------------------- | --------- | -------------- | ------------------------------------------------- |
| `dashed` | `boolean` | `false` | Whether line is dashed (deprecated, use variant). |
| `variant` | `string` | `"solid"` | Line style of the divider. |
| `orientation` | `string` | `"center"` | Position of title inside divider. |
| `orientationMargin` | `string` | `""` | Margin from divider edge to title. |
| `plain` | `boolean` | `true` | Use plain style without bold title. |
| `type` | `string` | `"horizontal"` | Direction of the divider. |
## Import

202
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/editabletitle.mdx
View File

@@ -33,93 +33,93 @@ The EditableTitle component from Superset's UI library.
<StoryWithControls
component="EditableTitle"
props={{
canEdit: true,
editing: false,
emptyText: "Empty text",
noPermitTooltip: "Not permitted",
showTooltip: true,
title: "Title",
defaultTitle: "Default title",
placeholder: "Placeholder",
certifiedBy: "",
certificationDetails: "",
maxWidth: 100,
autoSize: true
}}
canEdit: true,
editing: false,
emptyText: 'Empty text',
noPermitTooltip: 'Not permitted',
showTooltip: true,
title: 'Title',
defaultTitle: 'Default title',
placeholder: 'Placeholder',
certifiedBy: '',
certificationDetails: '',
maxWidth: 100,
autoSize: true,
}}
controls={[
{
name: "canEdit",
label: "Can Edit",
type: "boolean",
description: "Whether the title can be edited."
},
{
name: "editing",
label: "Editing",
type: "boolean",
description: "Whether the title is currently in edit mode."
},
{
name: "emptyText",
label: "Empty Text",
type: "text",
description: "Text to display when title is empty."
},
{
name: "noPermitTooltip",
label: "No Permit Tooltip",
type: "text",
description: "Tooltip shown when user lacks edit permission."
},
{
name: "showTooltip",
label: "Show Tooltip",
type: "boolean",
description: "Whether to show tooltip on hover."
},
{
name: "title",
label: "Title",
type: "text",
description: "The title text to display."
},
{
name: "defaultTitle",
label: "Default Title",
type: "text",
description: "Default title when none is provided."
},
{
name: "placeholder",
label: "Placeholder",
type: "text",
description: "Placeholder text when editing."
},
{
name: "certifiedBy",
label: "Certified By",
type: "text",
description: "Name of person/team who certified this item."
},
{
name: "certificationDetails",
label: "Certification Details",
type: "text",
description: "Additional certification details or description."
},
{
name: "maxWidth",
label: "Max Width",
type: "number",
description: "Maximum width of the title in pixels."
},
{
name: "autoSize",
label: "Auto Size",
type: "boolean",
description: "Whether to auto-size based on content."
}
]}
{
name: 'canEdit',
label: 'Can Edit',
type: 'boolean',
description: 'Whether the title can be edited.',
},
{
name: 'editing',
label: 'Editing',
type: 'boolean',
description: 'Whether the title is currently in edit mode.',
},
{
name: 'emptyText',
label: 'Empty Text',
type: 'text',
description: 'Text to display when title is empty.',
},
{
name: 'noPermitTooltip',
label: 'No Permit Tooltip',
type: 'text',
description: 'Tooltip shown when user lacks edit permission.',
},
{
name: 'showTooltip',
label: 'Show Tooltip',
type: 'boolean',
description: 'Whether to show tooltip on hover.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description: 'The title text to display.',
},
{
name: 'defaultTitle',
label: 'Default Title',
type: 'text',
description: 'Default title when none is provided.',
},
{
name: 'placeholder',
label: 'Placeholder',
type: 'text',
description: 'Placeholder text when editing.',
},
{
name: 'certifiedBy',
label: 'Certified By',
type: 'text',
description: 'Name of person/team who certified this item.',
},
{
name: 'certificationDetails',
label: 'Certification Details',
type: 'text',
description: 'Additional certification details or description.',
},
{
name: 'maxWidth',
label: 'Max Width',
type: 'number',
description: 'Maximum width of the title in pixels.',
},
{
name: 'autoSize',
label: 'Auto Size',
type: 'boolean',
description: 'Whether to auto-size based on content.',
},
]}
/>
## Try It
@@ -135,7 +135,7 @@ function Demo() {
showTooltip
certifiedBy="Data Team"
certificationDetails="Verified Q1 2024"
onSaveTitle={(newTitle) => console.log('Saved:', newTitle)}
onSaveTitle={newTitle => console.log('Saved:', newTitle)}
/>
);
}
@@ -143,20 +143,20 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `canEdit` | `boolean` | `true` | Whether the title can be edited. |
| `editing` | `boolean` | `false` | Whether the title is currently in edit mode. |
| `emptyText` | `string` | `"Empty text"` | Text to display when title is empty. |
| `noPermitTooltip` | `string` | `"Not permitted"` | Tooltip shown when user lacks edit permission. |
| `showTooltip` | `boolean` | `true` | Whether to show tooltip on hover. |
| `title` | `string` | `"Title"` | The title text to display. |
| `defaultTitle` | `string` | `"Default title"` | Default title when none is provided. |
| `placeholder` | `string` | `"Placeholder"` | Placeholder text when editing. |
| `certifiedBy` | `string` | `""` | Name of person/team who certified this item. |
| `certificationDetails` | `string` | `""` | Additional certification details or description. |
| `maxWidth` | `number` | `100` | Maximum width of the title in pixels. |
| `autoSize` | `boolean` | `true` | Whether to auto-size based on content. |
| Prop | Type | Default | Description |
| ---------------------- | --------- | ----------------- | ------------------------------------------------ |
| `canEdit` | `boolean` | `true` | Whether the title can be edited. |
| `editing` | `boolean` | `false` | Whether the title is currently in edit mode. |
| `emptyText` | `string` | `"Empty text"` | Text to display when title is empty. |
| `noPermitTooltip` | `string` | `"Not permitted"` | Tooltip shown when user lacks edit permission. |
| `showTooltip` | `boolean` | `true` | Whether to show tooltip on hover. |
| `title` | `string` | `"Title"` | The title text to display. |
| `defaultTitle` | `string` | `"Default title"` | Default title when none is provided. |
| `placeholder` | `string` | `"Placeholder"` | Placeholder text when editing. |
| `certifiedBy` | `string` | `""` | Name of person/team who certified this item. |
| `certificationDetails` | `string` | `""` | Additional certification details or description. |
| `maxWidth` | `number` | `100` | Maximum width of the title in pixels. |
| `autoSize` | `boolean` | `true` | Whether to auto-size based on content. |
## Import

150
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/emptystate.mdx
View File

@@ -22,7 +22,10 @@ sidebar_label: EmptyState
under the License.
-->
import { StoryWithControls, ComponentGallery } from '../../../../src/components/StorybookWrapper';
import {
StoryWithControls,
ComponentGallery,
} from '../../../../src/components/StorybookWrapper';
# EmptyState
@@ -32,8 +35,23 @@ The EmptyState component from Superset's UI library.
<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"]}
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"
/>
@@ -43,65 +61,61 @@ The EmptyState component from Superset's UI library.
<StoryWithControls
component="EmptyState"
props={{
size: "medium",
title: "No Data Available",
description: "There is no data to display at this time.",
image: "empty.svg",
buttonText: ""
}}
size: 'medium',
title: 'No Data Available',
description: 'There is no data to display at this time.',
image: 'empty.svg',
buttonText: '',
}}
controls={[
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"medium",
"large"
],
description: "Size of the empty state component."
},
{
name: "title",
label: "Title",
type: "text",
description: "Main title text."
},
{
name: "description",
label: "Description",
type: "text",
description: "Description text below the title."
},
{
name: "image",
label: "Image",
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."
},
{
name: "buttonText",
label: "Button Text",
type: "text",
description: "Text for optional action button."
}
]}
{
name: 'size',
label: 'Size',
type: 'select',
options: ['small', 'medium', 'large'],
description: 'Size of the empty state component.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Main title text.',
},
{
name: 'description',
label: 'Description',
type: 'text',
description: 'Description text below the title.',
},
{
name: 'image',
label: 'Image',
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.',
},
{
name: 'buttonText',
label: 'Button Text',
type: 'text',
description: 'Text for optional action button.',
},
]}
/>
## Try It
@@ -125,13 +139,13 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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.svg"` | Predefined image to display. |
| `buttonText` | `string` | `""` | Text for optional action button. |
| Prop | Type | Default | Description |
| ------------- | -------- | --------------------------------------------- | ---------------------------------- |
| `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.svg"` | Predefined image to display. |
| `buttonText` | `string` | `""` | Text for optional action button. |
## Import

63
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/favestar.mdx
View File

@@ -33,30 +33,30 @@ FaveStar component for marking items as favorites
<StoryWithControls
component="FaveStar"
props={{
itemId: 1,
isStarred: false,
showTooltip: true
}}
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: "Whether the item is currently starred."
},
{
name: "showTooltip",
label: "Show Tooltip",
type: "boolean",
description: "Show tooltip on hover."
}
]}
{
name: 'itemId',
label: 'Item ID',
type: 'number',
description: 'Unique identifier for the item',
},
{
name: 'isStarred',
label: 'Is Starred',
type: 'boolean',
description: 'Whether the item is currently starred.',
},
{
name: 'showTooltip',
label: 'Show Tooltip',
type: 'boolean',
description: 'Show tooltip on hover.',
},
]}
/>
## Try It
@@ -65,22 +65,17 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<FaveStar
itemId={1}
showTooltip
/>
);
return <FaveStar 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. |
| 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

73
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/iconbutton.mdx
View File

@@ -33,37 +33,38 @@ The IconButton component is a versatile button that allows you to combine an ico
<StoryWithControls
component="IconButton"
props={{
buttonText: "IconButton",
altText: "Icon button alt text",
padded: true,
icon: "https://superset.apache.org/img/superset-logo-horiz.svg"
}}
buttonText: 'IconButton',
altText: 'Icon button alt text',
padded: true,
icon: 'https://superset.apache.org/img/superset-logo-horiz.svg',
}}
controls={[
{
name: "buttonText",
label: "Button Text",
type: "text",
description: "The text inside the button."
},
{
name: "altText",
label: "Alt Text",
type: "text",
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."
},
{
name: "icon",
label: "Icon",
type: "text",
description: "Icon inside the button (URL or path)."
}
]}
{
name: 'buttonText',
label: 'Button Text',
type: 'text',
description: 'The text inside the button.',
},
{
name: 'altText',
label: 'Alt Text',
type: 'text',
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.',
},
{
name: 'icon',
label: 'Icon',
type: 'text',
description: 'Icon inside the button (URL or path).',
},
]}
/>
## Try It
@@ -85,12 +86,12 @@ function Demo() {
## 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). |
| 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

65
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/icons.mdx
View File

@@ -34,33 +34,28 @@ Icon library for Apache Superset. Contains over 200 icons based on Ant Design ic
component="Icons"
renderComponent="Icons.InfoCircleOutlined"
props={{
iconSize: "xl"
}}
iconSize: 'xl',
}}
controls={[
{
name: "iconSize",
label: "Icon Size",
type: "inline-radio",
options: [
"s",
"m",
"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",
label: "Icon Color",
type: "select"
}
]}
{
name: 'iconSize',
label: 'Icon Size',
type: 'inline-radio',
options: ['s', 'm', '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',
label: 'Icon Color',
type: 'select',
},
]}
/>
## Try It
@@ -90,7 +85,9 @@ function IconSizes() {
{sizes.map(size => (
<div key={size} style={{ textAlign: 'center' }}>
<Icons.DatabaseOutlined iconSize={size} />
<div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
<div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>
{size}
</div>
</div>
))}
</div>
@@ -104,8 +101,12 @@ function IconSizes() {
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 style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>
{title}
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
{children}
</div>
</div>
);
return (
@@ -234,9 +235,9 @@ function IconWithText() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |
| Prop | Type | Default | Description |
| ---------- | -------- | ------- | ----------------------------------------------------------------------- |
| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |
## Import

66
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/icontooltip.mdx
View File

@@ -33,37 +33,39 @@ The IconTooltip component from Superset's UI library.
<StoryWithControls
component="IconTooltip"
props={{
tooltip: "Tooltip"
}}
tooltip: 'Tooltip',
}}
controls={[
{
name: "tooltip",
label: "Tooltip",
type: "text",
description: "Text content to display in the tooltip."
},
{
name: "placement",
label: "Placement",
type: "select",
options: [
"bottom",
"bottomLeft",
"bottomRight",
"left",
"leftBottom",
"leftTop",
"right",
"rightBottom",
"rightTop",
"top",
"topLeft",
"topRight"
],
description: "Position of the tooltip relative to the icon."
}
]}
sampleChildren={[{"component":"Icons.InfoCircleOutlined","props":{"iconSize":"l"}}]}
{
name: 'tooltip',
label: 'Tooltip',
type: 'text',
description: 'Text content to display in the tooltip.',
},
{
name: 'placement',
label: 'Placement',
type: 'select',
options: [
'bottom',
'bottomLeft',
'bottomRight',
'left',
'leftBottom',
'leftTop',
'right',
'rightBottom',
'rightTop',
'top',
'topLeft',
'topRight',
],
description: 'Position of the tooltip relative to the icon.',
},
]}
sampleChildren={[
{ component: 'Icons.InfoCircleOutlined', props: { iconSize: 'l' } },
]}
/>
## Try It
@@ -82,8 +84,8 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| Prop | Type | Default | Description |
| --------- | -------- | ----------- | --------------------------------------- |
| `tooltip` | `string` | `"Tooltip"` | Text content to display in the tooltip. |
## Import

81
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/infotooltip.mdx
View File

@@ -33,43 +33,40 @@ The InfoTooltip component from Superset's UI library.
<StoryWithControls
component="InfoTooltip"
props={{
tooltip: "This is the text that will display!"
}}
tooltip: 'This is the text that will display!',
}}
controls={[
{
name: "tooltip",
label: "Tooltip",
type: "text"
},
{
name: "placement",
label: "Placement",
type: "select",
options: [
"bottom",
"left",
"right",
"top",
"topLeft",
"topRight",
"bottomLeft",
"bottomRight",
"leftTop",
"leftBottom",
"rightTop",
"rightBottom"
]
},
{
name: "trigger",
label: "Trigger",
type: "select",
options: [
"hover",
"click"
]
}
]}
{
name: 'tooltip',
label: 'Tooltip',
type: 'text',
},
{
name: 'placement',
label: 'Placement',
type: 'select',
options: [
'bottom',
'left',
'right',
'top',
'topLeft',
'topRight',
'bottomLeft',
'bottomRight',
'leftTop',
'leftBottom',
'rightTop',
'rightBottom',
],
},
{
name: 'trigger',
label: 'Trigger',
type: 'select',
options: ['hover', 'click'],
},
]}
/>
## Try It
@@ -78,19 +75,15 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<InfoTooltip
tooltip="This is the text that will display!"
/>
);
return <InfoTooltip tooltip="This is the text that will display!" />;
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tooltip` | `string` | `"This is the text that will display!"` | - |
| Prop | Type | Default | Description |
| --------- | -------- | --------------------------------------- | ----------- |
| `tooltip` | `string` | `"This is the text that will display!"` | - |
## Import

176
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/input.mdx
View File

@@ -33,94 +33,75 @@ The Input component from Superset's UI library.
<StoryWithControls
component="Input"
props={{
allowClear: false,
disabled: false,
showCount: false,
type: "text",
variant: "outlined"
}}
allowClear: false,
disabled: false,
showCount: false,
type: 'text',
variant: 'outlined',
}}
controls={[
{
name: "allowClear",
label: "Allow Clear",
type: "boolean"
},
{
name: "disabled",
label: "Disabled",
type: "boolean"
},
{
name: "showCount",
label: "Show Count",
type: "boolean"
},
{
name: "type",
label: "Type",
type: "select",
options: [
"text",
"password",
"email",
"number",
"tel",
"url",
"search"
],
description: "HTML input type"
},
{
name: "variant",
label: "Variant",
type: "select",
options: [
"outlined",
"borderless",
"filled"
],
description: "Input style variant"
},
{
name: "defaultValue",
label: "Default Value",
type: "text",
description: "Default input value"
},
{
name: "id",
label: "ID",
type: "text",
description: "HTML id attribute"
},
{
name: "maxLength",
label: "Max Length",
type: "number",
description: "Maximum length of input"
},
{
name: "status",
label: "Status",
type: "select",
options: [
"error",
"warning"
],
description: "Validation status"
},
{
name: "size",
label: "Size",
type: "select",
options: [
"large",
"middle",
"small"
],
description: "Size of the input"
}
]}
{
name: 'allowClear',
label: 'Allow Clear',
type: 'boolean',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
},
{
name: 'showCount',
label: 'Show Count',
type: 'boolean',
},
{
name: 'type',
label: 'Type',
type: 'select',
options: ['text', 'password', 'email', 'number', 'tel', 'url', 'search'],
description: 'HTML input type',
},
{
name: 'variant',
label: 'Variant',
type: 'select',
options: ['outlined', 'borderless', 'filled'],
description: 'Input style variant',
},
{
name: 'defaultValue',
label: 'Default Value',
type: 'text',
description: 'Default input value',
},
{
name: 'id',
label: 'ID',
type: 'text',
description: 'HTML id attribute',
},
{
name: 'maxLength',
label: 'Max Length',
type: 'number',
description: 'Maximum length of input',
},
{
name: 'status',
label: 'Status',
type: 'select',
options: ['error', 'warning'],
description: 'Validation status',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['large', 'middle', 'small'],
description: 'Size of the input',
},
]}
/>
## Try It
@@ -129,24 +110,19 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Input
type="text"
variant="outlined"
/>
);
return <Input type="text" variant="outlined" />;
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `allowClear` | `boolean` | `false` | - |
| `disabled` | `boolean` | `false` | - |
| `showCount` | `boolean` | `false` | - |
| `type` | `string` | `"text"` | HTML input type |
| `variant` | `string` | `"outlined"` | Input style variant |
| Prop | Type | Default | Description |
| ------------ | --------- | ------------ | ------------------- |
| `allowClear` | `boolean` | `false` | - |
| `disabled` | `boolean` | `false` | - |
| `showCount` | `boolean` | `false` | - |
| `type` | `string` | `"text"` | HTML input type |
| `variant` | `string` | `"outlined"` | Input style variant |
## Import

73
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/label.mdx
View File

@@ -33,38 +33,31 @@ The Label component from Superset's UI library.
<StoryWithControls
component="Label"
props={{
type: "default",
children: "Label text",
monospace: false
}}
type: 'default',
children: 'Label text',
monospace: false,
}}
controls={[
{
name: "type",
label: "Type",
type: "select",
options: [
"default",
"info",
"success",
"warning",
"error",
"primary"
],
description: "The visual style of the label."
},
{
name: "children",
label: "Children",
type: "text",
description: "The label text content."
},
{
name: "monospace",
label: "Monospace",
type: "boolean",
description: "Use monospace font."
}
]}
{
name: 'type',
label: 'Type',
type: 'select',
options: ['default', 'info', 'success', 'warning', 'error', 'primary'],
description: 'The visual style of the label.',
},
{
name: 'children',
label: 'Children',
type: 'text',
description: 'The label text content.',
},
{
name: 'monospace',
label: 'Monospace',
type: 'boolean',
description: 'Use monospace font.',
},
]}
/>
## Try It
@@ -73,23 +66,17 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Label
type="default"
>
Label text
</Label>
);
return <Label type="default">Label text</Label>;
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `string` | `"default"` | The visual style of the label. |
| `children` | `string` | `"Label text"` | The label text content. |
| `monospace` | `boolean` | `false` | Use monospace font. |
| Prop | Type | Default | Description |
| ----------- | --------- | -------------- | ------------------------------ |
| `type` | `string` | `"default"` | The visual style of the label. |
| `children` | `string` | `"Label text"` | The label text content. |
| `monospace` | `boolean` | `false` | Use monospace font. |
## Import

88
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/list.mdx
View File

@@ -33,47 +33,39 @@ The List component from Superset's UI library.
<StoryWithControls
component="List"
props={{
bordered: false,
split: true,
size: "default",
loading: false,
dataSource: [
"Dashboard Analytics",
"User Management",
"Data Sources"
]
}}
bordered: false,
split: true,
size: 'default',
loading: false,
dataSource: ['Dashboard Analytics', 'User Management', 'Data Sources'],
}}
controls={[
{
name: "bordered",
label: "Bordered",
type: "boolean",
description: "Whether to show a border around the list."
},
{
name: "split",
label: "Split",
type: "boolean",
description: "Whether to show a divider between items."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"default",
"small",
"large"
],
description: "Size of the list."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show a loading indicator."
}
]}
{
name: 'bordered',
label: 'Bordered',
type: 'boolean',
description: 'Whether to show a border around the list.',
},
{
name: 'split',
label: 'Split',
type: 'boolean',
description: 'Whether to show a divider between items.',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['default', 'small', 'large'],
description: 'Size of the list.',
},
{
name: 'loading',
label: 'Loading',
type: 'boolean',
description: 'Whether to show a loading indicator.',
},
]}
/>
## Try It
@@ -87,7 +79,7 @@ function Demo() {
<List
bordered
dataSource={data}
renderItem={(item) => <List.Item>{item}</List.Item>}
renderItem={item => <List.Item>{item}</List.Item>}
/>
);
}
@@ -95,13 +87,13 @@ function Demo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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"]` | - |
| Prop | Type | Default | Description |
| ------------ | --------- | ---------------------------------------------------------- | ----------------------------------------- |
| `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

120
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/listviewcard.mdx
View File

@@ -33,58 +33,58 @@ ListViewCard is a card component used to display items in list views with an ima
<StoryWithControls
component="ListViewCard"
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"
}}
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",
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."
}
]}
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Title displayed on the card.',
},
{
name: 'loading',
label: 'Loading',
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.',
},
]}
/>
## Try It
@@ -108,15 +108,15 @@ function Demo() {
## 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. |
| 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

156
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/loading.mdx
View File

@@ -33,40 +33,33 @@ The Loading component from Superset's UI library.
<StoryWithControls
component="Loading"
props={{
size: "m",
position: "normal",
muted: false
}}
size: 'm',
position: 'normal',
muted: false,
}}
controls={[
{
name: "size",
label: "Size",
type: "select",
options: [
"s",
"m",
"l"
],
description: "Size of the spinner: s (40px), m (70px), or l (100px)."
},
{
name: "position",
label: "Position",
type: "select",
options: [
"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."
}
]}
{
name: 'size',
label: 'Size',
type: 'select',
options: ['s', 'm', 'l'],
description: 'Size of the spinner: s (40px), m (70px), or l (100px).',
},
{
name: 'position',
label: 'Position',
type: 'select',
options: ['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.',
},
]}
/>
## Try It
@@ -104,20 +97,48 @@ 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>
<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'})
{size.toUpperCase()} (
{size === 's' ? '40px' : size === 'm' ? '70px' : '100px'})
</div>
<div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
<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' }}>
<div
style={{
textAlign: 'center',
padding: 10,
border: '1px solid #eee',
}}
>
<Loading size={size} muted position="normal" />
</div>
<div style={{ fontSize: 12, color: '#666' }}>
@@ -140,7 +161,17 @@ 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 }}>
<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>
@@ -148,16 +179,41 @@ function ContextualDemo() {
</div>
<h4>Dashboard Grid (size="s", muted)</h4>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 30 }}>
<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' }}>
<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' }}>
<div
style={{
height: 200,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '2px dashed #ccc',
}}
>
<Loading size="l" position="normal" />
</div>
</div>
@@ -167,11 +223,11 @@ function ContextualDemo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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. |
| Prop | Type | Default | Description |
| ---------- | --------- | ---------- | -------------------------------------------------------------------- |
| `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

146
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/menu.mdx
View File

@@ -33,58 +33,56 @@ Navigation menu component supporting horizontal, vertical, and inline modes. Bas
<StoryWithControls
component="Menu"
props={{
mode: "horizontal",
selectable: true,
items: [
{
label: "Dashboards",
key: "dashboards"
},
{
label: "Charts",
key: "charts"
},
{
label: "Datasets",
key: "datasets"
},
{
label: "SQL Lab",
key: "sqllab"
}
]
}}
controls={[
{
name: "mode",
label: "Mode",
type: "select",
options: [
"horizontal",
"vertical",
"inline"
mode: 'horizontal',
selectable: true,
items: [
{
label: 'Dashboards',
key: 'dashboards',
},
{
label: 'Charts',
key: 'charts',
},
{
label: 'Datasets',
key: 'datasets',
},
{
label: 'SQL Lab',
key: 'sqllab',
},
],
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",
description: "Allow multiple items to be selected."
},
{
name: "inlineCollapsed",
label: "Inline Collapsed",
type: "boolean",
description: "Whether the inline menu is collapsed (only applies to inline mode)."
}
]}
}}
controls={[
{
name: 'mode',
label: 'Mode',
type: 'select',
options: ['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',
description: 'Allow multiple items to be selected.',
},
{
name: 'inlineCollapsed',
label: 'Inline Collapsed',
type: 'boolean',
description:
'Whether the inline menu is collapsed (only applies to inline mode).',
},
]}
/>
## Try It
@@ -142,10 +140,38 @@ function MenuWithIcons() {
<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' },
{
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',
},
]}
/>
);
@@ -154,11 +180,11 @@ function MenuWithIcons() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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"}]` | - |
| Prop | Type | Default | Description |
| ------------ | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| `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

198
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/modal.mdx
View File

@@ -33,72 +33,67 @@ Modal dialog component for displaying content that requires user attention or in
<StoryWithControls
component="Modal"
props={{
disablePrimaryButton: false,
primaryButtonName: "Submit",
primaryButtonStyle: "primary",
show: false,
title: "I'm a modal!",
resizable: false,
draggable: false,
width: 500
}}
disablePrimaryButton: false,
primaryButtonName: 'Submit',
primaryButtonStyle: 'primary',
show: false,
title: "I'm a modal!",
resizable: false,
draggable: false,
width: 500,
}}
controls={[
{
name: "disablePrimaryButton",
label: "Disable Primary Button",
type: "boolean",
description: "Whether the primary button is disabled."
},
{
name: "primaryButtonName",
label: "Primary Button Name",
type: "text",
description: "Text for the primary action button."
},
{
name: "primaryButtonStyle",
label: "Primary Button Style",
type: "select",
options: [
"primary",
"secondary",
"dashed",
"danger",
"link"
],
description: "The style of the primary action button."
},
{
name: "show",
label: "Show",
type: "boolean",
description: "Whether the modal is visible. Use the \"Try It\" example below for a working demo."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title displayed in the modal header."
},
{
name: "resizable",
label: "Resizable",
type: "boolean",
description: "Whether the modal can be resized by dragging corners."
},
{
name: "draggable",
label: "Draggable",
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."
}
]}
{
name: 'disablePrimaryButton',
label: 'Disable Primary Button',
type: 'boolean',
description: 'Whether the primary button is disabled.',
},
{
name: 'primaryButtonName',
label: 'Primary Button Name',
type: 'text',
description: 'Text for the primary action button.',
},
{
name: 'primaryButtonStyle',
label: 'Primary Button Style',
type: 'select',
options: ['primary', 'secondary', 'dashed', 'danger', 'link'],
description: 'The style of the primary action button.',
},
{
name: 'show',
label: 'Show',
type: 'boolean',
description:
'Whether the modal is visible. Use the "Try It" example below for a working demo.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Title displayed in the modal header.',
},
{
name: 'resizable',
label: 'Resizable',
type: 'boolean',
description: 'Whether the modal can be resized by dragging corners.',
},
{
name: 'draggable',
label: 'Draggable',
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.',
},
]}
triggerProp="show"
onHideProp="onHide"
/>
@@ -137,7 +132,9 @@ function DangerModal() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<>
<Button buttonStyle="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
<Button buttonStyle="danger" onClick={() => setIsOpen(true)}>
Delete Item
</Button>
<Modal
show={isOpen}
onHide={() => setIsOpen(false)}
@@ -149,7 +146,10 @@ function DangerModal() {
setIsOpen(false);
}}
>
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
<p>
Are you sure you want to delete this item? This action cannot be
undone.
</p>
</Modal>
</>
);
@@ -162,19 +162,37 @@ function DangerModal() {
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>
<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>
);
}
@@ -182,16 +200,16 @@ function ConfirmationDialogs() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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. |
| Prop | Type | Default | Description |
| ---------------------- | --------- | ---------------- | -------------------------------------------------------------------------------- |
| `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

160
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/modaltrigger.mdx
View File

@@ -33,73 +33,73 @@ A component that renders a trigger element which opens a modal when clicked. Use
<StoryWithControls
component="ModalTrigger"
props={{
isButton: true,
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,
triggerNode: "Click to Open Modal"
}}
isButton: true,
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,
triggerNode: 'Click to Open Modal',
}}
controls={[
{
name: "isButton",
label: "Is Button",
type: "boolean",
description: "Whether to wrap the trigger in a button element."
},
{
name: "modalTitle",
label: "Modal Title",
type: "text",
description: "Title displayed in the modal header."
},
{
name: "modalBody",
label: "Modal Body",
type: "text",
description: "Content displayed in the modal body."
},
{
name: "tooltip",
label: "Tooltip",
type: "text",
description: "Tooltip text shown on hover over the trigger."
},
{
name: "width",
label: "Width",
type: "text",
description: "Width of the modal (e.g., \"600px\", \"80%\")."
},
{
name: "maxWidth",
label: "Max Width",
type: "text",
description: "Maximum width of the modal."
},
{
name: "responsive",
label: "Responsive",
type: "boolean",
description: "Whether the modal should be responsive."
},
{
name: "draggable",
label: "Draggable",
type: "boolean",
description: "Whether the modal can be dragged by its header."
},
{
name: "resizable",
label: "Resizable",
type: "boolean",
description: "Whether the modal can be resized by dragging corners."
}
]}
{
name: 'isButton',
label: 'Is Button',
type: 'boolean',
description: 'Whether to wrap the trigger in a button element.',
},
{
name: 'modalTitle',
label: 'Modal Title',
type: 'text',
description: 'Title displayed in the modal header.',
},
{
name: 'modalBody',
label: 'Modal Body',
type: 'text',
description: 'Content displayed in the modal body.',
},
{
name: 'tooltip',
label: 'Tooltip',
type: 'text',
description: 'Tooltip text shown on hover over the trigger.',
},
{
name: 'width',
label: 'Width',
type: 'text',
description: 'Width of the modal (e.g., "600px", "80%").',
},
{
name: 'maxWidth',
label: 'Max Width',
type: 'text',
description: 'Maximum width of the modal.',
},
{
name: 'responsive',
label: 'Responsive',
type: 'boolean',
description: 'Whether the modal should be responsive.',
},
{
name: 'draggable',
label: 'Draggable',
type: 'boolean',
description: 'Whether the modal can be dragged by its header.',
},
{
name: 'resizable',
label: 'Resizable',
type: 'boolean',
description: 'Whether the modal can be resized by dragging corners.',
},
]}
/>
## Try It
@@ -113,7 +113,9 @@ function Demo() {
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>}
modalBody={
<p>This is the modal content. You can put any React elements here.</p>
}
width="500px"
responsive
/>
@@ -165,18 +167,18 @@ function DraggableModal() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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. |
| Prop | Type | Default | Description |
| ------------- | --------- | ----------------------------------- | -------------------------------------------------------- |
| `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

161
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/popover.mdx
View File

@@ -33,69 +33,66 @@ A floating card that appears when hovering or clicking a trigger element. Suppor
<StoryWithControls
component="Popover"
props={{
content: "Popover sample content",
title: "Popover title",
arrow: true,
color: "#fff"
}}
content: 'Popover sample content',
title: 'Popover title',
arrow: true,
color: '#fff',
}}
controls={[
{
name: "content",
label: "Content",
type: "text",
description: "Content displayed inside the popover body."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title displayed in the popover header."
},
{
name: "arrow",
label: "Arrow",
type: "boolean",
description: "Whether to show the popover's arrow pointing to the trigger."
},
{
name: "color",
label: "Color",
type: "color",
description: "The background color of the popover."
},
{
name: "placement",
label: "Placement",
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",
options: [
"hover",
"click",
"focus"
],
description: "Event that triggers the popover to appear."
}
]}
sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
{
name: 'content',
label: 'Content',
type: 'text',
description: 'Content displayed inside the popover body.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Title displayed in the popover header.',
},
{
name: 'arrow',
label: 'Arrow',
type: 'boolean',
description:
"Whether to show the popover's arrow pointing to the trigger.",
},
{
name: 'color',
label: 'Color',
type: 'color',
description: 'The background color of the popover.',
},
{
name: 'placement',
label: 'Placement',
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',
options: ['hover', 'click', 'focus'],
description: 'Event that triggers the popover to appear.',
},
]}
sampleChildren={[{ component: 'Button', props: { children: 'Hover me' } }]}
/>
## Try It
@@ -105,11 +102,7 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Popover
content="Popover sample content"
title="Popover title"
arrow
>
<Popover content="Popover sample content" title="Popover title" arrow>
<Button>Hover me</Button>
</Popover>
);
@@ -137,7 +130,15 @@ function ClickPopover() {
```tsx live
function PlacementsDemo() {
return (
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center', padding: '60px 0' }}>
<div
style={{
display: 'flex',
gap: 16,
flexWrap: 'wrap',
justifyContent: 'center',
padding: '60px 0',
}}
>
{['top', 'right', 'bottom', 'left'].map(placement => (
<Popover
key={placement}
@@ -162,9 +163,15 @@ function RichPopover() {
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>
<p>
<strong>Created by:</strong> Admin
</p>
<p>
<strong>Last modified:</strong> Jan 2025
</p>
<p>
<strong>Charts:</strong> 12
</p>
</div>
}
>
@@ -178,12 +185,12 @@ function RichPopover() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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. |
| Prop | Type | Default | Description |
| --------- | --------- | -------------------------- | ------------------------------------------------------------ |
| `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

168
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/progressbar.mdx
View File

@@ -33,79 +33,66 @@ Progress bar component for displaying completion status. Supports line, circle,
<StoryWithControls
component="ProgressBar"
props={{
percent: 75,
status: "normal",
type: "line",
striped: false,
showInfo: true,
strokeLinecap: "round"
}}
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",
type: "select",
options: [
"normal",
"success",
"exception",
"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."
}
]}
{
name: 'percent',
label: 'Percent',
type: 'number',
description: 'Completion percentage (0-100).',
},
{
name: 'status',
label: 'Status',
type: 'select',
options: ['normal', 'success', 'exception', '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.',
},
]}
/>
## Try It
@@ -114,14 +101,7 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<ProgressBar
percent={75}
status="normal"
type="line"
showInfo
/>
);
return <ProgressBar percent={75} status="normal" type="line" showInfo />;
}
```
@@ -156,9 +136,17 @@ function StatusDemo() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
{statuses.map(status => (
<div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<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 }} />
<ProgressBar
percent={75}
status={status}
type="line"
style={{ flex: 1 }}
/>
</div>
))}
</div>
@@ -183,14 +171,14 @@ function CustomColors() {
## 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. |
| 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

80
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/radio.mdx
View File

@@ -33,37 +33,37 @@ Radio button component for selecting one option from a set. Supports standalone
<StoryWithControls
component="Radio"
props={{
value: "radio1",
disabled: false,
checked: false,
children: "Radio"
}}
value: 'radio1',
disabled: false,
checked: false,
children: 'Radio',
}}
controls={[
{
name: "value",
label: "Value",
type: "text",
description: "The value associated with this radio button."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the radio button is disabled."
},
{
name: "checked",
label: "Checked",
type: "boolean",
description: "Whether the radio button is checked (controlled mode)."
},
{
name: "children",
label: "Children",
type: "text",
description: "Label text displayed next to the radio button."
}
]}
{
name: 'value',
label: 'Value',
type: 'text',
description: 'The value associated with this radio button.',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Whether the radio button is disabled.',
},
{
name: 'checked',
label: 'Checked',
type: 'boolean',
description: 'Whether the radio button is checked (controlled mode).',
},
{
name: 'children',
label: 'Children',
type: 'text',
description: 'Label text displayed next to the radio button.',
},
]}
/>
## Try It
@@ -72,13 +72,7 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Radio
value="radio1"
>
Radio
</Radio>
);
return <Radio value="radio1">Radio</Radio>;
}
```
@@ -116,12 +110,12 @@ function VerticalDemo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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. |
| Prop | Type | Default | Description |
| ---------- | --------- | ---------- | ------------------------------------------------------ |
| `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

42
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/safemarkdown.mdx
View File

@@ -33,22 +33,22 @@ The SafeMarkdown component from Superset's UI library.
<StoryWithControls
component="SafeMarkdown"
props={{
htmlSanitization: true
}}
htmlSanitization: true,
}}
controls={[
{
name: "htmlSanitization",
label: "Html Sanitization",
type: "boolean",
description: "Enable HTML sanitization (recommended for user input)"
},
{
name: "source",
label: "Source",
type: "text",
description: "Markdown source string to render"
}
]}
{
name: 'htmlSanitization',
label: 'Html Sanitization',
type: 'boolean',
description: 'Enable HTML sanitization (recommended for user input)',
},
{
name: 'source',
label: 'Source',
type: 'text',
description: 'Markdown source string to render',
},
]}
/>
## Try It
@@ -57,19 +57,15 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<SafeMarkdown
htmlSanitization
/>
);
return <SafeMarkdown htmlSanitization />;
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `htmlSanitization` | `boolean` | `true` | Enable HTML sanitization (recommended for user input) |
| Prop | Type | Default | Description |
| ------------------ | --------- | ------- | ----------------------------------------------------- |
| `htmlSanitization` | `boolean` | `true` | Enable HTML sanitization (recommended for user input) |
## Import

269
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/select.mdx
View File

@@ -33,129 +33,130 @@ A versatile select component supporting single and multi-select modes, search fi
<StoryWithControls
component="Select"
props={{
mode: "single",
placeholder: "Select ...",
showSearch: true,
allowNewOptions: false,
allowClear: false,
allowSelectAll: true,
disabled: false,
invertSelection: false,
oneLine: false,
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: "mode",
label: "Mode",
type: "inline-radio",
mode: 'single',
placeholder: 'Select ...',
showSearch: true,
allowNewOptions: false,
allowClear: false,
allowSelectAll: true,
disabled: false,
invertSelection: false,
oneLine: false,
maxTagCount: 4,
options: [
"single",
"multiple"
{
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',
},
],
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: "Whether users can create new options by typing a value not in the list."
},
{
name: "allowClear",
label: "Allow Clear",
type: "boolean",
description: "Whether to show a clear button to reset the selection."
},
{
name: "allowSelectAll",
label: "Allow Select All",
type: "boolean",
description: "Whether to show a \"Select All\" option in multiple mode."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the select is disabled."
},
{
name: "invertSelection",
label: "Invert Selection",
type: "boolean",
description: "Shows a stop icon instead of a checkmark on selected options, indicating deselection on click."
},
{
name: "oneLine",
label: "One Line",
type: "boolean",
description: "Forces tags onto one line with overflow count. Requires multiple mode."
},
{
name: "maxTagCount",
label: "Max Tag Count",
type: "number",
description: "Maximum number of tags to display in multiple mode before showing an overflow count."
}
]}
}}
controls={[
{
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:
'Whether users can create new options by typing a value not in the list.',
},
{
name: 'allowClear',
label: 'Allow Clear',
type: 'boolean',
description: 'Whether to show a clear button to reset the selection.',
},
{
name: 'allowSelectAll',
label: 'Allow Select All',
type: 'boolean',
description: 'Whether to show a "Select All" option in multiple mode.',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Whether the select is disabled.',
},
{
name: 'invertSelection',
label: 'Invert Selection',
type: 'boolean',
description:
'Shows a stop icon instead of a checkmark on selected options, indicating deselection on click.',
},
{
name: 'oneLine',
label: 'One Line',
type: 'boolean',
description:
'Forces tags onto one line with overflow count. Requires multiple mode.',
},
{
name: 'maxTagCount',
label: 'Max Tag Count',
type: 'number',
description:
'Maximum number of tags to display in multiple mode before showing an overflow count.',
},
]}
/>
## Try It
@@ -280,19 +281,19 @@ function OneLineDemo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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"}]` | - |
| Prop | Type | Default | Description |
| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
| `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

141
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/skeleton.mdx
View File

@@ -33,67 +33,60 @@ Skeleton loading component with support for avatar, title, paragraph, button, an
<StoryWithControls
component="Skeleton"
props={{
active: true,
avatar: false,
loading: true,
title: true,
shape: "circle",
size: "default",
block: false
}}
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."
},
{
name: "avatar",
label: "Avatar",
type: "boolean",
description: "Show avatar placeholder."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Display the skeleton when true."
},
{
name: "title",
label: "Title",
type: "boolean",
description: "Show title placeholder."
},
{
name: "shape",
label: "Shape",
type: "select",
options: [
"circle",
"square"
],
description: "Shape of the avatar/button skeleton."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"large",
"small",
"default"
],
description: "Size of the skeleton elements."
},
{
name: "block",
label: "Block",
type: "boolean",
description: "Option to fit button width to its parent width."
}
]}
{
name: 'active',
label: 'Active',
type: 'boolean',
description: 'Show animation effect.',
},
{
name: 'avatar',
label: 'Avatar',
type: 'boolean',
description: 'Show avatar placeholder.',
},
{
name: 'loading',
label: 'Loading',
type: 'boolean',
description: 'Display the skeleton when true.',
},
{
name: 'title',
label: 'Title',
type: 'boolean',
description: 'Show title placeholder.',
},
{
name: 'shape',
label: 'Shape',
type: 'select',
options: ['circle', 'square'],
description: 'Shape of the avatar/button skeleton.',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['large', 'small', 'default'],
description: 'Size of the skeleton elements.',
},
{
name: 'block',
label: 'Block',
type: 'boolean',
description: 'Option to fit button width to its parent width.',
},
]}
/>
## Try It
@@ -102,29 +95,21 @@ Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Skeleton
active
loading
title
shape="circle"
size="default"
/>
);
return <Skeleton 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. |
| 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

254
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/slider.mdx
View File

@@ -33,105 +33,106 @@ A slider input for selecting a value or range from a continuous or stepped inter
<StoryWithControls
component="Slider"
props={{
min: 0,
max: 100,
defaultValue: 70,
step: 1,
disabled: false,
reverse: false,
vertical: false,
keyboard: true,
dots: false,
included: true
}}
min: 0,
max: 100,
defaultValue: 70,
step: 1,
disabled: false,
reverse: false,
vertical: false,
keyboard: true,
dots: false,
included: true,
}}
controls={[
{
name: "min",
label: "Min",
type: "number",
description: "Minimum value of the slider."
},
{
name: "max",
label: "Max",
type: "number",
description: "Maximum value of the slider."
},
{
name: "defaultValue",
label: "Default Value",
type: "number",
description: "Initial value of the slider."
},
{
name: "step",
label: "Step",
type: "number",
description: "Step increment between values. Use null for marks-only mode."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the slider is disabled."
},
{
name: "reverse",
label: "Reverse",
type: "boolean",
description: "Whether to reverse the slider direction."
},
{
name: "vertical",
label: "Vertical",
type: "boolean",
description: "Whether to display the slider vertically."
},
{
name: "keyboard",
label: "Keyboard",
type: "boolean",
description: "Whether keyboard arrow keys can control the slider."
},
{
name: "dots",
label: "Dots",
type: "boolean",
description: "Whether to show dots at each step mark."
},
{
name: "included",
label: "Included",
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",
label: "Tooltip Position",
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."
}
]}
{
name: 'min',
label: 'Min',
type: 'number',
description: 'Minimum value of the slider.',
},
{
name: 'max',
label: 'Max',
type: 'number',
description: 'Maximum value of the slider.',
},
{
name: 'defaultValue',
label: 'Default Value',
type: 'number',
description: 'Initial value of the slider.',
},
{
name: 'step',
label: 'Step',
type: 'number',
description:
'Step increment between values. Use null for marks-only mode.',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Whether the slider is disabled.',
},
{
name: 'reverse',
label: 'Reverse',
type: 'boolean',
description: 'Whether to reverse the slider direction.',
},
{
name: 'vertical',
label: 'Vertical',
type: 'boolean',
description: 'Whether to display the slider vertically.',
},
{
name: 'keyboard',
label: 'Keyboard',
type: 'boolean',
description: 'Whether keyboard arrow keys can control the slider.',
},
{
name: 'dots',
label: 'Dots',
type: 'boolean',
description: 'Whether to show dots at each step mark.',
},
{
name: 'included',
label: 'Included',
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',
label: 'Tooltip Position',
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.',
},
]}
/>
## Try It
@@ -142,12 +143,7 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<div style={{ width: 400, padding: '20px 0' }}>
<Slider
min={0}
max={100}
defaultValue={70}
step={1}
/>
<Slider min={0} max={100} defaultValue={70} step={1} />
</div>
);
}
@@ -163,7 +159,12 @@ function RangeSliderDemo() {
<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} />
<Slider
range={{ draggableTrack: true }}
defaultValue={[30, 60]}
min={0}
max={100}
/>
</div>
);
}
@@ -202,8 +203,14 @@ function SteppedDemo() {
<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' }} />
<Slider
min={0}
max={100}
defaultValue={50}
step={25}
dots
marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }}
/>
</div>
);
}
@@ -217,8 +224,13 @@ function VerticalDemo() {
<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' }} />
<Slider
vertical
defaultValue={50}
dots
step={10}
marks={{ 0: '0', 50: '50', 100: '100' }}
/>
</div>
);
}
@@ -226,18 +238,18 @@ function VerticalDemo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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. |
| Prop | Type | Default | Description |
| -------------- | --------- | ------- | ------------------------------------------------------------ |
| `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

218
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/steps.mdx
View File

@@ -33,107 +33,90 @@ A navigation component for guiding users through multi-step workflows. Supports
<StoryWithControls
component="Steps"
props={{
direction: "horizontal",
current: 1,
labelPlacement: "horizontal",
progressDot: false,
size: "default",
status: "process",
type: "default",
title: "Step 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"
}
]
}}
direction: 'horizontal',
current: 1,
labelPlacement: 'horizontal',
progressDot: false,
size: 'default',
status: 'process',
type: 'default',
title: 'Step 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={[
{
name: "direction",
label: "Direction",
type: "select",
options: [
"horizontal",
"vertical"
],
description: "Layout direction of the steps."
},
{
name: "current",
label: "Current",
type: "number",
description: "Index of the current step (zero-based)."
},
{
name: "labelPlacement",
label: "Label Placement",
type: "select",
options: [
"horizontal",
"vertical"
],
description: "Position of step labels relative to the step icon."
},
{
name: "progressDot",
label: "Progress Dot",
type: "boolean",
description: "Whether to use a dot style instead of numbered icons."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"default",
"small"
],
description: "Size of the step icons and text."
},
{
name: "status",
label: "Status",
type: "select",
options: [
"wait",
"process",
"finish",
"error"
],
description: "Status of the current step."
},
{
name: "type",
label: "Type",
type: "select",
options: [
"default",
"navigation",
"inline"
],
description: "Visual style: default numbered, navigation breadcrumb, or inline compact."
},
{
name: "title",
label: "Title",
type: "text"
},
{
name: "description",
label: "Description",
type: "text"
}
]}
{
name: 'direction',
label: 'Direction',
type: 'select',
options: ['horizontal', 'vertical'],
description: 'Layout direction of the steps.',
},
{
name: 'current',
label: 'Current',
type: 'number',
description: 'Index of the current step (zero-based).',
},
{
name: 'labelPlacement',
label: 'Label Placement',
type: 'select',
options: ['horizontal', 'vertical'],
description: 'Position of step labels relative to the step icon.',
},
{
name: 'progressDot',
label: 'Progress Dot',
type: 'boolean',
description: 'Whether to use a dot style instead of numbered icons.',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['default', 'small'],
description: 'Size of the step icons and text.',
},
{
name: 'status',
label: 'Status',
type: 'select',
options: ['wait', 'process', 'finish', 'error'],
description: 'Status of the current step.',
},
{
name: 'type',
label: 'Type',
type: 'select',
options: ['default', 'navigation', 'inline'],
description:
'Visual style: default numbered, navigation breadcrumb, or inline compact.',
},
{
name: 'title',
label: 'Title',
type: 'text',
},
{
name: 'description',
label: 'Description',
type: 'text',
},
]}
/>
## Try It
@@ -164,7 +147,10 @@ function VerticalSteps() {
direction="vertical"
current={1}
items={[
{ title: 'Upload CSV', description: 'Select a file from your computer' },
{
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' },
@@ -231,11 +217,7 @@ function DotAndSmall() {
<Steps
size="small"
current={2}
items={[
{ title: 'Login' },
{ title: 'Verify' },
{ title: 'Done' },
]}
items={[{ title: 'Login' }, { title: 'Verify' }, { title: 'Done' }]}
/>
</div>
</div>
@@ -245,18 +227,18 @@ function DotAndSmall() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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"}]` | - |
| Prop | Type | Default | Description |
| ---------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `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

137
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/switch.mdx
View File

@@ -33,46 +33,44 @@ A toggle switch for boolean on/off states. Supports loading indicators, sizing,
<StoryWithControls
component="Switch"
props={{
disabled: false,
loading: false,
title: "Toggle feature"
}}
disabled: false,
loading: false,
title: 'Toggle feature',
}}
controls={[
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the switch is disabled."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show a loading spinner inside the switch."
},
{
name: "title",
label: "Title",
type: "text",
description: "HTML title attribute shown as a browser tooltip on hover. Useful for accessibility."
},
{
name: "checked",
label: "Checked",
type: "boolean",
description: "Whether the switch is on."
},
{
name: "size",
label: "Size",
type: "radio",
options: [
"small",
"default"
],
description: "Size of the switch."
}
]}
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Whether the switch is disabled.',
},
{
name: 'loading',
label: 'Loading',
type: 'boolean',
description: 'Whether to show a loading spinner inside the switch.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description:
'HTML title attribute shown as a browser tooltip on hover. Useful for accessibility.',
},
{
name: 'checked',
label: 'Checked',
type: 'boolean',
description: 'Whether the switch is on.',
},
{
name: 'size',
label: 'Size',
type: 'radio',
options: ['small', 'default'],
description: 'Size of the switch.',
},
]}
/>
## Try It
@@ -84,13 +82,11 @@ 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"
/>
<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>
<span style={{ color: '#999', fontSize: 12 }}>
(hover the switch to see the title tooltip)
</span>
</div>
);
}
@@ -154,14 +150,45 @@ function SettingsPanel() {
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 }}>
<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' },
{
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' }}>
<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>
@@ -173,11 +200,11 @@ function SettingsPanel() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `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. |
| Prop | Type | Default | Description |
| ---------- | --------- | ------------------ | ----------------------------------------------------------------------------------- |
| `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

10
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/tablecollection.mdx
View File

@@ -30,11 +30,7 @@ The TableCollection component from Superset's UI library.
## Live Example
<StoryWithControls
component="TableCollection"
props={{}}
controls={[]}
/>
<StoryWithControls component="TableCollection" props={{}} controls={[]} />
## Try It
@@ -44,14 +40,12 @@ Edit the code below to experiment with the component:
function Demo() {
return (
<TableCollection
// Add props here
// Add props here
/>
);
}
```
---
:::tip[Improve this page]

324
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/tableview.mdx
View File

@@ -33,141 +33,144 @@ A data table component with sorting, pagination, text wrapping, and empty state
<StoryWithControls
component="TableView"
props={{
accessor: "summary",
Header: "Summary",
sortable: true,
id: 456,
age: 10,
name: "John Smith",
summary: "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.",
noDataText: "No data here",
pageSize: 2,
showRowCount: true,
withPagination: true,
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."
}
]
}}
accessor: 'summary',
Header: 'Summary',
sortable: true,
id: 456,
age: 10,
name: 'John Smith',
summary:
'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.',
noDataText: 'No data here',
pageSize: 2,
showRowCount: true,
withPagination: true,
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={[
{
name: "accessor",
label: "Accessor",
type: "text"
},
{
name: "Header",
label: "Header",
type: "text"
},
{
name: "sortable",
label: "Sortable",
type: "boolean"
},
{
name: "id",
label: "ID",
type: "number"
},
{
name: "age",
label: "Age",
type: "number"
},
{
name: "name",
label: "Name",
type: "text"
},
{
name: "summary",
label: "Summary",
type: "text"
},
{
name: "noDataText",
label: "No Data Text",
type: "text",
description: "Text displayed when the table has no data."
},
{
name: "pageSize",
label: "Page Size",
type: "number",
description: "Number of rows displayed per page."
},
{
name: "showRowCount",
label: "Show Row Count",
type: "boolean",
description: "Whether to display the total row count alongside pagination."
},
{
name: "withPagination",
label: "With Pagination",
type: "boolean",
description: "Whether to show pagination controls below the table."
},
{
name: "scrollTopOnPagination",
label: "Scroll Top On Pagination",
type: "boolean",
description: "Whether to scroll to the top of the table when changing pages."
},
{
name: "emptyWrapperType",
label: "Empty Wrapper Type",
type: "select",
description: "Style of the empty state wrapper."
},
{
name: "initialPageIndex",
label: "Initial Page Index",
type: "number",
description: "Initial page to display (zero-based)."
}
]}
{
name: 'accessor',
label: 'Accessor',
type: 'text',
},
{
name: 'Header',
label: 'Header',
type: 'text',
},
{
name: 'sortable',
label: 'Sortable',
type: 'boolean',
},
{
name: 'id',
label: 'ID',
type: 'number',
},
{
name: 'age',
label: 'Age',
type: 'number',
},
{
name: 'name',
label: 'Name',
type: 'text',
},
{
name: 'summary',
label: 'Summary',
type: 'text',
},
{
name: 'noDataText',
label: 'No Data Text',
type: 'text',
description: 'Text displayed when the table has no data.',
},
{
name: 'pageSize',
label: 'Page Size',
type: 'number',
description: 'Number of rows displayed per page.',
},
{
name: 'showRowCount',
label: 'Show Row Count',
type: 'boolean',
description:
'Whether to display the total row count alongside pagination.',
},
{
name: 'withPagination',
label: 'With Pagination',
type: 'boolean',
description: 'Whether to show pagination controls below the table.',
},
{
name: 'scrollTopOnPagination',
label: 'Scroll Top On Pagination',
type: 'boolean',
description:
'Whether to scroll to the top of the table when changing pages.',
},
{
name: 'emptyWrapperType',
label: 'Empty Wrapper Type',
type: 'select',
description: 'Style of the empty state wrapper.',
},
{
name: 'initialPageIndex',
label: 'Initial Page Index',
type: 'number',
description: 'Initial page to display (zero-based).',
},
]}
/>
## Try It
@@ -185,9 +188,24 @@ function Demo() {
{ 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.' },
{
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}
@@ -263,22 +281,22 @@ function SortingDemo() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `accessor` | `string` | `"summary"` | - |
| `Header` | `string` | `"Summary"` | - |
| `sortable` | `boolean` | `true` | - |
| `id` | `number` | `456` | - |
| `age` | `number` | `10` | - |
| `name` | `string` | `"John Smith"` | - |
| `summary` | `string` | `"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."` | - |
| `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."}]` | - |
| Prop | Type | Default | Description |
| ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| `accessor` | `string` | `"summary"` | - |
| `Header` | `string` | `"Summary"` | - |
| `sortable` | `boolean` | `true` | - |
| `id` | `number` | `456` | - |
| `age` | `number` | `10` | - |
| `name` | `string` | `"John Smith"` | - |
| `summary` | `string` | `"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."` | - |
| `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

225
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/tabs.mdx
View File

@@ -33,90 +33,77 @@ A tabs component for switching between different views or content sections. Supp
<StoryWithControls
component="Tabs"
props={{
defaultActiveKey: "1",
type: "line",
tabPosition: "top",
size: "middle",
animated: true,
centered: false,
tabBarGutter: 8,
items: [
{
key: "1",
label: "Tab 1",
children: "Content of Tab Pane 1"
},
{
key: "2",
label: "Tab 2",
children: "Content of Tab Pane 2"
},
{
key: "3",
label: "Tab 3",
children: "Content of Tab Pane 3"
}
]
}}
defaultActiveKey: '1',
type: 'line',
tabPosition: 'top',
size: 'middle',
animated: true,
centered: false,
tabBarGutter: 8,
items: [
{
key: '1',
label: 'Tab 1',
children: 'Content of Tab Pane 1',
},
{
key: '2',
label: 'Tab 2',
children: 'Content of Tab Pane 2',
},
{
key: '3',
label: 'Tab 3',
children: 'Content of Tab Pane 3',
},
],
}}
controls={[
{
name: "defaultActiveKey",
label: "Default Active Key",
type: "text"
},
{
name: "type",
label: "Type",
type: "inline-radio",
options: [
"line",
"card",
"editable-card"
],
description: "The style of tabs. Options: line, card, editable-card."
},
{
name: "tabPosition",
label: "Tab Position",
type: "inline-radio",
options: [
"top",
"bottom",
"left",
"right"
],
description: "Position of tabs. Options: top, bottom, left, right."
},
{
name: "size",
label: "Size",
type: "inline-radio",
options: [
"small",
"middle",
"large"
],
description: "Size of the tabs."
},
{
name: "animated",
label: "Animated",
type: "boolean",
description: "Whether to animate tab transitions."
},
{
name: "centered",
label: "Centered",
type: "boolean",
description: "Whether to center the tabs."
},
{
name: "tabBarGutter",
label: "Tab Bar Gutter",
type: "number",
description: "The gap between tabs."
}
]}
{
name: 'defaultActiveKey',
label: 'Default Active Key',
type: 'text',
},
{
name: 'type',
label: 'Type',
type: 'inline-radio',
options: ['line', 'card', 'editable-card'],
description: 'The style of tabs. Options: line, card, editable-card.',
},
{
name: 'tabPosition',
label: 'Tab Position',
type: 'inline-radio',
options: ['top', 'bottom', 'left', 'right'],
description: 'Position of tabs. Options: top, bottom, left, right.',
},
{
name: 'size',
label: 'Size',
type: 'inline-radio',
options: ['small', 'middle', 'large'],
description: 'Size of the tabs.',
},
{
name: 'animated',
label: 'Animated',
type: 'boolean',
description: 'Whether to animate tab transitions.',
},
{
name: 'centered',
label: 'Centered',
type: 'boolean',
description: 'Whether to center the tabs.',
},
{
name: 'tabBarGutter',
label: 'Tab Bar Gutter',
type: 'number',
description: 'The gap between tabs.',
},
]}
/>
## Try It
@@ -147,9 +134,17 @@ function CardTabs() {
type="card"
defaultActiveKey="1"
items={[
{ key: '1', label: 'Dashboards', children: 'View and manage your dashboards.' },
{
key: '1',
label: 'Dashboards',
children: 'View and manage your dashboards.',
},
{ key: '2', label: 'Charts', children: 'Browse all saved charts.' },
{ key: '3', label: 'Datasets', children: 'Explore available datasets.' },
{
key: '3',
label: 'Datasets',
children: 'Explore available datasets.',
},
]}
/>
);
@@ -186,10 +181,42 @@ function IconTabs() {
<Tabs
defaultActiveKey="1"
items={[
{ key: '1', label: <><Icons.DashboardOutlined /> Dashboards</>, children: 'Dashboard content here.' },
{ key: '2', label: <><Icons.LineChartOutlined /> Charts</>, children: 'Chart content here.' },
{ key: '3', label: <><Icons.DatabaseOutlined /> Datasets</>, children: 'Dataset content here.' },
{ key: '4', label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, children: 'SQL Lab content here.' },
{
key: '1',
label: (
<>
<Icons.DashboardOutlined /> Dashboards
</>
),
children: 'Dashboard content here.',
},
{
key: '2',
label: (
<>
<Icons.LineChartOutlined /> Charts
</>
),
children: 'Chart content here.',
},
{
key: '3',
label: (
<>
<Icons.DatabaseOutlined /> Datasets
</>
),
children: 'Dataset content here.',
},
{
key: '4',
label: (
<>
<Icons.ConsoleSqlOutlined /> SQL Lab
</>
),
children: 'SQL Lab content here.',
},
]}
/>
);
@@ -198,16 +225,16 @@ function IconTabs() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `defaultActiveKey` | `string` | `"1"` | - |
| `type` | `string` | `"line"` | The style of tabs. Options: line, card, editable-card. |
| `tabPosition` | `string` | `"top"` | Position of tabs. Options: top, bottom, left, right. |
| `size` | `string` | `"middle"` | Size of the tabs. |
| `animated` | `boolean` | `true` | Whether to animate tab transitions. |
| `centered` | `boolean` | `false` | Whether to center the tabs. |
| `tabBarGutter` | `number` | `8` | The gap between tabs. |
| `items` | `any` | `[{"key":"1","label":"Tab 1","children":"Content of Tab Pane 1"},{"key":"2","label":"Tab 2","children":"Content of Tab Pane 2"},{"key":"3","label":"Tab 3","children":"Content of Tab Pane 3"}]` | - |
| Prop | Type | Default | Description |
| ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| `defaultActiveKey` | `string` | `"1"` | - |
| `type` | `string` | `"line"` | The style of tabs. Options: line, card, editable-card. |
| `tabPosition` | `string` | `"top"` | Position of tabs. Options: top, bottom, left, right. |
| `size` | `string` | `"middle"` | Size of the tabs. |
| `animated` | `boolean` | `true` | Whether to animate tab transitions. |
| `centered` | `boolean` | `false` | Whether to center the tabs. |
| `tabBarGutter` | `number` | `8` | The gap between tabs. |
| `items` | `any` | `[{"key":"1","label":"Tab 1","children":"Content of Tab Pane 1"},{"key":"2","label":"Tab 2","children":"Content of Tab Pane 2"},{"key":"3","label":"Tab 3","children":"Content of Tab Pane 3"}]` | - |
## Import

84
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/timer.mdx
View File

@@ -33,33 +33,34 @@ A live elapsed-time display that counts up from a given start time. Used to show
<StoryWithControls
component="Timer"
props={{
isRunning: true,
status: "success",
startTime: 1737936000000
}}
isRunning: true,
status: 'success',
startTime: 1737936000000,
}}
controls={[
{
name: "isRunning",
label: "Is Running",
type: "boolean",
description: "Whether the timer is actively counting. Toggle to start/stop."
},
{
name: "status",
label: "Status",
type: "select",
options: [
"success",
"warning",
"danger",
"info",
"default",
"primary",
"secondary"
],
description: "Visual status of the timer badge."
}
]}
{
name: 'isRunning',
label: 'Is Running',
type: 'boolean',
description:
'Whether the timer is actively counting. Toggle to start/stop.',
},
{
name: 'status',
label: 'Status',
type: 'select',
options: [
'success',
'warning',
'danger',
'info',
'default',
'primary',
'secondary',
],
description: 'Visual status of the timer badge.',
},
]}
/>
## Try It
@@ -72,11 +73,7 @@ function Demo() {
const [startTime] = React.useState(Date.now());
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<Timer
startTime={startTime}
isRunning={isRunning}
status="success"
/>
<Timer startTime={startTime} isRunning={isRunning} status="success" />
<Button onClick={() => setIsRunning(r => !r)}>
{isRunning ? 'Stop' : 'Start'}
</Button>
@@ -92,8 +89,19 @@ function StatusVariants() {
const [startTime] = React.useState(Date.now());
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{['success', 'warning', 'danger', 'info', 'default', 'primary', 'secondary'].map(status => (
<div key={status} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
{[
'success',
'warning',
'danger',
'info',
'default',
'primary',
'secondary',
].map(status => (
<div
key={status}
style={{ display: 'flex', alignItems: 'center', gap: 12 }}
>
<span style={{ width: 80 }}>{status}</span>
<Timer startTime={startTime} isRunning status={status} />
</div>
@@ -152,11 +160,11 @@ function StartStop() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isRunning` | `boolean` | `true` | Whether the timer is actively counting. Toggle to start/stop. |
| `status` | `string` | `"success"` | Visual status of the timer badge. |
| `startTime` | `number` | `1737936000000` | - |
| Prop | Type | Default | Description |
| ----------- | --------- | --------------- | ------------------------------------------------------------- |
| `isRunning` | `boolean` | `true` | Whether the timer is actively counting. Toggle to start/stop. |
| `status` | `string` | `"success"` | Visual status of the timer badge. |
| `startTime` | `number` | `1737936000000` | - |
## Import

141
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/tooltip.mdx
View File

@@ -33,69 +33,65 @@ The Tooltip component from Superset's UI library.
<StoryWithControls
component="Tooltip"
props={{
title: "Simple tooltip text",
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1
}}
title: 'Simple tooltip text',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
}}
controls={[
{
name: "title",
label: "Title",
type: "text",
description: "Text or content shown in the tooltip."
},
{
name: "mouseEnterDelay",
label: "Mouse Enter Delay",
type: "number",
description: "Delay in seconds before showing the tooltip on hover."
},
{
name: "mouseLeaveDelay",
label: "Mouse Leave Delay",
type: "number",
description: "Delay in seconds before hiding the tooltip after mouse leave."
},
{
name: "placement",
label: "Placement",
type: "select",
options: [
"bottom",
"bottomLeft",
"bottomRight",
"left",
"leftBottom",
"leftTop",
"right",
"rightBottom",
"rightTop",
"top",
"topLeft",
"topRight"
],
description: "Position of the tooltip relative to the trigger element."
},
{
name: "trigger",
label: "Trigger",
type: "select",
options: [
"hover",
"focus",
"click",
"contextMenu"
],
description: "How the tooltip is triggered."
},
{
name: "color",
label: "Color",
type: "color",
description: "Custom background color for the tooltip."
}
]}
sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Text or content shown in the tooltip.',
},
{
name: 'mouseEnterDelay',
label: 'Mouse Enter Delay',
type: 'number',
description: 'Delay in seconds before showing the tooltip on hover.',
},
{
name: 'mouseLeaveDelay',
label: 'Mouse Leave Delay',
type: 'number',
description:
'Delay in seconds before hiding the tooltip after mouse leave.',
},
{
name: 'placement',
label: 'Placement',
type: 'select',
options: [
'bottom',
'bottomLeft',
'bottomRight',
'left',
'leftBottom',
'leftTop',
'right',
'rightBottom',
'rightTop',
'top',
'topLeft',
'topRight',
],
description: 'Position of the tooltip relative to the trigger element.',
},
{
name: 'trigger',
label: 'Trigger',
type: 'select',
options: ['hover', 'focus', 'click', 'contextMenu'],
description: 'How the tooltip is triggered.',
},
{
name: 'color',
label: 'Color',
type: 'color',
description: 'Custom background color for the tooltip.',
},
]}
sampleChildren={[{ component: 'Button', props: { children: 'Hover me' } }]}
/>
## Try It
@@ -116,7 +112,16 @@ function Demo() {
```tsx live
function Placements() {
const placements = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
const placements = [
'top',
'bottom',
'left',
'right',
'topLeft',
'topRight',
'bottomLeft',
'bottomRight',
];
return (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
{placements.map(placement => (
@@ -151,11 +156,11 @@ function Triggers() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"Simple tooltip text"` | Text or content shown in the tooltip. |
| `mouseEnterDelay` | `number` | `0.1` | Delay in seconds before showing the tooltip on hover. |
| `mouseLeaveDelay` | `number` | `0.1` | Delay in seconds before hiding the tooltip after mouse leave. |
| Prop | Type | Default | Description |
| ----------------- | -------- | ----------------------- | ------------------------------------------------------------- |
| `title` | `string` | `"Simple tooltip text"` | Text or content shown in the tooltip. |
| `mouseEnterDelay` | `number` | `0.1` | Delay in seconds before showing the tooltip on hover. |
| `mouseLeaveDelay` | `number` | `0.1` | Delay in seconds before hiding the tooltip after mouse leave. |
## Import

245
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/tree.mdx
View File

@@ -33,119 +33,116 @@ The Tree component is used to display hierarchical data in a tree structure. It
<StoryWithControls
component="Tree"
props={{
checkable: false,
defaultExpandAll: false,
disabled: false,
draggable: false,
multiple: false,
selectable: true,
showIcon: false,
showLine: false,
treeData: [
{
title: "parent 1",
key: "0-0",
children: [
{
title: "parent 1-0",
key: "0-0-0",
children: [
{
title: "leaf",
key: "0-0-0-0"
},
{
title: "leaf",
key: "0-0-0-1"
},
{
title: "leaf",
key: "0-0-0-2"
}
]
},
{
title: "parent 1-1",
key: "0-0-1",
children: [
{
title: "leaf",
key: "0-0-1-0"
}
]
},
{
title: "parent 1-2",
key: "0-0-2",
children: [
{
title: "leaf",
key: "0-0-2-0"
},
{
title: "leaf",
key: "0-0-2-1"
}
]
}
]
}
],
defaultExpandedKeys: [
"0-0",
"0-0-0"
]
}}
checkable: false,
defaultExpandAll: false,
disabled: false,
draggable: false,
multiple: false,
selectable: true,
showIcon: false,
showLine: false,
treeData: [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
children: [
{
title: 'leaf',
key: '0-0-0-0',
},
{
title: 'leaf',
key: '0-0-0-1',
},
{
title: 'leaf',
key: '0-0-0-2',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [
{
title: 'leaf',
key: '0-0-1-0',
},
],
},
{
title: 'parent 1-2',
key: '0-0-2',
children: [
{
title: 'leaf',
key: '0-0-2-0',
},
{
title: 'leaf',
key: '0-0-2-1',
},
],
},
],
},
],
defaultExpandedKeys: ['0-0', '0-0-0'],
}}
controls={[
{
name: "checkable",
label: "Checkable",
type: "boolean",
description: "Add a Checkbox before the treeNodes"
},
{
name: "defaultExpandAll",
label: "Default Expand All",
type: "boolean",
description: "Whether to expand all treeNodes by default"
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether disabled the tree"
},
{
name: "draggable",
label: "Draggable",
type: "boolean",
description: "Specifies whether this Tree or the node is draggable"
},
{
name: "multiple",
label: "Multiple",
type: "boolean",
description: "Allows selecting multiple treeNodes"
},
{
name: "selectable",
label: "Selectable",
type: "boolean",
description: "Whether can be selected"
},
{
name: "showIcon",
label: "Show Icon",
type: "boolean",
description: "Controls whether to display the icon node"
},
{
name: "showLine",
label: "Show Line",
type: "boolean",
description: "Shows a connecting line"
}
]}
{
name: 'checkable',
label: 'Checkable',
type: 'boolean',
description: 'Add a Checkbox before the treeNodes',
},
{
name: 'defaultExpandAll',
label: 'Default Expand All',
type: 'boolean',
description: 'Whether to expand all treeNodes by default',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Whether disabled the tree',
},
{
name: 'draggable',
label: 'Draggable',
type: 'boolean',
description: 'Specifies whether this Tree or the node is draggable',
},
{
name: 'multiple',
label: 'Multiple',
type: 'boolean',
description: 'Allows selecting multiple treeNodes',
},
{
name: 'selectable',
label: 'Selectable',
type: 'boolean',
description: 'Whether can be selected',
},
{
name: 'showIcon',
label: 'Show Icon',
type: 'boolean',
description: 'Controls whether to display the icon node',
},
{
name: 'showLine',
label: 'Show Line',
type: 'boolean',
description: 'Shows a connecting line',
},
]}
/>
## Try It
@@ -241,18 +238,18 @@ function LinesAndIcons() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `checkable` | `boolean` | `false` | Add a Checkbox before the treeNodes |
| `defaultExpandAll` | `boolean` | `false` | Whether to expand all treeNodes by default |
| `disabled` | `boolean` | `false` | Whether disabled the tree |
| `draggable` | `boolean` | `false` | Specifies whether this Tree or the node is draggable |
| `multiple` | `boolean` | `false` | Allows selecting multiple treeNodes |
| `selectable` | `boolean` | `true` | Whether can be selected |
| `showIcon` | `boolean` | `false` | Controls whether to display the icon node |
| `showLine` | `boolean` | `false` | Shows a connecting line |
| `treeData` | `any` | `[{"title":"parent 1","key":"0-0","children":[{"title":"parent 1-0","key":"0-0-0","children":[{"title":"leaf","key":"0-0-0-0"},{"title":"leaf","key":"0-0-0-1"},{"title":"leaf","key":"0-0-0-2"}]},{"title":"parent 1-1","key":"0-0-1","children":[{"title":"leaf","key":"0-0-1-0"}]},{"title":"parent 1-2","key":"0-0-2","children":[{"title":"leaf","key":"0-0-2-0"},{"title":"leaf","key":"0-0-2-1"}]}]}]` | - |
| `defaultExpandedKeys` | `any` | `["0-0","0-0-0"]` | - |
| Prop | Type | Default | Description |
| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| `checkable` | `boolean` | `false` | Add a Checkbox before the treeNodes |
| `defaultExpandAll` | `boolean` | `false` | Whether to expand all treeNodes by default |
| `disabled` | `boolean` | `false` | Whether disabled the tree |
| `draggable` | `boolean` | `false` | Specifies whether this Tree or the node is draggable |
| `multiple` | `boolean` | `false` | Allows selecting multiple treeNodes |
| `selectable` | `boolean` | `true` | Whether can be selected |
| `showIcon` | `boolean` | `false` | Controls whether to display the icon node |
| `showLine` | `boolean` | `false` | Shows a connecting line |
| `treeData` | `any` | `[{"title":"parent 1","key":"0-0","children":[{"title":"parent 1-0","key":"0-0-0","children":[{"title":"leaf","key":"0-0-0-0"},{"title":"leaf","key":"0-0-0-1"},{"title":"leaf","key":"0-0-0-2"}]},{"title":"parent 1-1","key":"0-0-1","children":[{"title":"leaf","key":"0-0-1-0"}]},{"title":"parent 1-2","key":"0-0-2","children":[{"title":"leaf","key":"0-0-2-0"},{"title":"leaf","key":"0-0-2-1"}]}]}]` | - |
| `defaultExpandedKeys` | `any` | `["0-0","0-0-0"]` | - |
## Import

230
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/treeselect.mdx
View File

@@ -33,115 +33,107 @@ TreeSelect is a select component that allows users to select from a tree structu
<StoryWithControls
component="TreeSelect"
props={{
allowClear: true,
disabled: false,
multiple: false,
placeholder: "Please select",
showSearch: true,
size: "middle",
treeCheckable: false,
treeDefaultExpandAll: true,
treeLine: false,
variant: "outlined",
treeData: [
allowClear: true,
disabled: false,
multiple: false,
placeholder: 'Please select',
showSearch: true,
size: 'middle',
treeCheckable: false,
treeDefaultExpandAll: true,
treeLine: false,
variant: 'outlined',
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',
},
],
},
],
}}
controls={[
{
title: "Node1",
value: "0-0",
children: [
{
title: "Child Node1",
value: "0-0-0"
},
{
title: "Child Node2",
value: "0-0-1"
}
]
name: 'allowClear',
label: 'Allow Clear',
type: 'boolean',
description: 'Whether to allow clearing the selected value.',
},
{
title: "Node2",
value: "0-1",
children: [
{
title: "Child Node3",
value: "0-1-0"
}
]
}
]
}}
controls={[
{
name: "allowClear",
label: "Allow Clear",
type: "boolean",
description: "Whether to allow clearing the selected value."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the component is disabled."
},
{
name: "multiple",
label: "Multiple",
type: "boolean",
description: "Whether to allow multiple selections."
},
{
name: "placeholder",
label: "Placeholder",
type: "text",
description: "Placeholder text for the input field."
},
{
name: "showSearch",
label: "Show Search",
type: "boolean",
description: "Whether to show the search input."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"large",
"middle",
"small"
],
description: "Size of the component."
},
{
name: "treeCheckable",
label: "Tree Checkable",
type: "boolean",
description: "Whether to show checkable tree nodes."
},
{
name: "treeDefaultExpandAll",
label: "Tree Default Expand All",
type: "boolean",
description: "Whether to expand all tree nodes by default."
},
{
name: "treeLine",
label: "Tree Line",
type: "boolean",
description: "Whether to show tree lines."
},
{
name: "variant",
label: "Variant",
type: "select",
options: [
"outlined",
"borderless",
"filled"
],
description: "Variant of the component."
}
]}
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Whether the component is disabled.',
},
{
name: 'multiple',
label: 'Multiple',
type: 'boolean',
description: 'Whether to allow multiple selections.',
},
{
name: 'placeholder',
label: 'Placeholder',
type: 'text',
description: 'Placeholder text for the input field.',
},
{
name: 'showSearch',
label: 'Show Search',
type: 'boolean',
description: 'Whether to show the search input.',
},
{
name: 'size',
label: 'Size',
type: 'select',
options: ['large', 'middle', 'small'],
description: 'Size of the component.',
},
{
name: 'treeCheckable',
label: 'Tree Checkable',
type: 'boolean',
description: 'Whether to show checkable tree nodes.',
},
{
name: 'treeDefaultExpandAll',
label: 'Tree Default Expand All',
type: 'boolean',
description: 'Whether to expand all tree nodes by default.',
},
{
name: 'treeLine',
label: 'Tree Line',
type: 'boolean',
description: 'Whether to show tree lines.',
},
{
name: 'variant',
label: 'Variant',
type: 'select',
options: ['outlined', 'borderless', 'filled'],
description: 'Variant of the component.',
},
]}
/>
## Try It
@@ -258,19 +250,19 @@ function TreeLinesDemo() {
## 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. |
| `treeData` | `any` | `[{"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"}]}]` | - |
| 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. |
| `treeData` | `any` | `[{"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"}]}]` | - |
## Import

208
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/typography.mdx
View File

@@ -34,98 +34,93 @@ Typography is a component for displaying text with various styles and formats. I
component="Typography"
renderComponent="Typography.Text"
props={{
children: "Sample Text",
code: false,
copyable: false,
delete: false,
disabled: false,
ellipsis: false,
keyboard: false,
mark: false,
italic: false,
underline: false,
strong: false
}}
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: "copyable",
label: "Copyable",
type: "boolean",
description: "Whether the text is copyable."
},
{
name: "delete",
label: "Delete",
type: "boolean",
description: "Deleted line style."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Disabled content."
},
{
name: "ellipsis",
label: "Ellipsis",
type: "boolean",
description: "Display ellipsis when text overflows."
},
{
name: "keyboard",
label: "Keyboard",
type: "boolean",
description: "Keyboard style."
},
{
name: "mark",
label: "Mark",
type: "boolean",
description: "Marked/highlighted style."
},
{
name: "italic",
label: "Italic",
type: "boolean",
description: "Italic style."
},
{
name: "underline",
label: "Underline",
type: "boolean",
description: "Underlined style."
},
{
name: "strong",
label: "Strong",
type: "boolean",
description: "Bold style."
},
{
name: "type",
label: "Type",
type: "select",
options: [
"secondary",
"success",
"warning",
"danger"
],
description: "Text type for semantic coloring."
}
]}
{
name: 'children',
label: 'Children',
type: 'text',
description: 'The text content.',
},
{
name: 'code',
label: 'Code',
type: 'boolean',
description: 'Code style.',
},
{
name: 'copyable',
label: 'Copyable',
type: 'boolean',
description: 'Whether the text is copyable.',
},
{
name: 'delete',
label: 'Delete',
type: 'boolean',
description: 'Deleted line style.',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Disabled content.',
},
{
name: 'ellipsis',
label: 'Ellipsis',
type: 'boolean',
description: 'Display ellipsis when text overflows.',
},
{
name: 'keyboard',
label: 'Keyboard',
type: 'boolean',
description: 'Keyboard style.',
},
{
name: 'mark',
label: 'Mark',
type: 'boolean',
description: 'Marked/highlighted style.',
},
{
name: 'italic',
label: 'Italic',
type: 'boolean',
description: 'Italic style.',
},
{
name: 'underline',
label: 'Underline',
type: 'boolean',
description: 'Underlined style.',
},
{
name: 'strong',
label: 'Strong',
type: 'boolean',
description: 'Bold style.',
},
{
name: 'type',
label: 'Type',
type: 'select',
options: ['secondary', 'success', 'warning', 'danger'],
description: 'Text type for semantic coloring.',
},
]}
/>
## Try It
@@ -172,8 +167,9 @@ function AllSubcomponents() {
<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,
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>
@@ -208,19 +204,19 @@ function TextStyles() {
## 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. |
| 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. |
## Import

58
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/unsavedchangesmodal.mdx
View File

@@ -33,23 +33,23 @@ The UnsavedChangesModal component from Superset's UI library.
<StoryWithControls
component="UnsavedChangesModal"
props={{
showModal: false,
title: "Unsaved Changes"
}}
showModal: false,
title: 'Unsaved Changes',
}}
controls={[
{
name: "showModal",
label: "Show Modal",
type: "boolean",
description: "Whether the modal is visible."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title text displayed in the modal header."
}
]}
{
name: 'showModal',
label: 'Show Modal',
type: 'boolean',
description: 'Whether the modal is visible.',
},
{
name: 'title',
label: 'Title',
type: 'text',
description: 'Title text displayed in the modal header.',
},
]}
triggerProp="showModal"
onHideProp="onHide,handleSave,onConfirmNavigation"
/>
@@ -69,8 +69,14 @@ function Demo() {
<UnsavedChangesModal
showModal={show}
onHide={() => setShow(false)}
handleSave={() => { alert('Saved!'); setShow(false); }}
onConfirmNavigation={() => { alert('Discarded changes'); setShow(false); }}
handleSave={() => {
alert('Saved!');
setShow(false);
}}
onConfirmNavigation={() => {
alert('Discarded changes');
setShow(false);
}}
title="Unsaved Changes"
>
If you don&apos;t save, changes will be lost.
@@ -87,9 +93,7 @@ function CustomTitle() {
const [show, setShow] = React.useState(false);
return (
<div>
<Button onClick={() => setShow(true)}>
Close Without Saving
</Button>
<Button onClick={() => setShow(true)}>Close Without Saving</Button>
<UnsavedChangesModal
showModal={show}
onHide={() => setShow(false)}
@@ -97,8 +101,8 @@ function CustomTitle() {
onConfirmNavigation={() => setShow(false)}
title="You have unsaved dashboard changes"
>
Your dashboard layout and filter changes have not been saved.
Do you want to save before leaving?
Your dashboard layout and filter changes have not been saved. Do you
want to save before leaving?
</UnsavedChangesModal>
</div>
);
@@ -107,10 +111,10 @@ function CustomTitle() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `showModal` | `boolean` | `false` | Whether the modal is visible. |
| `title` | `string` | `"Unsaved Changes"` | Title text displayed in the modal header. |
| Prop | Type | Default | Description |
| ----------- | --------- | ------------------- | ----------------------------------------- |
| `showModal` | `boolean` | `false` | Whether the modal is visible. |
| `title` | `string` | `"Unsaved Changes"` | Title text displayed in the modal header. |
## Import

89
docs/developer_docs_versioned_docs/version-6.1.0/components/ui/upload.mdx
View File

@@ -33,44 +33,41 @@ Upload component for file selection and uploading. Supports drag-and-drop, multi
<StoryWithControls
component="Upload"
props={{
multiple: false,
disabled: false,
listType: "text",
showUploadList: true
}}
multiple: false,
disabled: false,
listType: 'text',
showUploadList: true,
}}
controls={[
{
name: "multiple",
label: "Multiple",
type: "boolean",
description: "Support multiple file selection."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Disable the upload button."
},
{
name: "listType",
label: "List Type",
type: "select",
options: [
"text",
"picture",
"picture-card",
"picture-circle"
],
description: "Built-in style for the file list display."
},
{
name: "showUploadList",
label: "Show Upload List",
type: "boolean",
description: "Whether to show the upload file list."
}
]}
sampleChildren={[{"component":"Button","props":{"children":"Click to Upload"}}]}
{
name: 'multiple',
label: 'Multiple',
type: 'boolean',
description: 'Support multiple file selection.',
},
{
name: 'disabled',
label: 'Disabled',
type: 'boolean',
description: 'Disable the upload button.',
},
{
name: 'listType',
label: 'List Type',
type: 'select',
options: ['text', 'picture', 'picture-card', 'picture-circle'],
description: 'Built-in style for the file list display.',
},
{
name: 'showUploadList',
label: 'Show Upload List',
type: 'boolean',
description: 'Whether to show the upload file list.',
},
]}
sampleChildren={[
{ component: 'Button', props: { children: 'Click to Upload' } },
]}
/>
## Try It
@@ -91,11 +88,7 @@ function Demo() {
```tsx live
function PictureCard() {
return (
<Upload listType="picture-card">
+ Upload
</Upload>
);
return <Upload listType="picture-card">+ Upload</Upload>;
}
```
@@ -115,12 +108,12 @@ function DragDrop() {
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `multiple` | `boolean` | `false` | Support multiple file selection. |
| `disabled` | `boolean` | `false` | Disable the upload button. |
| `listType` | `string` | `"text"` | Built-in style for the file list display. |
| `showUploadList` | `boolean` | `true` | Whether to show the upload file list. |
| Prop | Type | Default | Description |
| ---------------- | --------- | -------- | ----------------------------------------- |
| `multiple` | `boolean` | `false` | Support multiple file selection. |
| `disabled` | `boolean` | `false` | Disable the upload button. |
| `listType` | `string` | `"text"` | Built-in style for the file list display. |
| `showUploadList` | `boolean` | `true` | Whether to show the upload file list. |
## Import