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

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

Draft
wants to merge 22 commits into
base: feature/integrate-datetime-picker-with-datetime-field
Choose a base branch
from

Conversation

Sarin-Udompanish
Copy link
Collaborator

@Sarin-Udompanish Sarin-Udompanish commented Aug 16, 2022

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.

goremikins and others added 18 commits July 25, 2022 17:11
feat(datetime-picker): refactor element
refactor(datetime-field): make resolveLocale function reusable
refactor(datetime-picker): use ref instead of query
fix(datetime-picker): when error value is entered, the value is reset on blur
fix(datetime-picker): inputTriggerDisabled does not work
fix(datetime-picker): cannot reset error value via API
feat(datetime-picker): add accessibility support
feat(phrasebook): add datetime-picker strings
fix(datetime-picker): popup is not closed on all scenarios
refactor(datetime-picker): simplify translation logic
refactor(datetime-picker): simplify closing logic
… set an invalid view

fix(datetime-picker): a warning is shown when a value with timepicker is set
fix(datetime-picker): seconds are not displayed
refactor(datetime-picker): improve code quality
refactor(datetime-field): improve code quality
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Aug 16, 2022

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

@goremikins
Copy link
Contributor

I do not think I like it :)

@Sarin-Udompanish
Copy link
Collaborator Author

Sarin-Udompanish commented Aug 17, 2022

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

Base automatically changed from feat/new-integrate-datetime-picker-with-datetime-field to feature/integrate-datetime-picker-with-datetime-field August 19, 2022 14:27
@sonarqubecloud
Copy link

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

@Sarin-Udompanish Sarin-Udompanish removed the request for review from goremikins September 6, 2023 08:39
@Sarin-Udompanish Sarin-Udompanish marked this pull request as draft September 6, 2023 08:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants