[BD-46] feat: add missing tokens in the Button component #1924

PKulkoRaccoonGang · 2023-01-17T23:06:32Z

Description

ensure we have a separate design token for every CSS variable hook (example above) used in Button component

Merge Checklist

If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
Does your change adhere to the documented style conventions?
Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
Were your changes tested in the example app?
Is there adequate test coverage for your changes?
Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

Verify your changes were released to NPM at the expected version.
If you'd like, share your contribution in #show-and-tell.
🎉 🙌 Celebrate! Thanks for your contribution.

openedx-webhooks · 2023-01-17T23:06:37Z

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

codecov · 2023-01-17T23:17:19Z

Codecov Report

Base: 90.41% // Head: 90.41% // No change to project coverage 👍

Coverage data is based on head (77f7cf8) compared to base (5b7ecf2).
Patch has no changes to coverable lines.

❗ Current head 77f7cf8 differs from pull request most recent head b8b8035. Consider uploading reports for the commit b8b8035 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #1924   +/-   ##
=======================================
  Coverage   90.41%   90.41%           
=======================================
  Files         192      192           
  Lines        3120     3120           
  Branches      746      746           
=======================================
  Hits         2821     2821           
  Misses        283      283           
  Partials       16       16

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

tokens/style-dictionary.js

adamstankiewicz · 2023-02-15T14:00:45Z

src/Button/Button.scss

+  --pgn-btn-focus-outline-color: #{$btn-brand-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-brand-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-brand-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-brand-focus-bg};

  box-shadow: $btn-box-shadow;


[curious] I see box-shadow: $btn-box-shadow; is on many of these .btn-* class names, but not all of them. Should it be? Even though I believe the variable is currently essentially set for having no box shadow, if it did have a box shadow, would it be applying equally across all the button variants or only a subset of them?

Declaring the box-shadow: $btn-box-shadow; is necessary for some buttons on the documentation site. This only applies to the ability to change the value of this token in an Edxorg theme.

For example:

Openedx theme

Edxorg theme

adamstankiewicz · 2023-02-15T14:03:08Z

src/Button/_variables.scss

@@ -44,34 +46,64 @@ $btn-primary-hover-border-color: var(--pgn-color-btn-hover-border-primary) !defa
 $btn-primary-active-bg: var(--pgn-color-btn-active-bg-primary) !default;
 $btn-primary-active-color: var(--pgn-color-btn-active-text-primary) !default;
 $btn-primary-active-border-color: var(--pgn-color-btn-active-border-primary) !default;
+$btn-primary-focus-focus-outline-color: var(--pgn-color-btn-focus-outline-primary) !default;


[nit/curious] Is this SCSS variable supposed to have the word focus back to back? Is this intended to be $btn-primary-focus-outline-color?

Thanks
My bad

openedx-webhooks · 2023-02-15T17:05:49Z

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

edx-semantic-release · 2023-02-15T17:15:33Z

🎉 This PR is included in version 21.0.0-alpha.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

