From 76a68482ec55d01de4afb69e995988de107080ed Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 23 Oct 2019 13:39:28 -0400 Subject: [PATCH 1/6] Components: Modal, Add story This update adds a story for the Modal component. The story showcases an updated and enhanced example from the Modal README. It also includes a series of knobs to better demonstrate the Modal props. --- .../components/src/modal/stories/index.js | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 packages/components/src/modal/stories/index.js diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js new file mode 100644 index 0000000000000..64d7b91a6fbeb --- /dev/null +++ b/packages/components/src/modal/stories/index.js @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +import { boolean, text } from '@storybook/addon-knobs'; + +/** + * Internal dependencies + */ +import Button from '../../button'; +import Dashicon from '../../dashicon'; +import Modal from '../'; + +/** + * WordPress dependencies + */ +import { Fragment, useState } from '@wordpress/element'; + +export default { title: 'Modal', component: Modal }; + +export const _default = () => { + const [ isOpen, setOpen ] = useState( true ); + const openModal = () => setOpen( true ); + const closeModal = () => setOpen( false ); + + const title = text( 'title', 'Title' ); + const icon = text( 'icon', '' ); + const isDismissible = boolean( 'isDismissible', true ); + const focusOnMount = boolean( 'focusOnMount', true ); + const shouldCloseOnEsc = boolean( 'shouldCloseOnEsc', true ); + const shouldCloseOnClickOutside = boolean( + 'shouldCloseOnClickOutside', + true + ); + + const modalProps = { + focusOnMount, + isDismissible, + shouldCloseOnEsc, + shouldCloseOnClickOutside, + title, + }; + + const iconComponent = icon ? : null; + + return ( + + + { isOpen && ( + + + + ) } + + ); +}; From 51a2c80ea16481b3bb25014d64c2067e73bf78c7 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 29 Oct 2019 09:51:11 -0400 Subject: [PATCH 2/6] Fix useState hook rendering in Modal story --- .../components/src/modal/stories/index.js | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index 64d7b91a6fbeb..590b09ea9e195 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -17,11 +17,28 @@ import { Fragment, useState } from '@wordpress/element'; export default { title: 'Modal', component: Modal }; -export const _default = () => { +const ModalExample = ( props ) => { const [ isOpen, setOpen ] = useState( true ); const openModal = () => setOpen( true ); const closeModal = () => setOpen( false ); + return ( + + + { isOpen && ( + + + + ) } + + ); +}; + +export const _default = () => { const title = text( 'title', 'Title' ); const icon = text( 'icon', '' ); const isDismissible = boolean( 'isDismissible', true ); @@ -32,7 +49,10 @@ export const _default = () => { true ); + const iconComponent = icon ? : null; + const modalProps = { + icon: iconComponent, focusOnMount, isDismissible, shouldCloseOnEsc, @@ -40,24 +60,5 @@ export const _default = () => { title, }; - const iconComponent = icon ? : null; - - return ( - - - { isOpen && ( - - - - ) } - - ); + return ; }; From 17dc2a7777bab0b4e7dc4ce78e5a7f626e80b1fb Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 29 Oct 2019 09:51:46 -0400 Subject: [PATCH 3/6] Update example in Modal/README.md to use useState and Fragment --- packages/components/src/modal/README.md | 41 ++++++++++++++----------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md index 4a2aed1aab423..81e91b1fd9cd1 100644 --- a/packages/components/src/modal/README.md +++ b/packages/components/src/modal/README.md @@ -120,24 +120,29 @@ The following example shows you how to properly implement a modal. For the modal ```jsx import { Button, Modal } from '@wordpress/components'; -import { withState } from '@wordpress/compose'; - -const MyModal = withState( { - isOpen: false, -} )( ( { isOpen, setState } ) => ( -
- - { isOpen && ( - setState( { isOpen: false } ) }> - - - ) } -
-) ); +import { Fragment } from '@wordpress/element'; +import { useState } from '@wordpress/compose'; + +const MyModal = () => { + const [ isOpen, setOpen ] = useState( false ); + const openModal = () => setOpen( true ); + const closeModal = () => setOpen( false ); + + return ( + + + { isOpen && ( + + + + ) } + + ) +} ``` ### Props From 8948264b00a9a8774d5d47975e6d39a987b80a5d Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 30 Oct 2019 11:56:00 -0400 Subject: [PATCH 4/6] Render modal as closed by default --- packages/components/src/modal/stories/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index 590b09ea9e195..e100fd57abbec 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -18,7 +18,7 @@ import { Fragment, useState } from '@wordpress/element'; export default { title: 'Modal', component: Modal }; const ModalExample = ( props ) => { - const [ isOpen, setOpen ] = useState( true ); + const [ isOpen, setOpen ] = useState( false ); const openModal = () => setOpen( true ); const closeModal = () => setOpen( false ); From 835905d0c34d8dbfa667c536ad687aef8e25c7a2 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 30 Oct 2019 11:58:36 -0400 Subject: [PATCH 5/6] Refactor Fragment usage --- packages/components/src/modal/stories/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index e100fd57abbec..28c01674b0a26 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -13,7 +13,7 @@ import Modal from '../'; /** * WordPress dependencies */ -import { Fragment, useState } from '@wordpress/element'; +import { useState } from '@wordpress/element'; export default { title: 'Modal', component: Modal }; @@ -23,7 +23,7 @@ const ModalExample = ( props ) => { const closeModal = () => setOpen( false ); return ( - + <> @@ -34,7 +34,7 @@ const ModalExample = ( props ) => { ) } - + ); }; From 2c8d3e6268762f69a6a7a052c5fd8c088658e976 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Thu, 31 Oct 2019 12:57:57 +0100 Subject: [PATCH 6/6] Update README.md --- packages/components/src/modal/README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md index 81e91b1fd9cd1..88003b4626166 100644 --- a/packages/components/src/modal/README.md +++ b/packages/components/src/modal/README.md @@ -120,7 +120,6 @@ The following example shows you how to properly implement a modal. For the modal ```jsx import { Button, Modal } from '@wordpress/components'; -import { Fragment } from '@wordpress/element'; import { useState } from '@wordpress/compose'; const MyModal = () => { @@ -129,7 +128,7 @@ const MyModal = () => { const closeModal = () => setOpen( false ); return ( - + <> { isOpen && ( { ) } - + ) } ```