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

[Switch] Lock icon invisible in dark theme #380

Closed
MrVorgoth opened this issue Aug 4, 2022 · 1 comment · Fixed by #402
Closed

[Switch] Lock icon invisible in dark theme #380

MrVorgoth opened this issue Aug 4, 2022 · 1 comment · Fixed by #402
Assignees
@MichalPaszowski
Labels
bug Something isn't working

Comments

@MrVorgoth
Copy link
Contributor

MrVorgoth commented Aug 4, 2022 •
edited
Loading

Describe the bug

There is no lock icon inside Switch component, when disabled prop is passed and dark theme is applied

Steps to reproduce

Steps to reproduce the behavior:

  1. Go to Switch component on Storybook
  2. Click on Change the theme on the preview (in case it's hard to find - it's the 4th icon at the top in the middle column)
  3. Choose dark
  4. Scroll down to Stories - States
  5. See the disabled state -> no icon is visible

Expected behavior

Lock icon should be visible (either icon color needs to be changed or the switch color). Right now the switch has forced white design token, that's why it's failing on the dark theme, because on dark theme the icon is also white so white icon on white background is not visible

Screenshots

How it looks on the white theme:
Screenshot 2022-08-04 at 14 11 43

How it looks on dark theme (bug):
Screenshot 2022-08-04 at 14 11 58

Environment

It doesn't matter - everywhere it'll be the same as it's about wrong design tokens

Additional context

None
@MrVorgoth MrVorgoth added the bug Something isn't working label Aug 4, 2022
@MrVorgoth MrVorgoth mentioned this issue Aug 4, 2022
Merged
6 tasks
@sgraczyk sgraczyk changed the title [Switch component] Lock icon invisible in dark theme [Switch] Lock icon invisible in dark theme Aug 5, 2022
@sgraczyk sgraczyk added this to the v1.0.0 milestone Aug 5, 2022
@sgraczyk sgraczyk moved this to Selected for Development in LiveChat Design System Aug 5, 2022
@MichalPaszowski MichalPaszowski moved this from Selected for Development to In Progress in LiveChat Design System Aug 26, 2022
@MichalPaszowski MichalPaszowski moved this from In Progress to In Review in LiveChat Design System Sep 2, 2022
@sgraczyk sgraczyk mentioned this issue Sep 5, 2022
Merged
5 tasks
@sgraczyk sgraczyk linked a pull request Sep 9, 2022 that will close this issue
#380 introduce black-locked token and use it with switch icon #402
Merged
5 tasks
MichalPaszowski added a commit that referenced this issue Sep 9, 2022
@MichalPaszowski
#380 introduce black-locked token and use it with switch icon (#402)
7461ba6 
* introduce black-locked token and use it with switch icon

* apply properly color to the icon

* apply style

* proper content black locked colours
@sgraczyk sgraczyk moved this from In Review to Done in LiveChat Design System Sep 12, 2022
@sgraczyk
Copy link

Released in v1.0.0-alpha.22

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MichalPaszowski MichalPaszowski

Labels
bug Something isn't working
Projects
LiveChat Design System
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#380 introduce black-locked token and use it with switch icon livechat/design-system
3 participants
@MichalPaszowski @sgraczyk @MrVorgoth