From 4cfc228ddbf78390896cdccc6dda57408d88dfca Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 19 Nov 2024 15:11:38 +0000 Subject: [PATCH] Change the table modifier to generic modifier --- .../tables/table-with-more-columns.njk | 4 ++-- packages/components/tables/_tables.scss | 5 ----- packages/core/all.scss | 1 + packages/core/utilities/_word-breaks.scss | 16 ++++++++++++++++ 4 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 packages/core/utilities/_word-breaks.scss diff --git a/app/components/tables/table-with-more-columns.njk b/app/components/tables/table-with-more-columns.njk index ff1e222d0..1c71c4b17 100644 --- a/app/components/tables/table-with-more-columns.njk +++ b/app/components/tables/table-with-more-columns.njk @@ -35,7 +35,7 @@ }, { text: "stephanie.meyer9@test.com", - classes: "nhsuk-table__cell--break-word" + classes: "nhsuk-u-word-break-all" }, { text: "Active" @@ -50,7 +50,7 @@ }, { text: "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com", - classes: "nhsuk-table__cell--break-word" + classes: "nhsuk-u-word-break-all" }, { text: "Inactive" diff --git a/packages/components/tables/_tables.scss b/packages/components/tables/_tables.scss index 9cb71572c..f05fcc5e8 100644 --- a/packages/components/tables/_tables.scss +++ b/packages/components/tables/_tables.scss @@ -174,8 +174,3 @@ .nhsuk-table__cell--numeric { text-align: right; } - -.nhsuk-table__header--break-word, -.nhsuk-table__cell--break-word { - word-break: break-all; -} diff --git a/packages/core/all.scss b/packages/core/all.scss index 0c35075a2..dfd9b6c5b 100644 --- a/packages/core/all.scss +++ b/packages/core/all.scss @@ -43,3 +43,4 @@ @import "utilities/typography"; @import "utilities/visually-hidden"; @import "utilities/widths"; +@import "utilities/word-breaks"; diff --git a/packages/core/utilities/_word-breaks.scss b/packages/core/utilities/_word-breaks.scss new file mode 100644 index 000000000..ca7ebc6a9 --- /dev/null +++ b/packages/core/utilities/_word-breaks.scss @@ -0,0 +1,16 @@ +// ========================================================================== +// UTILITIES / #WORD-BREAK +// ========================================================================== + +/** + * This class allows words to be broken between any 2 + * to avoid overflowing their container. + * + * This can be useful on table cells which could contain + * long strings such as email addresses. + * + * Usage: class="nhsuk-u-word-break-all" + */ +.nhsuk-u-word-break-all { + word-break: break-all; +}