Skip to content

Commit e02eb80

Browse files
n-peugnetn-peugnet
committed
feat! DataTable v11 styles
1 parent b6df277 commit e02eb80

File tree

13 files changed

+171
-97
lines changed

13 files changed

+171
-97
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 41 additions & 41 deletions
Large diffs are not rendered by default.

‎docs/src/COMPONENT_API.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2451,7 +2451,8 @@
24512451
"name": "size",
24522452
"kind": "let",
24532453
"description": "Set the size of the data table",
2454-
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
2454+
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
2455+
"value": "\"lg\"",
24552456
"isFunction": false,
24562457
"isFunctionDeclaration": false,
24572458
"isRequired": false,
@@ -2844,7 +2845,8 @@
28442845
"name": "size",
28452846
"kind": "let",
28462847
"description": "Set the size of the data table",
2847-
"type": "\"compact\" | \"short\" | \"tall\"",
2848+
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
2849+
"value": "\"lg\"",
28482850
"isFunction": false,
28492851
"isFunctionDeclaration": false,
28502852
"isRequired": false,
@@ -12069,7 +12071,8 @@
1206912071
"name": "size",
1207012072
"kind": "let",
1207112073
"description": "Set the size of the table",
12072-
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
12074+
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
12075+
"value": "\"lg\"",
1207312076
"isFunction": false,
1207412077
"isFunctionDeclaration": false,
1207512078
"isRequired": false,

‎docs/src/pages/components/DataTable.svx‎

Lines changed: 83 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ A maximum height will applied to the datatable to force a scrollbar.
432432

433433
## With toolbar (small size)
434434

435-
<DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
435+
<DataTable size="sm" title="Load balancers" description="Your organization's active load balancers."
436436
headers="{[
437437
{ key: "name", value: "Name" },
438438
{ key: "protocol", value: "Protocol" },
@@ -570,9 +570,64 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
570570
]}"
571571
/>
572572

573-
## Tall rows
573+
## Extra large rows
574574

575-
<DataTable size="tall"
575+
<DataTable size="xl"
576+
headers="{[
577+
{ key: "name", value: "Name" },
578+
{ key: "protocol", value: "Protocol" },
579+
{ key: "port", value: "Port" },
580+
{ key: "rule", value: "Rule" }
581+
]}"
582+
rows="{[
583+
{
584+
id: "a",
585+
name: "Load Balancer 3",
586+
protocol: "HTTP",
587+
port: 3000,
588+
rule: "Round robin"
589+
},
590+
{
591+
id: "b",
592+
name: "Load Balancer 1",
593+
protocol: "HTTP",
594+
port: 443,
595+
rule: "Round robin"
596+
},
597+
{
598+
id: "c",
599+
name: "Load Balancer 2",
600+
protocol: "HTTP",
601+
port: 80,
602+
rule: "DNS delegation"
603+
},
604+
{
605+
id: "d",
606+
name: "Load Balancer 6",
607+
protocol: "HTTP",
608+
port: 3000,
609+
rule: "Round robin"
610+
},
611+
{
612+
id: "e",
613+
name: "Load Balancer 4",
614+
protocol: "HTTP",
615+
port: 443,
616+
rule: "Round robin"
617+
},
618+
{
619+
id: "f",
620+
name: "Load Balancer 5",
621+
protocol: "HTTP",
622+
port: 80,
623+
rule: "DNS delegation"
624+
},
625+
]}"
626+
/>
627+
628+
## Large rows (default)
629+
630+
<DataTable size="lg"
576631
headers="{[
577632
{ key: "name", value: "Name" },
578633
{ key: "protocol", value: "Protocol" },
@@ -627,7 +682,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
627682

628683
## Medium rows
629684

630-
<DataTable size="medium"
685+
<DataTable size="md"
631686
headers="{[
632687
{ key: "name", value: "Name" },
633688
{ key: "protocol", value: "Protocol" },
@@ -680,9 +735,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
680735
]}"
681736
/>
682737

683-
## Short rows
738+
## Small rows
684739

685-
<DataTable size="short"
740+
<DataTable size="sm"
686741
headers="{[
687742
{ key: "name", value: "Name" },
688743
{ key: "protocol", value: "Protocol" },
@@ -735,9 +790,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
735790
]}"
736791
/>
737792

738-
## Compact rows
793+
## Extra small rows
739794

