From 179c78f63d081f5dd2138af6ccdc358a85bb7143 Mon Sep 17 00:00:00 2001 From: 5t3ph Date: Thu, 17 Jul 2025 14:32:46 -0500 Subject: [PATCH 1/3] fix(sidenav,tooltip): update deprecated CSS property --- components/sidenav/index.css | 2 +- components/tooltip/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/sidenav/index.css b/components/sidenav/index.css index f75a07ca5fc..2b0c2470b97 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -189,7 +189,7 @@ display: inline-flex; justify-content: start; box-sizing: border-box; - word-break: break-word; + overflow-wrap: break-word; hyphens: auto; cursor: pointer; transition: diff --git a/components/tooltip/index.css b/components/tooltip/index.css index 11b18eb1b18..fba15da421d 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -87,7 +87,7 @@ font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight)); line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); - word-break: break-word; + overflow-wrap: break-word; -webkit-font-smoothing: antialiased; cursor: default; From 4faf8c9057b762c30ef8d987cdd9b35302a42cd3 Mon Sep 17 00:00:00 2001 From: 5t3ph Date: Thu, 17 Jul 2025 14:46:14 -0500 Subject: [PATCH 2/3] fix(sidenav,tooltip): enable overflow-wrap: break-word --- components/sidenav/index.css | 3 +++ components/tooltip/index.css | 3 +++ 2 files changed, 6 insertions(+) diff --git a/components/sidenav/index.css b/components/sidenav/index.css index 2b0c2470b97..06c5c19fb4a 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -216,6 +216,9 @@ .spectrum-SideNav-link-text { margin-block-start: var(--mod-sidenav-top-to-label, var(--spectrum-sidenav-top-to-label)); margin-block-end: var(--mod-sidenav-bottom-to-label, var(--spectrum-sidenav-bottom-to-label)); + + /* Allow overflow-wrap to work and prevent text overflow */ + inline-size: 100%; } .spectrum-Icon { diff --git a/components/tooltip/index.css b/components/tooltip/index.css index fba15da421d..fda2659b803 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -301,6 +301,9 @@ line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start)); margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end)); + + /* Allow overflow-wrap to work and prevent text overflow */ + inline-size: 100%; } /****** Tooltip Placement and Animation Direction ******/ From 19278b5c7b3209f1ac2fc09f5890086520daad06 Mon Sep 17 00:00:00 2001 From: 5t3ph Date: Thu, 17 Jul 2025 15:43:30 -0500 Subject: [PATCH 3/3] fix(sidenav,tooltip): add changeset --- .changeset/chubby-mirrors-wish.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/chubby-mirrors-wish.md diff --git a/.changeset/chubby-mirrors-wish.md b/.changeset/chubby-mirrors-wish.md new file mode 100644 index 00000000000..b16a3351d8c --- /dev/null +++ b/.changeset/chubby-mirrors-wish.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/sidenav": patch +"@spectrum-css/tooltip": patch +--- + +Replace deprecated `word-break: break-word` with `overflow-wrap: break-word` to align with modern CSS standards and improve cross-browser compatibility. This property was deprecated in Chrome 44 (July 2015) in favor of the standardized `overflow-wrap` property.