Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove border & background from invisible disabled buttons #5423

Closed
wants to merge 2 commits into from
Closed

Remove border & background from invisible disabled buttons #5423

wants to merge 2 commits into from

Conversation

iansan5653
Copy link
Contributor

@iansan5653 iansan5653 commented Dec 12, 2024 •
edited
Loading

Removes the background and border from disabled invisible Button and IconButton by updating the shared ButtonBase CSS styles. It looks like ButtonBase is fully shipped to CSS Modules so we don't have to update any styled-system styles for this.

Before:

Demo with enabled & disabled invisible iconbuttons. The disabled button has a border and background.

After (video to show hover/active styling):

Screen.Recording.2024-12-12.at.11.35.17.AM.mov

Changelog

New

Changed

  • Removes border & background from disabled invisible buttons

Removed

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

Testing & Reviewing

Merge checklist

@iansan5653 iansan5653 requested a review from a team as a code owner December 12, 2024 16:34
@iansan5653 iansan5653 requested a review from joshblack December 12, 2024 16:34
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 12, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 31d2419

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

This PR includes changesets to release 1 package
Name Type
@primer/react 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 GitHub Actions
Copy link
Contributor

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Dec 12, 2024
@iansan5653 iansan5653 mentioned this pull request Dec 12, 2024
Closed
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 12, 2024 •
edited
Loading

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 103.51 KB (0%)
packages/react/dist/browser.umd.js 103.78 KB (0%)

iansan5653
iansan5653 commented Dec 12, 2024
View reviewed changes
packages/react/src/Button/ButtonBase.module.css
@@ -430,8 +430,6 @@
&:disabled,
&[aria-disabled='true']:not([data-loading='true']) {
color: var(--button-invisible-fgColor-disabled);
Copy link
Contributor Author

@iansan5653 iansan5653 Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Comparison of rest/disabled fg colors for reference. It's possible we might want to revise the disabled color to make it lighter?

screenshot of enabled/disabled invisible iconbuttons

packages/react/src/Button/ButtonBase.module.css
Comment on lines -433 to -434
background-color: var(--button-invisible-bgColor-disabled);
border-color: var(--button-invisible-borderColor-disabled);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This change makes these tokens obsolete. Should we delete them entirely? cc @langermank

Copy link
Contributor

Choose a reason for hiding this comment

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

I would actually prefer we make this change in primer/primitives (so make the color transparent vs deleting this CSS. That way it should carry over to Rails

Copy link
Contributor

@langermank langermank Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Just took a few min to make a PR for this which we can test and just use this branch to bump versions if you want. primer/primitives#1121

Could we make a Storybook story just showing all button variants disabled in a row, move it to the dev stories and add a VRT test for it? 🙌

@langermank
Copy link
Contributor

Closing this in favor of #5440

@langermank langermank closed this Dec 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank langermank left review comments

@joshblack joshblack Awaiting requested review from joshblack joshblack is a code owner automatically assigned from primer/engineer-reviewers

Assignees
No one assigned
Labels
integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

IconButton with variant="invisible" has non-invisible disabled styling
2 participants
@iansan5653 @langermank