playbook_ui_docs 13.34.0.pre.alpha.PLAY14143373 → 13.34.1.pre.alpha.PLAY14043436

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5c1045ad09e5a4d9a20db34da703588b052139f26bcfe0c636572aa6fc79c76
-  data.tar.gz: b015cef5e4adbdae94bbe01798bd0a90667f1fde5309e67fbd898c8fe5d1cabc
+  metadata.gz: 3812a664d81e2b4f059a5a654999a18ee1c2b527845449ddab01cbe13005c3e0
+  data.tar.gz: 4033ba38e0d909416df96bbee0aea167712c7ed68c8f4652966a2c034e6ab89e
 SHA512:
-  metadata.gz: 37c70e9bc200b8077eb7a088212f97b855fd07817bc48985c9878745bf72b0caa0d6eac74db5eb9f6b8e5b9882cbc0445300e83d0f2943edf47e18c394444268
-  data.tar.gz: f8fc30b946761d1de735090b48acc67ebdb8f43af26a85a7a1ceab17e5ae2e255f612646a2781c24d91526ea5d87f7700077f468ce14724fad83020829f9cc95
+  metadata.gz: 321a2a3eb423049704efba3cecdb4a7240b0abbbcd9e07eaf930456cbc0afe2c5d5fd5df824e9b4c8c0826fc2618b34e6be7db87fc6185f4b306b4fdefc0733d
+  data.tar.gz: c1ade40c7eff5c7d6720f1ac7f71b038c3f37df49f6574c921b4d58b70ea01863ee0cd98da452d146678afe15f3744230e95b5c7d0d344a9cd2777fd06da32ed

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -5,21 +5,17 @@ const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
-  const [isLoading, setIsLoading] = useState(false)
 
   return (
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
           cancelButton="Cancel Button"
-          className="wrapper"
           confirmButton="Okay"
-          loading={isLoading}
           onCancel={close}
           onClose={close}
-          onConfirm={() => setIsLoading(!isLoading)}
+          onConfirm={close}
           opened={isOpen}
-          portalClassName="portal"
           size="sm"
           text="Hello Body Text, Nice to meet ya."
           title="Header Title is the Title Prop"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from 'playbook-ui'
+
+const DialogLoading = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => {
+    if (!isLoading) {
+      setIsOpen(false)
+    }
+  }
+  const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
+  const submit = async () => {
+    setIsLoading(true)
+
+    try {
+      await new Promise((r) => setTimeout(r, 3000))
+      setIsOpen(false)
+    } catch (error) {
+      console.error("An error occurred.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton="Cancel"
+          className="wrapper"
+          confirmButton="Okay"
+          loading={isLoading}
+          onCancel={close}
+          onClose={close}
+          onConfirm={submit}
+          opened={isOpen}
+          size="sm"
+          text="Make a 3 second request?"
+          title="Loading Example"
+      />
+    </>
+  )
+}
+
+export default DialogLoading

data/app/pb_kits/playbook/pb_dialog/docs/example.yml

@@ -22,6 +22,7 @@ examples:
   - dialog_stacked_alert: Stacked Button Alert
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
+  - dialog_loading: Loading
 
   swift:
   - dialog_default_swift: Simple

data/app/pb_kits/playbook/pb_dialog/docs/index.js

@@ -8,3 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from "react";
 import { Flex, Image, Title, Pill } from "playbook-ui";
 import Lightbox from "../_lightbox.tsx";

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'