studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(react) fix DatePicker focus

Browse Source 
Based on QA feedback the keyboard focus of the DatePicker was using
the browser default outline ( when navigating with tab key ), this
ensure a consistent style accross different focus modes.
This commit is contained in:
Nathan Vasse
2023-09-01 15:26:49 +02:00
committed by NathanVss
parent 9be1ec52b3
commit 495f7d3731
2 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/mighty-horses-heal.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": patch
---
Fix DatePicker focus style

34
packages/react/src/components/Forms/DatePicker/index.scss
View File

@@ -178,16 +178,6 @@
}
}
&--focused {
.c__date-picker__wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius--focus);
border-color: var(--c--components--forms-datepicker--border-color--focus);
&__toggle {
color: var(--c--components--forms-datepicker--border-color--focus);
}
}}
&:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
&:hover {
.c__date-picker__wrapper {
@@ -197,6 +187,30 @@
}
}
/**
* Even if usually !important is evil, in this case it is on purpose. Focus styling most have a greater priority
* than :hover. But here hover has more css specificity, so we need !important.
*/
@mixin focused-wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius--focus) !important;
border-color: var(--c--components--forms-datepicker--border-color--focus) !important;
.c__date-picker__wrapper__toggle {
color: var(--c--components--forms-datepicker--border-color--focus) !important;
}
}
&--focused {
.c__date-picker__wrapper {
@include focused-wrapper;
}
}
.c__date-picker__wrapper:focus-visible {
outline: none;
@include focused-wrapper;
}
&__range {
min-width: px-to-rem(350px);