10fa71e2a7
Based on the Figma DS design by Alex, a mono date-picker component has been added. It uses react-aria headless ui component capabilities, with downshift headless ui component. React-aria was not supporting by default dropdown menus to select months and years. We could not reuse Popover component from react-aria because we are not using their headless ui component for the button one. Clicking on the toggle calendar button triggers both the button and the popover click outside events. React-aria button uses a custom onPress props that is disabled by their popover. Instead, I have implemented a simple custom hook. This is the first acceptable version of the component. Some minor user interaction are missing. This first component doesn't support time selection.
15 lines
247 B
SCSS
15 lines
247 B
SCSS
@use 'src/utils';
|
|
|
|
|
|
.c__popover {
|
|
position: absolute;
|
|
display: flex;
|
|
width: fit-content;
|
|
z-index: 1;
|
|
|
|
&:not(&--borderless) {
|
|
@extend %shadow;
|
|
background-color: var(--c--components--forms-datepicker--menu-background-color);
|
|
}
|
|
}
|