scale icon indicating copy to clipboard operation
scale copied to clipboard

checkbox and switch css fixes for high contrast mode

Open tshimber opened this issue 1 year ago • 4 comments

Fixes https://github.com/telekom/scale/issues/2300

tshimber avatar Jun 04 '24 20:06 tshimber

Deploy Preview for marvelous-moxie-a6e2fe ready!

Name Link
Latest commit 4b8b0ffd8c77022162bd50abdddc197435ac6d56
Latest deploy log https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/66cefe46c6dbbf0009dc2241
Deploy Preview https://deploy-preview-2317--marvelous-moxie-a6e2fe.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Jun 04 '24 20:06 netlify[bot]

@maomaoZH @acstll @felix-ico hi, guys! I'm new here, gonna try to make some fixes. I was suggested to mention you for review and to give detailed description.

This is a fix of https://github.com/telekom/scale/issues/2300. The reason why check-icon was disappearing were scale-switch styles. In switch component shadow is put to false, I guess there was some reason? image

Anyway I don't touch it, but just add extra selector in css (see changes).

Also within whis PR I've fixed disappearing borders for checkbox in high contrast mode, 'cause box-shadow borders are not visible in HC. So I just put extra blocks of css for HC mode with normal borders. Design for disabled end error checkboxes should be discussed and implemented extra, but functionally they are ok now.

Also I've added checkbox template to html folder, I hope it's ok.

I'm wainitg for your feedback! Have a nice weekend)

tshimber avatar Jun 07 '24 12:06 tshimber

Before: image

After: image

tshimber avatar Jun 07 '24 12:06 tshimber

@tshimber Thanks for the PR. LGTM. Yeah, the switch along with other input type is set shadow dom off by purpose so that the developers can access the elements easily.

thank you!

tshimber avatar Jun 11 '24 12:06 tshimber

@maomaoZH @acstll @felix-ico hi, guys! could you please tell, what are next steps by PRs? seems that it should be approved by all reviewers, correct? should i do smth from my side? my team is asking me to clarify:)

tshimber avatar Jul 04 '24 09:07 tshimber