feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal…

… and Overlay. (#1236)

package.json

@@ -24,8 +24,8 @@
     "@react-aria/link": "^3.4.0",
     "@react-aria/listbox": "^3.8.1",
     "@react-aria/meter": "^3.2.1",
-    "@react-aria/overlays": "^3.12.0",
-    "@react-aria/progress": "^3.3.0",
+    "@react-aria/overlays": "^3.14.0",
+    "@react-aria/progress": "^3.4.1",
     "@react-aria/select": "^3.9.0",
     "@react-aria/separator": "^3.2.5",
     "@react-aria/switch": "^3.2.4",
@@ -37,7 +37,7 @@
     "@react-aria/visually-hidden": "^3.6.1",
     "@react-stately/collections": "^3.4.1",
     "@react-stately/list": "^3.6.1",
-    "@react-stately/overlays": "^3.4.3",
+    "@react-stately/overlays": "^3.5.1",
     "@react-stately/select": "^3.4.0",
     "@react-stately/table": "^3.3.0",
     "@react-stately/tabs": "^3.4.0",

src/component-library/Dialog/Dialog.style.tsx

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+
+import { CTA } from '../CTA';
+import { Divider } from '../Divider';
+import { Flex } from '../Flex';
+import { H3 } from '../Text';
+import { theme } from '../theme';
+import { Sizes } from '../utils/prop-types';
+
+type StyledDialogProps = {
+  $size: Sizes;
+};
+
+const StyledDialog = styled.section<StyledDialogProps>`
+  background: ${theme.colors.bgPrimary};
+  border: ${theme.border.default};
+  border-radius: ${theme.rounded.md};
+  color: ${theme.colors.textPrimary};
+  width: ${({ $size }) => theme.dialog[$size].width};
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  outline: none;
+`;
+
+const StyledCloseCTA = styled(CTA)`
+  position: absolute;
+  top: ${theme.spacing.spacing2};
+  right: ${theme.spacing.spacing2};
+  z-index: ${theme.dialog.closeBtn.zIndex};
+`;
+
+const StyledDialogHeader = styled(H3)<StyledDialogProps>`
+  padding: ${({ $size }) => theme.dialog[$size].header.padding};
+  overflow: hidden;
+  flex-shrink: 0;
+`;
+
+const StyledDialogDivider = styled(Divider)<StyledDialogProps>`
+  margin: ${({ $size }) => `0 ${theme.dialog[$size].divider.marginX} ${theme.dialog[$size].divider.marginBottom}`};
+  flex-shrink: 0;
+`;
+
+const StyledDialogBody = styled(Flex)<StyledDialogProps>`
+  padding: ${({ $size }) => `${theme.dialog[$size].body.paddingY} ${theme.dialog[$size].body.paddingX}`};
+  flex: 1 1 auto;
+`;
+
+const StyledDialogFooter = styled(Flex)<StyledDialogProps>`
+  padding: ${({ $size }) => theme.dialog[$size].footer.padding};
+`;
+
+export { StyledCloseCTA, StyledDialog, StyledDialogBody, StyledDialogDivider, StyledDialogFooter, StyledDialogHeader };

src/component-library/Dialog/Dialog.tsx

@@ -0,0 +1,52 @@
+import { AriaDialogProps, useDialog } from '@react-aria/dialog';
+import { mergeProps } from '@react-aria/utils';
+import { PressEvent } from '@react-types/shared';
+import { forwardRef, ReactNode } from 'react';
+
+import { XMark } from '@/assets/icons';
+
+import { useDOMRef } from '../utils/dom';
+import { CTASizes, Sizes } from '../utils/prop-types';
+import { StyledCloseCTA, StyledDialog } from './Dialog.style';
+import { DialogContext } from './DialogContext';
+
+const closeCTASizeMap: Record<Sizes, CTASizes> = { small: 'x-small', medium: 'small', large: 'small' };
+
+type Props = {
+  children?: ReactNode;
+  onClose?: (e: PressEvent) => void;
+  size?: Sizes;
+};
+
+type InheritAttrs = Omit<AriaDialogProps, keyof Props>;
+
+type DialogProps = Props & InheritAttrs;
+
+const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  ({ children, onClose, size = 'medium', ...props }, ref): JSX.Element => {
+    const dialogRef = useDOMRef(ref);
+
+    // Get props for the dialog and its title
+    const { dialogProps, titleProps } = useDialog(props, dialogRef);
+
+    const closeCTASize = closeCTASizeMap[size];
+
+    return (
+      <DialogContext.Provider value={{ titleProps, size }}>
+        <StyledDialog ref={dialogRef} $size={size} {...mergeProps(props, dialogProps)}>
+          {onClose && (
+            <StyledCloseCTA size={closeCTASize} variant='text' aria-label='Dismiss' onPress={onClose}>
+              <XMark />
+            </StyledCloseCTA>
+          )}
+          {children}
+        </StyledDialog>
+      </DialogContext.Provider>
+    );
+  }
+);
+
+Dialog.displayName = 'Dialog';
+
+export { Dialog };
+export type { DialogProps };

src/component-library/Dialog/DialogBody.tsx

@@ -0,0 +1,14 @@
+import { FlexProps } from '../Flex';
+import { StyledDialogBody } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+type DialogBodyProps = FlexProps;
+
+const DialogBody = ({ direction = 'column', ...props }: DialogBodyProps): JSX.Element => {
+  const { size } = useDialogContext();
+
+  return <StyledDialogBody {...props} $size={size} direction={direction} />;
+};
+
+export { DialogBody };
+export type { DialogBodyProps };

src/component-library/Dialog/DialogContext.tsx

