diff --git a/packages/ui-modal/src/Modal/README.md b/packages/ui-modal/src/Modal/README.md
index ae9dbda406..7ad9b8af22 100644
--- a/packages/ui-modal/src/Modal/README.md
+++ b/packages/ui-modal/src/Modal/README.md
@@ -8,79 +8,154 @@ overlays the application content and applies a mask to it.
The default `padding` of the Modal content is `medium` but can be overridden
by using the `padding` prop on the `` if the use case requires it.
-```js
----
-type: example
----
-const fpo = lorem.paragraphs(5)
+- ```js
+ const fpo = lorem.paragraphs(5)
-class Example extends React.Component {
- constructor (props) {
- super(props)
+ class Example extends React.Component {
+ constructor(props) {
+ super(props)
- this.state = {
- open: false
+ this.state = {
+ open: false
+ }
}
- }
- handleButtonClick = () => {
- this.setState(function (state) {
- return { open: !state.open }
- })
- };
+ handleButtonClick = () => {
+ this.setState(function (state) {
+ return { open: !state.open }
+ })
+ }
- handleFormSubmit = e => {
- e.preventDefault()
- console.log('form submitted')
- this.setState(state => ({ open: false }))
- }
+ handleFormSubmit = (e) => {
+ e.preventDefault()
+ console.log('form submitted')
+ this.setState((state) => ({ open: false }))
+ }
- renderCloseButton () {
- return (
-
- )
+ renderCloseButton() {
+ return (
+
+ )
+ }
+
+ render() {
+ return (
+
+
+ {
+ this.setState({ open: false })
+ }}
+ onSubmit={this.handleFormSubmit}
+ size="auto"
+ label="Modal Dialog: Hello World"
+ shouldCloseOnDocumentClick
+ >
+
+ {this.renderCloseButton()}
+ Hello World
+
+
+
+ {fpo}
+
+
+
+
+
+
+
+ )
+ }
}
- render () {
+ render()
+ ```
+
+- ```js
+ const fpo = lorem.paragraphs(5)
+ const Example = () => {
+ const [open, setOpen] = useState(false)
+
+ const handleButtonClick = () => {
+ setOpen((state) => !state)
+ }
+
+ const handleFormSubmit = (e) => {
+ e.preventDefault()
+ console.log('form submitted')
+ setOpen(false)
+ }
+
+ const renderCloseButton = () => {
+ return (
+
+ )
+ }
+
return (
-
)
}
-}
-render()
-```
+ render()
+ ```
### Constraining Modal to a parent element
@@ -88,47 +163,171 @@ By default, Modals are positioned relative to the document body.
Setting the `constrain` property to `parent` will constrain the Modal within the element it is mounted from (specified via the `mountNode` property). Note: in these cases, the `mountNode` element should have an explicit `height` set: Because Modal is absolutely positioned, it has no height of its own.
-```js
----
-type: example
----
-const fpo = lorem.paragraphs(1)
-class Example extends React.Component {
- constructor (props) {
- super(props)
+- ```js
+ const fpo = lorem.paragraphs(1)
+ class Example extends React.Component {
+ constructor(props) {
+ super(props)
- this.state = {
- open: false,
- size: 'auto'
+ this.state = {
+ open: false,
+ size: 'auto'
+ }
+ }
+
+ handleButtonClick = () => {
+ this.setState(function (state) {
+ return { open: !state.open }
+ })
+ }
+
+ renderCloseButton() {
+ return (
+
+ )
}
- }
- handleButtonClick = () => {
- this.setState(function (state) {
- return { open: !state.open }
- })
+ render() {
+ return (
+
+
+ {
+ this.setState({ open: false })
+ }}
+ size="fullscreen"
+ label="Modal Dialog: Hello World"
+ shouldCloseOnDocumentClick
+ mountNode={() => document.getElementById('constrainExample')}
+ constrain="parent"
+ >
+
+ {this.renderCloseButton()}
+ This Modal is constrained to a parent
+
+
+
+ {fpo}
+
+
+
+
+
+
+
+
+
+
+ )
+ }
}
- renderCloseButton () {
- return (
-
- )
+ class ModalAutoCompleteExample extends React.Component {
+ state = {
+ isShowingOptions: false
+ }
+
+ handleShowOptions = () => {
+ this.setState({ isShowingOptions: true })
+ }
+ handleHideOptions = () => {
+ this.setState({ isShowingOptions: false })
+ }
+ render() {
+ const options = [
+ 'Alabama',
+ 'Alaska',
+ 'American Samoa',
+ 'Arizona',
+ 'Arkansas',
+ 'California',
+ 'Colorado',
+ 'Connecticut',
+ 'Delaware',
+ 'District Of Columbia',
+ 'Federated States Of Micronesia',
+ 'Florida',
+ 'Georgia',
+ 'Guam',
+ 'Hawaii',
+ 'Idaho',
+ 'Illinois'
+ ]
+
+ return (
+
+ )
+ }
}
- render () {
+ render()
+ ```
+
+- ```js
+ const fpo = lorem.paragraphs(1)
+ const Example = () => {
+ const [open, setOpen] = useState(false)
+ const [size, setSize] = useState('auto')
+
+ const handleButtonClick = () => {
+ setOpen((state) => !state)
+ }
+
+ const renderCloseButton = () => {
+ return (
+
+ )
+ }
return (
-
)
}
-}
-class ModalAutoCompleteExample extends React.Component {
- state = {
- isShowingOptions: false
- }
+ const ModalAutoCompleteExample = (props) => {
+ const [isShowingOptions, setIsShowingOptions] = useState(false)
+
+ const handleShowOptions = () => {
+ setIsShowingOptions(true)
+ }
+ const handleHideOptions = () => {
+ setIsShowingOptions(false)
+ }
- handleShowOptions = () => {
- this.setState({ isShowingOptions: true })
- }
- handleHideOptions = () => {
- this.setState({ isShowingOptions: false })
- }
- render () {
const options = [
- 'Alabama', 'Alaska', 'American Samoa', 'Arizona',
- 'Arkansas', 'California', 'Colorado', 'Connecticut',
- 'Delaware', 'District Of Columbia',
- 'Federated States Of Micronesia', 'Florida', 'Georgia',
- 'Guam', 'Hawaii', 'Idaho', 'Illinois'
+ 'Alabama',
+ 'Alaska',
+ 'American Samoa',
+ 'Arizona',
+ 'Arkansas',
+ 'California',
+ 'Colorado',
+ 'Connecticut',
+ 'Delaware',
+ 'District Of Columbia',
+ 'Federated States Of Micronesia',
+ 'Florida',
+ 'Georgia',
+ 'Guam',
+ 'Hawaii',
+ 'Idaho',
+ 'Illinois'
]
-
return (
-