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

refactor(radio): implement design tokens spec #862

Merged
merged 3 commits into from
Apr 21, 2021
Merged

refactor(radio): implement design tokens spec #862

merged 3 commits into from
Apr 21, 2021

Conversation

lalithkarikelli
Copy link
Contributor

@lalithkarikelli lalithkarikelli commented Apr 8, 2021 •
edited
Loading

Description

<hx-radio> : Added design tokens

What are the relevant story cards/tickets? Any additional PRs or other references?

Jira: SURF2204

Before you request a review for this PR:

  • For UI changes, did you manually test in recent versions of modern browsers (Chrome, Firefox, and Safari)?
  • For UI changes, did you manually test in IE11 and legacy Edge?
  • Did you add component tests for any new code?
  • Did you run the component unit tests via yarn test to ensure all tests passed?
  • Did you include a screenshot of the component tests?
  • If you changed/added functionality, did you update the demo page and documentation?
  • If needed, did you add or modify the demo test page to test the changed/added functionality?
  • Did you assign reviewers?
  • In Jira, have you linked to this PR on the ticket(s)?

@netlify
Copy link

netlify bot commented Apr 8, 2021 •
edited
Loading

Deploy preview for helix-ui ready!

Built with commit 25ca343

https://deploy-preview-862--helix-ui.netlify.app

@100stacks 100stacks added this to the HelixUI-v2.3.0 milestone Apr 19, 2021
100stacks
100stacks requested changes Apr 19, 2021
View reviewed changes
Copy link
Member

@100stacks 100stacks left a comment

Choose a reason for hiding this comment

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

Let's hold off on removing states for now.

src/scss/components/radio/_index.scss
color: $gray-950;
color: var(--hxRadio-radioControl-layout-label-color, $gray-950);
font-weight: 400; // normal
color: $rax-component-radio-label-default-color; // in tokens it is $gray-900
Copy link
Member

Choose a reason for hiding this comment

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

Please revert to continue using IE11 fallback pattern:

color: $rax-component-radio-label-default-color;
color: var(--hxRadio-radioControl-layout-label-color, $rax-component-radio-label-default-color);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/_index.scss
@@ -101,10 +101,10 @@ hx-radio-control {
hx-radio-control {
> label > hx-radio {
background-color: $gray-0;
background-color: var(--hxRadio-pristine-radio-bgcolor, $gray-0);
border: 1px solid currentColor;
background-color: $rax-component-radio-default-background-color;
Copy link
Member

Choose a reason for hiding this comment

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

Please revert to continue using IE11 fallback pattern:

color: $rax-component-radio-default-background-color;
color: var(--hxRadio-pristine-radio-bgcolor, $rax-component-radio-default-background-color);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/_index.scss
color: $gray-500;
color: var(--hxRadio-pristine-radio-color, $gray-500);
color: $rax-component-radio-default-border-color; // in tokens it is border-color
Copy link
Member

Choose a reason for hiding this comment

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

Please revert to continue using IE11 fallback pattern. See above.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/_index.scss Outdated
@@ -128,24 +128,24 @@ hx-radio-control {

&:checked {
color: $blue-700;
color: var(--hxRadio-pristine-radio-checked-color, $blue-700);
color: $rax-component-radio-checked-border-color;// in tokens it is border-color
Copy link
Member

Choose a reason for hiding this comment

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

Please revert to continue using IE11 fallback pattern. See above.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/_index.scss Outdated
color: $blue-700;
color: var(--hxRadio-pristine-radio-checked-label-color, $blue-700);
color: $rax-component-radio-checked-border-color;// no specific token for checked label color
Copy link
Member

Choose a reason for hiding this comment

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

Please revert to continue using IE11 fallback pattern. See above.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/_index.scss Outdated
Comment on lines 206 to 209
&,
&:hover {
@include hxRadioFacade(disabled, hover);
}
Copy link
Member

Choose a reason for hiding this comment

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

Revert this change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/mixins/_hxRadioControl.scss Outdated
Comment on lines 34 to 41
} @else if $pseudo-state == hover {
&::-ms-check {
background-color: $red-status-100;
background-color: var(--hxRadio-invalid-radio-hover-ie-bgcolor, $red-status-100);
border: 1px solid currentColor;
color: $red-status-500;
color: var(--hxRadio-invalid-radio-hover-ie-color, $red-status-500);
}
Copy link
Member

Choose a reason for hiding this comment

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

Revert this change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/mixins/_hxRadioControl.scss Outdated
Comment on lines 56 to 63
} @else if $pseudo-state == hover {
&::-ms-check {
background-color: $gray-100;
background-color: var(--hxRadio-disabled-radio-hover-ie-bgcolor, $gray-100);
border: 1px solid currentColor;
color: $gray-500;
color: var(--hxRadio-disabled-radio-hover-ie-color, $gray-500);
}
Copy link
Member

Choose a reason for hiding this comment

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

Revert this change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/mixins/_hxRadioFacade.scss Outdated
Comment on lines 22 to 28
@else if $pseudo-state == hover {
background-color: $red-status-100;
background-color: var(--hxRadio-invalid-radio-facade-hover-bgcolor, $red-status-100);
border: 1px solid currentColor;
color: $red-status-500;
color: var(--hxRadio-invalid-radio-facade-hover-color, $red-status-500);
}
Copy link
Member

Choose a reason for hiding this comment

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

Revert this change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

src/scss/components/radio/mixins/_hxRadioFacade.scss
Comment on lines -38 to -50
@if $pseudo-state == hover {
background-color: $gray-0;
background-color: var(--hxRadio-disabled-radio-facade-hover-bgcolor, $gray-0);
border: 1px solid currentColor;
color: $gray-500;
color: var(--hxRadio-disabled-radio-facade-hover-color, $gray-500);
}
@else {
border: 1px solid currentColor;
color: $gray-500;
color: var(--hxRadio-disabled-radio-facade-color, $gray-500);
cursor: not-allowed;
}
Copy link
Member

Choose a reason for hiding this comment

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

Revert this change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changes have been done, please review.

@lalithkarikelli lalithkarikelli marked this pull request as ready for review April 20, 2021 14:35
@lalithkarikelli
Copy link
Contributor Author

Rebased with master and squashed all commits

@100stacks 100stacks added Design Tokens Design Tokens and removed PR: Comments Provided PR: Comments Provided labels Apr 20, 2021
badejayayesubabu
badejayayesubabu approved these changes Apr 21, 2021
View reviewed changes
Copy link
Collaborator

@badejayayesubabu badejayayesubabu left a comment

Choose a reason for hiding this comment

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

DEV LGTM

100stacks
100stacks approved these changes Apr 21, 2021
View reviewed changes
Copy link
Member

@100stacks 100stacks left a comment

Choose a reason for hiding this comment

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

Dev LGTM

@100stacks 100stacks changed the title refactor(hx-radio): refactor to use design tokens refactor(radio): implement design tokens spec Apr 21, 2021
@100stacks 100stacks merged commit 758d3e1 into HelixDesignSystem:master Apr 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@100stacks 100stacks 100stacks approved these changes

@badejayayesubabu badejayayesubabu badejayayesubabu approved these changes

Assignees
No one assigned
Labels
Design Tokens Design Tokens
Projects
None yet
Milestone
HelixUI-v2.3.0
Development

Successfully merging this pull request may close these issues.
3 participants
@lalithkarikelli @100stacks @badejayayesubabu