[v12] feat(ui-modal): Modal rework new v12

packages/ui-modal/src/Modal/v2/ModalBody/index.tsx

@@ -105,8 +105,16 @@ class ModalBody extends Component<ModalBodyProps> {
   }
 
   render() {
-    const { as, elementRef, overflow, variant, padding, children, ...rest } =
-      this.props
+    const {
+      as,
+      elementRef,
+      overflow,
+      variant,
+      padding,
+      spacing,
+      children,
+      ...rest
+    } = this.props
 
     const passthroughProps = View.omitViewProps(
       omitProps(rest, ModalBody.allowedProps),
@@ -135,7 +143,7 @@ class ModalBody extends Component<ModalBodyProps> {
             elementRef={this.handleRef}
             as={as}
             css={this.props.styles?.modalBody}
-            padding={padding}
+            padding={spacing ? undefined : padding}
             // check if there is a scrollbar, if so, the element has to be tabbable
             {...(hasScrollbar
               ? {

packages/ui-modal/src/Modal/v2/ModalBody/props.ts

@@ -42,6 +42,7 @@ type ModalBodyOwnProps = {
   as?: AsElementType
   variant?: 'default' | 'inverse'
   overflow?: 'scroll' | 'fit'
+  spacing?: 'default' | 'compact'
 }
 
 type PropKeys = keyof ModalBodyOwnProps
@@ -63,7 +64,8 @@ const allowedProps: AllowedPropKeys = [
   'elementRef',
   'as',
   'variant',
-  'overflow'
+  'overflow',
+  'spacing'
 ]
 
 export type { ModalBodyProps, ModalBodyState, ModalBodyStyle }

packages/ui-modal/src/Modal/v2/ModalBody/styles.ts

@@ -40,7 +40,12 @@ const generateStyle = (
   componentTheme: NewComponentTypes['ModalBody'],
   props: ModalBodyProps
 ): ModalBodyStyle => {
-  const { variant } = props
+  const { variant, spacing } = props
+
+  const sizeVariants = {
+    default: { padding: componentTheme.padding },
+    compact: { padding: componentTheme.paddingCompact }
+  }
 
   const backgroundStyle =
     variant === 'inverse'
@@ -52,6 +57,7 @@ const generateStyle = (
   return {
     modalBody: {
       label: 'modalBody',
+      borderRadius: 0,
       boxSizing: 'border-box',
       flex: '1 1 auto',
       '&:focus': {
@@ -61,6 +67,7 @@ const generateStyle = (
       '@media (min-height: 20rem)': {
         overflowY: 'auto'
       },
+      ...(spacing ? sizeVariants[spacing] : {}),
       ...backgroundStyle
     }
   }

packages/ui-modal/src/Modal/v2/ModalFooter/props.ts

@@ -32,6 +32,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 type ModalFooterOwnProps = {
   children?: React.ReactNode
   variant?: 'default' | 'inverse'
+  spacing?: 'default' | 'compact'
 }
 
 type PropKeys = keyof ModalFooterOwnProps
@@ -43,7 +44,7 @@ type ModalFooterProps = ModalFooterOwnProps &
   OtherHTMLAttributes<ModalFooterOwnProps>
 
 type ModalFooterStyle = ComponentStyle<'modalFooter'>
-const allowedProps: AllowedPropKeys = ['children', 'variant']
+const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']
 
 export type { ModalFooterProps, ModalFooterStyle }
 export { allowedProps }

packages/ui-modal/src/Modal/v2/ModalFooter/styles.ts

@@ -40,7 +40,7 @@ const generateStyle = (
   componentTheme: NewComponentTypes['ModalFooter'],
   props: ModalFooterProps
 ): ModalFooterStyle => {
-  const { variant } = props
+  const { variant, spacing } = props
 
   const backgroundStyle =
     variant === 'inverse'
@@ -58,7 +58,10 @@ const generateStyle = (
       label: 'modalFooter',
       flex: '0 0 auto',
       boxSizing: 'border-box',
-      padding: componentTheme.padding,
+      padding:
+        spacing === 'compact'
+          ? componentTheme.paddingCompact
+          : componentTheme.padding,
       borderBottomRightRadius: componentTheme.borderRadius,
       borderBottomLeftRadius: componentTheme.borderRadius,
       display: 'flex',

packages/ui-modal/src/Modal/v2/README.md

@@ -135,7 +135,7 @@ const Example = () => {
           </View>
           <ModalAutoCompleteExample renderLabel="Choose a state" />
         </Modal.Body>
-        <Modal.Footer>
+        <Modal.Footer spacing="compact">
           <Button onClick={handleButtonClick} margin="0 x-small 0 0">
             Close
           </Button>
@@ -262,7 +262,7 @@ const Example = () => {
             margin="0 auto"
           />
         </Modal.Body>
-        <Modal.Footer>
+        <Modal.Footer spacing="compact">
           <Button
             onClick={handleButtonClick}
             withBackground={false}
@@ -399,7 +399,7 @@ const Example = () => {
         <Modal.Body padding="none">
           <Img src={avatarSquare} constrain={imageFit} display="block" />
         </Modal.Body>
-        <Modal.Footer>
+        <Modal.Footer spacing={modalSize === 'small' ? 'compact' : 'default'}>
           <Button
             onClick={handleButtonClick}
             withBackground={false}
@@ -489,7 +489,7 @@ const Example = () => {
             <Text>{fpo}</Text>
           </View>
         </Modal.Body>
-        <Modal.Footer>
+        <Modal.Footer spacing={smallViewport ? 'compact' : 'default'}>
           <Button onClick={toggleOpen} margin="0 x-small 0 0">
             Close
           </Button>

packages/ui-modal/src/Modal/v2/styles.ts

@@ -102,6 +102,7 @@ const generateStyle = (
       boxSizing: 'border-box',
       boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
       borderRadius: componentTheme.borderRadius,
+      overflow: 'hidden',
       ...sizeStyles[size!],
       ...backgroundStyles
     },
@@ -113,7 +114,6 @@ const generateStyle = (
       height: '100%'
     },
     joinedHeaderAndBody: {
-      borderRadius: componentTheme.borderRadius,
       display: 'flex',
       flexDirection: 'column',
       overflow: 'hidden',