playbook_ui 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569 → 14.1.0.pre.alpha.PBNTR462starratingdefaultvalue3579

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8e8a512656c877972bafc24c6eb07997b0416cd20fcd64e834c7e361e5994ae6
-  data.tar.gz: 8263da8743492e725a7883740bbab68a0991babf5a4d48c8ea3b5f91cd5968f2
+  metadata.gz: 8a0f1bd7136bc3fbada2444b68aa7c6d83295501cc223b25ae0854f244c43a0e
+  data.tar.gz: 3024204d57c39ba05fe933e8b06e8e6a07bed5ea3b69243a756ee7870f4fe677
 SHA512:
-  metadata.gz: 2b943e98a13820d9797c4393c035dc9eeea40e152cbbc6743e1e922adbf5454ce869774aa69200a8109148fcc0e8a8426e8bb0d55261341d88030ee5806fbb9e
-  data.tar.gz: 8445df954e532fcf689cc502e7604e42714ed4fa32ede26a81b0fb35356646cd9224daa78274ac975ebc92d077a19ddbc286a6e4b397270146c168009c1460ca
+  metadata.gz: ce2b76ce46f51e211466413f6b8290c6d9aad2ed9106d3497336e57cade7d949e0899f1608a47e14a49633c8e257793383eae640bc1466dd1d346f6b8160c778
+  data.tar.gz: e7413c58b5f1ce545ee86881b87ea9e80aecfc3948279a2d912a2715d92e14e3c637d73d7b7efb2a3fb01212f3aaec307538d20423401db2079a11ff30d8f2b2

data/app/pb_kits/playbook/_playbook.scss

@@ -108,6 +108,7 @@
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';
+@import 'utilities/min_width';
 @import 'utilities/max_width';
 @import 'utilities/positioning';
 @import 'utilities/number_spacing';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -164,7 +164,7 @@
       background: $bg_dark;
     }
 
-    .table-header-cells:first-child, td:first-child {
+    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
@@ -172,7 +172,7 @@
       background-color: $border_dark !important;
     }
 
-    .sort-button-icon, .header-sort-button > div {
+    .sort-button-icon, .header-sort-button > div, .pb_th_link {
       color: $white !important;
     }
 
@@ -237,4 +237,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
+        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -42,6 +42,10 @@
     color: $white;
   }
 
+  &[class*=_notification_error] {
+    background: $error;
+  }
+
   &.dark {
     border-width: 0;
 
@@ -51,5 +55,10 @@
         color: map-get($status_color_text_dark, $color_name);
       }
     }
+
+    &[class*=_notification_error]  {
+      background: $error_dark;
+      color: $white;
+    }
   }
 }

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -7,6 +7,7 @@ import {
   buildCss,
   buildDataProps,
   buildHtmlProps } from '../utilities/props'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import Icon from '../pb_icon/_icon'
 
@@ -25,7 +26,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps): React.ReactElement => {
   const {
@@ -45,10 +46,13 @@ const Badge = (props: BadgeProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
-    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit',
+      variant === "success" ? "success_sm" : variant === "notificationError" ? "notification_error" : variant,
+      rounded ? 'rounded' : ''),
     globalProps(props),
     className
   )
+  const timesIcon = getAllIcons()["times"]
 
   return (
     <div
@@ -67,8 +71,9 @@ const Badge = (props: BadgeProps): React.ReactElement => {
               {...closeProps}
           >
             <Icon
+                className="svg-inline--fa"
+                customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
                 fixedWidth
-                icon="times"
             />
           </span>
         )}

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -6,7 +6,7 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral notification primary],
+                     values: %w[success warning error info neutral notification notification_error primary],
                      default: "neutral"
 
       def classname

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -94,15 +94,21 @@ test('displays success variant', () => {
 
 })
 
