Skip to content

Commit

Permalink
Add opacity disabled to calender button (#436)
Browse files Browse the repository at this point in the history 
* fix: dark mode support for search

* fix: disable calender button

* Revert "fix: dark mode support for search"

This reverts commit c5a582e.

* fix: pass snapshot test
  • Loading branch information
@henry-deriv
henry-deriv authored Sep 16, 2024
1 parent 065f5d9 commit 4ed9e17
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 20 deletions.
40 changes: 20 additions & 20 deletions lib/components/Atom/Calendar/__tests__/__snapshots__/date-picker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ exports[`DatePicker should render calendar with double navigation if next2Label
style="display: flex; flex-wrap: nowrap;"
>
<div
class="react-calendar__month-view__weekdays__weekday"
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -151,7 +151,7 @@ exports[`DatePicker should render calendar with double navigation if next2Label
</abbr>
</div>
<div
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
class="react-calendar__month-view__weekdays__weekday"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -321,7 +321,7 @@ exports[`DatePicker should render calendar with double navigation if next2Label
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -365,7 +365,7 @@ exports[`DatePicker should render calendar with double navigation if next2Label
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -643,7 +643,7 @@ exports[`DatePicker should render calendar with neighboring month if showNeighbo
style="display: flex; flex-wrap: nowrap;"
>
<div
class="react-calendar__month-view__weekdays__weekday"
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -676,7 +676,7 @@ exports[`DatePicker should render calendar with neighboring month if showNeighbo
</abbr>
</div>
<div
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
class="react-calendar__month-view__weekdays__weekday"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -912,7 +912,7 @@ exports[`DatePicker should render calendar with neighboring month if showNeighbo
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -956,7 +956,7 @@ exports[`DatePicker should render calendar with neighboring month if showNeighbo
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -1300,7 +1300,7 @@ exports[`DatePicker should render calendar with range selection 1`] = `
style="display: flex; flex-wrap: nowrap;"
>
<div
class="react-calendar__month-view__weekdays__weekday"
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -1333,7 +1333,7 @@ exports[`DatePicker should render calendar with range selection 1`] = `
</abbr>
</div>
<div
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
class="react-calendar__month-view__weekdays__weekday"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -1503,7 +1503,7 @@ exports[`DatePicker should render calendar with range selection 1`] = `
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -1547,7 +1547,7 @@ exports[`DatePicker should render calendar with range selection 1`] = `
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -1747,7 +1747,7 @@ exports[`DatePicker should render calendar without navigation if showNavigation
style="display: flex; flex-wrap: nowrap;"
>
<div
class="react-calendar__month-view__weekdays__weekday"
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -1780,7 +1780,7 @@ exports[`DatePicker should render calendar without navigation if showNavigation
</abbr>
</div>
<div
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
class="react-calendar__month-view__weekdays__weekday"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -1950,7 +1950,7 @@ exports[`DatePicker should render calendar without navigation if showNavigation
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -1994,7 +1994,7 @@ exports[`DatePicker should render calendar without navigation if showNavigation
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -2272,7 +2272,7 @@ exports[`DatePicker should render with default values if optional ones were not
style="display: flex; flex-wrap: nowrap;"
>
<div
class="react-calendar__month-view__weekdays__weekday"
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -2305,7 +2305,7 @@ exports[`DatePicker should render with default values if optional ones were not
</abbr>
</div>
<div
class="react-calendar__month-view__weekdays__weekday react-calendar__month-view__weekdays__weekday--current"
class="react-calendar__month-view__weekdays__weekday"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
>
<abbr
Expand Down Expand Up @@ -2475,7 +2475,7 @@ exports[`DatePicker should render with default values if optional ones were not
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down Expand Up @@ -2519,7 +2519,7 @@ exports[`DatePicker should render with default values if optional ones were not
</abbr>
</button>
<button
class="react-calendar__tile react-calendar__month-view__days__day"
class="react-calendar__tile react-calendar__tile--now react-calendar__month-view__days__day"
style="flex-basis: 14.285714285714286%; flex-shrink: 0; flex-grow: 0; overflow: hidden; margin-inline-end: 0;"
type="button"
>
Expand Down
1 change: 1 addition & 0 deletions lib/components/Atom/Calendar/date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
button:enabled:focus,
button:disabled {
background-color: unset;
opacity: var(--opacity-disabled);
}

button:enabled:focus:is(.react-calendar__navigation__arrow),
Expand Down

0 comments on commit 4ed9e17

Please sign in to comment.