From 7cc2ecc8be68aaea103ae20f8cf52664d070cc6b Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Wed, 30 Aug 2023 08:41:53 +0200 Subject: [PATCH 01/20] =?UTF-8?q?feat:=20=E2=9C=A8=20Initialize=20sd-table?= =?UTF-8?q?-cell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/src/solid-styles.css | 1 + .../src/styles/table-cell/table-cell.css | 23 +++++++++++ .../table-cell/table-cell.declaration.ts | 30 +++++++++++++++ .../styles/table-cell/table-cell.stories.ts | 38 +++++++++++++++++++ 4 files changed, 92 insertions(+) create mode 100644 packages/components/src/styles/table-cell/table-cell.css create mode 100644 packages/components/src/styles/table-cell/table-cell.declaration.ts create mode 100644 packages/components/src/styles/table-cell/table-cell.stories.ts diff --git a/packages/components/src/solid-styles.css b/packages/components/src/solid-styles.css index 0f4831a03f..60d520eadf 100644 --- a/packages/components/src/solid-styles.css +++ b/packages/components/src/solid-styles.css @@ -3,3 +3,4 @@ @import './styles/leadtext/leadtext.css'; @import './styles/paragraph/paragraph.css'; @import './styles/mark/mark.css'; +@import './styles/table-cell/table-cell.css'; diff --git a/packages/components/src/styles/table-cell/table-cell.css b/packages/components/src/styles/table-cell/table-cell.css new file mode 100644 index 0000000000..aacd27481c --- /dev/null +++ b/packages/components/src/styles/table-cell/table-cell.css @@ -0,0 +1,23 @@ +.sd-table-cell { + @apply border-solid border-neutral-400 border-y-[1px] border-x-0 text-sm text-left p-4; + + &--divider { + @apply border-r-[1px]; + } + + &--transparent { + @apply bg-transparent; + } + + &--white { + @apply bg-white; + } + + &--primary-100 { + @apply bg-primary-100; + } + + &--neutral-100 { + @apply bg-neutral-100; + } +} diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts new file mode 100644 index 0000000000..34aec7759c --- /dev/null +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -0,0 +1,30 @@ +import type { Style } from '../../declaration'; + +export default { + styleName: 'sd-table-cell', + summary: 'A ...', + status: 'experimental', + since: '1.7', + attributes: [ + { + name: 'sd-table-cell--divider', + description: 'Displays a divider to the right.' + }, + { + name: 'sd-table-cell--transparent', + description: 'Displays a divider to the right.' + }, + { + name: 'sd-table-cell--white', + description: 'Displays a divider to the right.' + }, + { + name: 'sd-table-cell--primary-100', + description: 'Displays a divider to the right.' + }, + { + name: 'sd-table-cell--neutral-100', + description: 'Displays a divider to the right.' + } + ] +} satisfies Style; diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts new file mode 100644 index 0000000000..6174f58caf --- /dev/null +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -0,0 +1,38 @@ +import '../../solid-components'; + +import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper'; + +const { argTypes, parameters } = storybookDefaults('sd-table-cell'); +const { overrideArgs } = storybookHelpers('sd-table-cell'); +const { generateTemplate } = storybookTemplate('sd-table-cell'); + +/** + * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
+ *
+ * Sizes + *
  • lg is the default paragraph size.
    • + *
  • sm can be used as an alternative for tighter spaces.
    • + */ + +export default { + title: 'Styles/sd-table-cell', + component: 'sd-table-cell', + parameters: { + ...parameters + }, + args: overrideArgs({ type: 'slot', name: 'default', value: 'Lorem Ipsum' }), + argTypes +}; + +/** + * Default: This shows sd-paragraph in its default state. + */ + +export const Default = { + render: (args: any) => { + return generateTemplate({ + options: { templateContent: '%SLOT%' }, + args + }); + } +}; From b9e190f46efb925a25a2d8008549ac9cd8894cb4 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Fri, 1 Sep 2023 11:00:28 +0200 Subject: [PATCH 02/20] Add samples draft --- packages/components/.storybook/preview.js | 8 + .../src/styles/table-cell/table-cell.css | 19 ++ .../styles/table-cell/table-cell.stories.ts | 189 +++++++++++++++++- 3 files changed, 215 insertions(+), 1 deletion(-) diff --git a/packages/components/.storybook/preview.js b/packages/components/.storybook/preview.js index a21fd942c6..ae822efb51 100644 --- a/packages/components/.storybook/preview.js +++ b/packages/components/.storybook/preview.js @@ -159,6 +159,14 @@ const mocks = { '', '/icons/system/colored/arrow-right.svg': '', + '/icons/system/colored/sort-down.svg': + '', + '/icons/system/colored/sort-down-filled.svg': + '', + '/icons/system/colored/sort-up.svg': + '', + '/icons/system/colored/sort-up-filled.svg': + '', /** * Content icons diff --git a/packages/components/src/styles/table-cell/table-cell.css b/packages/components/src/styles/table-cell/table-cell.css index aacd27481c..6d947163a5 100644 --- a/packages/components/src/styles/table-cell/table-cell.css +++ b/packages/components/src/styles/table-cell/table-cell.css @@ -1,3 +1,18 @@ +/* +* Remove inherited styles from table before applying our styles. +* Source: https://meyerweb.com/eric/tools/css/reset/ +*/ +.sd-table { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + border-collapse: collapse; + border-spacing: 0; +} + .sd-table-cell { @apply border-solid border-neutral-400 border-y-[1px] border-x-0 text-sm text-left p-4; @@ -21,3 +36,7 @@ @apply bg-neutral-100; } } + +.sd-table-cell * { + @apply align-middle; +} diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index 6174f58caf..a3907772d3 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -1,11 +1,41 @@ import '../../solid-components'; - +import { html } from 'lit-html'; import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper'; const { argTypes, parameters } = storybookDefaults('sd-table-cell'); const { overrideArgs } = storybookHelpers('sd-table-cell'); const { generateTemplate } = storybookTemplate('sd-table-cell'); +const tableDataOld = [ + { + id: 1, + isin: '', + name: 'UniGlobal', + kvg: 'Union Investment Privatfonds GmbH', + price: '90,46 EUR', + priceDate: '31.08.2023', + changeLastDay: '+ 0.27 %' + }, + { + id: 2, + isin: '', + name: 'UniGlobal', + kvg: 'Union Investment Privatfonds GmbH', + price: '90,46 EUR', + priceDate: '31.08.2023', + changeLastDay: '+ 0.27 %' + }, + { + id: 3, + isin: '', + name: 'UniGlobal', + kvg: 'Union Investment Privatfonds GmbH', + price: '90,46 EUR', + priceDate: '31.08.2023', + changeLastDay: '+ 0.27 %' + } +]; + /** * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
    *
    @@ -36,3 +66,160 @@ export const Default = { }); } }; + +/** + * Examples: This shows how sd-table-cell looks in different contexts. + */ + +export const Examples = { + render: (args: any) => { + const columns = 5; + const rows = 5; + const headerData = Array.from({ length: columns }, () => 'Header'); + const tableData = Array.from({ length: rows }, () => Array.from({ length: columns }, () => 'Content')); + return html` + + + + + + + ${(() => { + return html` + ${headerData.map((cellData, i) => { + if (i + 1 === headerData.length) { + return html``; + } + return html``; + })} + `; + })()} + + + ${tableData.map(rowData => { + return html` + ${rowData.map((cellData, i) => { + if (i + 1 === rowData.length) { + return html``; + } + return html``; + })} + `; + })} + +
    Simple Table With Vertical Lines
    ${cellData} + ${cellData} +
    ${cellData} + ${cellData} +
    + + + + + + + ${(() => { + return html` + ${headerData.map((cellData, i) => { + if (i + 1 === headerData.length) { + return html``; + } + if (i === 0) { + return html``; + } + return html``; + })} + `; + })()} + + + ${tableData.map(rowData => { + return html` + ${rowData.map((cellData, i) => { + if (i + 1 === rowData.length) { + return html``; + } + return html``; + })} + `; + })} + +
    Sortable Table
    + ${cellData} + + + + + ${cellData} + + + + + ${cellData} + + + +
    ${cellData} + ${cellData} +
    + + + + + + + ${(() => { + return html` + ${headerData.map((cellData, i) => { + if (i + 1 === headerData.length) { + return html``; + } + return html``; + })} + `; + })()} + + + + ${tableData.map((rowData, j) => { + return html` + ${rowData.map((cellData, i) => { + if (i + 1 === rowData.length) { + if (j % 2 === 0) { + return html``; + } + return html``; + } + if (j % 2 === 0) { + return html``; + } + return html``; + })} + `; + })} + +
    Simple Table With Vertical Lines And Alternating Colors
    ${cellData} + ${cellData} +
    ${cellData} + ${cellData} + ${cellData} + ${cellData} +
    + `; + } +}; From 8afc7d16620c9dc2af6500a61dfadd98c4cd0ba1 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Mon, 4 Sep 2023 09:57:55 +0200 Subject: [PATCH 03/20] Add story --- .../table-cell/table-cell.declaration.ts | 8 +-- .../styles/table-cell/table-cell.stories.ts | 69 +++++-------------- 2 files changed, 23 insertions(+), 54 deletions(-) diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts index 34aec7759c..24a26fb4d9 100644 --- a/packages/components/src/styles/table-cell/table-cell.declaration.ts +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -12,19 +12,19 @@ export default { }, { name: 'sd-table-cell--transparent', - description: 'Displays a divider to the right.' + description: 'Applies transparent backround-color to table cell.' }, { name: 'sd-table-cell--white', - description: 'Displays a divider to the right.' + description: 'Applies white backround-color to table cell.' }, { name: 'sd-table-cell--primary-100', - description: 'Displays a divider to the right.' + description: 'Applies backround-color primary-100 to table cell.' }, { name: 'sd-table-cell--neutral-100', - description: 'Displays a divider to the right.' + description: 'Applies backround-color neutral-100 to table cell.' } ] } satisfies Style; diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index a3907772d3..7dedb6420b 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -6,36 +6,6 @@ const { argTypes, parameters } = storybookDefaults('sd-table-cell'); const { overrideArgs } = storybookHelpers('sd-table-cell'); const { generateTemplate } = storybookTemplate('sd-table-cell'); -const tableDataOld = [ - { - id: 1, - isin: '', - name: 'UniGlobal', - kvg: 'Union Investment Privatfonds GmbH', - price: '90,46 EUR', - priceDate: '31.08.2023', - changeLastDay: '+ 0.27 %' - }, - { - id: 2, - isin: '', - name: 'UniGlobal', - kvg: 'Union Investment Privatfonds GmbH', - price: '90,46 EUR', - priceDate: '31.08.2023', - changeLastDay: '+ 0.27 %' - }, - { - id: 3, - isin: '', - name: 'UniGlobal', - kvg: 'Union Investment Privatfonds GmbH', - price: '90,46 EUR', - priceDate: '31.08.2023', - changeLastDay: '+ 0.27 %' - } -]; - /** * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
    *
    @@ -67,6 +37,8 @@ export const Default = { } }; +// TODO: Add sample "Simple Table, First Column Fixed" and "Multi Select Table" as soon as we have sd-scrollable. + /** * Examples: This shows how sd-table-cell looks in different contexts. */ @@ -79,26 +51,28 @@ export const Examples = { const tableData = Array.from({ length: rows }, () => Array.from({ length: columns }, () => 'Content')); return html` - +
    Simple Table With Vertical Lines
    +
    - - - ${(() => { return html` ${headerData.map((cellData, i) => { @@ -128,11 +102,9 @@ export const Examples = {
    Simple Table With Vertical Lines
    - +
    Sortable Table
    +
    - - - ${(() => { return html` ${headerData.map((cellData, i) => { @@ -178,11 +150,9 @@ export const Examples = {
    Sortable Table
    - +
    Sortable Table
    +
    - - - ${(() => { return html` ${headerData.map((cellData, i) => { @@ -196,7 +166,6 @@ export const Examples = { `; })()} - ${tableData.map((rowData, j) => { return html` From 3ad7ce09cbbd4042fa6b637debcb6aef0d7de1f5 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Tue, 5 Sep 2023 09:19:21 +0200 Subject: [PATCH 04/20] Improve Samples --- .../styles/table-cell/table-cell.stories.ts | 38 +++++++++---------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index 7dedb6420b..4b5200d8f1 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -45,10 +45,8 @@ export const Default = { export const Examples = { render: (args: any) => { - const columns = 5; - const rows = 5; - const headerData = Array.from({ length: columns }, () => 'Header'); - const tableData = Array.from({ length: rows }, () => Array.from({ length: columns }, () => 'Content')); + const headerData = Array.from({ length: 5 }, () => 'Header'); + const tableData = Array.from({ length: 5 }, () => Array.from({ length: 5 }, () => 'Content')); return html` -
    Simple Table With Vertical Lines
    -
    Simple Table With Vertical Lines And Alternating Colors
    - - ${(() => { - return html` - ${headerData.map((cellData, columnIndex) => { - if (columnIndex + 1 === headerData.length) { - return html``; - } - return html``; - })} - `; - })()} - - - ${tableData.map(rowData => { - return html` - ${rowData.map((cellData, columnIndex) => { - if (columnIndex + 1 === rowData.length) { - return html``; - } - return html``; - })} - `; - })} - -
    ${cellData} - ${cellData} -
    ${cellData} - ${cellData} -
    - -
    Sortable Table
    - - - ${(() => { - return html` - ${headerData.map((cellData, columnIndex) => { - if (columnIndex + 1 === headerData.length) { - return html``; + })} + +
    +
    +
    Simple Table With Vertical Lines
    + + + ${(() => { + return html` + ${headerData.map((cellData, columnIndex) => { + return html``; - } - if (columnIndex === 0) { - return html``; + })()} + + + ${tableData.map(rowData => { + return html` + ${rowData.map((cellData, columnIndex) => { + return html``; + })} + `; + })} + +
    ${cellData} - + })} +
    ${cellData} -
    + +
    Sortable Table
    +
    + The sort function in this table is only designed to illustrate the behavior of the ui elements and is not + actually sorting the table data. It is not designed for production usage! +
    + + + ${(() => { + return html` + ${headerData.map((cellData, columnIndex) => { + return html``; - } - return html``; - })} - `; - })()} - - - ${tableData.map(rowData => { - return html` - ${rowData.map((cellData, columnIndex) => { - if (columnIndex + 1 === rowData.length) { - return html``; - } - return html``; - })} - `; - })} - -
    + - ${cellData} - -
    ${cellData} - ${cellData} -
    - -
    Simple Table With Alternating Colors
    - - - ${(() => { - return html` - ${headerData.map((cellData, columnIndex) => { - if (columnIndex + 1 === headerData.length) { - return html``; - } - return html``; - })} - `; - })()} - - - ${tableData.map((rowData, rowIndex) => { - return html` - ${rowData.map((cellData, columnIndex) => { - if (columnIndex + 1 === rowData.length) { - if (rowIndex % 2 === 0) { - return html``; - } - return html``; + })()} + + + ${tableData.map(rowData => { + return html` + ${rowData.map((cellData, columnIndex) => { + return html``; + })} + `; + })} + +
    ${cellData} - ${cellData} -
    ${cellData} + })} +
    + ${cellData} +
    +
    Simple Table With Alternating Colors
    + + + ${(() => { + return html` + ${headerData.map((cellData, columnIndex) => { + return html``; + })} + `; + })()} + + + ${tableData.map((rowData, rowIndex) => { + return html` + ${rowData.map((cellData, columnIndex) => { + return html``; - } - if (rowIndex % 2 === 0) { - return html``; - } - return html``; - })} - `; - })} - -
    + ${cellData} +
    ${cellData} ${cellData} - ${cellData} -
    + })} +
    + +
    Simple Table, First Column Fixed
    +
    + This sample will be provided as soon as we have implemented the sd-scrollable component. +
    + +
    Multi Select Table
    +
    + This sample will be provided as soon as we have implemented the sd-scrollable component. +
    + `; } }; From 9b83dd860966c99a4ddb591cce05fb0c74862efd Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Wed, 13 Sep 2023 08:48:06 +0200 Subject: [PATCH 09/20] Finalize sd-table-cell --- .../src/styles/table-cell/table-cell.declaration.ts | 7 ++++--- .../components/src/styles/table-cell/table-cell.stories.ts | 6 +----- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts index 24a26fb4d9..5025caedce 100644 --- a/packages/components/src/styles/table-cell/table-cell.declaration.ts +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -2,9 +2,10 @@ import type { Style } from '../../declaration'; export default { styleName: 'sd-table-cell', - summary: 'A ...', - status: 'experimental', - since: '1.7', + summary: + 'A table is organized structured content, used for scanning, comparing, and analyzing the data. The table cell is a single cell inside this table.', + status: 'stable', + since: '1.12', attributes: [ { name: 'sd-table-cell--divider', diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index c62e3498d0..d9e54a72f9 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -38,7 +38,7 @@ export const Default = { // TODO: Add sample "Simple Table, First Column Fixed" and "Multi Select Table" as soon as we have sd-scrollable. /** - * Demonstrates the usage of sd-table-cell in various contexts. + * These examples demonstrate the usage of sd-table-cell in various contexts. * * __Note:__ These examples are intended solely for illustrating how sd-table-cell can be used to style tables. * The data generation and table sorting logic should not be used in production environments. @@ -186,10 +186,6 @@ export const Examples = {
    Sortable Table
    -
    - The sort function in this table is only designed to illustrate the behavior of the ui elements and is not - actually sorting the table data. It is not designed for production usage! -
    ${(() => { From 312b04362e696f788231040f1a0d40d7c4588579 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Wed, 13 Sep 2023 09:01:39 +0200 Subject: [PATCH 10/20] Improve stories --- packages/components/src/styles/table-cell/table-cell.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index d9e54a72f9..0326b48202 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -68,7 +68,7 @@ export const Examples = { }) ); - // Function to exchange the sort icons in the sortable table after a click on the table header + // Function to exchange the sort icons and set the aria-sort attribute in the sortable table after a click on the table header const sortTable = (column: number) => { const icon = document.getElementById(`sortIcon-${column}`); const headerCell = document.getElementById(`sortableHeader-${column}`); From e33e970d353632e0a5abf8bb3b85d1aec6e88ff0 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Wed, 13 Sep 2023 10:12:17 +0200 Subject: [PATCH 11/20] Fix sort icon --- .../src/styles/table-cell/table-cell.stories.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index 0326b48202..6fa2b92f2e 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -75,19 +75,19 @@ export const Examples = { if (icon && headerCell) { switch (sortData[column]) { case 'none': - sortData[column] = 'ascending'; - icon.setAttribute('name', 'system/sort-up-filled'); - headerCell.setAttribute('aria-sort', 'ascending'); - return; - case 'ascending': sortData[column] = 'descending'; icon.setAttribute('name', 'system/sort-down-filled'); headerCell.setAttribute('aria-sort', 'descending'); return; - case 'descending': + case 'ascending': sortData[column] = 'none'; - icon.setAttribute('name', 'system/sort-up'); + icon.setAttribute('name', 'system/sort-down'); headerCell.removeAttribute('aria-sort'); + return; + case 'descending': + sortData[column] = 'ascending'; + icon.setAttribute('name', 'system/sort-up-filled'); + headerCell.setAttribute('aria-sort', 'ascending'); } } }; @@ -201,7 +201,7 @@ export const Examples = { ${cellData} `; From 7456d870bb32ff16f0d9ae576dcd3e59e83f8b32 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Wed, 13 Sep 2023 10:34:27 +0200 Subject: [PATCH 12/20] Change name of examples story to samples --- packages/components/src/styles/table-cell/table-cell.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index 6fa2b92f2e..f14fc23ab1 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -44,7 +44,7 @@ export const Default = { * The data generation and table sorting logic should not be used in production environments. */ -export const Examples = { +export const Samples = { parameters: { controls: { exclude: [ From c37224c31b33c5a6a66487049152bed0386f173a Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Thu, 14 Sep 2023 16:20:47 +0200 Subject: [PATCH 13/20] Add sd-table component and improve sort logic --- packages/components/src/solid-styles.css | 1 + .../src/styles/table-cell/table-cell.css | 38 ++---- .../table-cell/table-cell.declaration.ts | 20 +-- .../styles/table-cell/table-cell.stories.ts | 114 +++++++++--------- .../components/src/styles/table/table.css | 7 ++ .../src/styles/table/table.declaration.ts | 9 ++ .../src/styles/table/table.stories.ts | 29 +++++ 7 files changed, 122 insertions(+), 96 deletions(-) create mode 100644 packages/components/src/styles/table/table.css create mode 100644 packages/components/src/styles/table/table.declaration.ts create mode 100644 packages/components/src/styles/table/table.stories.ts diff --git a/packages/components/src/solid-styles.css b/packages/components/src/solid-styles.css index 672be7eb08..b770673dfe 100644 --- a/packages/components/src/solid-styles.css +++ b/packages/components/src/solid-styles.css @@ -5,3 +5,4 @@ @import './styles/mark/mark.css'; @import './styles/interactive/interactive.css'; @import './styles/table-cell/table-cell.css'; +@import './styles/table/table.css'; diff --git a/packages/components/src/styles/table-cell/table-cell.css b/packages/components/src/styles/table-cell/table-cell.css index 4e3b5c1cdf..6fab580e99 100644 --- a/packages/components/src/styles/table-cell/table-cell.css +++ b/packages/components/src/styles/table-cell/table-cell.css @@ -1,13 +1,3 @@ -/* -* Remove inherited styles from table before applying our styles. -*/ -.sd-table { - all: unset; - display: table; - border-collapse: collapse; - border-spacing: 0; -} - .sd-table-cell { @apply border-solid border-neutral-400 border-y-[1px] border-x-0 text-sm text-left p-4; @@ -15,23 +5,21 @@ @apply border-r-[1px]; } - &--transparent { - @apply bg-transparent; - } + &--bg { + &-transparent { + @apply bg-transparent; + } - &--white { - @apply bg-white; - } + &-white { + @apply bg-white; + } - &--primary-100 { - @apply bg-primary-100; - } + &-primary-100 { + @apply bg-primary-100; + } - &--neutral-100 { - @apply bg-neutral-100; + &-neutral-100 { + @apply bg-neutral-100; + } } } - -.sd-table-cell * { - @apply align-middle; -} diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts index 5025caedce..26c12f429e 100644 --- a/packages/components/src/styles/table-cell/table-cell.declaration.ts +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -2,8 +2,7 @@ import type { Style } from '../../declaration'; export default { styleName: 'sd-table-cell', - summary: - 'A table is organized structured content, used for scanning, comparing, and analyzing the data. The table cell is a single cell inside this table.', + summary: 'A table cell is a single cell inside a table, used to display discrete data elements.', status: 'stable', since: '1.12', attributes: [ @@ -12,20 +11,9 @@ export default { description: 'Displays a divider to the right.' }, { - name: 'sd-table-cell--transparent', - description: 'Applies transparent backround-color to table cell.' - }, - { - name: 'sd-table-cell--white', - description: 'Applies white backround-color to table cell.' - }, - { - name: 'sd-table-cell--primary-100', - description: 'Applies backround-color primary-100 to table cell.' - }, - { - name: 'sd-table-cell--neutral-100', - description: 'Applies backround-color neutral-100 to table cell.' + name: 'sd-table-cell--bg-...', + options: ['transparent', 'white', 'primary-100', 'neutral-100'], + description: 'Applies the selected backround-color to table cell.' } ] } satisfies Style; diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index f14fc23ab1..38f58b46d2 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -1,5 +1,6 @@ import '../../solid-components'; import { html } from 'lit-html'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper'; const { argTypes, parameters } = storybookDefaults('sd-table-cell'); @@ -7,9 +8,8 @@ const { overrideArgs } = storybookHelpers('sd-table-cell'); const { generateTemplate } = storybookTemplate('sd-table-cell'); /** - * The sd-table-cell component offers basic styling for table cells. - * Additionally, it includes a sd-table class, which should be applied to the table element, - * resetting the default HTML styles for the table. + * The `sd-table-cell` component offers basic styling for table cells. + * It is designed to be used in conjunction with the `sd-table` component. */ export default { @@ -29,14 +29,12 @@ export default { export const Default = { render: (args: any) => { return generateTemplate({ - options: { templateContent: '' }, + options: { templateContent: '
    %SLOT%
    %SLOT%
    ' }, args }); } }; -// TODO: Add sample "Simple Table, First Column Fixed" and "Multi Select Table" as soon as we have sd-scrollable. - /** * These examples demonstrate the usage of sd-table-cell in various contexts. * @@ -47,20 +45,16 @@ export const Default = { export const Samples = { parameters: { controls: { - exclude: [ - 'sd-table-cell--divider', - 'sd-table-cell--white', - 'sd-table-cell--transparent', - 'sd-table-cell--primary-100', - 'sd-table-cell--neutral-100' - ] + exclude: ['sd-table-cell--divider', 'sd-table-cell--bg-...'] } }, render: (args: Record) => { // Initalize table data const tableRowCount = 7; const tableColumnCount = 5; - const sortData: ('ascending' | 'descending' | 'none')[] = Array.from({ length: tableColumnCount }, () => 'none'); + const sortData: ('ascending' | 'descending' | 'none')[] = Array.from({ length: tableColumnCount }, (v, i) => + i === 0 ? 'ascending' : 'none' + ); const headerData = Array.from({ length: tableColumnCount }, () => 'Header'); const tableData = Array.from({ length: tableRowCount }, () => Array.from({ length: tableColumnCount }, () => { @@ -68,27 +62,44 @@ export const Samples = { }) ); - // Function to exchange the sort icons and set the aria-sort attribute in the sortable table after a click on the table header + // Function to exchange the sort icons and set the aria-sort attribute in the sortable table after a click on a table header const sortTable = (column: number) => { - const icon = document.getElementById(`sortIcon-${column}`); - const headerCell = document.getElementById(`sortableHeader-${column}`); - if (icon && headerCell) { - switch (sortData[column]) { - case 'none': - sortData[column] = 'descending'; - icon.setAttribute('name', 'system/sort-down-filled'); - headerCell.setAttribute('aria-sort', 'descending'); - return; - case 'ascending': - sortData[column] = 'none'; - icon.setAttribute('name', 'system/sort-down'); + const sortingOptions: { + [key: string]: { + nextSort: 'ascending' | 'descending' | 'none'; + iconName: string; + ariaSort: string | undefined; + }; + } = { + none: { nextSort: 'ascending', iconName: 'system/sort-up', ariaSort: undefined }, + ascending: { nextSort: 'descending', iconName: 'system/sort-up-filled', ariaSort: 'ascending' }, + descending: { nextSort: 'none', iconName: 'system/sort-down-filled', ariaSort: 'descending' } + }; + const icons = document.querySelectorAll('[id*="sortIcon"]'); + const headerCells = document.querySelectorAll('[id*="sortableHeader"]'); + + if (icons && headerCells) { + headerCells.forEach((headerCell, index) => { + //Change the sort icon and aria-sort attribute for the clicked column + if (index === column) { + const nextSort = sortingOptions[sortData[column]].nextSort; + const { iconName, ariaSort } = sortingOptions[nextSort]; + + sortData[index] = nextSort; + icons[index].setAttribute('name', iconName); + ariaSort !== undefined + ? headerCell.setAttribute('aria-sort', ariaSort) + : headerCell.removeAttribute('aria-sort'); + } + //Reset the sort icon and remove the aria-sort attribute for all other columns + else { + const { iconName } = sortingOptions['none']; + + sortData[index] = 'none'; + icons[index].setAttribute('name', iconName); headerCell.removeAttribute('aria-sort'); - return; - case 'descending': - sortData[column] = 'ascending'; - icon.setAttribute('name', 'system/sort-up-filled'); - headerCell.setAttribute('aria-sort', 'ascending'); - } + } + }); } }; @@ -120,7 +131,7 @@ export const Samples = { box-sizing: border-box; } - .sd-table { + .sample-table { margin-top: 20px; width: 100%; } @@ -142,23 +153,19 @@ export const Samples = { text-align: left; } - .sd-table-cell.sortable button:hover { - background-color: white; - } - div:not(:first-of-type).headline { margin-top: 72px; }
    Simple Table With Vertical Lines
    - +
    ${(() => { return html` ${headerData.map((cellData, columnIndex) => { return html` ${rowData.map((cellData, columnIndex) => { return html`
    @@ -173,7 +180,7 @@ export const Samples = { return html`
    @@ -186,22 +193,23 @@ export const Samples = {
    Sortable Table
    - +
    ${(() => { return html` ${headerData.map((cellData, columnIndex) => { return html``; @@ -214,7 +222,7 @@ export const Samples = { return html` ${rowData.map((cellData, columnIndex) => { return html`
    @@ -226,13 +234,13 @@ export const Samples = {
    Simple Table With Alternating Colors
    - +
    ${(() => { return html` ${headerData.map((cellData, columnIndex) => { return html`
    @@ -248,8 +256,8 @@ export const Samples = { ${rowData.map((cellData, columnIndex) => { return html` ${cellData} @@ -261,14 +269,10 @@ export const Samples = {
    Simple Table, First Column Fixed
    -
    - This sample will be provided as soon as we have implemented the sd-scrollable component. -
    +
    This sample will be provided soon.
    Multi Select Table
    -
    - This sample will be provided as soon as we have implemented the sd-scrollable component. -
    +
    This sample will be provided soon.
    `; } diff --git a/packages/components/src/styles/table/table.css b/packages/components/src/styles/table/table.css new file mode 100644 index 0000000000..c2771a7c6a --- /dev/null +++ b/packages/components/src/styles/table/table.css @@ -0,0 +1,7 @@ +/* +* Remove inherited styles from table before applying our styles. +*/ +.sd-table { + all: unset; + @apply table border-collapse border-spacing-0; +} diff --git a/packages/components/src/styles/table/table.declaration.ts b/packages/components/src/styles/table/table.declaration.ts new file mode 100644 index 0000000000..3569026bea --- /dev/null +++ b/packages/components/src/styles/table/table.declaration.ts @@ -0,0 +1,9 @@ +import type { Style } from '../../declaration'; + +export default { + styleName: 'sd-table', + summary: 'A table is organized structured content, used for scanning, comparing, and analyzing the data.', + status: 'stable', + since: '1.12', + attributes: [] +} satisfies Style; diff --git a/packages/components/src/styles/table/table.stories.ts b/packages/components/src/styles/table/table.stories.ts new file mode 100644 index 0000000000..51be33d66a --- /dev/null +++ b/packages/components/src/styles/table/table.stories.ts @@ -0,0 +1,29 @@ +import '../../solid-components'; +import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper'; + +const { argTypes, parameters } = storybookDefaults('sd-table'); +const { overrideArgs } = storybookHelpers('sd-table'); +const { generateTemplate } = storybookTemplate('sd-table'); + +/** + * The `sd-table` component resets the styles of a table to predefined values. To style table cells use the `sd-table-cell` component. + */ + +export default { + title: 'Styles/sd-table', + component: 'sd-table', + parameters: { + ...parameters + }, + args: overrideArgs({ type: 'slot', name: 'default', value: 'Lorem ipsum dolor sit amet.' }), + argTypes +}; + +export const Default = { + render: (args: any) => { + return generateTemplate({ + options: { templateContent: '
    %SLOT%
    ' }, + args + }); + } +}; From 74ae143715bed4f2bb572ee2fc97d17b1e6daf7a Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Mon, 18 Sep 2023 11:14:38 +0200 Subject: [PATCH 14/20] Remove sortable sample, fix findings from PR --- .../src/docs/Migration/ui-table.mdx | 22 ++-- .../src/styles/table-cell/table-cell.css | 2 +- .../styles/table-cell/table-cell.stories.ts | 108 +++--------------- 3 files changed, 31 insertions(+), 101 deletions(-) diff --git a/packages/components/src/docs/Migration/ui-table.mdx b/packages/components/src/docs/Migration/ui-table.mdx index 3b5bd669c9..bf3a5b3b1b 100644 --- a/packages/components/src/docs/Migration/ui-table.mdx +++ b/packages/components/src/docs/Migration/ui-table.mdx @@ -1,6 +1,6 @@ -# Migration Guide: From `ui-table` to `sd-table-cell` +# Migration Guide: From `ui-table` to `sd-table` and `sd-table-cell` -The new `sd-table-cell` is designed to replace the `ui-table`. Rather than offering a complex component structure, `sd-table-cell` primarily focuses on providing CSS styles for ``, `
    `, and `` elements. +The new `sd-table` and `sd-table-cell` are designed to replace the `ui-table`. Rather than offering a complex component structure, they primarily focus on providing CSS styles for ``, `
    `, and `` elements. As a result, tables no longer require the `ui-table` wrapper and instead can directly utilize the provided CSS classes. @@ -8,7 +8,7 @@ As a result, tables no longer require the `ui-table` wrapper and instead can dir ### โŒ Removed Slots -The following slots have been removed from the new [sd-table-cell] component: +The following slots have been removed from the new components: 1. [default] @@ -30,19 +30,19 @@ The `sd-table-cell` class should be applied to both `` and `` elements. This class adds a divider to the right side of the table cell. -#### [sd-table-cell--transparent] +#### [sd-table-cell--bg-transparent] This class adds a transparent background color to the table cell. -#### [sd-table-cell--white] +#### [sd-table-cell--bg-white] This class adds a white background color to the table cell. -#### [sd-table-cell--primary-100] +#### [sd-table-cell--bg-primary-100] This class adds a background color of primary-100 to the table cell. -#### [sd-table-cell--neutral-100] +#### [sd-table-cell--bg-neutral-100] This class adds a background color of neutral-100 to the table cell. @@ -52,7 +52,7 @@ This class adds a background color of neutral-100 to the table cell. ### โŒ Removed Attributes -Since the new [sd-table-cell] is no longer a component basically all attributes have been removed: +Since the new [sd-table] and [sd-table-cell] are no longer components basically all attributes have been removed: 1. [backgroundAlternating] 2. [coloredHead] @@ -68,7 +68,7 @@ Since the new [sd-table-cell] is no longer a component basically all attributes ### โŒ Removed CSS variables -The following CSS variables have been removed from the new [sd-table-cell] component: +The following CSS variables have been removed from the new components: 1. [--component-table-head-color] 2. [--component-table-first-column-color] @@ -79,7 +79,7 @@ The following CSS variables have been removed from the new [sd-table-cell] compo ### โŒ Removed Event Listeners: -The following event listeners have been removed from the new [sd-table-cell] component: +The following event listeners have been removed from the new components: 1. [onGridReady] @@ -89,7 +89,7 @@ The following event listeners have been removed from the new [sd-table-cell] com ### โŒ Removed Methods: -The following methods have been removed from the new [sd-table-cell] component: +The following methods have been removed from the new components: 1. [componentDidLoad] diff --git a/packages/components/src/styles/table-cell/table-cell.css b/packages/components/src/styles/table-cell/table-cell.css index 6fab580e99..3a205b249d 100644 --- a/packages/components/src/styles/table-cell/table-cell.css +++ b/packages/components/src/styles/table-cell/table-cell.css @@ -1,5 +1,5 @@ .sd-table-cell { - @apply border-solid border-neutral-400 border-y-[1px] border-x-0 text-sm text-left p-4; + @apply border-solid border-neutral-400 border-y-[1px] border-x-0 text-black text-sm text-left p-4; &--divider { @apply border-r-[1px]; diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index 38f58b46d2..e77e842358 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -18,7 +18,10 @@ export default { parameters: { ...parameters }, - args: overrideArgs({ type: 'slot', name: 'default', value: 'Lorem ipsum dolor sit amet.' }), + args: overrideArgs([ + { type: 'slot', name: 'default', value: 'Lorem ipsum dolor sit amet.' }, + { type: 'attribute', name: 'sd-table-cell--bg-...', value: 'transparent' } + ]), argTypes }; @@ -37,9 +40,9 @@ export const Default = { /** * These examples demonstrate the usage of sd-table-cell in various contexts. - * - * __Note:__ These examples are intended solely for illustrating how sd-table-cell can be used to style tables. + * The examples are intended solely for illustrating how sd-table-cell can be used to style tables. * The data generation and table sorting logic should not be used in production environments. + * */ export const Samples = { @@ -52,9 +55,6 @@ export const Samples = { // Initalize table data const tableRowCount = 7; const tableColumnCount = 5; - const sortData: ('ascending' | 'descending' | 'none')[] = Array.from({ length: tableColumnCount }, (v, i) => - i === 0 ? 'ascending' : 'none' - ); const headerData = Array.from({ length: tableColumnCount }, () => 'Header'); const tableData = Array.from({ length: tableRowCount }, () => Array.from({ length: tableColumnCount }, () => { @@ -62,47 +62,6 @@ export const Samples = { }) ); - // Function to exchange the sort icons and set the aria-sort attribute in the sortable table after a click on a table header - const sortTable = (column: number) => { - const sortingOptions: { - [key: string]: { - nextSort: 'ascending' | 'descending' | 'none'; - iconName: string; - ariaSort: string | undefined; - }; - } = { - none: { nextSort: 'ascending', iconName: 'system/sort-up', ariaSort: undefined }, - ascending: { nextSort: 'descending', iconName: 'system/sort-up-filled', ariaSort: 'ascending' }, - descending: { nextSort: 'none', iconName: 'system/sort-down-filled', ariaSort: 'descending' } - }; - const icons = document.querySelectorAll('[id*="sortIcon"]'); - const headerCells = document.querySelectorAll('[id*="sortableHeader"]'); - - if (icons && headerCells) { - headerCells.forEach((headerCell, index) => { - //Change the sort icon and aria-sort attribute for the clicked column - if (index === column) { - const nextSort = sortingOptions[sortData[column]].nextSort; - const { iconName, ariaSort } = sortingOptions[nextSort]; - - sortData[index] = nextSort; - icons[index].setAttribute('name', iconName); - ariaSort !== undefined - ? headerCell.setAttribute('aria-sort', ariaSort) - : headerCell.removeAttribute('aria-sort'); - } - //Reset the sort icon and remove the aria-sort attribute for all other columns - else { - const { iconName } = sortingOptions['none']; - - sortData[index] = 'none'; - icons[index].setAttribute('name', iconName); - headerCell.removeAttribute('aria-sort'); - } - }); - } - }; - return html`
    -
    Simple Table With Vertical Lines
    +
    Simple Table
    ${(() => { return html` - ${headerData.map((cellData, columnIndex) => { - return html``; + ${headerData.map(cellData => { + return html``; })} `; })()} @@ -178,40 +131,25 @@ export const Samples = { ${tableData.map(rowData => { return html` - ${rowData.map((cellData, columnIndex) => { - return html``; + ${rowData.map(cellData => { + return html``; })} `; })}
    - ${cellData} - ${cellData}
    - ${cellData} - ${cellData}
    - -
    Sortable Table
    - +
    Simple Table With Vertical Lines
    +
    ${(() => { return html` ${headerData.map((cellData, columnIndex) => { return html``; })} `; @@ -238,14 +176,8 @@ export const Samples = { ${(() => { return html` - ${headerData.map((cellData, columnIndex) => { - return html``; + ${headerData.map(cellData => { + return html``; })} `; })()} @@ -253,12 +185,11 @@ export const Samples = { ${tableData.map((rowData, rowIndex) => { return html` - ${rowData.map((cellData, columnIndex) => { + ${rowData.map(cellData => { return html``; @@ -267,7 +198,6 @@ export const Samples = { })}
    - + ${cellData}
    - ${cellData} - ${cellData}
    ${cellData}
    -
    Simple Table, First Column Fixed
    This sample will be provided soon.
    From eaaa07b30eaf6a9ac3483246503412d9074187e0 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Mon, 18 Sep 2023 11:19:23 +0200 Subject: [PATCH 15/20] Remove ifDefined --- packages/components/src/styles/table-cell/table-cell.stories.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts index e77e842358..84631412dc 100644 --- a/packages/components/src/styles/table-cell/table-cell.stories.ts +++ b/packages/components/src/styles/table-cell/table-cell.stories.ts @@ -1,6 +1,5 @@ import '../../solid-components'; import { html } from 'lit-html'; -import { ifDefined } from 'lit/directives/if-defined.js'; import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper'; const { argTypes, parameters } = storybookDefaults('sd-table-cell'); From 31a6ddd102dd0d95ad3fd4331f98d54872394952 Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Tue, 19 Sep 2023 10:42:47 +0200 Subject: [PATCH 16/20] Add transparent bg to base class --- packages/components/src/styles/table-cell/table-cell.css | 6 +----- .../src/styles/table-cell/table-cell.declaration.ts | 5 +++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/styles/table-cell/table-cell.css b/packages/components/src/styles/table-cell/table-cell.css index 3a205b249d..75b6306b9a 100644 --- a/packages/components/src/styles/table-cell/table-cell.css +++ b/packages/components/src/styles/table-cell/table-cell.css @@ -1,15 +1,11 @@ .sd-table-cell { - @apply border-solid border-neutral-400 border-y-[1px] border-x-0 text-black text-sm text-left p-4; + @apply bg-transparent border-solid border-neutral-400 border-y-[1px] border-x-0 text-black text-sm text-left p-4; &--divider { @apply border-r-[1px]; } &--bg { - &-transparent { - @apply bg-transparent; - } - &-white { @apply bg-white; } diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts index 26c12f429e..8b3337eda6 100644 --- a/packages/components/src/styles/table-cell/table-cell.declaration.ts +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -12,8 +12,9 @@ export default { }, { name: 'sd-table-cell--bg-...', - options: ['transparent', 'white', 'primary-100', 'neutral-100'], - description: 'Applies the selected backround-color to table cell.' + options: ['white', 'primary-100', 'neutral-100'], + description: + 'Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.' } ] } satisfies Style; From e761ec14367d8d6829d0c6c976b4b709c13c059c Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Tue, 19 Sep 2023 15:31:16 +0200 Subject: [PATCH 17/20] Update version before merge --- .../components/src/styles/table-cell/table-cell.declaration.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts index 8b3337eda6..1cc7f768b1 100644 --- a/packages/components/src/styles/table-cell/table-cell.declaration.ts +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -4,7 +4,7 @@ export default { styleName: 'sd-table-cell', summary: 'A table cell is a single cell inside a table, used to display discrete data elements.', status: 'stable', - since: '1.12', + since: '1.13', attributes: [ { name: 'sd-table-cell--divider', From 6955422bc3755b3824166be473936b94edeb9daa Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Tue, 19 Sep 2023 15:34:34 +0200 Subject: [PATCH 18/20] Revert version --- .../components/src/styles/table-cell/table-cell.declaration.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts index 1cc7f768b1..8b3337eda6 100644 --- a/packages/components/src/styles/table-cell/table-cell.declaration.ts +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -4,7 +4,7 @@ export default { styleName: 'sd-table-cell', summary: 'A table cell is a single cell inside a table, used to display discrete data elements.', status: 'stable', - since: '1.13', + since: '1.12', attributes: [ { name: 'sd-table-cell--divider', From d6a0fa296b5fe7d2f026cd8f27804737ff7ed45f Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Tue, 19 Sep 2023 15:34:50 +0200 Subject: [PATCH 19/20] Update version before merge --- .../components/src/styles/table-cell/table-cell.declaration.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts index 8b3337eda6..1cc7f768b1 100644 --- a/packages/components/src/styles/table-cell/table-cell.declaration.ts +++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts @@ -4,7 +4,7 @@ export default { styleName: 'sd-table-cell', summary: 'A table cell is a single cell inside a table, used to display discrete data elements.', status: 'stable', - since: '1.12', + since: '1.13', attributes: [ { name: 'sd-table-cell--divider', From 84550b1e806edd39099e2729a174bb307379e98d Mon Sep 17 00:00:00 2001 From: MarcMatthiae Date: Tue, 19 Sep 2023 16:02:28 +0200 Subject: [PATCH 20/20] Update version before merge --- packages/components/src/styles/table/table.declaration.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/table/table.declaration.ts b/packages/components/src/styles/table/table.declaration.ts index 3569026bea..d0be4f953a 100644 --- a/packages/components/src/styles/table/table.declaration.ts +++ b/packages/components/src/styles/table/table.declaration.ts @@ -4,6 +4,6 @@ export default { styleName: 'sd-table', summary: 'A table is organized structured content, used for scanning, comparing, and analyzing the data.', status: 'stable', - since: '1.12', + since: '1.13', attributes: [] } satisfies Style;