-test('displays notification variant', () => {
-  render(
-    <Badge
-        data={{ testid: testId }}
-        text="1"
-        variant="notification"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`pb_badge_kit_notification`)
-  cleanup()
+test('displays notification variants', () => {
+  [
+    "notification",
+    "notificationError"
+  ].forEach((colorVariant) => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={colorVariant}
+          variant={colorVariant}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_${colorVariant === "notificationError" ? "notification_error" : "notification"}`)
+
+    cleanup()
+  })
 })

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -10,3 +10,16 @@
     variant: "notification"
   }) %>
 </div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification_error",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification_error"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -4,20 +4,39 @@ import Badge from '../_badge'
 const BadgeNotification = (props) => {
   return (
     <>
-      <Badge
-          rounded
-          text="1"
-          variant="notification"
-          {...props}
-      />
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notification"
+            {...props}
+        />
 
-      &nbsp;
+        &nbsp;
 
-      <Badge
-          text="4"
-          variant="notification"
-          {...props}
-      />
+        <Badge
+            text="4"
+            variant="notification"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notificationError"
+            {...props}
+        />
+
+        &nbsp;
+
+        <Badge
+            text="4"
+            variant="notificationError"
+            {...props}
+        />
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import Icon from '../pb_icon/_icon'
 import Caption from "../pb_caption/_caption"
@@ -65,6 +66,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
 
   return className
 }
+const spinnerIcon = getAllIcons()["spinner"]
 
 const Button = (props: ButtonPropTypes): React.ReactElement => {
   const {
@@ -103,8 +105,9 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
   const loadingIcon = (
     <div className="loading-icon">
       <Icon
+          className="svg-inline--fa"
+          customIcon={spinnerIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth
-          icon="spinner"
           pulse
       />
     </div>

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -22,7 +22,7 @@
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
-    <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
+    <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
     <% if object.icon && object.icon_right %>
         <span>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -103,6 +103,10 @@ module Playbook
       def highlight_active
         variant === "reaction" && object.highlight ? " active" : ""
       end
+
+      def spinner_path
+        "app/pb_kits/playbook/utilities/icons/spinner.svg"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -57,7 +57,7 @@ describe('DateTime Kit', () => {
 
     const kit = screen.getByTestId(testId)
     const text = kit.querySelector('.pb_time_kit_md.ml_sm')
-    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
+    const clock = kit.querySelector('.pb_custom_icon.svg-inline--fa.clock')
 
     expect(clock).toBeInTheDocument()
     expect(text.textContent).toEqual(' 12:00a EST')
@@ -72,7 +72,7 @@ describe('DateTime Kit', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
+    const clock = kit.querySelector('.pb_custom_icon.svg-inline--fa.clock')
 
     expect(clock).toBeNull()
   })

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

@@ -1,20 +1,24 @@
 import React from 'react'
 import Icon from '../pb_icon/_icon'
 
+import { getAllIcons } from "../utilities/icons/allicons"
+
 type CloseIconProps = {
   onClose: () => void,
 }
 
 export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
   const { onClose } = props
+  const timesIcon = getAllIcons()["times"]
   return (
     <div
         className="pb_dialog_close_icon"
         onClick={onClose}
     >
       <Icon
+          className="svg-inline--fa"
+          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth
-          icon="times"
       />
     </div>
   )

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.html.erb

@@ -22,8 +22,11 @@
             <% if object.cancel_button && object.confirm_button %>
                         <%= pb_rails("dialog/dialog_footer", props: {
                             cancel_button: object.cancel_button,
+                            cancel_button_id: object.cancel_button_id,
                             confirm_button: object.confirm_button,
-                            id: object.id
+                            confirm_button_id: object.confirm_button_id,
+                            id: object.id,
+                            loading: object.loading
                         }) %>
             <% end %>
 

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -13,8 +13,11 @@ module Playbook
       prop :should_close_on_overlay_click, type: Playbook::Props::Boolean, default: true
       prop :title
       prop :text
+      prop :loading
       prop :confirm_button
+      prop :confirm_button_id
       prop :cancel_button
+      prop :cancel_button_id
       prop :status, type: Playbook::Props::Enum,
                     values: ["info", "caution", "delete", "error", "success", "default", ""],
                     default: ""

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/dialogHelper.js

@@ -3,6 +3,27 @@ const dialogHelper = () => {
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");
   const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
+  const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+  if (loadingButton) {
+    loadingButton.addEventListener("click", function() {
+      const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+      const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+      let currentClass = okayLoadingButton.className;
+      let cancelClass = cancelButton ? cancelButton.className : "";
+
+      let newClass = currentClass.replace("_enabled", "_disabled_loading");
+      let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+      // Disable the buttons
+      okayLoadingButton.disabled = true;
+      if (cancelButton) cancelButton.disabled = true;
+
+      okayLoadingButton.className = newClass;
+      if (cancelButton) cancelButton.className = newCancelClass;
+    });
+  }
+
+
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
       var openTriggerData = open.dataset.openDialog;

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -3,10 +3,12 @@
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
-            <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
+            
+          <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id, data: loading_data,
+            }) do %>
                 <%= object.confirm_button %>
             <% end %>
-            <%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
+            <%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link", data: cancel_loading}) do %>
                 <%= object.cancel_button %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb

@@ -4,13 +4,22 @@ module Playbook
   module PbDialog
     class DialogFooter < Playbook::KitBase
       prop :cancel_button
+      prop :cancel_button_id
       prop :confirm_button
       prop :confirm_button_id
-      prop :cancel_button_id
+      prop :loading
 
       def classname
         generate_classname("dialog_footer")
       end
+
+      def cancel_loading
+        loading ? { disable_cancel_with: "Loading" } : {}
+      end
+
+      def loading_data
+        loading ? { disable_with: "Loading" } : {}
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -3,7 +3,7 @@
             <%= content.presence || object.title %>
 
             <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
-                <%= pb_rails("icon", props:{icon: "times"}) %>
+                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -12,6 +12,10 @@ module Playbook
       def sticky_header
         "dialog_sticky_header"
       end
+
+      def times_icon
+        "app/pb_kits/playbook/utilities/icons/times.svg"
+      end
     end
   end
 end

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.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-loading", 
+    size: "sm", 
+    title: "Loading Exmaple", 
+    text: "Make a loading request?", 
+    cancel_button: "Cancel Button", 
+    cancel_button_id: "cancel-button-loading",
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-loading",
+    loading: true,
+}) %>

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/_dialog_loading.md

@@ -0,0 +1,3 @@
+Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
+
+Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

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

@@ -10,7 +10,7 @@ examples:
   - dialog_stacked_alert: Stacked Button Alert
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
-
+  - dialog_loading: Loading
 
   react:
   - dialog_default: Simple
@@ -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_filter/filter.rb

@@ -17,7 +17,7 @@ module Playbook
                        default: "bottom-start"
 
       def classname
-        generate_classname("pb_filter_kit")
+        generate_classname("pb_filter_kit").rstrip
       end
 
       def result_text

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -35,6 +35,7 @@
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>