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

feat(build): migrate from Prettier to Oxfmt for docs

Browse Source 
Signed-off-by: hainenber <dotronghai96@gmail.com>
This commit is contained in:
hainenber
2026-07-28 21:38:39 +07:00
parent af9729a861
commit 1bbc63099b
2163 changed files with 89307 additions and 32009 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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