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

Button Styles Refactor #2274

Closed
josh-bagwell opened this issue Jun 29, 2023 · 0 comments · Fixed by #2285
Closed

Button Styles Refactor #2274

josh-bagwell opened this issue Jun 29, 2023 · 0 comments · Fixed by #2285
Assignees
@josh-bagwell
Labels
10.x enhancement New feature or request
Milestone
10.0.0

Comments

@josh-bagwell
Copy link
Contributor

josh-bagwell commented Jun 29, 2023 •
edited by myvuuu
Loading

🚀 Feature Proposal

A button style re-factor is needed in conjunction with the new cs prop that is being created. We will also need to update the Primary, Secondary, Tertiary, and Delete buttons (along with their inverses) to use the new system level tokens via CSS variables from the CanvasProvider.

Acceptance Criteria:

  • All Canvas button variants and their inverses are tied to CSS variables
  • Update the v10 upgrade guide

Motivation

This will utilize the new cs prop and we now have access to new css properties we did not have when button was re-factored prior.
@josh-bagwell josh-bagwell added enhancement New feature or request 10.x labels Jun 29, 2023
@josh-bagwell josh-bagwell added this to the 10.0.0 milestone Jun 29, 2023
@josh-bagwell josh-bagwell self-assigned this Jun 29, 2023
@alanbsmith alanbsmith changed the title Button Styles Re-Factor Button Styles Refactor Jun 29, 2023
@josh-bagwell josh-bagwell mentioned this issue Jul 13, 2023
Merged
3 tasks
@josh-bagwell josh-bagwell linked a pull request Aug 11, 2023 that will close this issue
chore: Refactored Button styles to use createStyles utility #2285
Merged
3 tasks
This was referenced Aug 23, 2023
Closed
Closed
alanbsmith pushed a commit that referenced this issue Oct 18, 2023
@josh-bagwell
chore!: Refactored Button styles to use createStyles utility (#2285)
9a4ff36 
Style refactor for buttons to work with new theming, branding, tokens, createStyles utility and `cs` prop. 

Fixes: #2274  

We want to more easily apply theming to Buttons and the styles need to be refactored to more easily apply those themed styles with new tokens.

[category:Components]

### BREAKING CHANGES
- We refactored how we styled Buttons to use our `createStyles` utility function. We don't anticipate
this as a breaking change but, there may be slight changes to visual test.
- Icons will no longer be "filled" on toggle. This decision was made to not have the existing icon
look different in the toggled state from default state.
- `PrimaryButton`: On the `inverse` variant, the focus ring is now consistent with the default variant of `PrimaryButton`. This will visually change the `inverse` variant to have a larger appearance when focused. 
- `colors` will no longer support the `focusRing` option:
  ```tsx
  import {focusRing} from '@workday/canvas-kit-react/common';

  // before
  <PrimaryButton
    colors={{
      // other colors
      focus: {
        // other colors
      focusRing: focusRing(/* options */)
      }
    }}
  />

  // after
  <PrimaryButton
    colors={{
      // other colors
      focus: {
        // other colors
      }
    }}
    css={{
      ':focus-visible': focusRing(/* options */)
    }}
  />;
  ```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@josh-bagwell josh-bagwell

Labels
10.x enhancement New feature or request
Projects
Canvas Kit
Status: ✅ Done
Milestone
10.0.0
Development

Successfully merging a pull request may close this issue.

chore: Refactored Button styles to use createStyles utility josh-bagwell/canvas-kit
1 participant
@josh-bagwell