fix(field-label): address edge case where required icon would not render on the same line(Safari only)

[cdransf]

Description

Fixed Safari-specific rendering issue where the required asterisk in sp-field-label would intermittently wrap to a new line. The solution uses CSS-only changes to ensure the asterisk always stays inline with the label text.

Changes:

• Updated label element to use display: inline-flex with white-space: nowrap
• Added flex-shrink: 0 to .required-icon to prevent asterisk from shrinking

Motivation and context

Safari (desktop and iPad) had an intermittent rendering bug where the required field asterisk would wrap to the next line, especially within flex containers. This was unpredictable and occurred on page refresh. The issue impacted form usability and visual consistency across browsers.

Related issue(s)

• fixes [Bug]: Required field label sometimes renders asterisk on next line #4696 + SWC-527

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

• Required asterisk stays inline in Safari

  1. Open Storybook in Safari: Field Label → Required In Flex Container
  2. Refresh the page multiple times (Cmd+R)
  3. Verify asterisk never wraps to a new line in any test case

• Required asterisk displays correctly across all size variants

  1. Navigate to Field Label → Required story
  2. Check small, medium, large, and xl sizes
  3. Confirm asterisk is visible and inline for all sizes

• Side-aligned labels maintain correct alignment

  1. Check Field Label → Side Align Start and Side Align End stories
  2. Add required attribute to examples
  3. Verify asterisk positioning is correct

• Existing field label behavior is unchanged

  1. Test in forms with field-label (e.g., Textfield, Picker stories)
  2. Verify no layout regressions
  3. Check disabled state rendering

Device review

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: d723d35

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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-5822

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.

[github-actions]

Tachometer results

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

[coveralls]

Pull Request Test Coverage Report for Build 18987390821

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 97.966%

---

Totals
Change from base Build 18982870623:	0.0%
Covered Lines:	34259
Relevant Lines:	34788

---

💛 - Coveralls

[Rajdeepc]

Hi @cdransf, as part of the review process, could you please revert the golden hash so I can update the visuals that the VRT is flagging? Once your changes are approved, you can reapply the golden hash to accept the updated baseline.

[rise-erpelding]

I'm seeing that this longer field label example has stopped wrapping because we have nowrap on here, do we want the field label to wrap for situations like this?

It doesn't seem like we have VRTs covering this situation as far as I can see, it would be good to address this gap in coverage too.