740-
<DataTable size="compact"
795+
<DataTable size="xs"
741796
headers="{[
742797
{ key: "name", value: "Name" },
743798
{ key: "protocol", value: "Protocol" },
@@ -1138,9 +1193,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
11381193

11391194
<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
11401195

1141-
## Expandable (compact size)
1196+
## Expandable (extra small size)
11421197

1143-
<DataTable size="compact" expandable
1198+
<DataTable size="xs" expandable
11441199
headers="{[
11451200
{ key: "name", value: "Name" },
11461201
{ key: "protocol", value: "Protocol" },
@@ -1197,9 +1252,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
11971252
</svelte:fragment>
11981253
</DataTable>
11991254

1200-
## Expandable (short size)
1255+
## Expandable (small size)
12011256

1202-
<DataTable size="short" expandable
1257+
<DataTable size="sm" expandable
12031258
headers="{[
12041259
{ key: "name", value: "Name" },
12051260
{ key: "protocol", value: "Protocol" },
@@ -1256,9 +1311,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
12561311
</svelte:fragment>
12571312
</DataTable>
12581313

1259-
## Expandable (tall size)
1314+
## Expandable (extra tall size)
12601315

1261-
<DataTable size="tall" expandable
1316+
<DataTable size="xl" expandable
12621317
headers="{[
12631318
{ key: "name", value: "Name" },
12641319
{ key: "protocol", value: "Protocol" },
@@ -1406,14 +1461,22 @@ Pass an object with `"empty"` set to `true` to render an empty table header colu
14061461

14071462
<DataTableSkeleton showHeader={false} showToolbar={false} />
14081463

1409-
## Skeleton (tall size)
1464+
## Skeleton (extra large size)
1465+
1466+
<DataTableSkeleton showHeader={false} showToolbar={false} size="xl" />
1467+
1468+
## Skeleton (large size)
1469+
1470+
<DataTableSkeleton showHeader={false} showToolbar={false} size="lg" />
1471+
1472+
## Skeleton (medium size)
14101473

1411-
<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
1474+
<DataTableSkeleton showHeader={false} showToolbar={false} size="md" />
14121475

1413-
## Skeleton (short size)
1476+
## Skeleton (small size)
14141477

1415-
<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
1478+
<DataTableSkeleton showHeader={false} showToolbar={false} size="sm" />
14161479

1417-
## Skeleton (compact size)
1480+
## Skeleton (extra small size)
14181481

1419-
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
1482+
<DataTableSkeleton showHeader={false} showToolbar={false} size="xs" />

‎src/DataTable/DataTable.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@
3939
4040
/**
4141
* Set the size of the data table
42-
* @type {"compact" | "short" | "medium" | "tall"}
42+
* @type {"xs" | "sm" | "md" | "lg" | "xl"}
4343
*/
44-
export let size = undefined;
44+
export let size = "lg";
4545
4646
/** Specify the title of the data table */
4747
export let title = "";

‎src/DataTable/DataTableSkeleton.svelte‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
1313
/**
1414
* Set the size of the data table
15-
* @type {"compact" | "short" | "tall"}
15+
* @type {"xs" | "sm" | "md" | "lg" | "xl"}
1616
*/
17-
export let size = undefined;
17+
export let size = "lg";
1818
1919
/** Set to `true` to apply zebra styles to the datatable rows */
2020
export let zebra = false;
@@ -68,9 +68,11 @@
6868
<table
6969
class:bx--skeleton="{true}"
7070
class:bx--data-table="{true}"
71-
class:bx--data-table--compact="{size === 'compact'}"
72-
class:bx--data-table--short="{size === 'short'}"
73-
class:bx--data-table--tall="{size === 'tall'}"
71+
class:bx--data-table--xs="{size === 'xs'}"
72+
class:bx--data-table--sm="{size === 'sm'}"
73+
class:bx--data-table--md="{size === 'md'}"
74+
class:bx--data-table--lg="{size === 'lg'}"
75+
class:bx--data-table--xl="{size === 'xl'}"
7476
class:bx--data-table--zebra="{zebra}"
7577
on:click
7678
on:mouseover

