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.

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

chore: Refactor Checkbox styles #2542

Conversation

RayRedGoose
Copy link
Contributor

@RayRedGoose RayRedGoose commented Jan 31, 2024

Summary

Fixes: #2395

Refactors styles in Checkbox using new style utilities.

Release Category

Components

Release Note

Checkbox now uses Canvas Tokens and our new styling utilities. The component now supports the cs prop, but otherwise the API has not changed. It should behave identically as it did in previous versions.


Thank you

@RayRedGoose RayRedGoose changed the base branch from master to prerelease/major January 31, 2024 21:52
Copy link

cypress bot commented Jan 31, 2024

Passing run #6865 ↗︎

0 905 3 0 Flakiness 0
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.

Details:

Merge 27b9abb into 4b00571...
Project: canvas-kit Commit: 9b70ec2a98 ℹ️
Status: Passed Duration: 15:37 💡
Started: Feb 8, 2024 8:03 PM Ended: Feb 8, 2024 8:18 PM

Review all test suite changes for PR #2542 ↗︎

@mannycarrera4 mannycarrera4 changed the title feat: Refactor checkbox styles chore: Refactor checkbox styles Feb 1, 2024
@RayRedGoose RayRedGoose marked this pull request as ready for review February 2, 2024 20:55
@RayRedGoose RayRedGoose self-assigned this Feb 2, 2024
@RayRedGoose RayRedGoose added the ready for review Code is ready for review label Feb 2, 2024
@RayRedGoose RayRedGoose linked an issue Feb 2, 2024 that may be closed by this pull request
@alanbsmith alanbsmith changed the title chore: Refactor checkbox styles chore: Refactor Checkbox styles Feb 2, 2024
Copy link
Member

@alanbsmith alanbsmith left a comment

Choose a reason for hiding this comment

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

Nice work, @RayRedGoose! I made some comments and suggestions.

  • Let's go ahead and convert all px values to rem
  • Be sure to check styles like marginLeft to make sure they still work with RTL

Otherwise, this looks great. 😄

modules/react/checkbox/lib/CheckBackground.tsx Outdated Show resolved Hide resolved

const checkboxRippleStyles = createStyles({
borderRadius: system.shape.round,
boxShadow: `0 0 0 0 ${base.soap200}`,
Copy link
Member

Choose a reason for hiding this comment

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

Question: A 0 0 0 0 box shadow shouldn't render anything. I see there's a transition for it, but I don't know how it's transitioning?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay, I changed it to 'none' and it made some changes to inverse variant:

old
Screenshot 2024-02-06 at 11 10 14 AM

new
Screenshot 2024-02-06 at 11 10 23 AM

As you can see old version has small round inside box

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think this round should be visible at all

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If you agree to remove it, please, approve visual changes in chromatic

modules/react/checkbox/lib/CheckboxRipple.tsx Show resolved Hide resolved
modules/react/checkbox/lib/CheckboxCheck.tsx Outdated Show resolved Hide resolved
modules/react/checkbox/lib/CheckboxInput.tsx Outdated Show resolved Hide resolved
modules/react/checkbox/lib/CheckboxInput.tsx Outdated Show resolved Hide resolved
modules/react/checkbox/lib/CheckboxInput.tsx Outdated Show resolved Hide resolved
modules/react/checkbox/lib/CheckboxInput.tsx Outdated Show resolved Hide resolved
modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx Outdated Show resolved Hide resolved
modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx Outdated Show resolved Hide resolved
@RayRedGoose RayRedGoose force-pushed the ISSUE2395_checkbox-style-refactoring branch from 3a59f40 to dfc4ca8 Compare February 6, 2024 17:30
RayRedGoose and others added 2 commits February 8, 2024 09:52
Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
RayRedGoose and others added 6 commits February 8, 2024 12:43
Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Co-authored-by: Alan B Smith <a.bax.smith@gmail.com>
Copy link
Contributor

@mannycarrera4 mannycarrera4 left a comment

Choose a reason for hiding this comment

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

✅ 🥊

@alanbsmith alanbsmith added approved Code has been reviewed and approved (ship it) automerge 11.x and removed ready for review Code is ready for review labels Feb 8, 2024
@alanbsmith alanbsmith merged commit 2c256dd into Workday:prerelease/major Feb 8, 2024
19 of 21 checks passed
@RayRedGoose RayRedGoose deleted the ISSUE2395_checkbox-style-refactoring branch February 8, 2024 21:38
@alanbsmith alanbsmith mentioned this pull request Feb 14, 2024
10 tasks
@alanbsmith alanbsmith mentioned this pull request May 14, 2024
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
11.x approved Code has been reviewed and approved (ship it) automerge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkbox Styles Refactor
3 participants