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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36b22bcec044ccc2dc38617892d16d11d3315798c45ba1c6eb4eb917859c4a11
-  data.tar.gz: 812f6f8cc2ec0fb4d270fee84a70fd9462dc7aea2ced21591f4592db402e0576
+  metadata.gz: a7b3b2595256945a61f10d2d9b0720cee7acfe59d9714a13bc05954b59ed0cbc
+  data.tar.gz: 38eb03146799d4a742ec2d42d23d0135f0b1ceab60c2d5b46aa16952756bce75
 SHA512:
-  metadata.gz: b34badff8320ee92ed636ca67bd3744933624f58f20811be0e8cc4a575dbc7b9e07fd34a7108675deb87fd126341e5f12e450806e806d5b93dc545b7942b1b8c
-  data.tar.gz: b6e00cfb7a261f9c9539a9ef976100f22771f00a5a34d483320f24bf445213ae936b5edeb12478f545a0dbf5b841448daceb7fac06ab3107f4dfb1a794650469
+  metadata.gz: 9c15cb70edee85bcd089c3540f02d77525e41942dcf81f7d538a603a0656ba91115f509c01e61deb7032ac9a3813b1f45e3c9112e48021407f5b9d8760969772
+  data.tar.gz: 8eb55b6abc6e6698faa5918dd00254bc1970382984375a66539c3c9816830dbda1d9def279870b3ef66495fd095a91750fba746f2f5eceb81f69b417994d9a79

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -1,7 +1,6 @@
 import { ensureAccessible, renderKit } from '../utilities/test-utils'
 import { DateTimeStacked } from 'playbook-ui'
 
-/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
 const currentDate = new Date()
 
 const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -183,7 +183,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             onRequestClose={onClose}
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
-            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -215,6 +215,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             {cancelButton && confirmButton ? (
               <Dialog.Footer>
                   <Button
+                      disabled={loading}
                       htmlType="button"
                       loading={loading}
                       onClick={onConfirm}
@@ -223,6 +224,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
                     {confirmButton}
                   </Button>
                   <Button
+                      disabled={loading}
                       htmlType="button"
                       id="cancel-button"
                       onClick={onCancel}

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
+import { render, cleanup, waitFor, fireEvent, screen } from "../utilities/test-utils";
 import { Dialog, Button } from 'playbook-ui'
 
 const text="Hello Body Text, Nice to meet ya."
@@ -110,3 +110,22 @@ test("renders the right placement dialog", async () => {
   cleanup()
 });
 
+test('renders loading dialog with disabled buttons', async () => {
+
+  const { queryByText } = render(<DialogTest />);
+
+  fireEvent.click(queryByText('Open Dialog'));
+
+  await waitFor(() => expect(queryByText("Okay")).toHaveTextContent(confirmButton));
+  await waitFor(() => expect(queryByText("Cancel Button")).toHaveTextContent(cancelButton));
+
+  fireEvent.click(queryByText('Okay'));
+
+  const loadingIconDiv = document.querySelector('.loading-icon');
+  expect(loadingIconDiv).toBeInTheDocument();
+
+  const cancelBtn = screen.getByRole('button', { name: cancelButton });
+  expect(cancelBtn).toBeDisabled();
+
+  cleanup()
+})

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_icon/_icon.scss

@@ -8,7 +8,7 @@ $icon_colors: map-merge($merge_kits3, $data_colors);
 
 .pb_custom_icon, .pb_icon_kit {
   @each $color_name, $color_value in $icon_colors {
-    &[class*="#{$color_name}"] {
+    &[class*="color_#{$color_name}"]{
       color: $color_value;
     }
   }

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useEffect } from 'react'
 import Slides from './Slides'
 import Thumbnails from './Thumbnails'

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'