Merge pull request #11212 from ashiskumar-1999/dev

fix: Implement DS styles and unify modals

Author: pettinarip

src/@chakra-ui/components/Modal.ts

@@ -12,57 +12,63 @@ const {
   defaultProps,
 } = modalDefaultTheme
 
-const variantCode = definePartsStyle((props) => ({
-  overlay: {
-    bg: "rgba(0, 0, 0, 0.7)",
-  },
-  dialog: {
-    maxW: "100vw",
-    marginTop: "auto",
-    marginBottom: 0,
-    maxHeight: "50%",
-    borderRadius: 0,
-  },
-  header: {
-    bg: props.colorMode === "dark" ? "rgb(25, 25, 25)" : "rgb(247, 247, 247)",
-    borderColor:
-      props.colorMode == "dark" ? "rgb(242, 242, 242)" : "rgb(51, 51, 51)",
-    borderTop: "1px solid",
-    borderBottom: "1px solid",
-    textTransform: "uppercase",
-    fontWeight: "normal",
-    fontSize: "md",
-    fontFamily: "monospace",
-  },
-  closeButton: {
-    padding: 0,
-    width: "24px",
-    height: "24px",
-    borderRadius: 0,
-    color: "rgb(178, 178, 178)",
-    fontSize: "sm",
-    margin: 0,
-    top: 4,
-    insetInlineEnd: 4,
-    bottom: 4,
-  },
-  body: {
-    padding: 0,
-  },
-}))
-
 export const Modal = defineMultiStyleConfig({
   baseStyle: definePartsStyle((props) =>
     defineMergeStyles(defaultBaseStyle?.(props), {
       dialog: {
-        my: 0,
+        bg: "background.base",
+        gap: "4",
+        padding: { base: "4", sm: "8" },
+        borderRadius: "base",
+        boxShadow: "none",
+      },
+      header: {
+        flex: "1",
+        padding: "0",
+        fontWeight: "bold",
+        fontSize: "2xl",
+        me: "8",
+      },
+      closeButton: {
+        position: "static",
+        color: "body.base",
+        bg: "background.base",
+      },
+      body: {
+        padding: "0",
+        fontWeight: "normal",
+        fontSize: "md",
+      },
+      footer: {
+        gap: "2",
+        px: "0",
+        pt: "8",
+        pb: "0",
       },
     })
   ),
-  sizes: defaultSizes,
-  variants: {
-    code: variantCode,
+  sizes: {
+    ...defaultSizes,
+    full: definePartsStyle((props) => ({
+      dialogContainer: {
+        alignItems: { base: "flex-start", md: "center" },
+      },
+      dialog: {
+        padding: { base: "4", sm: "8", md: "16" },
+        my: { base: "4", md: props.isCentered ? "auto" : "4" },
+        mx: "4",
+        minH: {
+          base: "calc(100vh - 2rem)",
+          md: "min(100vh, 792px)",
+        },
+        maxW: {
+          base: "calc(100vw - 2rem)",
+          md: "min(100vw, 1000px)",
+        },
+      },
+    })),
   },
+
   defaultProps: {
     ...defaultProps,
     variant: undefined,

src/components/CodeModal.tsx

@@ -6,6 +6,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  useColorModeValue,
 } from "@chakra-ui/react"
 
 type CodeModalProps = {
@@ -15,20 +16,58 @@ type CodeModalProps = {
   setIsOpen: (isOpen: boolean) => void
 }
 
-const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => (
-  <Modal
-    isOpen={isOpen}
-    scrollBehavior="inside"
-    variant="code"
-    onClose={() => setIsOpen(false)}
-  >
-    <ModalOverlay />
-    <ModalContent>
-      <ModalHeader>{title}</ModalHeader>
-      <ModalCloseButton />
-      <ModalBody>{children}</ModalBody>
-    </ModalContent>
-  </Modal>
-)
+const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
+  const bgColor = useColorModeValue("rgb(247, 247, 247)", "rgb(25, 25, 25)")
+  const borderColor = useColorModeValue("rgb(51, 51, 51)", "rgb(242, 242, 242)")
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      scrollBehavior="inside"
+      onClose={() => setIsOpen(false)}
+    >
+      <ModalOverlay />
+      <ModalContent
+        maxW="100vw"
+        marginTop="auto"
+        marginBottom="0"
+        maxHeight="50%"
+        borderRadius="0"
+        p={{ base: "0", md: "0" }}
+        gap="0"
+      >
+        <ModalHeader
+          bg={bgColor}
+          borderColor={borderColor}
+          borderTop="1px solid"
+          borderBottom="1px solid"
+          textTransform="uppercase"
+          fontWeight="normal"
+          fontSize="md"
+          fontFamily="monospace"
+          px="6"
+          py="4"
+          me="0"
+        >
+          {title}
+        </ModalHeader>
+        <ModalCloseButton
+          position="absolute"
+          padding="0"
+          width="24px"
+          height="24px"
+          borderRadius="0"
+          color="rgb(178, 178, 178)"
+          fontSize="sm"
+          margin="0"
+          top="4"
+          insetInlineEnd="4"
+          bottom="4"
+        />
+        <ModalBody p="0">{children}</ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
 
 export default CodeModal

src/components/FeedbackWidget/index.tsx

@@ -9,6 +9,7 @@ import {
   AlertDialogOverlay,
   Box,
   Button,
+  HStack,
 } from "@chakra-ui/react"
 
 import FixedDot from "./FixedDot"
@@ -50,33 +51,26 @@ const FeedbackWidget = () => {
             m="auto"
             alignItems="flex-end"
             backgroundColor="transparent"
-            boxShadow="tableItemBox"
             me={24}
             bottom={{ base: `${bottomOffset + 5}rem`, lg: 20 }}
             data-testid="feedback-widget-modal"
+            padding={0}
           >
             <Box
-              w="min(300px, calc(100% - 1rem))"
+              w="min(320px, calc(100% - 1rem))"
               mx="2"
-              bgColor="ednBackground"
-              border="1px"
-              borderColor="background.base"
+              bg="background.base"
               borderRadius="base"
-              py="4"
-              px="2"
+              padding={{ base: "4", sm: "8" }}
             >
-              <AlertDialogCloseButton />
-
-              <AlertDialogHeader
-                fontSize="xl"
-                fontWeight="bold"
-                lineHeight="6"
-                textAlign="center"
-              >
-                {feedbackSubmitted
-                  ? t("feedback-widget-thank-you-title")
-                  : t("feedback-widget-prompt")}
-              </AlertDialogHeader>
+              <HStack>
+                <AlertDialogHeader fontSize="xl" fontWeight="bold" me="0">
+                  {feedbackSubmitted
+                    ? t("feedback-widget-thank-you-title")
+                    : t("feedback-widget-prompt")}
+                </AlertDialogHeader>
+                <AlertDialogCloseButton alignSelf="start" />
+              </HStack>
 
               {/* Body: */}
               {feedbackSubmitted && (

src/components/FileContributors.tsx

@@ -4,10 +4,7 @@ import {
   Avatar,
   Flex,
   FlexProps,
-  Heading,
   ListItem,
-  ModalBody,
-  ModalHeader,
   UnorderedList,
   VStack,
 } from "@chakra-ui/react"
@@ -69,22 +66,18 @@ const FileContributors = ({
 
   return (
     <>
-      <Modal isOpen={isModalOpen} setIsOpen={setModalOpen}>
-        <ModalHeader py={0}>
-          <Heading m={0}>
-            <Translation id="contributors" />
-          </Heading>
-        </ModalHeader>
-
-        <ModalBody>
-          <Translation id="contributors-thanks" />
-
-          <ContributorList>
-            {contributors.map((contributor) => (
-              <Contributor contributor={contributor} key={contributor.login} />
-            ))}
-          </ContributorList>
-        </ModalBody>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        size={{ base: "full", md: "xl" }}
+        title={<Translation id="contributors" />}
+      >
+        <Translation id="contributors-thanks" />
+        <ContributorList>
+          {contributors.map((contributor) => (
+            <Contributor contributor={contributor} key={contributor.login} />
+          ))}
+        </ContributorList>
       </Modal>
 
       <Flex

src/components/Modal.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import ModalComponent from "."
+
+const meta = {
+  title: "Molecules/Overlay Content/Modal",
+  component: ModalComponent,
+} satisfies Meta<typeof ModalComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Modal: Story = {
+  args: {
+    isOpen: true,
+    title: "Modal Title",
+    children:
+      "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
+    actionButtonLabel: "Save",
+  },
+}
+
+export const Full: Story = {
+  args: {
+    isOpen: true,
+    title: "Modal Title",
+    children:
+      "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
+    actionButtonLabel: "Save",
+    size: "full",
+  },
+}