Repository: marigold-ui/marigold (ts)

Issue:
Full-width Table option
Currently the table component by default only uses the space it needs to show its content.
It would be nice to have an option as a prop of the table component that allows it to take up all of the available width.

This would be beneficial for big sets of data and for use cases in which the table should be the only/main thing on the user's screen (used in the ACC for example). 

Pull request:
feat: Add option to stretch `<Table>`
Closes #2114

Patch:
diff --git a/.changeset/wet-onions-love.md b/.changeset/wet-onions-love.md
new file mode 100644
index 000000000..78a9c1e2c
--- /dev/null
+++ b/.changeset/wet-onions-love.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+feat: Add option to stretch `<Table>`
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 3eee7b37e..b7ab02468 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     branches:
-      - master
+      - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -37,3 +37,6 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Update "marigold-ui.io/"
+        if: steps.changesets.outputs.published == 'true'
+        run: pnpm release:docs
diff --git a/config/jest/package.json b/config/jest/package.json
index 5b22627e5..c15e1902f 100644
--- a/config/jest/package.json
+++ b/config/jest/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@babel/core": "7.17.12",
-    "@swc/core": "1.2.189",
+    "@swc/core": "1.2.194",
     "@swc/jest": "0.2.21",
     "@types/jest": "27.4.1",
     "babel-jest": "28.1.0",
diff --git a/docs/content/components/table.mdx b/docs/content/components/table.mdx
index 74892035a..aa0f650f4 100644
--- a/docs/content/components/table.mdx
+++ b/docs/content/components/table.mdx
@@ -58,10 +58,11 @@ import { Table } from '@marigold/components';
 
 ## Props
 
-| Property                       | Type                           | Default | Description                                              |
-| :----------------------------- | :----------------------------- | :------ | :------------------------------------------------------- |
-| `selectionMode` (optional)     | `'none', 'single', 'multiple'` | `none`  | The type of selection that is allowed in the collection. |
-| `onSelectionChange` (optional) | `(keys: Selection) => any`     |         | Handler that is called when the selection changes.       |
+| Property                       | Type                           | Default  | Description                                              |
+| :----------------------------- | :----------------------------- | :------- | :------------------------------------------------------- |
+| `selectionMode` (optional)     | `'none', 'single', 'multiple'` | `'none'` | The type of selection that is allowed in the collection. |
+| `onSelectionChange` (optional) | `(keys: Selection) => any`     |          | Handler that is called when the selection changes.       |
+| `stretch` (optional)           | `boolean`                      | `false`  | Stretch table to fill the container                      |
 
 ## Examples
 
diff --git a/package.json b/package.json
index 436f8cdb8..01aeecafe 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=16.x"
   },
-  "packageManager": "pnpm@7.1.2",
+  "packageManager": "pnpm@7.1.7",
   "dependencies": {
     "@babel/core": "7.17.12",
     "@changesets/changelog-github": "0.4.4",
diff --git a/packages/components/src/Table/Table.stories.tsx b/packages/components/src/Table/Table.stories.tsx
index 7958019a9..4dc721019 100644
--- a/packages/components/src/Table/Table.stories.tsx
+++ b/packages/components/src/Table/Table.stories.tsx
@@ -24,6 +24,12 @@ export default {
       description: 'Focus Mode with Keyboard',
       defaultValue: 'row',
     },
+    stretch: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Stretch to fill the container',
+    },
   },
 } as Meta;
 
diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
index 9867a5189..691223fd7 100755
--- a/packages/components/src/Table/Table.tsx
+++ b/packages/components/src/Table/Table.tsx
@@ -44,11 +44,17 @@ export interface TableProps
     Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
   variant?: string;
   size?: string;
+  stretch?: boolean;
 }
 
 // Table Component
 // ---------------
