Skip to content

Conversation

@castastrophe
Copy link
Contributor

@castastrophe castastrophe commented May 29, 2025

Description

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.

Motivation and context

I've been seeing a lot of stylelint warnings about this property-value pairing and after doing a little research, found a non-deprecated alternative to accomplish the same results.

Related issue(s)

  • fixes [CSS-1223]

Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Manual review test cases

  • Tooltip: Expect to see no line-wrap regressions or changes to VRTs [@cdransf]
  • Text field: Expect to see no line-wrap regressions or changes to VRTs [@cdransf]
  • Side nav: Expect to see no line-wrap regressions or changes to VRTs [@cdransf]

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

@github-actions
Copy link
Contributor

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

@castastrophe castastrophe self-assigned this May 29, 2025
@castastrophe castastrophe marked this pull request as ready for review May 29, 2025 18:41
@castastrophe castastrophe requested a review from a team as a code owner May 29, 2025 18:41
@github-actions
Copy link
Contributor

github-actions bot commented May 29, 2025

Tachometer results

Currently, no packages are changed by this PR...

@castastrophe castastrophe changed the title fix(tooltip,textfield,sidenav): update deprecated css fix(tooltip,textfield,sidenav): update deprecated css [CSS-1223] May 29, 2025
@castastrophe castastrophe added jira ticket created TODO: Delete label once Jira integration is complete and removed needs jira ticket Issue has yet to be imported to Jira labels May 29, 2025
Copy link
Member

@cdransf cdransf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! ✨

@castastrophe castastrophe enabled auto-merge (rebase) May 29, 2025 19:59
@castastrophe castastrophe force-pushed the castastrophe/fix-update-word-break-properties branch from 19c03e5 to e9eddb3 Compare May 30, 2025 15:43
@changeset-bot
Copy link

changeset-bot bot commented May 30, 2025

🦋 Changeset detected

Latest commit: b82e5a8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 84 packages
Name Type
@spectrum-web-components/textfield Patch
@spectrum-web-components/sidenav Patch
@spectrum-web-components/tooltip Patch
@spectrum-web-components/color-field Patch
@spectrum-web-components/combobox Patch
@spectrum-web-components/number-field Patch
@spectrum-web-components/search Patch
@spectrum-web-components/bundle Patch
@spectrum-web-components/picker Patch
@spectrum-web-components/truncated Patch
@spectrum-web-components/slider Patch
documentation Patch
@spectrum-web-components/action-menu Patch
@spectrum-web-components/custom-vars-viewer Patch
example-project-rollup Patch
example-project-webpack Patch
@spectrum-web-components/story-decorator Patch
@spectrum-web-components/breadcrumbs Patch
@spectrum-web-components/eslint-plugin Patch
@spectrum-web-components/accordion Patch
@spectrum-web-components/action-bar Patch
@spectrum-web-components/action-button Patch
@spectrum-web-components/action-group Patch
@spectrum-web-components/alert-banner Patch
@spectrum-web-components/alert-dialog Patch
@spectrum-web-components/asset Patch
@spectrum-web-components/avatar Patch
@spectrum-web-components/badge Patch
@spectrum-web-components/button-group Patch
@spectrum-web-components/button Patch
@spectrum-web-components/card Patch
@spectrum-web-components/checkbox Patch
@spectrum-web-components/clear-button Patch
@spectrum-web-components/close-button Patch
@spectrum-web-components/coachmark Patch
@spectrum-web-components/color-area Patch
@spectrum-web-components/color-handle Patch
@spectrum-web-components/color-loupe Patch
@spectrum-web-components/color-slider Patch
@spectrum-web-components/color-wheel Patch
@spectrum-web-components/contextual-help Patch
@spectrum-web-components/dialog Patch
@spectrum-web-components/divider Patch
@spectrum-web-components/dropzone Patch
@spectrum-web-components/field-group Patch
@spectrum-web-components/field-label Patch
@spectrum-web-components/help-text Patch
@spectrum-web-components/icon Patch
@spectrum-web-components/icons-ui Patch
@spectrum-web-components/icons-workflow Patch
@spectrum-web-components/icons Patch
@spectrum-web-components/iconset Patch
@spectrum-web-components/illustrated-message Patch
@spectrum-web-components/infield-button Patch
@spectrum-web-components/link Patch
@spectrum-web-components/menu Patch
@spectrum-web-components/meter Patch
@spectrum-web-components/modal Patch
@spectrum-web-components/overlay Patch
@spectrum-web-components/picker-button Patch
@spectrum-web-components/popover Patch
@spectrum-web-components/progress-bar Patch
@spectrum-web-components/progress-circle Patch
@spectrum-web-components/radio Patch
@spectrum-web-components/split-view Patch
@spectrum-web-components/status-light Patch
@spectrum-web-components/swatch Patch
@spectrum-web-components/switch Patch
@spectrum-web-components/table Patch
@spectrum-web-components/tabs Patch
@spectrum-web-components/tags Patch
@spectrum-web-components/thumbnail Patch
@spectrum-web-components/toast Patch
@spectrum-web-components/top-nav Patch
@spectrum-web-components/tray Patch
@spectrum-web-components/underlay Patch
@spectrum-web-components/vrt-compare Patch
@spectrum-web-components/base Patch
@spectrum-web-components/grid Patch
@spectrum-web-components/opacity-checkerboard Patch
@spectrum-web-components/reactive-controllers Patch
@spectrum-web-components/shared Patch
@spectrum-web-components/styles Patch
@spectrum-web-components/theme Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@rise-erpelding rise-erpelding self-requested a review June 2, 2025 18:29
Copy link
Collaborator

@rise-erpelding rise-erpelding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No regressions that I can see!

@castastrophe castastrophe force-pushed the castastrophe/fix-update-word-break-properties branch from e9eddb3 to b82e5a8 Compare June 6, 2025 06:08
@castastrophe castastrophe added Status: Ready for merge PR has 2 approvals, all tests pass, and is ready to merge and removed Status: Ready for review PR ready for review or re-review. labels Jun 6, 2025
@castastrophe castastrophe disabled auto-merge June 6, 2025 06:08
@castastrophe castastrophe merged commit cde976d into main Jun 6, 2025
7 of 22 checks passed
@castastrophe castastrophe deleted the castastrophe/fix-update-word-break-properties branch June 6, 2025 06:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working Component: Side nav Component: Textfield Component: Tooltip jira ticket created TODO: Delete label once Jira integration is complete Spectrum CSS Status: Ready for merge PR has 2 approvals, all tests pass, and is ready to merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants