fix(tooltip): force label wrapping

[rise-erpelding]

Description

Fixes an issue with tooltip text overflow: long, unbroken words were not wrapping and overflowed the container. See screenshots.

Motivation and context

We have overflow-wrap: break-word; on #tooltip, but need inline-size: 100% on the label to force it to wrap properly in cases of longer text without spaces.

#5504 previously updated the CSS to remove the deprecated word-break: break-word in favor of overflow-wrap: break-word. @5t3ph explains and fixes the issue that this causes in CSS via adobe/spectrum-css#4044. This PR carries that fix over to be applied in SWC.

The fix in adobe/spectrum-css#4044 does not require modifications for icons because it addresses the S2 version of tooltip, where icon variants have been removed. Therefore, additional modifications were made here to accommodate the tooltip variants that include icons.

Related issue(s)

• fixes SWC-313

Screenshots

Before:

After:

---

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

• Check regular tooltip wrapping (no icon)

  1. Go to 1st gen Storybook/Docs site and navigate to a tooltip with no icon
  2. Using Storybook controls or the browser inspector, change the tooltip label text to a single, long word (e.g., "supercalifragilisticexpialidocious" but you can use any long string)
  3. Confirm that the tooltip text wraps instead of overflowing the container

• Check tooltip wrapping with icon

  1. Go to Storybook/Docs site and navigate to a tooltip with no icon
  2. Using Storybook controls or the browser inspector, change the tooltip label text to a single, long word
  3. Confirm that the tooltip text wraps instead of overflowing the container
  4. Confirm that tooltip spacing remains the same as with a short word or a longer, multi-word string

Device review

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 3ddbb1a

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

This PR includes changesets to release 78 packages

Name	Type
@spectrum-web-components/tooltip	Patch
@spectrum-web-components/picker	Patch
@spectrum-web-components/bundle	Patch
@spectrum-web-components/truncated	Patch
@spectrum-web-components/action-menu	Patch
@spectrum-web-components/breadcrumbs	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-field	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/combobox	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/number-field	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/search	Patch
@spectrum-web-components/sidenav	Patch
@spectrum-web-components/slider	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/textfield	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/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
@spectrum-web-components/eslint-plugin	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

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 Visual Regression Test Results

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

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5878

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.

[caseyisonit]

looks great

[marissahuysentruyt]

Love a quick fix!

I left one suggestion, but I'm not sure it should block the PR. I thought there was some discussion recently-ish around the formatting we need in the SWC changesets to make sure we have proper hierarchy or headings or something in the global changelog. Anyways, I've been trying to use the changeset guidelines more, so I left a link because it always takes me a few tries to find it!

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

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

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5878

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.