-export const Table: Table = ({ variant, size, ...props }: TableProps) => {
+export const Table: Table = ({
+  variant,
+  size,
+  stretch,
+  ...props
+}: TableProps) => {
   const tableRef = useRef(null);
   const state = useTableState({
     ...props,
@@ -69,7 +75,16 @@ export const Table: Table = ({ variant, size, ...props }: TableProps) => {
 
   return (
     <TableContext.Provider value={{ state, styles }}>
-      <Box as="table" ref={tableRef} css={styles.table} {...gridProps}>
+      <Box
+        as="table"
+        ref={tableRef}
+        __baseCSS={{
+          borderCollapse: 'collapse',
+          width: stretch ? '100%' : undefined,
+        }}
+        css={styles.table}
+        {...gridProps}
+      >
         <TableHeader>
           {collection.headerRows.map(headerRow => (
             <TableHeaderRow key={headerRow.key} item={headerRow}>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6de768f73..e493daaee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,7 +110,7 @@ importers:
   config/jest:
     specifiers:
       '@babel/core': 7.17.12
-      '@swc/core': 1.2.189
+      '@swc/core': 1.2.194
       '@swc/jest': 0.2.21
       '@types/jest': 27.4.1
       babel-jest: 28.1.0
@@ -124,8 +124,8 @@ importers:
       typescript: 4.6.4
     dependencies:
       '@babel/core': 7.17.12
-      '@swc/core': 1.2.189
-      '@swc/jest': 0.2.21_@swc+core@1.2.189
+      '@swc/core': 1.2.194
+      '@swc/jest': 0.2.21_@swc+core@1.2.194
       '@types/jest': 27.4.1
       babel-jest: 28.1.0_@babel+core@7.17.12
       find-up: 5.0.0
@@ -7472,8 +7472,8 @@ packages:
       resolve-from: 5.0.0
     dev: false
 
-  /@swc/core-android-arm-eabi/1.2.189:
-    resolution: {integrity: sha512-0kN3Le6QzFFz+Lc6a/tf/RkJXubWwWaHxF4c0bVm4AKIFf4nRlUCEqEkjdVaZvL92rpBMHaEEBuIIz3T8DqTTQ==}
+  /@swc/core-android-arm-eabi/1.2.194:
+    resolution: {integrity: sha512-Hv/k9KN2Aab8jO/SmSlzKpzS941IXfdr9XEQRl/rc5Nj4neVW8AWS4+AJnl4u7MiJrfM0No6ZRQx32Ke+APmLQ==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [android]
@@ -7481,8 +7481,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-android-arm64/1.2.189:
-    resolution: {integrity: sha512-smsb+YkDw2OKwg66Z63E/G4NlFApDbsiOPmZXFZbtZbNBD9v+wnk6WVA//XR1bdUI9VbzNKlMPKJxQTE685QDw==}
+  /@swc/core-android-arm64/1.2.194:
+    resolution: {integrity: sha512-/r2iah0khiv3xUbOT6upf1fdeGdKrVa8sghyTI0jPRpQ5GKD01nuEq+FlmieTwkQ0pQbgVKun0zyriAOXjLqWA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [android]
@@ -7490,8 +7490,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-darwin-arm64/1.2.189:
-    resolution: {integrity: sha512-OGjZRkTulKirJMLYbW9etb59lA9ueDXVwYRVD9SrNh8tRMTf0Nq+SUT/C3LVhBBGC4KSdWOzBAYbDTTdsnY++Q==}
+  /@swc/core-darwin-arm64/1.2.194:
+    resolution: {integrity: sha512-pLsxgi985iSu+wqskJAO+kr0QwNqYQSyfdQEjCtWi5oYp3wIBPHLccIPVcIUfD6YAqXdqnQJg9RtA4scpdrQNg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
@@ -7499,8 +7499,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-darwin-x64/1.2.189:
-    resolution: {integrity: sha512-BEcxnBHx51514Voe2dn/y1y5H9VNyw7Zpp9+mPekZqx5o/onPD5wZ1ZfAsPrA4UlvM3v16u6ITE/cLawJ/GdAQ==}
+  /@swc/core-darwin-x64/1.2.194:
+    resolution: {integrity: sha512-WLFhotRbGqMKg9HwB0RF0Ycz6B6uSMEHcblAdBhiyL4fIp+CMUhkvC8jTs0xij/yJj96B6Xf9UH/Q5MFUQrJEw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
@@ -7508,8 +7508,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-freebsd-x64/1.2.189:
-    resolution: {integrity: sha512-B6g2NWeh2iw6WPOaM19Uj3VE4se6alT265kWibLUshjcofRfnYT1lNhhkrF1D0EVnpC8I96I/xXNQo4Am9z4zQ==}
+  /@swc/core-freebsd-x64/1.2.194:
+    resolution: {integrity: sha512-UNG8G5TlYWvfyB7+Fc1h5hoSwEY1LLLth7V8DFMljd0dm2hcSpukuWaQk/GE3EANCE40nq3y4THEAlSu4lauSg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [freebsd]
@@ -7517,8 +7517,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-linux-arm-gnueabihf/1.2.189:
-    resolution: {integrity: sha512-6WhPG9pyN5AahQTVQk8MoN1I9Z/Ytfqizuie1wV7mW8FMNmMkiJvBekKtE6ftxu80Hqa34r86WfEwmJKm5MqYw==}
+  /@swc/core-linux-arm-gnueabihf/1.2.194:
+    resolution: {integrity: sha512-mbk4MMgBf9BWFV0yqvReT29xZ6N6CLNgiG2UFnmXkLrrEBrAz5c3W8so5VqdyK52yWMS5Vs0a6VOvlimh057KA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
@@ -7526,8 +7526,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-linux-arm64-gnu/1.2.189:
-    resolution: {integrity: sha512-frJTGnxsDe7h2d7BtnBivOdOJTtabkQIIZmHd4JHqafcoekI6teyveIax17axLyimvWl278yTo3hf7ePagD/eg==}
+  /@swc/core-linux-arm64-gnu/1.2.194:
+    resolution: {integrity: sha512-vdr2zUJnd67oQfXn1Ix0ueND+iEnCTwA4dobT4s0KsZCusJKuJlkm97p7rgk3Cxn2sHm/8BBQX4KpdXwNEL3Tw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -7535,8 +7535,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-linux-arm64-musl/1.2.189:
-    resolution: {integrity: sha512-27K38LoZpME5lojDJIUNo7zdTDwAKLm0BMQ7HXWcYOyiDAekhSidI+SrBWxCfLzfuClhFu6/VE3E7j32VFJsiA==}
+  /@swc/core-linux-arm64-musl/1.2.194:
+    resolution: {integrity: sha512-wocEG55mu/KAFs1B9l1E0FbfU9nKaY3ULuT/isELHqDNZB23nNFRa+ymez/NqBhqVPhX4B0L+7j2r4tipXiI2A==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -7544,8 +7544,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-linux-x64-gnu/1.2.189:
-    resolution: {integrity: sha512-Ha5oJKOyQm9w7+e+WdRm4ypijzEmglWZGtgBR6vV6ViqqHcTBAU4nG87ex7y7AS9p+Cbc6EOSR9X1qIB8KxtbA==}
+  /@swc/core-linux-x64-gnu/1.2.194:
+    resolution: {integrity: sha512-PA7kudCtpGy1m40LKTeIsSse0zkmMyHthYjfn7q8pUWlo2b9o9RxO5zsnLxLsgATsoPwfMmVl9m3+1xSkxJp+g==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -7553,8 +7553,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-linux-x64-musl/1.2.189:
-    resolution: {integrity: sha512-/p5yXa9HEzpVEuE4ivkW1IvwyYu6fT+L2OvVEs5oXIba80F0Wjy7InWqaa83gwrdMH+bXV6loG8LzZUZu/lpjA==}
+  /@swc/core-linux-x64-musl/1.2.194:
+    resolution: {integrity: sha512-2CdLXLpdKqtZmFgcEOyw9Gu/24ku5/4NabSdYg58XGarrPS96lQk80rzaMYxs6AzfsfhHGmsp3se07jnLwSlXQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -7562,8 +7562,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-win32-arm64-msvc/1.2.189:
-    resolution: {integrity: sha512-o/1ueM6/sifNjYnO6NMEXB895spVfJs5oQIPxQG9vJ/4zWLw8YmAx+u1xJY+XGyK6gnroHt7yPiS87qWdbeF6w==}
+  /@swc/core-win32-arm64-msvc/1.2.194:
+    resolution: {integrity: sha512-7NpBJ1fgeP8Y2H0aCTZR8nx0BEHXdSuFwBAwKrb4kaP0d2qVAVIv/rOk7L/MwsuXmlsISQ13JnUtQYjYPGJsUg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
@@ -7571,8 +7571,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-win32-ia32-msvc/1.2.189:
-    resolution: {integrity: sha512-YDwRkzykaf+dw5Z7u189cC/Tttkn2NVV84hrGL3LbVuh7wT5PaDhZs4Yz4unZQSlPV12olmZWgNr/i27h5wlpg==}
+  /@swc/core-win32-ia32-msvc/1.2.194:
+    resolution: {integrity: sha512-1TP+kS32uFSgBHOJGmLNfxcqU7e85FZZTKAVAQgEPmHH0lJ/9BcViMDhMOdnyEWjIluD5aj6WdPdeAz1YlXDng==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
@@ -7580,8 +7580,8 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core-win32-x64-msvc/1.2.189:
-    resolution: {integrity: sha512-Nge8Z/ZkAp5p5No50yBDpBG7+ZYaVWGSuwtPj6OJe7orzvDCEm9GgcVE6J9GEjbclSWlCH8B8lUe17GaKRZHbg==}
+  /@swc/core-win32-x64-msvc/1.2.194:
+    resolution: {integrity: sha512-c3tiShCGY03XbJqXpliHRHMBBB/KGWS1kcbKn2GhaZN4fY8UgD5kZk3XJDwDJ6oqwlgkBdWXRAgD5Td2aAKMRg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
@@ -7589,24 +7589,24 @@ packages:
     dev: false
     optional: true
 
-  /@swc/core/1.2.189:
-    resolution: {integrity: sha512-S5cKX4ECMSfW78DLFgnlilJZgjrFRYwPslrrwpLl3gpwh+Qo72/Mhn71u7G/5xXW+T/xW5GwPccHfCk+k72uUg==}
+  /@swc/core/1.2.194:
+    resolution: {integrity: sha512-+Jg3qxad32CqnFmw4pqwm/5JCVWGkoM8P5pqPlyj5sokHFUJluMkCeaikuvIZhJCabR9q84lEnXlIjMu42ZfKA==}
     engines: {node: '>=10'}
     hasBin: true
     optionalDependencies:
-      '@swc/core-android-arm-eabi': 1.2.189
-      '@swc/core-android-arm64': 1.2.189
-      '@swc/core-darwin-arm64': 1.2.189
-      '@swc/core-darwin-x64': 1.2.189
-      '@swc/core-freebsd-x64': 1.2.189
-      '@swc/core-linux-arm-gnueabihf': 1.2.189
-      '@swc/core-linux-arm64-gnu': 1.2.189
-      '@swc/core-linux-arm64-musl': 1.2.189
-      '@swc/core-linux-x64-gnu': 1.2.189
-      '@swc/core-linux-x64-musl': 1.2.189
-      '@swc/core-win32-arm64-msvc': 1.2.189
-      '@swc/core-win32-ia32-msvc': 1.2.189
-      '@swc/core-win32-x64-msvc': 1.2.189
+      '@swc/core-android-arm-eabi': 1.2.194
+      '@swc/core-android-arm64': 1.2.194
+      '@swc/core-darwin-arm64': 1.2.194
+      '@swc/core-darwin-x64': 1.2.194
+      '@swc/core-freebsd-x64': 1.2.194
+      '@swc/core-linux-arm-gnueabihf': 1.2.194
+      '@swc/core-linux-arm64-gnu': 1.2.194
+      '@swc/core-linux-arm64-musl': 1.2.194
+      '@swc/core-linux-x64-gnu': 1.2.194
+      '@swc/core-linux-x64-musl': 1.2.194
+      '@swc/core-win32-arm64-msvc': 1.2.194
+      '@swc/core-win32-ia32-msvc': 1.2.194
+      '@swc/core-win32-x64-msvc': 1.2.194
     dev: false
 
   /@swc/helpers/0.3.13:
@@ -7615,14 +7615,14 @@ packages:
       tslib: 2.4.0
     dev: false
 
-  /@swc/jest/0.2.21_@swc+core@1.2.189:
+  /@swc/jest/0.2.21_@swc+core@1.2.194:
     resolution: {integrity: sha512-/+NcExiZbxXANNhNPnIdFuGq62CeumulLS1bngwqIXd8H7d96LFUfrYzdt8tlTwLMel8tFtQ5aRjzVkyOTyPDw==}
     engines: {npm: '>= 7.0.0'}
     peerDependencies:
       '@swc/core': '*'
     dependencies:
       '@jest/create-cache-key-function': 27.5.1
-      '@swc/core': 1.2.189
+      '@swc/core': 1.2.194
     dev: false
 
   /@szmarczak/http-timer/1.1.2:
@@ -16369,7 +16369,6 @@ packages:
       - '@types/node'
       - supports-color
       - ts-node
-    dev: true
 
   /jest-cli/28.1.0_@types+node@16.11.36:
     resolution: {integrity: sha512-fDJRt6WPRriHrBsvvgb93OxgajHHsJbk4jZxiPqmZbMDRcHskfJBBfTyjFko0jjfprP544hOktdSi9HVgl4VUQ==}
@@ -16435,7 +16434,6 @@ packages:
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /jest-config/28.1.0_@types+node@16.11.36:
     resolution: {integrity: sha512-aOV80E9LeWrmflp7hfZNn/zGA4QKv/xsn2w8QCBP0t0+YqObuCWTSgNbHJ0j9YsTuCO08ZR/wsvlxqqHX20iUA==}
@@ -16973,7 +16971,6 @@ packages:
       - '@types/node'
       - supports-color
       - ts-node
-    dev: true
 
   /jest/28.1.0_@types+node@16.11.36:
     resolution: {integrity: sha512-TZR+tHxopPhzw3c3560IJXZWLNHgpcz1Zh0w5A65vynLGNcg/5pZ+VildAd7+XGOu6jd58XMY/HNn0IkZIXVXg==}


Test patch:
diff --git a/packages/components/src/Table/Table.test.tsx b/packages/components/src/Table/Table.test.tsx
index 9a00effec..3ae608136 100644
--- a/packages/components/src/Table/Table.test.tsx
+++ b/packages/components/src/Table/Table.test.tsx
@@ -272,3 +272,23 @@ test('sorting', () => {
   expect(sortedRows[2].textContent).toContain('Banana');
   expect(sortedRows[3].textContent).toContain('Apple');
 });
+
+test('allows to strecht to fit container', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Table aria-label="Streched table" stretch>
+        <Table.Header>
+          <Table.Column>Name</Table.Column>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Alice</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </ThemeProvider>
+  );
+
+  const table = screen.getAllByRole(/grid/);
+  expect(table[0]).toHaveStyle(`width: 100%`);
+});