Skip to content

Conversation

gazjones00
Copy link
Contributor

WHY are these changes introduced?

Fixes issue 4 in #10897

The incorrect font-weight is being applied to the tertiary variant in the Button component. This issue occurs because the primary button styles are being used when the tertiary variant is specified, which causes the font-weight to be overwritten.

WHAT is this pull request doing?

This PR aims to resolve this issue by removing line 132, since this isn't needed. The primary button styles are imported from styles.Button, and the overrides for the tertiary variant are on line 133 variant === 'tertiary' && styles.tertiary

variant === 'tertiary' && styles.primary
Before After
Screenshot 2023-10-09 at 21 07 48 Screenshot 2023-10-09 at 21 07 24

🎩 checklist

@gazjones00 gazjones00 changed the title fix(button): remove conflicting tertiary styles Fix remove conflicting tertiary button styles Oct 11, 2023
@gazjones00 gazjones00 changed the title Fix remove conflicting tertiary button styles Fix conflicting tertiary button styles Oct 11, 2023
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.

🙇 Thanks @gazjones00

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
@kyledurand kyledurand requested a review from sarahill October 12, 2023 18:18
Copy link
Contributor

@sarahill sarahill left a comment

Choose a reason for hiding this comment

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

🙇 🎉

@kyledurand kyledurand merged commit 8568e51 into Shopify:main Oct 13, 2023
@gazjones00 gazjones00 deleted the fix/conflicting-styles-tertiary-button-variant branch October 13, 2023 14:38
chloerice pushed a commit that referenced this pull request Oct 25, 2023
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
### WHY are these changes introduced?

Fixes issue 4 in Shopify#10897

The incorrect font-weight is being applied to the `tertiary` variant in
the `Button` component. This issue occurs because the primary button
styles are being used when the `tertiary` variant is specified, which
causes the `font-weight` to be overwritten.

### WHAT is this pull request doing?
This PR aims to resolve this issue by removing `line 132`, since this
isn't needed. The primary button styles are imported from
`styles.Button`, and the overrides for the `tertiary` variant are on
`line 133` `variant === 'tertiary' && styles.tertiary`
```tsx 
variant === 'tertiary' && styles.primary
```

| Before      | After |
| ----------- | ----------- |
| <img width="381" alt="Screenshot 2023-10-09 at 21 07 48"
src="https://github.com/Shopify/polaris/assets/50641262/e6b70c3a-c3d8-4979-baed-9949485c6684">|
<img width="391" alt="Screenshot 2023-10-09 at 21 07 24"
src="https://github.com/Shopify/polaris/assets/50641262/80434414-da42-4a14-8308-14d21604fb8e">|

### 🎩 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

---------

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants