packages/react/src/components/Popover/index.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);
  }
}
✨(react) add DatePicker component 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. 2023-05-22 17:00:25 +02:00			`@use 'src/utils';`


✨(react) add a popover component A design system needs a popover mecanism. In the select component, this logic is handled by downshift. We introduce a new component, responsible to open an element in a popin and close it when the user click outside of it. 2023-06-02 12:04:36 +02:00			`.c__popover {`
			`position: absolute;`
			`display: flex;`
			`width: fit-content;`
			`z-index: 1;`

			`&:not(&--borderless) {`
✨(react) add DatePicker component 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. 2023-05-22 17:00:25 +02:00			`@extend %shadow;`
✨(react) add a popover component A design system needs a popover mecanism. In the select component, this logic is handled by downshift. We introduce a new component, responsible to open an element in a popin and close it when the user click outside of it. 2023-06-02 12:04:36 +02:00			`background-color: var(--c--components--forms-datepicker--menu-background-color);`
			`}`
			`}`