Merge pull request #188 from unix/modal

feat(modal): custom width and className

components/modal/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Modal customization should be supported 1`] = `
+"<div class=\\"wrapper test-class  wrapper-enter\\"><h2 class=\\"\\">Modal</h2><style>
+        h2 {
+          font-size: 1.5rem;
+          line-height: 1.6;
+          font-weight: normal;
+          text-align: center;
+          margin: 0;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          word-break: break-word;
+          text-transform: capitalize;
+          color: #000;
+        }
+      </style><style>
+          .wrapper {
+            max-width: 85vw;
+            width: 100px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            box-sizing: border-box;
+            background-color: #fff;
+            color: #000;
+            border-radius: 5px;
+            padding: 16pt;
+            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
+            opacity: 0;
+            transform: translate3d(0px, -40px, 0px);
+            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,
+              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+          }
+
+          .wrapper-enter {
+            opacity: 0;
+            transform: translate3d(0px, -40px, 0px);
+          }
+
+          .wrapper-enter-active {
+            opacity: 1;
+            transform: translate3d(0px, 0px, 0px);
+          }
+
+          .wrapper-leave {
+            opacity: 1;
+            transform: translate3d(0px, 0px, 0px);
+          }
+
+          .wrapper-leave-active {
+            opacity: 0;
+            transform: translate3d(0px, -50px, 0px);
+          }
+        </style></div>"
+`;
+
 exports[`Modal should render correctly 1`] = `
 "<div class=\\"backdrop  transition-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper   wrapper-enter\\"><h2 class=\\"\\">Modal</h2><style>
         h2 {

components/modal/__tests__/index.test.tsx

@@ -105,4 +105,16 @@ describe('Modal', () => {
     expectModalIsClosed(wrapper)
     expect(closeHandler).toHaveBeenCalled()
   })
+
+  it('customization should be supported', () => {
+    const wrapper = mount(
+      <Modal open={true} width="100px" wrapClassName="test-class">
+        <Modal.Title>Modal</Modal.Title>
+      </Modal>,
+    )
+    const html = wrapper.find('.wrapper').html()
+    expect(html).toMatchSnapshot()
+    expect(html).toContain('test-class')
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
 })

components/modal/modal-wrapper.tsx

@@ -11,7 +11,6 @@ interface Props {
 
 const defaultProps = {
   className: '',
-  width: '26rem',
   visible: false,
 }
 

components/modal/modal.tsx

@@ -17,9 +17,13 @@ interface Props {
   onClose?: () => void
   onOpen?: () => void
   open?: boolean
+  width?: string
+  wrapClassName?: string
 }
 
 const defaultProps = {
+  width: '26rem',
+  wrapClassName: '',
   disableBackdropClick: false,
 }
 
@@ -32,6 +36,8 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   onClose,
   onOpen,
   open,
+  width: wrapperWidth,
+  wrapClassName,
 }) => {
   const portal = usePortal('modal')
   const [, setBodyHidden] = useBodyScroll()
@@ -72,7 +78,7 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   return createPortal(
     <ModalContext.Provider value={modalConfig}>
       <Backdrop onClick={closeFromBackdrop} visible={visible} offsetY={25}>
-        <ModalWrapper visible={visible}>
+        <ModalWrapper visible={visible} className={wrapClassName} width={wrapperWidth}>
           {withoutActionsChildren}
           {hasActions && <ModalActions>{ActionsChildren}</ModalActions>}
         </ModalWrapper>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeit-ui/react",
-  "version": "1.1.0",
+  "version": "1.2.0-rc.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

pages/en-us/components/modal.mdx

@@ -127,6 +127,28 @@ Display popup content that requires attention or provides additional information
 }
 `} />
 
+
+<Playground
+  title="Customizable"
+  desc="Custom `width` or `className`."
+  scope={{ Modal, Button, useModal }}
+  code={`
+() => {
+  const { setVisible, bindings } = useModal()
+  return (
+    <div>
+      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
+      <Modal width="35rem" {...bindings}>
+        <Modal.Title>My Favorites</Modal.Title>
+        <Modal.Content>
+          <p>This is the width I want.</p>
+        </Modal.Content>
+      </Modal>
+    </div>
+  )
+}
+`} />
+
 <Attributes edit="/pages/en-us/components/modal.mdx">
 <Attributes.Title>Modal.Props</Attributes.Title>
 
@@ -135,6 +157,8 @@ Display popup content that requires attention or provides additional information
 | **open** | open or close | `boolean` | - | `false` |
 | **onOpen** | open event | `() => void` | - | - |
 | **onClose** | open event | `() => void` | - | - |
+| **width** | width of the modal dialog | `string` | - | `26rem` |
+| **wrapClassName** | className of the modal dialog | `string` | - | - |
 | **disableBackdropClick** | click background and don't close  | `boolean` | - | `false` |
 | ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |
 

pages/zh-cn/components/modal.mdx

@@ -126,6 +126,27 @@ export const meta = {
 }
 `} />
 
+<Playground
+  title="定制化"
+  desc="自定义 `width` 或是 `className`。"
+  scope={{ Modal, Button, useModal }}
+  code={`
+() => {
+  const { setVisible, bindings } = useModal()
+  return (
+    <div>
+      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
+      <Modal width="35rem" {...bindings}>
+        <Modal.Title>我的最爱</Modal.Title>
+        <Modal.Content>
+          <p>酷，这才是我想要的宽度。</p>
+        </Modal.Content>
+      </Modal>
+    </div>
+  )
+}
+`} />
+
 <Attributes edit="/pages/zh-cn/components/modal.mdx">
 <Attributes.Title>Modal.Props</Attributes.Title>
 
@@ -134,6 +155,8 @@ export const meta = {
 | **open** | 打开或关闭对话框 | `boolean` | - | `false` |
 | **onOpen** | 对话框打开的事件 | `() => void` | - | - |
 | **onClose** | 对话框关闭的事件 | `() => void` | - | - |
+| **width** | 对话框的宽度 | `string` | - | `26rem` |
+| **wrapClassName** | 对话框的自定义样式类名 | `string` | - | - |
 | **disableBackdropClick** | 点击背景层时是否关闭对话框  | `boolean` | - | `false` |
 | ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |