feat(HTL-90706): add borderRadius (#1319)

Author: pherrera167

common/changes/pcln-modal/HTL-90706-modal-corners_2023-07-06-14-53.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-modal",
+      "comment": "add borderRadius prop for modal",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-modal"
+}

packages/modal/src/Modal.jsx

@@ -53,7 +53,8 @@ const Dialog = styled(DialogContent)`
   margin-left: auto;
   margin-right: auto;
   box-shadow: ${(props) => props.theme.shadows['overlay-xl']};
-  border-radius: ${themeGet('borderRadii.xl')};
+  border-radius: ${({ borderRadius }) => themeGet(`borderRadii.${borderRadius}`)};
+  overflow-y: auto;
   &:focus {
     outline: none;
   }
@@ -139,6 +140,7 @@ const Modal = ({
   ariaLabel,
   ariaLabelledBy,
   bg,
+  borderRadius,
   children,
   className,
   dialogAnimation,
@@ -180,6 +182,7 @@ const Modal = ({
               <Dialog
                 width={fullScreen ? '100vw' : width}
                 bg={bg}
+                borderRadius={borderRadius}
                 height={dialogHeight}
                 transitionstate={state}
                 className={className}
@@ -194,7 +197,7 @@ const Modal = ({
                 <DialogInnerWrapper flexDirection='column'>
                   {header && <HeaderWrapper>{header}</HeaderWrapper>}
                   <ContentWrapper
-                    borderRadius='xl'
+                    borderRadius={borderRadius}
                     p={imgMode ? 0 : 16}
                     header={header}
                     enableoverflow={enableOverflow}
@@ -216,6 +219,7 @@ const Modal = ({
 
 Modal.defaultProps = {
   bg: 'white',
+  borderRadius: 'xl',
   dialogAnimation: null,
   disableCloseButton: false,
   enableOverflow: false,

packages/modal/src/ModalHeader.jsx

@@ -23,16 +23,7 @@ const StyledCloseButton = styled(CloseButton)`
 `
 
 const ModalHeader = ({ bg, color, onClose, textStyle, title, ...props }) => (
-  <Flex
-    align='center'
-    alignItems='center'
-    color={color}
-    bg={bg}
-    borderRadius='xl'
-    height='40px'
-    rounded='top'
-    {...props}
-  >
+  <Flex align='center' alignItems='center' color={color} bg={bg} height='40px' {...props}>
     {title && <Title textStyle={textStyle}>{title}</Title>}
     {onClose && <StyledCloseButton onClick={onClose} ml='auto' />}
   </Flex>

packages/modal/src/__snapshots__/Headers.spec.js.snap

@@ -4,7 +4,6 @@ exports[`ModalHeader render 1`] = `
 .c1 {
   background-color: #0a0;
   color: #fff;
-  border-radius: 16px 16px 0 0;
   height: 40px;
   padding-left: 16px;
   padding-right: 16px;