From a5afdcf1a4fd40ce5d9f7a63626dd017805156b5 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:08:11 -0500 Subject: [PATCH 1/6] Allow very long words in banner to break to another line --- packages/nimble-components/src/banner/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nimble-components/src/banner/styles.ts b/packages/nimble-components/src/banner/styles.ts index a9c03a6e4a..de6978c5c2 100644 --- a/packages/nimble-components/src/banner/styles.ts +++ b/packages/nimble-components/src/banner/styles.ts @@ -33,6 +33,7 @@ export const styles = css` font-size: 12.8px; align-items: top; overflow: hidden; + word-break: break-word; } :host(:not([open])) { From eff9eed32a0aa5343881f01b3965711a1d9217b7 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:08:30 -0500 Subject: [PATCH 2/6] Change files --- ...le-components-78757500-8f52-4913-b98c-dfc88b407979.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-78757500-8f52-4913-b98c-dfc88b407979.json diff --git a/change/@ni-nimble-components-78757500-8f52-4913-b98c-dfc88b407979.json b/change/@ni-nimble-components-78757500-8f52-4913-b98c-dfc88b407979.json new file mode 100644 index 0000000000..187a3de760 --- /dev/null +++ b/change/@ni-nimble-components-78757500-8f52-4913-b98c-dfc88b407979.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Allow very long words in banner to break to another line", + "packageName": "@ni/nimble-components", + "email": "7282195+m-akinc@users.noreply.github.com", + "dependentChangeType": "patch" +} From b5425e0b450a687cf7794bbf32fa1b644906ea9b Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:33:19 -0500 Subject: [PATCH 3/6] Title ought to wrap if necessary --- packages/nimble-components/src/banner/styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/nimble-components/src/banner/styles.ts b/packages/nimble-components/src/banner/styles.ts index de6978c5c2..76a8297e9f 100644 --- a/packages/nimble-components/src/banner/styles.ts +++ b/packages/nimble-components/src/banner/styles.ts @@ -65,7 +65,6 @@ export const styles = css` display: inline; font-weight: bold; padding-right: 8px; - white-space: nowrap; } :host([title-hidden]) slot[name='title'] { From 421969643ac6e56f6613d85a2017eb7d1ba35ed4 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:33:32 -0500 Subject: [PATCH 4/6] Add long word to visual tests --- packages/storybook/src/nimble/banner/banner-matrix.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/storybook/src/nimble/banner/banner-matrix.stories.ts b/packages/storybook/src/nimble/banner/banner-matrix.stories.ts index 3f927302f2..0cda09fa14 100644 --- a/packages/storybook/src/nimble/banner/banner-matrix.stories.ts +++ b/packages/storybook/src/nimble/banner/banner-matrix.stories.ts @@ -68,7 +68,7 @@ const component = ( prevent-dismiss="${partsHidden}" > ${severityLabel} ${actionLabel} ${partsHiddenLabel} ${longTextLabel} ${longText ? loremIpsum.substring(0, 78) : ''} - ${longText ? loremIpsum : 'This is message text.'} + ${longText ? `${loremIpsum} abcdedfghijklmnopqrstuvwxyzabcdedfghijklmnopqrstuvwxyzabcdedfghijklmnopqrstuvwxyzabcdedfghijklmnopqrstuvwxyz` : 'This is message text.'} ${when(() => linkVisible, html` <${anchorTag} slot="action" href="#">${longText ? loremIpsum.substring(0, 78) : 'Nimble anchor'} `)} From a46e72ae198e2e90e7b1c80bc3ed0402345bfcf7 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Tue, 4 Jun 2024 12:20:24 -0500 Subject: [PATCH 5/6] Use overflow-wrap instead --- packages/nimble-components/src/banner/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/banner/styles.ts b/packages/nimble-components/src/banner/styles.ts index 76a8297e9f..ce4334f26e 100644 --- a/packages/nimble-components/src/banner/styles.ts +++ b/packages/nimble-components/src/banner/styles.ts @@ -33,7 +33,7 @@ export const styles = css` font-size: 12.8px; align-items: top; overflow: hidden; - word-break: break-word; + overflow-wrap: break-word; } :host(:not([open])) { From 2113b6b8c32c3fa706e9d64356e092d38702b693 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Tue, 4 Jun 2024 15:48:17 -0500 Subject: [PATCH 6/6] Use anywhere instead of break-word --- packages/nimble-components/src/banner/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/banner/styles.ts b/packages/nimble-components/src/banner/styles.ts index ce4334f26e..9f471cc32d 100644 --- a/packages/nimble-components/src/banner/styles.ts +++ b/packages/nimble-components/src/banner/styles.ts @@ -33,7 +33,7 @@ export const styles = css` font-size: 12.8px; align-items: top; overflow: hidden; - overflow-wrap: break-word; + overflow-wrap: anywhere; } :host(:not([open])) {