diff --git a/docs/docs/reference/ui/molecules/Table.mdx b/docs/docs/reference/ui/molecules/Table.mdx index c00c526ca0..5ba6202094 100644 --- a/docs/docs/reference/ui/molecules/Table.mdx +++ b/docs/docs/reference/ui/molecules/Table.mdx @@ -116,14 +116,14 @@ All table-related components support all attributes also supported by their resp `data-store-table` -`data-store-table-head` +`data-table-head` `data-store-table-row` -`data-store-table-footer` +`data-table-footer` -`data-store-table-body` +`data-table-body` -`data-store-table-cell='head'` +`data-table-cell='head'` -`data-store-table-cell='data'` +`data-table-cell='data'` diff --git a/packages/ui/src/molecules/Table/Table.test.tsx b/packages/ui/src/molecules/Table/Table.test.tsx index caf5ac6f35..e2651c4688 100644 --- a/packages/ui/src/molecules/Table/Table.test.tsx +++ b/packages/ui/src/molecules/Table/Table.test.tsx @@ -65,7 +65,7 @@ describe('Table', () => { const tableCells = queryAllByTestId('store-table-cell') // Make sure 8 cells were rendered and all contain the - // data-store-table-cell attribute. + // data-table-cell attribute. expect(tableCells).toHaveLength(8) tableCells.forEach((row) => { expect(row).toHaveAttribute('data-table-cell') diff --git a/themes/theme-b2c-tailwind/src/molecules/table.css b/themes/theme-b2c-tailwind/src/molecules/table.css index 35072609d1..8f9d0756a0 100644 --- a/themes/theme-b2c-tailwind/src/molecules/table.css +++ b/themes/theme-b2c-tailwind/src/molecules/table.css @@ -2,30 +2,30 @@ @apply table-auto divide-y divide-gray-200; } -[data-store-table-head]{ +[data-table-head]{ @apply bg-gray-50; } -[data-store-table-body] { +[data-table-body] { @apply bg-white divide-y divide-gray-200; } -[data-store-table-cell="header"]{ +[data-table-cell="header"]{ @apply px-6 py-3 text-left text-xs text-gray-900 font-bold uppercase tracking-wider; } -[data-store-table-cell="data"]{ +[data-table-cell="data"]{ @apply px-6 py-4; } -[data-store-table-cell] > [data-store-price][data-selling] { +[data-table-cell] > [data-store-price][data-selling] { @apply text-sm font-medium text-gray-900; } -[data-store-table-footer]{ +[data-table-footer]{ @apply bg-gray-50; } -[data-store-table-footer] [data-store-table-cell="data"]{ +[data-table-footer] [data-table-cell="data"]{ @apply px-6 py-3 text-left text-xs text-gray-900 font-bold uppercase tracking-wider; }