docs(ui-overlays,ui-pages): function based examples are added to Over…

…lay, Pages Closes: INSTUI-4182
instructure · Aug 30, 2024 · 3874bb7 · 3874bb7
1 parent 3e1780d
commit 3874bb7
Show file tree

Hide file tree

Showing 2 changed files with 824 additions and 373 deletions.
diff --git a/packages/ui-overlays/src/Overlay/README.md b/packages/ui-overlays/src/Overlay/README.md
@@ -5,50 +5,99 @@ describes: Overlay
 The Overlay component is a closable/dismissible component that transitions
 in and out content rendered in a [Portal](#Portal)
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  state = {
-    open: false
-  }
+- ```js
+  class Example extends React.Component {
+    state = {
+      open: false
+    }
+
+    _mask = null
 
-  _mask = null
+    handleMaskRef = (el) => {
+      this._mask = el
+    }
 
-  handleMaskRef = el => {
-    this._mask = el
+    render() {
+      return (
+        <div>
+          <Button
+            onClick={() => {
+              this.setState({ open: true })
+            }}
+          >
+            Show the Overlay
+          </Button>
+          <Overlay
+            open={this.state.open}
+            transition="fade"
+            label="Overlay Example"
+            shouldReturnFocus
+            shouldContainFocus
+            onDismiss={() => {
+              this.setState({ open: false })
+            }}
+            defaultFocusElement={() => this._mask}
+          >
+            <Mask
+              onClick={() => {
+                this.setState({ open: false })
+              }}
+              elementRef={this.handleMaskRef}
+            >
+              <Spinner
+                renderTitle="Loading"
+                size="large"
+                margin="0 0 0 medium"
+              />
+            </Mask>
+          </Overlay>
+        </div>
+      )
+    }
   }
 
-  render () {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [open, setOpen] = useState(false)
+    const maskRef = useRef(null)
+
     return (
       <div>
-        <Button onClick={() => { this.setState({ open: true })}}>
+        <Button
+          onClick={() => {
+            setOpen(true)
+          }}
+        >
           Show the Overlay
         </Button>
         <Overlay
-          open={this.state.open}
+          open={open}
           transition="fade"
           label="Overlay Example"
           shouldReturnFocus
           shouldContainFocus
-          onDismiss={() => { this.setState({ open: false })}}
-          defaultFocusElement={() => this._mask}
+          onDismiss={() => {
+            setOpen(false)
+          }}
+          defaultFocusElement={() => maskRef.current}
         >
           <Mask
-            onClick={() => { this.setState({ open: false })}}
-            elementRef={this.handleMaskRef}
+            onClick={() => {
+              setOpen(false)
+            }}
+            elementRef={maskRef}
           >
             <Spinner renderTitle="Loading" size="large" margin="0 0 0 medium" />
           </Mask>
         </Overlay>
       </div>
     )
   }
-}
-
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 ### Guidelines