Merge pull request #1602 from NYPL/development

Release 3.1.3

CHANGELOG.md

@@ -8,6 +8,16 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 3.1.3 (May 15, 2024)
+
+### Adds
+
+- Adds new `type` prop to the `Modal` component with `"default"` and `"confirmation"` variants.
+
+### Fixes
+
+- Fixes the desktop styling flicker in the `ButtonGroup` component.
+
 ## 3.1.2 (May 9, 2024)
 
 ### Adds

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

src/components/ButtonGroup/ButtonGroup.mdx

@@ -12,7 +12,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.28.0`   |
-| Latest            | `3.0.0`    |
+| Latest            | `3.1.3`    |
 
 ## Table of Contents
 

src/components/ButtonGroup/ButtonGroup.tsx

@@ -8,7 +8,6 @@ import React, { forwardRef } from "react";
 
 import Button from "../Button/Button";
 import { LayoutTypes } from "../../helpers/types";
-import useNYPLBreakpoints from "../../hooks/useNYPLBreakpoints";
 
 export const buttonGroupWidthsArray = ["default", "full"] as const;
 export type ButtonGroupWidths = typeof buttonGroupWidthsArray[number];
@@ -52,11 +51,8 @@ export const ButtonGroup: ChakraComponent<
         ...rest
       } = props;
       const newChildren: JSX.Element[] = [];
-      const { isLargerThanMobile } = useNYPLBreakpoints();
-      const finalLayout = isLargerThanMobile ? layout : "column";
-      const finalButtonWidth = isLargerThanMobile ? buttonWidth : "full";
       const styles = useStyleConfig("ButtonGroup", {
-        buttonWidth: finalButtonWidth,
+        buttonWidth: buttonWidth,
       });
 
       React.Children.map(
@@ -86,7 +82,7 @@ export const ButtonGroup: ChakraComponent<
       return (
         <Stack
           className={className}
-          direction={finalLayout}
+          direction={{ base: "column", md: layout }}
           id={id}
           ref={ref}
           // Always set the spacing to "8px".

src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ButtonGroup Snapshot renders the UI snapshot correctly 1`] = `
 <div
-  className="chakra-stack css-9yqc00"
+  className="chakra-stack css-11okbqf"
 >
   <button
     className="chakra-button css-1xdhyk6"
@@ -23,7 +23,7 @@ exports[`ButtonGroup Snapshot renders the UI snapshot correctly 1`] = `
 
 exports[`ButtonGroup Snapshot renders the UI snapshot correctly 2`] = `
 <div
-  className="chakra-stack css-sg7sn5"
+  className="chakra-stack css-11okbqf"
 >
   <button
     className="chakra-button css-1xdhyk6"
@@ -44,7 +44,7 @@ exports[`ButtonGroup Snapshot renders the UI snapshot correctly 2`] = `
 
 exports[`ButtonGroup Snapshot renders the UI snapshot correctly 3`] = `
 <div
-  className="chakra-stack css-9yqc00"
+  className="chakra-stack css-1mha6zh"
 >
   <button
     className="chakra-button css-1xdhyk6"
@@ -65,7 +65,7 @@ exports[`ButtonGroup Snapshot renders the UI snapshot correctly 3`] = `
 
 exports[`ButtonGroup Snapshot renders the UI snapshot correctly 4`] = `
 <div
-  className="chakra-stack css-1qooc78"
+  className="chakra-stack css-apzk22"
 >
   <button
     className="chakra-button css-1xdhyk6"
@@ -86,7 +86,7 @@ exports[`ButtonGroup Snapshot renders the UI snapshot correctly 4`] = `
 
 exports[`ButtonGroup Snapshot renders the UI snapshot correctly 5`] = `
 <div
-  className="chakra-stack css-9yqc00"
+  className="chakra-stack css-11okbqf"
   data-testid="testid"
 >
   <button

src/components/ButtonGroup/buttonGroupChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2024-05-15",
+    version: "3.1.3",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Fixes desktop flicker issue where the mobile view was briefly displayed before the desktop styles were applied.",
+    ],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",

src/components/Modal/Modal.mdx

@@ -13,7 +13,7 @@ import Link from "../Link/Link";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `3.0.1`    |
+| Latest            | `3.1.3`    |
 
 ## Table of Contents
 
@@ -25,6 +25,7 @@ import Link from "../Link/Link";
 - {<Link href="#modaltrigger-component-props" target="_self">ModalTrigger Component Props</Link>}
 - {<Link href="#usemodal" target="_self">useModal</Link>}
 - {<Link href="#usemodal-component-props" target="_self">useModal Component Props</Link>}
+- {<Link href="#confirmation-variant" target="_self">Confirmation Modal Variant</Link>}
 - {<Link href="#default-heading-text" target="_self">Default Heading Text</Link>}
 - {<Link href="#custom-heading-text" target="_self">Custom Heading Text</Link>}
 - {<Link href="#content-window-scrolling" target="_self">Content Window Scrolling</Link>}
@@ -124,6 +125,7 @@ import { ModalTrigger } from "@nypl/design-system-react-components";
   buttonText="Button Text"
   id="modal-trigger"
   modalProps={{
+    type: "default",
     bodyContent: "body text",
     closeButtonLabel: "Close Button",
     headingText: (
@@ -177,6 +179,7 @@ import { useModal } from "@nypl/design-system-react-components";
 export const ModalStory = (args) => {
   const { onClose, onOpen, Modal } = useModal();
   const modalProps = {
+    type: "default",
     bodyContent: (
       <>
         <Button id="custom-close" onClick={onClose}>
@@ -220,9 +223,73 @@ export const ModalStory = (args) => {
 ## useModal Component Props
 
 <Canvas of={ModalStories.useModalStory} />
+<Canvas of={ModalStories.ConfirmationUseModal} />
 
 <ArgTypes of={ModalStories.useModalStory} />
 
+## Confirmation Variant
+
+The "confirmation" `Modal` variant is used when the modal can confirm or revoke the modal's content. Accordingly, there are two buttons
+in the footer instead of the one in the default modal. Each button has its own custom function (`onCancel`, `onConfirm`) that will close the modal.
+Additionally, the `onCancel` function will be called when using
+any of the other available methods for closing the modal,
+including clicking the "X" close button in the upper right corner
+of the modal, clicking anywhere outside the modal UI, or using
+the `ESC` button.
+
+Notes:
+
+- The `onConfirm`, `onCancel`, `confirmButtonLabel`, and `type` props are required for this variant.
+- The `onClose` prop should never be passed with `onConfirm` and `onCancel`.
+- When using the `ModalTrigger`, `onConfirm` and `onCancel` will call the `onClose` from the `useModal` hook internally.
+- When using the `useModal` hook, as with the `onClose` prop, pass the `onClose` function from the hook to `onCancel` and `onConfirm`:
+  for example, `onCancel: () => { onClose(); }`.
+
+<Source
+  code={`
+// Example for the Confirmation variant with ModalTrigger. 
+  <ModalTrigger
+    buttonText="Confirm"
+    id="modal-confirmation"
+    modalProps={{
+      type: "confirmation",
+      bodyContent: "The action is happening",
+      cancelButtonLabel: "Cancel action",
+      confirmButtonLabel: "Confirm action",
+      onCancel: () => {
+        console.log("Custom cancel");
+      },
+      onConfirm: () => {
+        console.log("Custom confirm");
+      },
+      headingText: (
+        <Heading
+          level="h3"
+          display="flex"
+          alignItems="center"
+          gap="xs"
+          size="heading5"
+        >
+          <>
+            <Icon
+              color="ui.success.primary"
+              name="actionCheckCircleFilled"
+              size="large"
+            />
+            This is an action
+          </>
+        </Heading>
+      ),
+    }}
+  />
+`}
+  language="jsx"
+/>
+
+See console for "Cancel"/"Confirm" messages from their respective buttons.
+
+<Canvas of={ModalStories.ConfirmationVariant} />
+
 ## Default Heading Text
 
 By default, the `Modal` component will render a DS level `h2` and size
@@ -245,6 +312,7 @@ additional icon.
   code={`
 // Example for the ModalTrigger component.
 modalProps={{
+  type: "default",
   bodyContent: "body text",
   closeButtonLabel: "Close Button",
   headingText: (
@@ -281,3 +349,4 @@ example below with a lot of content inside the `Modal`.
 ## Changelog
 
 <ComponentChangelogTable changelogData={changelogData} />
+```