@sproutsocial/seeds-react-modal 2.1.1 → 2.2.0

package/src/v2/ModalV2.stories.tsx

@@ -101,6 +101,7 @@ export const WithActions: Story = {
     return (
       <Modal
         aria-label="Modal With Actions"
+        closeButtonAriaLabel="Close Modal"
         modalTrigger={
           <Button appearance="primary">Open Modal With Actions</Button>
         }
@@ -137,11 +138,56 @@ export const WithActions: Story = {
   },
 };
 
+export const CustomCloseButton: Story = {
+  render: () => {
+    const [clickCount, setClickCount] = useState(0);
+
+    return (
+      <Box>
+        <Text mb={400}>Close button clicked {clickCount} times</Text>
+        <Modal
+          aria-label="Modal With Custom Close Button"
+          modalTrigger={
+            <Button appearance="primary">Open Modal With Custom Close</Button>
+          }
+          closeButtonProps={{
+            "aria-label": "Close this dialog",
+            onClick: () => {
+              console.log("Close button clicked!");
+              setClickCount((prev) => prev + 1);
+            },
+            id: "custom-close-btn",
+            iconName: "x-outline",
+          }}
+        >
+          <ModalHeader
+            title="Custom Close Button"
+            subtitle="The close button has custom props"
+          />
+          <ModalBody>
+            <Text>
+              This modal demonstrates the closeButtonProps API. The close button
+              has a custom onClick handler that tracks clicks, a custom id
+              attribute, and a custom aria-label. You can pass any button
+              attributes like disabled, className, or data attributes.
+            </Text>
+          </ModalBody>
+          <ModalFooter
+            cancelButton={<Button>Cancel</Button>}
+            primaryButton={<Button appearance="primary">Confirm</Button>}
+          />
+        </Modal>
+      </Box>
+    );
+  },
+};
+
 export const DraggableModal: Story = {
   render: () => {
     return (
       <Modal
         aria-label="Draggable Modal"
+        closeButtonAriaLabel="Close Modal"
         draggable={true}
         showOverlay={false}
         modalTrigger={
@@ -184,12 +230,10 @@ export const ControlledState: Story = {
 
     return (
       <div>
-        <Box mb={400}>
-          <Text>
-            Use controlled state when you need to manage modal state externally.
-            Modal opened count: {count}
-          </Text>
-        </Box>
+        <Text mb={400}>
+          Use controlled state when you need to manage modal state externally.
+          Modal opened count: {count}
+        </Text>
 
         <Modal
           open={isOpen}
@@ -198,6 +242,7 @@ export const ControlledState: Story = {
             if (open) setCount((c) => c + 1);
           }}
           aria-label="Controlled Modal"
+          closeButtonAriaLabel="Close Modal"
           modalTrigger={
             <Button appearance="primary">Open Controlled Modal</Button>
           }
@@ -274,16 +319,14 @@ export const DraggableWithFormInteraction: Story = {
 
     return (
       <Box p={500}>
-        <Box mb={400}>
-          <Text fontSize={500} fontWeight="bold">
-            Test Draggable Modal with Form Interaction
-          </Text>
-          <Text fontSize={200} color="text.subtle" mt={200}>
-            Open the draggable modal, move it to the side, then try interacting
-            with the form below. You should be able to fill out the form while
-            the modal is open and moved aside.
-          </Text>
-        </Box>
+        <Text fontSize={500} fontWeight="bold" mb={400}>
+          Test Draggable Modal with Form Interaction
+        </Text>
+        <Text fontSize={200} color="text.subtle" mb={400}>
+          Open the draggable modal, move it to the side, then try interacting
+          with the form below. You should be able to fill out the form while the
+          modal is open and moved aside.
+        </Text>
 
         <Box
           p={500}
@@ -410,6 +453,7 @@ export const DraggableWithFormInteraction: Story = {
 
                 <Modal
                   aria-label="Reference Modal"
+                  closeButtonAriaLabel="Close Reference Modal"
                   draggable={true}
                   showOverlay={false}
                   modalTrigger={
@@ -420,57 +464,49 @@ export const DraggableWithFormInteraction: Story = {
                     title="Reference Information"
                     subtitle="Drag this modal by the header to move it around"
                   />
-                  <ModalBody>
-                    <Box p={300}>
-                      <Text fontSize={400} fontWeight="bold" mb={200}>
-                        Instructions for filling out the form:
-                      </Text>
-                      <Box as="ul" pl={400}>
-                        <li>
-                          <Text mb={100}>
-                            First Name: Enter your given name
-                          </Text>
-                        </li>
-                        <li>
-                          <Text mb={100}>
-                            Last Name: Enter your family name
-                          </Text>
-                        </li>
-                        <li>
-                          <Text mb={100}>
-                            Email: Use your work email address
-                          </Text>
-                        </li>
-                        <li>
-                          <Text mb={100}>
-                            Company: Enter your organization name
-                          </Text>
-                        </li>
-                      </Box>
-
-                      <Box
-                        mt={400}
-                        p={300}
-                        bg="container.background.info"
-                        borderRadius="6px"
-                        border="1px solid"
-                        borderColor="container.border.info"
-                      >
-                        <Text fontWeight="bold" mb={100}>
-                          Try this:
+                  <ModalBody p={300}>
+                    <Text fontSize={400} fontWeight="bold" mb={200}>
+                      Instructions for filling out the form:
+                    </Text>
+                    <Box as="ul" pl={400}>
+                      <li>
+                        <Text mb={100}>First Name: Enter your given name</Text>
+                      </li>
+                      <li>
+                        <Text mb={100}>Last Name: Enter your family name</Text>
+                      </li>
+                      <li>
+                        <Text mb={100}>Email: Use your work email address</Text>
+                      </li>
+                      <li>
+                        <Text mb={100}>
+                          Company: Enter your organization name
                         </Text>
-                        <Text fontSize={100}>
-                          1. Grab this modal by the header (you'll see a grab
-                          cursor)
-                          <br />
-                          2. Drag it to the side of the screen
-                          <br />
-                          3. Click on the form inputs in the background
-                          <br />
-                          4. Notice you can interact with the form while the
-                          modal is open!
-                        </Text>
-                      </Box>
+                      </li>
+                    </Box>
+
+                    <Box
+                      mt={400}
+                      p={300}
+                      bg="container.background.info"
+                      borderRadius="6px"
+                      border="1px solid"
+                      borderColor="container.border.info"
+                    >
+                      <Text fontWeight="bold" mb={100}>
+                        Try this:
+                      </Text>
+                      <Text fontSize={100}>
+                        1. Grab this modal by the header (you'll see a grab
+                        cursor)
+                        <br />
+                        2. Drag it to the side of the screen
+                        <br />
+                        3. Click on the form inputs in the background
+                        <br />
+                        4. Notice you can interact with the form while the modal
+                        is open!
+                      </Text>
                     </Box>
                   </ModalBody>
                   <ModalFooter
@@ -523,6 +559,7 @@ export const TallContentMobile: Story = {
     return (
       <Modal
         aria-label="Tall Content Modal"
+        closeButtonAriaLabel="Close Modal"
         modalTrigger={
           <Button appearance="primary">Open Tall Modal (Test Mobile)</Button>
         }
@@ -697,6 +734,7 @@ export const SimplifiedFooterAPI: Story = {
     return (
       <Modal
         aria-label="Simplified Footer API Example"
+        closeButtonAriaLabel="Close Modal"
         modalTrigger={
           <Button appearance="primary">Open Modal with Simple Footer</Button>
         }
@@ -745,6 +783,7 @@ export const FooterWithLeftAction: Story = {
         open={isOpen}
         onOpenChange={setIsOpen}
         aria-label="Footer with Left Action"
+        closeButtonAriaLabel="Close Modal"
         modalTrigger={
           <Button appearance="primary">Open Modal with Delete Action</Button>
         }
@@ -802,6 +841,7 @@ export const CustomFooterOverride: Story = {
     return (
       <Modal
         aria-label="Custom Footer Override"
+        closeButtonAriaLabel="Close Modal"
         modalTrigger={<Button appearance="primary">Open Custom Footer</Button>}
       >
         <ModalHeader

package/src/v2/components/ModalAction.tsx

@@ -30,6 +30,7 @@ import { RAIL_BUTTON_SIZE } from "../../shared/constants";
  *   onClick={() => console.log('expand')}
  * />
  */
+
 const RailButton = styled.button`
   width: ${RAIL_BUTTON_SIZE}px;
   height: ${(props) => props.theme.space[500]};
@@ -74,6 +75,9 @@ export const ModalAction: React.FC<TypeModalActionProps> = ({
 }) => {
   const button = (
     <RailButton
+      data-slot="modal-action"
+      data-qa-modal-action
+      data-qa-modal-action-type={actionType || "button"}
       aria-label={ariaLabel}
       title={ariaLabel}
       disabled={disabled}

package/src/v2/components/ModalBody.tsx

@@ -44,7 +44,12 @@ StyledModalBody.displayName = "ModalBody";
 export const ModalBody = React.forwardRef<HTMLDivElement, TypeModalBodyProps>(
   ({ children, ...rest }, ref) => {
     return (
-      <StyledModalBody data-qa-modal-body ref={ref} {...rest}>
+      <StyledModalBody
+        data-slot="modal-body"
+        data-qa-modal-body
+        ref={ref}
+        {...rest}
+      >
         {children}
       </StyledModalBody>
     );

package/src/v2/components/ModalCloseWrapper.tsx

@@ -27,7 +27,13 @@ export const ModalCloseWrapper = (props: ModalCloseWrapperProps) => {
 
   return (
     <Dialog.Close asChild={asChild} onClick={handleClick} {...rest}>
-      {children}
+      {React.isValidElement(children)
+        ? React.cloneElement(children as React.ReactElement<any>, {
+            "data-slot": "modal-close-wrapper",
+            "data-qa-modal-close-wrapper": "",
+            ...((children as React.ReactElement<any>).props || {}),
+          })
+        : children}
     </Dialog.Close>
   );
 };

package/src/v2/components/ModalContent.tsx

@@ -32,11 +32,15 @@ interface StyledContentProps
 }
 
 // Styled motion.div wrapper that handles positioning
-const StyledMotionWrapper = styled(motion.div)`
+const StyledMotionWrapper = styled(motion.div)<{
+  $isMobile: boolean;
+  $zIndex?: number;
+}>`
   position: fixed;
-  top: ${(props: { $isMobile: boolean }) => (props.$isMobile ? "auto" : "50%")};
+  top: ${(props) => (props.$isMobile ? "auto" : "50%")};
   left: 50%;
-  bottom: ${(props: { $isMobile: boolean }) => (props.$isMobile ? 0 : "auto")};
+  bottom: ${(props) => (props.$isMobile ? 0 : "auto")};
+  z-index: ${(props) => (props.$zIndex ? props.$zIndex + 1 : 7)};
 `;
 
 export const StyledContent = styled.div.withConfig({
@@ -113,6 +117,7 @@ interface ModalContentProps {
   label?: string;
   dataAttributes: Record<string, string>;
   draggable?: boolean;
+  zIndex?: number;
   rest: any;
 }
 
@@ -124,6 +129,7 @@ export const StaticModalContent: React.FC<ModalContentProps> = ({
   children,
   label,
   dataAttributes,
+  zIndex,
   rest,
 }) => {
   const isMobile = useIsMobile();
@@ -134,12 +140,18 @@ export const StaticModalContent: React.FC<ModalContentProps> = ({
       <Dialog.Content asChild aria-label={label}>
         <StyledMotionWrapper
           $isMobile={isMobile}
+          $zIndex={zIndex}
           variants={contentVariants}
           initial="initial"
           animate="animate"
           exit="exit"
         >
-          <StyledContent draggable={false} {...dataAttributes} {...rest}>
+          <StyledContent
+            data-slot="modal-content"
+            draggable={false}
+            {...dataAttributes}
+            {...rest}
+          >
             {children}
           </StyledContent>
         </StyledMotionWrapper>
@@ -156,6 +168,7 @@ export const DraggableModalContent: React.FC<ModalContentProps> = ({
   children,
   label,
   dataAttributes,
+  zIndex,
   rest,
 }) => {
   const [position, setPosition] = React.useState({ x: 0, y: 0 });
@@ -265,6 +278,7 @@ export const DraggableModalContent: React.FC<ModalContentProps> = ({
       >
         <StyledMotionWrapper
           $isMobile={isMobile}
+          $zIndex={zIndex}
           variants={contentVariants}
           initial="initial"
           animate="animate"
@@ -278,6 +292,7 @@ export const DraggableModalContent: React.FC<ModalContentProps> = ({
           }}
         >
           <StyledContent
+            data-slot="modal-content"
             ref={contentRef}
             draggable={true}
             isDragging={isDragging}

package/src/v2/components/ModalDescription.tsx

@@ -21,7 +21,12 @@ export const ModalDescription = React.forwardRef<
 >(({ children, descriptionProps = {}, ...rest }, ref) => {
   return (
     <Dialog.Description asChild {...descriptionProps}>
-      <Box ref={ref} {...rest}>
+      <Box
+        data-slot="modal-description"
+        data-qa-modal-description
+        ref={ref}
+        {...rest}
+      >
         {children}
       </Box>
     </Dialog.Description>

package/src/v2/components/ModalFooter.tsx

@@ -83,7 +83,7 @@ export const ModalFooter = (props: TypeModalFooterProps) => {
 
   // Build simplified API layout
   return (
-    <ModalCustomFooter {...rest}>
+    <ModalCustomFooter data-slot="modal-footer" data-qa-modal-footer {...rest}>
       {/* Left action (e.g., Delete button) */}
       {leftAction ? leftAction : null}
 

package/src/v2/components/ModalHeader.tsx

@@ -77,6 +77,8 @@ export const ModalHeader = (props: TypeModalHeaderProps) => {
 
   return (
     <ModalCustomHeader
+      data-slot="modal-header"
+      data-qa-modal-header
       {...rest}
       onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}
       draggable={isDraggable}

package/src/v2/components/ModalOverlay.tsx

@@ -21,12 +21,13 @@ interface StyledOverlayProps
 }
 
 // Styled motion.div for the overlay wrapper
-export const StyledMotionOverlay = styled(motion.div)`
+export const StyledMotionOverlay = styled(motion.div)<{ $zIndex?: number }>`
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
+  z-index: ${(props) => props.$zIndex ?? 6};
 `;
 
 export const StyledOverlay = styled.div.withConfig({