diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 66f70c60228..53df31c2a46 100644 --- 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 index bd167b5d4ea..c75490ef772 100644 --- 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 index cf2fdd79ab1..036be615d02 100644 --- 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 `; +export const LongWrappingTextContent_TestOnly = (): string => html` + + + + + + + + A slot for adding a calcite-action-bar or other components to display. + 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. + 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. + A slot for adding a calcite-action-bar or other components to display when selectionMode is not + "none". + + + A slot for adding a calcite-action-bar or other components to display. + 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. + 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. + A slot for adding a calcite-action-bar or other components to display when selectionMode is not + "none". + + + A slot for adding a calcite-action-bar or other components to display. + 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. + 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. + A slot for adding a calcite-action-bar or other components to display when selectionMode is not + "none". + + + foot + foot + foot + foot + +`; + export const localized_TestOnly = (): string => html`