fix(table): Allow wrapping text in table-header and table-cell (#7665)

## Summary Adds styles to allow long text in header or table cell to wrap. Adds story.
Esri · Sep 2, 2023 · 15cb2bf · 15cb2bf
1 parent 851bedb
commit 15cb2bf
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss
@@ -26,7 +26,7 @@
 }
 
 td {
-  @apply text-start focus-base align-middle text-color-1;
+  @apply text-start focus-base align-middle text-color-1 whitespace-normal;
   background: var(--calcite-internal-table-cell-background);
   border-inline-end: 1px solid var(--calcite-ui-border-3);
   font-size: var(--calcite-internal-table-cell-font-size);

diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss
@@ -26,7 +26,7 @@
 }
 
 th {
-  @apply text-color-1 focus-base text-start font-medium align-top;
+  @apply text-color-1 focus-base text-start font-medium align-top whitespace-normal;
   font-size: var(--calcite-internal-table-cell-font-size);
   border-inline-end: 1px solid var(--calcite-internal-table-header-border-color);
   border-block-end: 1px solid var(--calcite-internal-table-header-border-color);

diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
@@ -715,6 +715,81 @@ export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_T
     </calcite-table-row>
   </calcite-table>`;
 
+export const LongWrappingTextContent_TestOnly = (): string => html` <calcite-table
+  numbered
+  caption="Long cell wrapping table"
+>
+  <calcite-table-row slot="table-header">
+    <calcite-table-header
+      heading="Heading or a longer wrapping text that goes here"
+      description="Description"
+    ></calcite-table-header>
+    <calcite-table-header
+      heading="Heading or a longer wrapping text that goes here"
+      description="Description"
+    ></calcite-table-header>
+    <calcite-table-header
+      heading="Heading or a longer wrapping text that goes here and maybe one is longer"
+      description="Description"
+    ></calcite-table-header>
+    <calcite-table-header
+      heading="Heading or a longer wrapping text that goes here"
+      description="Description or a longer bit of text that can go here"
+    ></calcite-table-header>
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+      more calcite-table-row is selected.</calcite-table-cell
+    >
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+      more calcite-table-row is selected.</calcite-table-cell
+    >
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+      "none".</calcite-table-cell
+    >
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+      more calcite-table-row is selected.</calcite-table-cell
+    >
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+      more calcite-table-row is selected.</calcite-table-cell
+    >
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+      "none".</calcite-table-cell
+    >
+  </calcite-table-row>
+  <calcite-table-row>
+    <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+      more calcite-table-row is selected.</calcite-table-cell
+    >
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
+      more calcite-table-row is selected.</calcite-table-cell
+    >
+    <calcite-table-cell
+      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+      "none".</calcite-table-cell
+    >
+  </calcite-table-row>
+  <calcite-table-row slot="table-footer">
+    <calcite-table-cell>foot</calcite-table-cell>
+    <calcite-table-cell>foot</calcite-table-cell>
+    <calcite-table-cell>foot</calcite-table-cell>
+    <calcite-table-cell>foot</calcite-table-cell>
+  </calcite-table-row>
+</calcite-table>`;
+
 export const localized_TestOnly = (): string => html`<calcite-table
   lang="ar"
   numbering-system="arab"