Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Fix button disabled state on monochrome variant #10934

Merged
merged 2 commits into from
Oct 24, 2023
Merged

Fix button disabled state on monochrome variant #10934

merged 2 commits into from
Oct 24, 2023

Conversation

gazjones00
Copy link
Contributor

@gazjones00 gazjones00 commented Oct 9, 2023 •
edited
Loading

WHY are these changes introduced?

Fixes point 3 in #10897

The monochromePlain variant, was using currentColor when disabled.

WHAT is this pull request doing?

This PR replaces the currentColor with the text-disabled token as outlined in #10897. In addition, storybook has been updated to include the monochromePlain variant in the disabled preview.

Before After
Screenshot 2023-10-09 at 20 47 44 Screenshot 2023-10-09 at 20 45 00

🎩 checklist

@gazjones00 gazjones00 mentioned this pull request Oct 9, 2023
Closed
@gazjones00 gazjones00 changed the title fix(button): disabled state on monochrome variant Fix button disabled state on monochrome variant Oct 11, 2023
kyledurand
kyledurand approved these changes Oct 13, 2023
View reviewed changes
Copy link
Member

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

🙌 Just added a suggestions to use the Box component with a token and comment so we know what's going on there

@kyledurand kyledurand requested a review from sarahill October 15, 2023 19:07
@kyledurand kyledurand merged commit de419ba into Shopify:main Oct 24, 2023
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Oct 24, 2023
Merged
chloerice pushed a commit that referenced this pull request Oct 25, 2023
@shopify-github-actions-access @github-actions
Version Packages (#10967)
bb5e37e 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.26.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1
    -   @shopify/stylelint-polaris@15.0.1

## @shopify/polaris@12.0.1

### Patch Changes

- [#10792](#10792)
[`2980e9d26`](2980e9d)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [#10960](#10960)
[`d7e4aa7f9`](d7e4aa7)
Thanks [@oksanashopify](https://github.com/oksanashopify)! - fixed
background-color for unselectable tabel first-child cell


- [#10975](#10975)
[`00952a33a`](00952a3)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed loading
button spinner color


- [#10935](#10935)
[`8568e5141`](8568e51)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed an issue
with the `primary` variant styles conflicting with the `tertiary`
variant in `Button`


- [#10934](#10934)
[`de419ba2b`](de419ba)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed disabled
state for `monochromePlain` variant in `Button`


- [#10993](#10993)
[`fb508b91c`](fb508b9)
Thanks [@FCalabria](https://github.com/FCalabria)! - Fixed incompatible
type between IndexTable and useIndexResourceState


- [#10998](#10998)
[`bb310cd3a`](bb310cd)
Thanks [@alisterdev](https://github.com/alisterdev)! - Update
SkeletonThumbnail size values to correspond to Thumbnail


- [#10999](#10999)
[`e34a4db32`](e34a4db)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
`Checkbox` icon to use tokens vs hard coded value


- [#10910](#10910)
[`65998488f`](6599848)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed negative
margin of `segmented` `ButtonGroup.Item` when child `Button` is
`primary`


- [#11028](#11028)
[`9fb367afd`](9fb367a)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `buttonFrom`
utility function not mapping boolean variant properties to `variant` and
`tone`

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1

## @shopify/polaris-tokens@8.0.1

### Patch Changes

- [#10976](#10976)
[`f1d256fce`](f1d256f)
Thanks [@sarahill](https://github.com/sarahill)! - Added descriptions to
color tokens

## @shopify/stylelint-polaris@15.0.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1

## polaris.shopify.com@0.59.0

### Minor Changes

- [#11030](#11030)
[`f55a84ce7`](f55a84c)
Thanks [@lgriffee](https://github.com/lgriffee)! - Update
stylelint-polaris version matchups chart

### Patch Changes

- [#10792](#10792)
[`2980e9d26`](2980e9d)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [#10974](#10974)
[`2b3b61069`](2b3b610)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Removed autoplay
from all videos on Motion design guidance pages


- [#10925](#10925)
[`4590fd828`](4590fd8)
Thanks [@MohammedEsafi](https://github.com/MohammedEsafi)! - Improved
the visibility of shadows in Dark Mode for token previews

- Updated dependencies
\[[`2980e9d26`](2980e9d),
[`d7e4aa7f9`](d7e4aa7),
[`00952a33a`](00952a3),
[`8568e5141`](8568e51),
[`de419ba2b`](de419ba),
[`fb508b91c`](fb508b9),
[`bb310cd3a`](bb310cd),
[`e34a4db32`](e34a4db),
[`f1d256fce`](f1d256f),
[`65998488f`](6599848),
[`9fb367afd`](9fb367a)]:
    -   @shopify/polaris@12.0.1
    -   @shopify/polaris-tokens@8.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@gazjones00
Fix button disabled state on monochrome variant (Shopify#10934)
d095f27 
### WHY are these changes introduced?

Fixes point 3 in Shopify#10897

The `monochromePlain` variant, was using `currentColor` when `disabled`.

### WHAT is this pull request doing?

This PR replaces the `currentColor` with the `text-disabled` token as
outlined in Shopify#10897. In addition, storybook has been updated to include
the `monochromePlain` variant in the disabled preview.

| Before      | After |
| ----------- | ----------- |
| <img width="130" alt="Screenshot 2023-10-09 at 20 47 44"
src="https://github.com/Shopify/polaris/assets/50641262/5c209557-ee3a-47cc-9195-0cb33e452fc4">
| <img width="136" alt="Screenshot 2023-10-09 at 20 45 00"
src="https://github.com/Shopify/polaris/assets/50641262/ebb27d1d-0516-4c0d-988f-887b9e25ebdd">|

### 🎩 checklist

- [X] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [X] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [X] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#10967)
2a5527a 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.26.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1
    -   @shopify/stylelint-polaris@15.0.1

## @shopify/polaris@12.0.1

### Patch Changes

- [Shopify#10792](Shopify#10792)
[`2980e9d26`](Shopify@7b237af)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [Shopify#10960](Shopify#10960)
[`d7e4aa7f9`](Shopify@78b5348)
Thanks [@oksanashopify](https://github.com/oksanashopify)! - fixed
background-color for unselectable tabel first-child cell


- [Shopify#10975](Shopify#10975)
[`00952a33a`](Shopify@818bfeb)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed loading
button spinner color


- [Shopify#10935](Shopify#10935)
[`8568e5141`](Shopify@c483172)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed an issue
with the `primary` variant styles conflicting with the `tertiary`
variant in `Button`


- [Shopify#10934](Shopify#10934)
[`de419ba2b`](Shopify@d095f27)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed disabled
state for `monochromePlain` variant in `Button`


- [Shopify#10993](Shopify#10993)
[`fb508b91c`](Shopify@922f3fd)
Thanks [@FCalabria](https://github.com/FCalabria)! - Fixed incompatible
type between IndexTable and useIndexResourceState


- [Shopify#10998](Shopify#10998)
[`bb310cd3a`](Shopify@e9cee43)
Thanks [@alisterdev](https://github.com/alisterdev)! - Update
SkeletonThumbnail size values to correspond to Thumbnail


- [Shopify#10999](Shopify#10999)
[`e34a4db32`](Shopify@50c5fc8)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
`Checkbox` icon to use tokens vs hard coded value


- [Shopify#10910](Shopify#10910)
[`65998488f`](Shopify@bcda058)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed negative
margin of `segmented` `ButtonGroup.Item` when child `Button` is
`primary`


- [Shopify#11028](Shopify#11028)
[`9fb367afd`](Shopify@06d61a1)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `buttonFrom`
utility function not mapping boolean variant properties to `variant` and
`tone`

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1

## @shopify/polaris-tokens@8.0.1

### Patch Changes

- [Shopify#10976](Shopify#10976)
[`f1d256fce`](Shopify@79c5c6a)
Thanks [@sarahill](https://github.com/sarahill)! - Added descriptions to
color tokens

## @shopify/stylelint-polaris@15.0.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1

## polaris.shopify.com@0.59.0

### Minor Changes

- [Shopify#11030](Shopify#11030)
[`f55a84ce7`](Shopify@5e9235a)
Thanks [@lgriffee](https://github.com/lgriffee)! - Update
stylelint-polaris version matchups chart

### Patch Changes

- [Shopify#10792](Shopify#10792)
[`2980e9d26`](Shopify@7b237af)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [Shopify#10974](Shopify#10974)
[`2b3b61069`](Shopify@9dc0ea7)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Removed autoplay
from all videos on Motion design guidance pages


- [Shopify#10925](Shopify#10925)
[`4590fd828`](Shopify@5ca919a)
Thanks [@MohammedEsafi](https://github.com/MohammedEsafi)! - Improved
the visibility of shadows in Dark Mode for token previews

- Updated dependencies
\[[`2980e9d26`](Shopify@7b237af),
[`d7e4aa7f9`](Shopify@78b5348),
[`00952a33a`](Shopify@818bfeb),
[`8568e5141`](Shopify@c483172),
[`de419ba2b`](Shopify@d095f27),
[`fb508b91c`](Shopify@922f3fd),
[`bb310cd3a`](Shopify@e9cee43),
[`e34a4db32`](Shopify@50c5fc8),
[`f1d256fce`](Shopify@79c5c6a),
[`65998488f`](Shopify@bcda058),
[`9fb367afd`](Shopify@06d61a1)]:
    -   @shopify/polaris@12.0.1
    -   @shopify/polaris-tokens@8.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
2 more reviewers

@kyledurand kyledurand kyledurand approved these changes

@sarahill sarahill sarahill approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@gazjones00 @kyledurand @sarahill