Refactor Button to use data-has-visuals instead of data-no-visuals

[Copilot]

Follow-up to #7327. Replaces the negative attribute pattern with a positive one for clearer semantics and direct 1:1 mapping to the original :has(.Visual) selector.

Changelog

Changed

• ButtonBase now sets data-has-visuals when leadingVisual, trailingVisual, or trailingAction props are provided (previously set data-no-visuals="true" when none were provided)
• CSS selectors updated from [data-no-visuals='true'] to :not([data-has-visuals]) and from :not([data-no-visuals='true']) to [data-has-visuals]

Before:

<Button variant="link">Text only</Button>
// Rendered: <button data-no-visuals="true" ...>

<Button variant="link" leadingVisual={Icon}>With icon</Button>
// Rendered: <button ...> (no attribute)

After:

<Button variant="link">Text only</Button>
// Renders: <button ...> (no attribute)

<Button variant="link" leadingVisual={Icon}>With icon</Button>
// Renders: <button data-has-visuals ...>

CSS selectors:

/* Before: double-negative pattern */
&:not([data-no-visuals='true']) { ... }

/* After: direct positive check */
&[data-has-visuals] { ... }

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Internal refactor. Maintains identical behavioral characteristics and performance profile.

Testing & Reviewing

Verify link buttons with and without visuals render correctly with data-a11y-link-underlines preference. Check the LinkVariantWithUnderlinePreference story in Storybook.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

Original prompt

Summary

Refactor the Button performance optimization to use a positive attribute check (data-has-visuals) instead of the negative one (data-no-visuals).

Why

The positive attribute more exactly matches the original :has(.Visual) behavior:

• Original: :has(.Visual) matches when visuals exist
• New: [data-has-visuals] matches when visuals exist

This is clearer to read and a 1:1 behavioral translation:

/* Original */
&:has(.Visual) { ... }
&:not(:has(.Visual)) { ... }

/* Direct replacement */
&[data-has-visuals] { ... }
&:not([data-has-visuals]) { ... }

Changes needed

1. In the CSS (packages/react/src/Button/ButtonBase.module.css):

   • Replace [data-no-visuals='true'] with :not([data-has-visuals])
   • Replace :not([data-no-visuals='true']) with [data-has-visuals]

2. In the React component (wherever data-no-visuals is being set):

   • Change the attribute from data-no-visuals="true" (when no visuals) to data-has-visuals (when visuals exist)
   • The attribute should be present when leadingVisual or trailingVisual props are provided

Context

This is a follow-up to PR #7327 which replaces :has(.Visual) selectors with data attribute checks for INP performance optimization.

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 50564f7

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