Skip to content

Commit b1166bd

Browse files
authored
fix(tooltip,textfield,sidenav): update deprecated css (#4044)
1 parent 9dd71ed commit b1166bd

File tree

3 files changed

+14
-2
lines changed

3 files changed

+14
-2
lines changed

.changeset/chubby-mirrors-wish.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@spectrum-css/sidenav": patch
3+
"@spectrum-css/tooltip": patch
4+
---
5+
6+
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.

components/sidenav/index.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@
189189
display: inline-flex;
190190
justify-content: start;
191191
box-sizing: border-box;
192-
word-break: break-word;
192+
overflow-wrap: break-word;
193193
hyphens: auto;
194194
cursor: pointer;
195195
transition:
@@ -216,6 +216,9 @@
216216
.spectrum-SideNav-link-text {
217217
margin-block-start: var(--mod-sidenav-top-to-label, var(--spectrum-sidenav-top-to-label));
218218
margin-block-end: var(--mod-sidenav-bottom-to-label, var(--spectrum-sidenav-bottom-to-label));
219+
220+
/* Allow overflow-wrap to work and prevent text overflow */
221+
inline-size: 100%;
219222
}
220223

221224
.spectrum-Icon {

components/tooltip/index.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size));
8888
font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight));
8989
line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
90-
word-break: break-word;
90+
overflow-wrap: break-word;
9191
-webkit-font-smoothing: antialiased;
9292

9393
cursor: default;
@@ -301,6 +301,9 @@
301301
line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
302302
margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start));
303303
margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end));
304+
305+
/* Allow overflow-wrap to work and prevent text overflow */
306+
inline-size: 100%;
304307
}
305308

306309
/****** Tooltip Placement and Animation Direction ******/

0 commit comments

Comments
 (0)