From e02eb80e539e19d4f72302e93fdab59a12446b59 Mon Sep 17 00:00:00 2001 From: Nicolas Peugnet Date: Mon, 12 Aug 2024 12:11:05 +0200 Subject: [PATCH] feat! DataTable v11 styles --- COMPONENT_INDEX.md | 82 +++++++------- docs/src/COMPONENT_API.json | 9 +- docs/src/pages/components/DataTable.svx | 103 ++++++++++++++---- src/DataTable/DataTable.svelte | 4 +- src/DataTable/DataTableSkeleton.svelte | 12 +- src/DataTable/Table.svelte | 22 ++-- src/DataTable/Toolbar.svelte | 3 +- src/DataTable/ToolbarMenu.svelte | 2 +- src/DataTable/ToolbarSearch.svelte | 1 + tests/DataTable.test.svelte | 18 +-- types/DataTable/DataTable.svelte.d.ts | 4 +- types/DataTable/DataTableSkeleton.svelte.d.ts | 4 +- types/DataTable/Table.svelte.d.ts | 4 +- 13 files changed, 171 insertions(+), 97 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 75a34e13..1a3a1648 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1000,30 +1000,30 @@ export interface DataTableCell { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected | -| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded | -| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | -| sortDirection | No | let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction | -| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by | -| headers | No | let | No | ReadonlyArray | [] | Specify the data table headers | -| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table | -| title | No | let | No | string | "" | Specify the title of the data table | -| description | No | let | No | string | "" | Specify the description of the data table | -| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | -| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | -| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion | -| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable | -| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant | -| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection | -| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable | -| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | -| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | -| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page | -| page | No | let | No | number | 0 | Set to `number` to set current page | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------- | +| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected | +| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded | +| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | +| sortDirection | No | let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction | +| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by | +| headers | No | let | No | ReadonlyArray | [] | Specify the data table headers | +| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| size | No | let | No | "xs" | "sm" | "md" | "lg" | "xl" | "lg" | Set the size of the data table | +| title | No | let | No | string | "" | Specify the title of the data table | +| description | No | let | No | string | "" | Specify the description of the data table | +| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | +| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | +| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion | +| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable | +| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant | +| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection | +| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable | +| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | +| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | +| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page | +| page | No | let | No | number | 0 | Set to `number` to set current page | ### Slots @@ -1055,15 +1055,15 @@ export interface DataTableCell { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- | -| columns | No | let | No | number | 5 | Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array | -| rows | No | let | No | number | 5 | Specify the number of rows | -| size | No | let | No | "compact" | "short" | "tall" | undefined | Set the size of the data table | -| zebra | No | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows | -| showHeader | No | let | No | boolean | true | Set to `false` to hide the header | -| headers | No | let | No | ReadonlyArray> | [] | Set the column headers
Supersedes `columns` if value is a non-empty array | -| showToolbar | No | let | No | boolean | true | Set to `false` to hide the toolbar | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- | +| columns | No | let | No | number | 5 | Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array | +| rows | No | let | No | number | 5 | Specify the number of rows | +| size | No | let | No | "xs" | "sm" | "md" | "lg" | "xl" | "lg" | Set the size of the data table | +| zebra | No | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows | +| showHeader | No | let | No | boolean | true | Set to `false` to hide the header | +| headers | No | let | No | ReadonlyArray> | [] | Set the column headers
Supersedes `columns` if value is a non-empty array | +| showToolbar | No | let | No | boolean | true | Set to `false` to hide the toolbar | ### Slots @@ -3892,14 +3892,14 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- | -| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | -| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | -| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | -| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | -| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | -| tableStyle | No | let | No | string | undefined | Set the style attribute on the `table` element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ---------------------- | ---------------------------------------------- | +| size | No | let | No | "xs" | "sm" | "md" | "lg" | "xl" | "lg" | Set the size of the table | +| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | +| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | +| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | +| tableStyle | No | let | No | string | undefined | Set the style attribute on the `table` element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 00e3ef22..1f52202d 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2451,7 +2451,8 @@ "name": "size", "kind": "let", "description": "Set the size of the data table", - "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"", + "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", + "value": "\"lg\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -2844,7 +2845,8 @@ "name": "size", "kind": "let", "description": "Set the size of the data table", - "type": "\"compact\" | \"short\" | \"tall\"", + "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", + "value": "\"lg\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12069,7 +12071,8 @@ "name": "size", "kind": "let", "description": "Set the size of the table", - "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"", + "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", + "value": "\"lg\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 29ef9c68..043ad4e9 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -432,7 +432,7 @@ A maximum height will applied to the datatable to force a scrollbar. ## With toolbar (small size) - -## Tall rows +## Extra large rows - + +## Large rows (default) + + -## Short rows +## Small rows - -## Compact rows +## Extra small rows - -## Expandable (compact size) +## Expandable (extra small size) - -## Expandable (short size) +## Expandable (small size) - -## Expandable (tall size) +## Expandable (extra tall size) - -## Skeleton (tall size) +## Skeleton (extra large size) - + -## Skeleton (short size) +## Skeleton (large size) - + -## Skeleton (compact size) +## Skeleton (medium size) - + + +## Skeleton (small size) + + + +## Skeleton (extra small size) + + diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index f68f979f..3fe0c22e 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -39,9 +39,9 @@ /** * Set the size of the data table - * @type {"compact" | "short" | "medium" | "tall"} + * @type {"xs" | "sm" | "md" | "lg" | "xl"} */ - export let size = undefined; + export let size = "lg"; /** Specify the title of the data table */ export let title = ""; diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte index 9d759518..5930a945 100644 --- a/src/DataTable/DataTableSkeleton.svelte +++ b/src/DataTable/DataTableSkeleton.svelte @@ -12,9 +12,9 @@ /** * Set the size of the data table - * @type {"compact" | "short" | "tall"} + * @type {"xs" | "sm" | "md" | "lg" | "xl"} */ - export let size = undefined; + export let size = "lg"; /** Set to `true` to apply zebra styles to the datatable rows */ export let zebra = false; @@ -68,9 +68,11 @@ /** * Set the size of the table - * @type {"compact" | "short" | "medium" | "tall"} + * @type {"xs" | "sm" | "md" | "lg" | "xl"} */ - export let size = undefined; + export let size = "lg"; /** Set to `true` to use zebra styles */ export let zebra = false; @@ -28,10 +28,11 @@
diff --git a/src/DataTable/ToolbarMenu.svelte b/src/DataTable/ToolbarMenu.svelte index a769498c..1e198287 100644 --- a/src/DataTable/ToolbarMenu.svelte +++ b/src/DataTable/ToolbarMenu.svelte @@ -17,7 +17,7 @@ bind:menuRef icon="{Settings}" {...$$restProps} - class="bx--toolbar-action bx--overflow-menu {$$restProps.class}" + class="bx--toolbar-action bx--overflow-menu bx--btn bx--btn--primary {$$restProps.class}" flipped > diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte index 94a88969..bc3dcac6 100644 --- a/src/DataTable/ToolbarSearch.svelte +++ b/src/DataTable/ToolbarSearch.svelte @@ -99,6 +99,7 @@ disabled="{disabled}" {...$$restProps} searchClass="{classes} {$$restProps.class}" + size="lg" bind:ref bind:value on:clear diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte index 45f6a07c..6799fb64 100644 --- a/tests/DataTable.test.svelte +++ b/tests/DataTable.test.svelte @@ -137,7 +137,7 @@ - + - + - + + + @@ -279,8 +281,10 @@ - + - + - + + + diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts index e0dcf172..1e6a67a3 100644 --- a/types/DataTable/DataTable.svelte.d.ts +++ b/types/DataTable/DataTable.svelte.d.ts @@ -58,9 +58,9 @@ export interface DataTableProps extends RestProps { /** * Set the size of the data table - * @default undefined + * @default "lg" */ - size?: "compact" | "short" | "medium" | "tall"; + size?: "xs" | "sm" | "md" | "lg" | "xl"; /** * Specify the title of the data table diff --git a/types/DataTable/DataTableSkeleton.svelte.d.ts b/types/DataTable/DataTableSkeleton.svelte.d.ts index 4d7d507b..b77061b3 100644 --- a/types/DataTable/DataTableSkeleton.svelte.d.ts +++ b/types/DataTable/DataTableSkeleton.svelte.d.ts @@ -21,9 +21,9 @@ export interface DataTableSkeletonProps extends DataTableHeader, RestProps { /** * Set the size of the data table - * @default undefined + * @default "lg" */ - size?: "compact" | "short" | "tall"; + size?: "xs" | "sm" | "md" | "lg" | "xl"; /** * Set to `true` to apply zebra styles to the datatable rows diff --git a/types/DataTable/Table.svelte.d.ts b/types/DataTable/Table.svelte.d.ts index 7312318f..e355ba4e 100644 --- a/types/DataTable/Table.svelte.d.ts +++ b/types/DataTable/Table.svelte.d.ts @@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["section"]; export interface TableProps extends RestProps { /** * Set the size of the table - * @default undefined + * @default "lg" */ - size?: "compact" | "short" | "medium" | "tall"; + size?: "xs" | "sm" | "md" | "lg" | "xl"; /** * Set to `true` to use zebra styles