style(button): change button border radius to 9999px #251

ju-Skinner · 2024-09-04T21:11:07Z

Description

Update the Button component to match the Figma Design, which sets the border-radius to 9999px for rounded corners

Fixes #(issue)
https://kajabi.atlassian.net/browse/DSS-865

Type of change

Style change has no impact to code, just visual changes

How Has This Been Tested?

Checklist:

If not applicable, leave options unchecked.

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing tests pass locally with my changes
Design has QA'ed and approved this PR

netlify · 2024-09-04T21:11:26Z

✅ Deploy Preview for pine-mercury-rising ready!

Name	Link
🔨 Latest commit	`0829aab`
🔍 Latest deploy log	https://app.netlify.com/sites/pine-mercury-rising/deploys/66d9e1a8675023000875f20c
😎 Deploy Preview	https://deploy-preview-251--pine-mercury-rising.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

anechol

Thanks for getting this updated! Just one small change.

libs/core/src/components/pds-button/pds-button.scss

* Tokens - Adds New Rebrand Colors and Font (#222) * style: adds new rebrand color tokens * style: remaps old charcoal semantic tokens to new gray * style: builds new color tokens * style: updates yellow 200 * style: updates token values * style: builds updated token set * style: updates tokens with new names * style: updates semantic references * style: updates Circular font family token to Greet * style: corrects color token values * style: fixes semantic token references * style: build new token set * style: changes "gray" to "gray" * style: builds grey tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Adds Letter Spacing (#223) * style: adds new letter spacing tokens and removes 0 from some font size and line height values * style: builds new letter spacing tokens * style: updates font size, removes typography semantic tokens, and removes leading zero on remaining tokens * style: builds new tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Update Typography Tokens (#225) * style: updates font weight values, adds a new line height value, and correct font family value * style: builds new type tokens * style: fixes type changes * style: builds fixed tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Adds Initial Semantic Tokens (#226) * style: adds initial semantic tokens * style: builds new semantic tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Creates Semantic Type Tokens (#227) * style: builds new semantic type tokens * style: readds missing tokens in JSON * style: builds missing tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> chore: publish - @pine-ds/core@2.0.0-mercury.0 - @pine-ds/doc-components@2.0.0-mercury.0 - @pine-ds/react@2.0.0-mercury.0 Publish - @pine-ds/core@3.0.0-mercury.0 - @pine-ds/doc-components@3.0.0-mercury.0 - @pine-ds/react@3.0.0-mercury.0 styles: updates font weight, letter spacing, and font size (#230) * chore: update doc-components version (#228) * style: reverts semantic font weights back to 100 scale * style: updates letter spacing for body type * style: updates xs font size to 12px * style: build updated tokens * chore: package-lock update * ci: update @tokens-studio/sd-transforms package to the latest version * chore: adds necessary preprocessor to script file to fix shadow tokens --------- Co-authored-by: Julian Skinner <ju-Skinner@users.noreply.github.com> Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Co-authored-by: Julian Skinner <ju.skinner@gmail.com> Publish - @pine-ds/core@4.0.0-mercury.0 - @pine-ds/doc-components@4.0.0-mercury.0 - @pine-ds/react@4.0.0-mercury.0 style(link): correct token naming for icon spacing (#234) Publish - @pine-ds/core@5.0.0-mercury.0 - @pine-ds/doc-components@5.0.0-mercury.0 - @pine-ds/react@5.0.0-mercury.0 Typography: add new fonts (#233) * style: adds new fonts to Pine * chore: fixes style linting issues Publish - @pine-ds/core@6.0.0-mercury.0 - @pine-ds/doc-components@6.0.0-mercury.0 - @pine-ds/react@6.0.0-mercury.0 gi: update versions to correct version numbers the builds for mercury were using premajor when it should have been preminor after the first mercury release Publish - @pine-ds/core@2.1.0-mercury.0 - @pine-ds/doc-components@2.1.0-mercury.0 - @pine-ds/react@2.1.0-mercury.0 Accordion: Minor Styling Updates (#238) * style: fixes accordion body padding and some deprecated tokens * style: updates font styles of summary trigger Publish - @pine-ds/core@2.2.0-mercury.0 - @pine-ds/doc-components@2.2.0-mercury.0 - @pine-ds/react@2.2.0-mercury.0 style: update various color tokens (#236) * style: update various color tokens * style: update various color tokens Publish - @pine-ds/core@2.3.0-mercury.0 - @pine-ds/doc-components@2.3.0-mercury.0 - @pine-ds/react@2.3.0-mercury.0 style: various token changes (#239) * fix: update font size refs * fix: remove leading zero and correct font-size * fix: update charcoal to grey * fix: add back zeroes * fix: added zeroes to semantic tokens * fix: added zeroes to component token refs * fix: update accordion padding * fix: added back 0 Publish - @pine-ds/core@2.4.0-mercury.0 - @pine-ds/doc-components@2.4.0-mercury.0 - @pine-ds/react@2.4.0-mercury.0 fix: update box shadow tokens (#241) * fix: add box shadow tokens * fix: add box shadow build tokens * fix: update box-shadow tokens * fix: update box shadow tokens * fix: add and apply box shadow tokens * fix: update sort function * fix: typo Publish - @pine-ds/core@2.5.0-mercury.0 - @pine-ds/doc-components@2.5.0-mercury.0 - @pine-ds/react@2.5.0-mercury.0 Publish - @pine-ds/core@2.6.0-mercury.0 - @pine-ds/doc-components@2.6.0-mercury.0 - @pine-ds/react@2.6.0-mercury.0 style: updates accordion styling to better match Figma specs (#245) Publish - @pine-ds/core@2.7.0-mercury.0 - @pine-ds/doc-components@2.7.0-mercury.0 - @pine-ds/react@2.7.0-mercury.0 Publish - @pine-ds/core@2.8.0-mercury.0 - @pine-ds/doc-components@2.8.0-mercury.0 - @pine-ds/react@2.8.0-mercury.0 Publish - @pine-ds/core@2.9.0-mercury.0 - @pine-ds/doc-components@2.9.0-mercury.0 - @pine-ds/react@2.9.0-mercury.0 Publish - @pine-ds/core@2.10.0-mercury.0 - @pine-ds/doc-components@2.10.0-mercury.0 - @pine-ds/react@2.10.0-mercury.0 style(tabs): change the active tab color to mercury 500 (#248) Publish - @pine-ds/core@2.11.0-mercury.0 - @pine-ds/doc-components@2.11.0-mercury.0 - @pine-ds/react@2.11.0-mercury.0 style: update focus state width and color style: correct lint error style: correct lint error style: remove extra semicolon Publish - @pine-ds/core@2.12.0-mercury.0 - @pine-ds/doc-components@2.12.0-mercury.0 - @pine-ds/react@2.12.0-mercury.0 style(button): change border radius to 9999px (#251) style(button): change the colors for the accent variant to be purple (#253) ci: fix lerna version command to use preminor Publish - @pine-ds/core@2.15.0-mercury.0 - @pine-ds/doc-components@2.15.0-mercury.0 - @pine-ds/react@2.15.0-mercury.0 style: add relative position for focus (#259) Publish - @pine-ds/core@2.16.0-mercury.0 - @pine-ds/doc-components@2.16.0-mercury.0 - @pine-ds/react@2.16.0-mercury.0 chore: fixes issue with sd-transforms caused by version update (#260) Publish - @pine-ds/core@2.17.0-mercury.0 - @pine-ds/doc-components@2.17.0-mercury.0 - @pine-ds/react@2.17.0-mercury.0 style: updates button font family and font weight (#258) Publish - @pine-ds/core@2.18.0-mercury.0 - @pine-ds/doc-components@2.18.0-mercury.0 - @pine-ds/react@2.18.0-mercury.0 style: add typography semantic tokens (#262) * style: adds semantic typography tokens * style: updates body letter spacing semantic token * style: removes letter spacing from font declaration to prevent warnings on build * chore: updates build file with API changes and builds updated tokens * chore: fixes tokens table variables due to token format change * chore: update packages for token-studio and style-dictionary --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Co-authored-by: Julian Skinner <ju.skinner@gmail.com> Publish - @pine-ds/core@2.19.0-mercury.0 - @pine-ds/doc-components@2.19.0-mercury.0 - @pine-ds/react@2.19.0-mercury.0 style: add sprig font face (#263) * style: add Faire Sprig font family * style(token-studio): add sprig token * style(tokens): add sprig font-family to core --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Publish - @pine-ds/core@2.20.0-mercury.0 - @pine-ds/doc-components@2.20.0-mercury.0 - @pine-ds/react@2.20.0-mercury.0 style: adds base/reset CSS file (#256) * style: adds a base scss file with reset and base styles * style: adds base/reset CSS file and adds to every component * chore: ignores base file for linting issues * chore: adds new lines to changed files * fix: fixes issue with reset styles leaking out from box and row components * chore: replaces most core tokens in reset with semantic tokens * chore: fixes linting issue * style: removes default color from reset file Publish - @pine-ds/core@2.21.0-mercury.0 - @pine-ds/doc-components@2.21.0-mercury.0 - @pine-ds/react@2.21.0-mercury.0 feat(accordion): adds part to accordion component (#264) Publish - @pine-ds/core@2.22.0-mercury.0 - @pine-ds/doc-components@2.22.0-mercury.0 - @pine-ds/react@2.22.0-mercury.0 style(button): change button font-weight to med (500) (#267)

* Tokens - Adds New Rebrand Colors and Font (#222) * style: adds new rebrand color tokens * style: remaps old charcoal semantic tokens to new gray * style: builds new color tokens * style: updates yellow 200 * style: updates token values * style: builds updated token set * style: updates tokens with new names * style: updates semantic references * style: updates Circular font family token to Greet * style: corrects color token values * style: fixes semantic token references * style: build new token set * style: changes "gray" to "gray" * style: builds grey tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Adds Letter Spacing (#223) * style: adds new letter spacing tokens and removes 0 from some font size and line height values * style: builds new letter spacing tokens * style: updates font size, removes typography semantic tokens, and removes leading zero on remaining tokens * style: builds new tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Update Typography Tokens (#225) * style: updates font weight values, adds a new line height value, and correct font family value * style: builds new type tokens * style: fixes type changes * style: builds fixed tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Adds Initial Semantic Tokens (#226) * style: adds initial semantic tokens * style: builds new semantic tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Tokens: Creates Semantic Type Tokens (#227) * style: builds new semantic type tokens * style: readds missing tokens in JSON * style: builds missing tokens --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> chore: publish - @pine-ds/core@2.0.0-mercury.0 - @pine-ds/doc-components@2.0.0-mercury.0 - @pine-ds/react@2.0.0-mercury.0 Publish - @pine-ds/core@3.0.0-mercury.0 - @pine-ds/doc-components@3.0.0-mercury.0 - @pine-ds/react@3.0.0-mercury.0 styles: updates font weight, letter spacing, and font size (#230) * chore: update doc-components version (#228) * style: reverts semantic font weights back to 100 scale * style: updates letter spacing for body type * style: updates xs font size to 12px * style: build updated tokens * chore: package-lock update * ci: update @tokens-studio/sd-transforms package to the latest version * chore: adds necessary preprocessor to script file to fix shadow tokens --------- Co-authored-by: Julian Skinner <ju-Skinner@users.noreply.github.com> Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Co-authored-by: Julian Skinner <ju.skinner@gmail.com> Publish - @pine-ds/core@4.0.0-mercury.0 - @pine-ds/doc-components@4.0.0-mercury.0 - @pine-ds/react@4.0.0-mercury.0 style(link): correct token naming for icon spacing (#234) Publish - @pine-ds/core@5.0.0-mercury.0 - @pine-ds/doc-components@5.0.0-mercury.0 - @pine-ds/react@5.0.0-mercury.0 Typography: add new fonts (#233) * style: adds new fonts to Pine * chore: fixes style linting issues Publish - @pine-ds/core@6.0.0-mercury.0 - @pine-ds/doc-components@6.0.0-mercury.0 - @pine-ds/react@6.0.0-mercury.0 gi: update versions to correct version numbers the builds for mercury were using premajor when it should have been preminor after the first mercury release Publish - @pine-ds/core@2.1.0-mercury.0 - @pine-ds/doc-components@2.1.0-mercury.0 - @pine-ds/react@2.1.0-mercury.0 Accordion: Minor Styling Updates (#238) * style: fixes accordion body padding and some deprecated tokens * style: updates font styles of summary trigger Publish - @pine-ds/core@2.2.0-mercury.0 - @pine-ds/doc-components@2.2.0-mercury.0 - @pine-ds/react@2.2.0-mercury.0 style: update various color tokens (#236) * style: update various color tokens * style: update various color tokens Publish - @pine-ds/core@2.3.0-mercury.0 - @pine-ds/doc-components@2.3.0-mercury.0 - @pine-ds/react@2.3.0-mercury.0 style: various token changes (#239) * fix: update font size refs * fix: remove leading zero and correct font-size * fix: update charcoal to grey * fix: add back zeroes * fix: added zeroes to semantic tokens * fix: added zeroes to component token refs * fix: update accordion padding * fix: added back 0 Publish - @pine-ds/core@2.4.0-mercury.0 - @pine-ds/doc-components@2.4.0-mercury.0 - @pine-ds/react@2.4.0-mercury.0 fix: update box shadow tokens (#241) * fix: add box shadow tokens * fix: add box shadow build tokens * fix: update box-shadow tokens * fix: update box shadow tokens * fix: add and apply box shadow tokens * fix: update sort function * fix: typo Publish - @pine-ds/core@2.5.0-mercury.0 - @pine-ds/doc-components@2.5.0-mercury.0 - @pine-ds/react@2.5.0-mercury.0 Publish - @pine-ds/core@2.6.0-mercury.0 - @pine-ds/doc-components@2.6.0-mercury.0 - @pine-ds/react@2.6.0-mercury.0 style: updates accordion styling to better match Figma specs (#245) Publish - @pine-ds/core@2.7.0-mercury.0 - @pine-ds/doc-components@2.7.0-mercury.0 - @pine-ds/react@2.7.0-mercury.0 Publish - @pine-ds/core@2.8.0-mercury.0 - @pine-ds/doc-components@2.8.0-mercury.0 - @pine-ds/react@2.8.0-mercury.0 Publish - @pine-ds/core@2.9.0-mercury.0 - @pine-ds/doc-components@2.9.0-mercury.0 - @pine-ds/react@2.9.0-mercury.0 Publish - @pine-ds/core@2.10.0-mercury.0 - @pine-ds/doc-components@2.10.0-mercury.0 - @pine-ds/react@2.10.0-mercury.0 style(tabs): change the active tab color to mercury 500 (#248) Publish - @pine-ds/core@2.11.0-mercury.0 - @pine-ds/doc-components@2.11.0-mercury.0 - @pine-ds/react@2.11.0-mercury.0 style: update focus state width and color style: correct lint error style: correct lint error style: remove extra semicolon Publish - @pine-ds/core@2.12.0-mercury.0 - @pine-ds/doc-components@2.12.0-mercury.0 - @pine-ds/react@2.12.0-mercury.0 style(button): change border radius to 9999px (#251) style(button): change the colors for the accent variant to be purple (#253) ci: fix lerna version command to use preminor Publish - @pine-ds/core@2.15.0-mercury.0 - @pine-ds/doc-components@2.15.0-mercury.0 - @pine-ds/react@2.15.0-mercury.0 style: add relative position for focus (#259) Publish - @pine-ds/core@2.16.0-mercury.0 - @pine-ds/doc-components@2.16.0-mercury.0 - @pine-ds/react@2.16.0-mercury.0 chore: fixes issue with sd-transforms caused by version update (#260) Publish - @pine-ds/core@2.17.0-mercury.0 - @pine-ds/doc-components@2.17.0-mercury.0 - @pine-ds/react@2.17.0-mercury.0 style: updates button font family and font weight (#258) Publish - @pine-ds/core@2.18.0-mercury.0 - @pine-ds/doc-components@2.18.0-mercury.0 - @pine-ds/react@2.18.0-mercury.0 style: add typography semantic tokens (#262) * style: adds semantic typography tokens * style: updates body letter spacing semantic token * style: removes letter spacing from font declaration to prevent warnings on build * chore: updates build file with API changes and builds updated tokens * chore: fixes tokens table variables due to token format change * chore: update packages for token-studio and style-dictionary --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Co-authored-by: Julian Skinner <ju.skinner@gmail.com> Publish - @pine-ds/core@2.19.0-mercury.0 - @pine-ds/doc-components@2.19.0-mercury.0 - @pine-ds/react@2.19.0-mercury.0 style: add sprig font face (#263) * style: add Faire Sprig font family * style(token-studio): add sprig token * style(tokens): add sprig font-family to core --------- Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Publish - @pine-ds/core@2.20.0-mercury.0 - @pine-ds/doc-components@2.20.0-mercury.0 - @pine-ds/react@2.20.0-mercury.0 style: adds base/reset CSS file (#256) * style: adds a base scss file with reset and base styles * style: adds base/reset CSS file and adds to every component * chore: ignores base file for linting issues * chore: adds new lines to changed files * fix: fixes issue with reset styles leaking out from box and row components * chore: replaces most core tokens in reset with semantic tokens * chore: fixes linting issue * style: removes default color from reset file Publish - @pine-ds/core@2.21.0-mercury.0 - @pine-ds/doc-components@2.21.0-mercury.0 - @pine-ds/react@2.21.0-mercury.0 feat(accordion): adds part to accordion component (#264) Publish - @pine-ds/core@2.22.0-mercury.0 - @pine-ds/doc-components@2.22.0-mercury.0 - @pine-ds/react@2.22.0-mercury.0 style(button): change button font-weight to med (500) (#267) style(loader): update default color to mercury_400 (#273) style: updates Avatar color styles (#274)

github-actions bot added package: core Changes have been made to the Core package mercury-rising Used for rebrand work labels Sep 4, 2024

ju-Skinner self-assigned this Sep 4, 2024

ju-Skinner requested a review from a team September 4, 2024 21:38

pixelflips approved these changes Sep 4, 2024

View reviewed changes

ju-Skinner marked this pull request as ready for review September 5, 2024 16:31

ju-Skinner requested a review from a team September 5, 2024 16:32

anechol approved these changes Sep 5, 2024

View reviewed changes

libs/core/src/components/pds-button/pds-button.scss Outdated Show resolved Hide resolved

ju-Skinner force-pushed the style/change-button-border-radius-to-9999px branch from 7b96a8c to b806629 Compare September 5, 2024 16:47

style(button): change border radius to 9999px

0829aab

ju-Skinner force-pushed the style/change-button-border-radius-to-9999px branch from b806629 to 0829aab Compare September 5, 2024 16:51

ju-Skinner merged commit 6339c97 into mercury-rising Sep 5, 2024
2 checks passed

ju-Skinner deleted the style/change-button-border-radius-to-9999px branch September 5, 2024 16:52

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

de2c585

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

145d923

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

1571236

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

1856205

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

247e7cb

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

5bfd85e

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

c0e9e03

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

c36af0d

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

bbc32be

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

6122b56

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

10f6bd6

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

7e54825

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

b14edbc

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

4b0d14e

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

f2a8164

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

9eee526

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

63af514

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

b79de6c

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

83be42a

ju-Skinner added a commit that referenced this pull request Sep 9, 2024

style(button): change border radius to 9999px (#251)

b9dacf3

ju-Skinner added a commit that referenced this pull request Sep 10, 2024

style(button): change border radius to 9999px (#251)

a34604f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style(button): change button border radius to 9999px #251

style(button): change button border radius to 9999px #251

ju-Skinner commented Sep 4, 2024 •

edited

Loading

netlify bot commented Sep 4, 2024 •

edited

Loading

anechol left a comment

style(button): change button border radius to 9999px #251

style(button): change button border radius to 9999px #251

Conversation

ju-Skinner commented Sep 4, 2024 • edited Loading

Description

Type of change

How Has This Been Tested?

Checklist:

netlify bot commented Sep 4, 2024 • edited Loading

✅ Deploy Preview for pine-mercury-rising ready!

anechol left a comment

Choose a reason for hiding this comment

ju-Skinner commented Sep 4, 2024 •

edited

Loading

netlify bot commented Sep 4, 2024 •

edited

Loading