feat: further refine the API, stories, and documentation

Author: haideralsh

src/BottomSheet/BottomSheet.story.tsx

@@ -7,9 +7,10 @@ import type { AnimationProps } from "framer-motion";
 import { motion } from "framer-motion";
 import { transparentize } from "polished";
 import styled from "styled-components";
-import { height, layout, maxHeight, maxWidth, space, width } from "styled-system";
+import { compose, height, layout, maxHeight, maxWidth, space, styleFn, width } from "styled-system";
 import type { HeightProps, LayoutProps, MaxHeightProps, MaxWidthProps, SpaceProps, WidthProps } from "styled-system";
 import { Heading2, Text } from "../Type";
+import { excludeStyledProps } from "../StyledProps";
 
 const Overlay = styled(motion(ReachDialogOverlay))(({ theme }) => ({
   position: "fixed",
@@ -21,16 +22,20 @@ const Overlay = styled(motion(ReachDialogOverlay))(({ theme }) => ({
 }));
 
 interface SheetProps
-  extends WidthProps,
+  extends DialogContentProps,
+    AnimationProps,
+    WidthProps,
     MaxWidthProps,
     HeightProps,
     MaxHeightProps,
-    DialogContentProps,
     SpaceProps,
-    LayoutProps,
-    AnimationProps {}
+    LayoutProps {}
 
-const Sheet = styled(motion(ReachDialogContent))<SheetProps>(
+const styleFns = [width, maxWidth, height, maxHeight, space, layout];
+
+const Sheet = styled(motion(ReachDialogContent)).withConfig({
+  shouldForwardProp: excludeStyledProps(...styleFns),
+})<SheetProps>(
   ({ theme }) => ({
     ":focus": {
       outline: "none",
@@ -51,27 +56,14 @@ const Sheet = styled(motion(ReachDialogContent))<SheetProps>(
     WebkitFontSmoothing: "antialiased",
     WebkitTapHighlightColor: "transparent",
     MozOsxFontSmoothing: "grayscale",
-
     position: "relative",
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     background: "white",
-    width: "100%",
-    maxHeight: `calc(100dvh - ${theme.space.x7})`,
     boxShadow: theme.shadows.large,
-
-    [`@media (min-width: ${theme.breakpoints.small})`]: {
-      maxWidth: `calc(100% - ${theme.space.x8})`,
-      maxHeight: "85.4dvh", // Golden Ratio
-    },
   }),
-  width,
-  maxWidth,
-  height,
-  maxHeight,
-  space,
-  layout
+  compose(...styleFns)
 );
 
 const ContentContainer = styled.div((_) => ({
@@ -99,7 +91,7 @@ const Footer = styled.div(({ theme }) => ({
 }));
 
 const Header = styled.div(({ theme }) => ({
-  textAlign: "center",
+  textAlign: "left",
   paddingTop: theme.space.x3,
   paddingLeft: theme.space.x3,
   paddingRight: theme.space.x3,

src/BottomSheet/BottomSheet.styled.tsx

@@ -1,23 +1,24 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
 import { WidthProps } from "styled-system";
 import { Box } from "../Box";
-import { Button } from "../Button";
+import { QuietButton } from "../Button";
 import { Flex } from "../Flex";
 import { noop } from "../utils/noop";
 import { BottomSheetParts } from "./BottomSheet.parts";
 
 interface Props {
-  isOpen: boolean;
+  isOpen?: boolean;
   "aria-label"?: string;
   onClose?: () => void;
   title?: string;
   helpText?: React.ReactNode;
-  closeActionLabel?: string;
+  closeButtonLabel?: string;
+  hideCloseButton?: boolean;
   secondaryAction?: (props: { onClose: () => void }) => React.ReactElement;
   primaryAction?: (props: { onClose: () => void }) => React.ReactElement;
-  onCloseEnd?: () => void;
-  closeOnOverlayClick?: boolean;
+  disableCloseOnOverlayClick?: boolean;
   sheetWidth?: WidthProps["width"];
   contentWidth?: WidthProps["width"];
   children?: React.ReactNode;
@@ -26,40 +27,54 @@ interface Props {
 export default function BottomSheet({
   title,
   helpText,
-  closeActionLabel: closeButtonLabel,
-  secondaryAction: secondaryButton,
-  primaryAction: primaryButton,
-  isOpen,
+  closeButtonLabel,
+  secondaryAction,
+  primaryAction,
+  isOpen = false,
   onClose = noop,
-  closeOnOverlayClick,
-  sheetWidth,
+  sheetWidth = "100%",
   contentWidth = { small: "100%", medium: 704 },
+  disableCloseOnOverlayClick = false,
+  hideCloseButton = false,
   children,
   ...props
 }: Props) {
   const { t } = useTranslation();
+  const theme = useTheme();
+
   closeButtonLabel ||= t("close");
+  const closeOnClick = !disableCloseOnOverlayClick;
 
   return (
     <BottomSheetParts.Root isOpen={isOpen} onClose={onClose}>
-      <BottomSheetParts.Overlay closeOnClick={closeOnOverlayClick}>
-        <BottomSheetParts.Sheet width={sheetWidth} aria-label={props["aria-label"] ?? title}>
+      <BottomSheetParts.Overlay closeOnClick={closeOnClick}>
+        <BottomSheetParts.Sheet
+          width={sheetWidth}
+          maxWidth={{ small: `calc(100% - ${theme.space.x8})` }}
+          maxHeight={{ small: `calc(100dvh - ${theme.space.x7})`, medium: "85.4dvh" }}
+          aria-label={props["aria-label"] ?? title}
+        >
           <BottomSheetParts.ContentContainer>
             <Box width={contentWidth} margin="0 auto">
               <BottomSheetParts.Header>
                 {title && <BottomSheetParts.Title>{title}</BottomSheetParts.Title>}
-                {helpText && <BottomSheetParts.HelpText>{helpText}</BottomSheetParts.HelpText>}
+                {helpText &&
+                  (typeof helpText === "string" ? (
+                    <BottomSheetParts.HelpText>{helpText}</BottomSheetParts.HelpText>
+                  ) : (
+                    helpText
+                  ))}
               </BottomSheetParts.Header>
               <Box px="x3" py="x4">
                 {children}
               </Box>
             </Box>
             <BottomSheetParts.Footer>
-              <Flex justifyContent="space-between">
-                <Button onClick={onClose}>{closeButtonLabel}</Button>
-                <Flex gap="x2">
-                  {secondaryButton && secondaryButton({ onClose })}
-                  {primaryButton && primaryButton({ onClose })}
+              <Flex alignItems="center" justifyContent="space-between" gap="x2">
+                {!hideCloseButton && <QuietButton onClick={onClose}>{closeButtonLabel}</QuietButton>}
+                <Flex gap="x2" alignItems="center" ml="auto">
+                  {secondaryAction && secondaryAction({ onClose })}
+                  {primaryAction && primaryAction({ onClose })}
                 </Flex>
               </Flex>
             </BottomSheetParts.Footer>