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" +} diff --git a/packages/nimble-components/src/banner/styles.ts b/packages/nimble-components/src/banner/styles.ts index a9c03a6e4a..9f471cc32d 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; + overflow-wrap: anywhere; } :host(:not([open])) { @@ -64,7 +65,6 @@ export const styles = css` display: inline; font-weight: bold; padding-right: 8px; - white-space: nowrap; } :host([title-hidden]) slot[name='title'] { 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'} `)}