refinitiv-ui icon indicating copy to clipboard operation
refinitiv-ui copied to clipboard
verified publisher icon Refinitiv

fix(datetime-picker): change focus outline styles of calendar button

Open Sarin-Udompanish opened this issue 3 years ago • 4 comments

Description

Change focus outline styles of calendar button

From

Screen Shot 2565-08-16 at 16 01 34

To

Screen Shot 2565-08-16 at 15 19 40

I use 2px outline width in Halo theme because with 1px it looks like a border more than an outline but I'm fine with 1px width as well.

Sarin-Udompanish avatar Aug 16 '22 09:08 Sarin-Udompanish

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: dd0c2c1
Status: ✅  Deploy successful!
Preview URL: https://fe9b97ab.refinitiv-ui.pages.dev
Branch Preview URL: https://fix-styles-focus-outline-of-.refinitiv-ui.pages.dev

View logs

cloudflare-workers-and-pages[bot] avatar Aug 16 '22 11:08 cloudflare-workers-and-pages[bot]

I do not think I like it :)

goremikins avatar Aug 16 '22 12:08 goremikins

Updated @goremikins

  • Add a left border to calendar button.
  • Change focus style of calendar button ( can't use :focus-visible selector because it too new ).
  • Change border color on readonly and disabled state.

Screen Shot 2565-08-17 at 17 47 39

Calendar button focused

Screen Shot 2565-08-17 at 17 48 15

Sarin-Udompanish avatar Aug 17 '22 10:08 Sarin-Udompanish

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

sonarqubecloud[bot] avatar Aug 22 '22 05:08 sonarqubecloud[bot]