* build: switch base to trying a rebase (#2047) * build: pull from alpha before rebase master (#2049) * build: git checkout instead of git switch (#2051) * build: set base branch to alpha (#2053) * feat: alpha release of design tokens (#1770) * build: add alpha/beta to release CI workflow * feat: design tokens with style-dictionary BREAKING CHANGE: Introduces design tokens. * [BD-46] resolve bootstrap conflicts with design tokens (#1800) * feat: resolve some Bootstrap conflicts with design tokens Co-authored-by: Peter Kulko <[email protected]> * feat: add ability to generate CSS utility classes through design tokens * docs: added background-color for color HEX values on CSS utility classes page * fix: add missed border utilities * docs: add ability to view CSS variables on CSS Utility Classes page * chore: remove unused import * feat: remove deprecated components BREAKING CHANGE: all of the deprecated components were removed from Paragon, these include `CheckBoxGroup`, `Checkbox`, `Fieldset`, `Input`, `InputSelect`, `InputText`, `ListBox`, `Modal`, `RadioButtonGroup`, `StatusAlert`, `Table`, `TextArea`, `ValidationFormGroup`, `Button.Deprecated`, `Tabs.Deprecated`, `Dropdown.Deprecated`. * chore: update tokens for Modal components * docs: display computed CSS variables on components' pages * refactor: update design tokens structure * feat: add CLI interface for design tokens (#1846) * fix: install dependencies in tokens module after installing Paragon * fix: remove package.json files from tokens module * refactor: update design tokens structure * refactor: replace old tables with `DataTable` on documentation site (#1859) * [BD-46] refactor: improve design tokens architecture (#1874) * refactor: update design tokens naming and add missing ones * feat: expose replace vars script to CLI Co-authored-by: Viktor Rusakov <[email protected]> * build: add workflow_dispatch to alpha branch to trigger release * fix: trigger release * fix: added custom title for CSS output files (#1985) * feat: deleted value in reference design tokens (#1989) * fix: ensure design tokens have a valid type attribute (#1992) Adds `type` attribute to all design tokens per W3C design tokens spec. * fix: add missing tokens for Button component (#1924) * feat: add new tokens and cleanup after rebase * feat: alpha release of design tokens (#1770) * feat: design tokens with style-dictionary BREAKING CHANGE: Introduces design tokens. * [BD-46] resolve bootstrap conflicts with design tokens (#1800) * feat: resolve some Bootstrap conflicts with design tokens Co-authored-by: Peter Kulko <[email protected]> * feat: add ability to generate CSS utility classes through design tokens * docs: added background-color for color HEX values on CSS utility classes page * fix: add missed border utilities * docs: add ability to view CSS variables on CSS Utility Classes page * chore: remove unused import * feat: remove deprecated components BREAKING CHANGE: all of the deprecated components were removed from Paragon, these include `CheckBoxGroup`, `Checkbox`, `Fieldset`, `Input`, `InputSelect`, `InputText`, `ListBox`, `Modal`, `RadioButtonGroup`, `StatusAlert`, `Table`, `TextArea`, `ValidationFormGroup`, `Button.Deprecated`, `Tabs.Deprecated`, `Dropdown.Deprecated`. * chore: update tokens for Modal components * refactor: update design tokens structure * feat: add CLI interface for design tokens (#1846) * fix: install dependencies in tokens module after installing Paragon * fix: remove package.json files from tokens module * refactor: update design tokens structure * [BD-46] refactor: improve design tokens architecture (#1874) * refactor: update design tokens naming and add missing ones * feat: expose replace vars script to CLI Co-authored-by: Viktor Rusakov <[email protected]> * fix: trigger release * feat: deleted value in reference design tokens (#1989) * fix: ensure design tokens have a valid type attribute (#1992) Adds `type` attribute to all design tokens per W3C design tokens spec. * fix: add missing tokens for Button component (#1924) * Revert "chore(release): sync from master to alpha (#2040)" This reverts commit 14ba07c. * feat: add new tokens and cleanup after rebase --------- Co-authored-by: Adam Stankiewicz <[email protected]> Co-authored-by: Viktor Rusakov <[email protected]> Co-authored-by: Peter Kulko <[email protected]> Co-authored-by: Viktor Rusakov <[email protected]>

openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Jan 17, 2023

PKulkoRaccoonGang force-pushed the Peter_Kulko/add-missing-tokens-to-Button-component branch from 3a79945 to 202a8ca Compare January 25, 2023 15:52

PKulkoRaccoonGang changed the title ~~[BD-46] DRAFT: Add missing tokens to Button component~~ [BD-46] feat: Add missing tokens to Button component Jan 25, 2023

PKulkoRaccoonGang changed the title ~~[BD-46] feat: Add missing tokens to Button component~~ [BD-46] feat: add missing tokens to Button component Jan 25, 2023

PKulkoRaccoonGang changed the title ~~[BD-46] feat: add missing tokens to Button component~~ [BD-46] feat: add missing tokens in the Button component Jan 25, 2023

PKulkoRaccoonGang force-pushed the Peter_Kulko/add-missing-tokens-to-Button-component branch 2 times, most recently from 83addb2 to ef64845 Compare January 30, 2023 01:55

PKulkoRaccoonGang requested a review from viktorrusakov January 30, 2023 01:56

viktorrusakov reviewed Feb 3, 2023

View reviewed changes

tokens/style-dictionary.js Outdated Show resolved Hide resolved

viktorrusakov force-pushed the Peter_Kulko/add-missing-tokens-to-Button-component branch from 77f7cf8 to 57f3823 Compare February 10, 2023 09:35

adamstankiewicz reviewed Feb 15, 2023

View reviewed changes

feat: add missing Button tokens and refactor its styles

7b30687

viktorrusakov force-pushed the Peter_Kulko/add-missing-tokens-to-Button-component branch from 57f3823 to 7b30687 Compare February 15, 2023 14:47

refactor: after review

b8b8035

PKulkoRaccoonGang requested a review from adamstankiewicz February 15, 2023 15:51

adamstankiewicz approved these changes Feb 15, 2023

View reviewed changes

adamstankiewicz merged commit f8c0506 into openedx:alpha Feb 15, 2023

edx-semantic-release added the released on @alpha label Feb 15, 2023

viktorrusakov pushed a commit to viktorrusakov/paragon that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (openedx#1924)

9a08684

adamstankiewicz pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

5db98d9

adamstankiewicz pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

098b870

adamstankiewicz pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

5a9242a

adamstankiewicz pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

ff78177

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

cdcd685

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

6c5444b

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

843ba3f

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

4ac440c

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

ba1211f

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

edaaca8

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

2ff4588

edx-requirements-bot pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

779f0a1

adamstankiewicz pushed a commit that referenced this pull request Feb 17, 2023

fix: add missing tokens for Button component (#1924)

bc9d1e3

adamstankiewicz pushed a commit that referenced this pull request Feb 20, 2023

fix: add missing tokens for Button component (#1924)

01c0178

monteri pushed a commit to raccoongang/paragon that referenced this pull request Aug 17, 2023

fix: add missing tokens for Button component (openedx#1924)

35e4944

PKulkoRaccoonGang added a commit to raccoongang/paragon that referenced this pull request Aug 18, 2023

fix: add missing tokens for Button component (openedx#1924)

70a062a

PKulkoRaccoonGang added a commit that referenced this pull request Aug 1, 2024

fix: add missing tokens for Button component (#1924)

0e9cb58

PKulkoRaccoonGang added a commit that referenced this pull request Aug 4, 2024

fix: add missing tokens for Button component (#1924)

b9ed667

PKulkoRaccoonGang added a commit that referenced this pull request Aug 4, 2024

fix: add missing tokens for Button component (#1924)

fccdd11

PKulkoRaccoonGang added a commit that referenced this pull request Aug 5, 2024

fix: add missing tokens for Button component (#1924)

51c7659

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BD-46] feat: add missing tokens in the Button component #1924

[BD-46] feat: add missing tokens in the Button component #1924

PKulkoRaccoonGang commented Jan 17, 2023 •

edited

Loading

openedx-webhooks commented Jan 17, 2023

codecov bot commented Jan 17, 2023 •

edited

Loading

adamstankiewicz Feb 15, 2023

PKulkoRaccoonGang Feb 15, 2023 •

edited

Loading

adamstankiewicz Feb 15, 2023

PKulkoRaccoonGang Feb 15, 2023

openedx-webhooks commented Feb 15, 2023

edx-semantic-release commented Feb 15, 2023

[BD-46] feat: add missing tokens in the Button component #1924

[BD-46] feat: add missing tokens in the Button component #1924

Conversation

PKulkoRaccoonGang commented Jan 17, 2023 • edited Loading

Description

Merge Checklist

Post-merge Checklist

openedx-webhooks commented Jan 17, 2023

codecov bot commented Jan 17, 2023 • edited Loading

Codecov Report

adamstankiewicz Feb 15, 2023

Choose a reason for hiding this comment

PKulkoRaccoonGang Feb 15, 2023 • edited Loading

Choose a reason for hiding this comment

adamstankiewicz Feb 15, 2023

Choose a reason for hiding this comment

PKulkoRaccoonGang Feb 15, 2023

Choose a reason for hiding this comment

openedx-webhooks commented Feb 15, 2023

edx-semantic-release commented Feb 15, 2023

PKulkoRaccoonGang commented Jan 17, 2023 •

edited

Loading

codecov bot commented Jan 17, 2023 •

edited

Loading

PKulkoRaccoonGang Feb 15, 2023 •

edited

Loading