‎src/DataTable/Table.svelte‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script>
22
/**
33
* Set the size of the table
4-
* @type {"compact" | "short" | "medium" | "tall"}
4+
* @type {"xs" | "sm" | "md" | "lg" | "xl"}
55
*/
6-
export let size = undefined;
6+
export let size = "lg";
77
88
/** Set to `true` to use zebra styles */
99
export let zebra = false;
@@ -28,10 +28,11 @@
2828
<section class:bx--data-table_inner-container="{true}" {...$$restProps}>
2929
<table
3030
class:bx--data-table="{true}"
31-
class:bx--data-table--compact="{size === 'compact'}"
32-
class:bx--data-table--short="{size === 'short'}"
33-
class:bx--data-table--tall="{size === 'tall'}"
34-
class:bx--data-table--md="{size === 'medium'}"
31+
class:bx--data-table--xs="{size === 'xs'}"
32+
class:bx--data-table--sm="{size === 'sm'}"
33+
class:bx--data-table--md="{size === 'md'}"
34+
class:bx--data-table--lg="{size === 'lg'}"
35+
class:bx--data-table--xl="{size === 'xl'}"
3536
class:bx--data-table--sort="{sortable}"
3637
class:bx--data-table--zebra="{zebra}"
3738
class:bx--data-table--static="{useStaticWidth}"
@@ -44,10 +45,11 @@
4445
{:else}
4546
<table
4647
class:bx--data-table="{true}"
47-
class:bx--data-table--compact="{size === 'compact'}"
48-
class:bx--data-table--short="{size === 'short'}"
49-
class:bx--data-table--tall="{size === 'tall'}"
50-
class:bx--data-table--md="{size === 'medium'}"
48+
class:bx--data-table--xs="{size === 'xs'}"
49+
class:bx--data-table--sm="{size === 'sm'}"
50+
class:bx--data-table--md="{size === 'md'}"
51+
class:bx--data-table--lg="{size === 'lg'}"
52+
class:bx--data-table--xl="{size === 'xl'}"
5153
class:bx--data-table--sort="{sortable}"
5254
class:bx--data-table--zebra="{zebra}"
5355
class:bx--data-table--static="{useStaticWidth}"

‎src/DataTable/Toolbar.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@
2525
bind:this="{ref}"
2626
aria-label="data table toolbar"
2727
class:bx--table-toolbar="{true}"
28-
class:bx--table-toolbar--small="{size === 'sm'}"
29-
class:bx--table-toolbar--normal="{size === 'default'}"
28+
class:bx--table-toolbar--sm="{size === 'sm'}"
3029
style:z-index="{1}"
3130
{...$$restProps}
3231
>

‎src/DataTable/ToolbarMenu.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
bind:menuRef
1818
icon="{Settings}"
1919
{...$$restProps}
20-
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
20+
class="bx--toolbar-action bx--overflow-menu bx--btn bx--btn--primary {$$restProps.class}"
2121
flipped
2222
>
2323
<slot />

‎src/DataTable/ToolbarSearch.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@
9999
disabled="{disabled}"
100100
{...$$restProps}
101101
searchClass="{classes} {$$restProps.class}"
102+
size="lg"
102103
bind:ref
103104
bind:value
104105
on:clear

‎tests/DataTable.test.svelte‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
</DataTable>
138138

139139
<DataTable
140-
size="short"
140+
size="sm"
141141
title="Load balancers"
142142
description="Your organization's active load balancers."
143143
headers="{headers}"
@@ -160,11 +160,13 @@
160160

161161
<DataTable zebra headers="{headers}" rows="{rows}" />
162162

163-
<DataTable size="tall" headers="{headers}" rows="{rows}" />
163+
<DataTable size="xl" headers="{headers}" rows="{rows}" />
164164

165-
<DataTable size="short" headers="{headers}" rows="{rows}" />
165+
<DataTable size="md" headers="{headers}" rows="{rows}" />
166166

167-
<DataTable size="compact" headers="{headers}" rows="{rows}" />
167+
<DataTable size="sm" headers="{headers}" rows="{rows}" />
168+
169+
<DataTable size="xs" headers="{headers}" rows="{rows}" />
168170

169171
<DataTable sortable headers="{headers}" rows="{rows}" />
170172

@@ -279,8 +281,10 @@
279281

280282
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
281283

282-
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
284+
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xl" />
285+
286+
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="md" />
283287

284-
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
288+
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="sm" />
285289

286-
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
290+
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xs" />

0 commit comments

Comments
 (0)