@@ -0,0 +1,18 @@
+import { DOMAttributes } from '@react-types/shared';
+import React from 'react';
+
+import { Sizes } from '../utils/prop-types';
+
+interface DialogConfig {
+  titleProps?: DOMAttributes;
+  size: Sizes;
+}
+
+const defaultContext: DialogConfig = { size: 'medium' };
+
+const DialogContext = React.createContext<DialogConfig>(defaultContext);
+
+const useDialogContext = (): DialogConfig => React.useContext<DialogConfig>(DialogContext);
+
+export { DialogContext, useDialogContext };
+export type { DialogConfig };

src/component-library/Dialog/DialogDivider.tsx

@@ -0,0 +1,14 @@
+import { DividerProps } from '../Divider';
+import { StyledDialogDivider } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+type DialogDividerProps = Omit<DividerProps, 'orientation'>;
+
+const DialogDivider = (props: DialogDividerProps): JSX.Element => {
+  const { size } = useDialogContext();
+
+  return <StyledDialogDivider orientation='horizontal' $size={size} {...props} />;
+};
+
+export { DialogDivider };
+export type { DialogDividerProps };

src/component-library/Dialog/DialogFooter.tsx

@@ -0,0 +1,16 @@
+import { FlexProps } from '../Flex';
+import { StyledDialogFooter } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+type InheritAttrs = FlexProps;
+
+type DialogFooterProps = InheritAttrs;
+
+const DialogFooter = (props: DialogFooterProps): JSX.Element => {
+  const { size } = useDialogContext();
+
+  return <StyledDialogFooter $size={size} {...props} />;
+};
+
+export { DialogFooter };
+export type { DialogFooterProps };

src/component-library/Dialog/DialogHeader.tsx

@@ -0,0 +1,34 @@
+import { mergeProps } from '@react-aria/utils';
+import { ElementType } from 'react';
+
+import { TextProps } from '../Text';
+import { FontSize, Sizes } from '../utils/prop-types';
+import { StyledDialogHeader } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+const sizeMap: Record<Sizes, FontSize> = {
+  small: 'base',
+  medium: 'xl',
+  large: 'xl'
+};
+
+type Props = {
+  elementType?: ElementType;
+};
+
+type InheritAttrs = Omit<TextProps, keyof Props>;
+
+type DialogHeaderProps = Props & InheritAttrs;
+
+const DialogHeader = ({ elementType, children, ...props }: DialogHeaderProps): JSX.Element => {
+  const { titleProps, size } = useDialogContext();
+
+  return (
+    <StyledDialogHeader as={elementType} $size={size} size={sizeMap[size]} {...mergeProps(titleProps || {}, props)}>
+      {children}
+    </StyledDialogHeader>
+  );
+};
+
+export { DialogHeader };
+export type { DialogHeaderProps };

src/component-library/Dialog/index.tsx

@@ -0,0 +1,10 @@
+export type { DialogProps } from './Dialog';
+export { Dialog } from './Dialog';
+export type { DialogBodyProps } from './DialogBody';
+export { DialogBody } from './DialogBody';
+export type { DialogDividerProps } from './DialogDivider';
+export { DialogDivider } from './DialogDivider';
+export type { DialogFooterProps } from './DialogFooter';
+export { DialogFooter } from './DialogFooter';
+export type { DialogHeaderProps } from './DialogHeader';
+export { DialogHeader } from './DialogHeader';

src/component-library/Divider/Divider.style.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+import { marginCSS, StyledMarginProps } from '../css/margin';
 import { theme } from '../theme';
 import { DividerVariants, Orientation, Sizes } from '../utils/prop-types';
 import { resolveColor } from '../utils/theme';
@@ -8,7 +9,7 @@ type StyledDividerProps = {
   $color: DividerVariants;
   $orientation: Orientation;
   $size: Sizes;
-};
+} & StyledMarginProps;
 
 const StyledDivider = styled.hr<StyledDividerProps>`
   background-color: ${({ $color }) => ($color === 'default' ? 'var(--colors-border)' : resolveColor($color))};
@@ -17,6 +18,8 @@ const StyledDivider = styled.hr<StyledDividerProps>`
   border: 0;
   margin: 0;
   align-self: stretch;
+  flex-shrink: 0;
+  ${(props) => marginCSS(props)};
 `;
 
 export { StyledDivider };

src/component-library/Divider/Divider.tsx

@@ -2,7 +2,8 @@ import { useSeparator } from '@react-aria/separator';
 import { mergeProps } from '@react-aria/utils';
 import { forwardRef, HTMLAttributes } from 'react';
 
-import { DividerVariants, ElementTypeProp, Orientation, Sizes } from '../utils/prop-types';
+import { DividerVariants, ElementTypeProp, MarginProps, Orientation, Sizes } from '../utils/prop-types';
+import { useStyleProps } from '../utils/use-style-props';
 import { StyledDivider } from './Divider.style';
 
 type Props = {
@@ -13,7 +14,7 @@ type Props = {
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
 
-type DividerProps = Props & NativeAttrs & ElementTypeProp;
+type DividerProps = Props & NativeAttrs & ElementTypeProp & MarginProps;
 
 const Divider = forwardRef<HTMLHRElement, DividerProps>(
   (
@@ -26,6 +27,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
       ...props,
       elementType
     });
+    const { styleProps, componentProps } = useStyleProps(props);
 
     return (
       <StyledDivider
@@ -34,7 +36,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
         $color={color}
         $orientation={orientation}
         $size={size}
-        {...mergeProps(separatorProps, props)}
+        {...mergeProps(separatorProps, styleProps, componentProps)}
       />
     );
   }