playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3601

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_picker/docs/_description.md

@@ -6,4 +6,6 @@ Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a
 
 To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
 
-The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+
+The Date Picker expects a date format of `MM/DD/YYYY` by default. If a different date format (e.g. `DD/MM/YYYY`, `m/d/y`, etc.) is used, the component will not know how to handle it and use a default date instead. To change the date format used, read more [here](#format).

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.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/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.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_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_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -33,7 +33,7 @@ $confirmation_toast_colors: (
 
   &.positioned_toast {
     position: fixed;
-    z-index: $z_9;
+    z-index: $z_10 !important;
     display: flex;
     justify-content: space-around;
     max-width: max-content;

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

@@ -45,6 +45,7 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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 %>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -3,9 +3,10 @@
 @import "../tokens/opacity";
 @import "../tokens/shadows";
 @import "../pb_avatar/avatar";
+@import "../tokens/typography";
 
 $selector: ".pb_form_pill";
-$pb_form_pill_height: 37px;
+$pb_form_pill_height: 27px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
   neutral: map-get($status_color_text, "neutral"),
@@ -16,18 +17,24 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-sm/3);
+  padding: 0 calc($space-md/2);
   height: $pb_form_pill_height;
   border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
+  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
+    font-size: $font_small !important;
+  }
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: mix($color_value, $card_light, 10%);
       @if ($color_name == "neutral") {
         background-color: $white;
         border: 1px solid $border_light;
+        .pb_form_pill_icon {
+          color: $text_lt_default;
+        }
       }
       transition: background-color 0.2s ease;
       box-shadow: none;
@@ -51,20 +58,18 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        padding-left: $space-sm;
-        padding-right: calc($space-sm/2);
+        padding: 0 $space-xs;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: calc($space-sm/4);
-        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
-        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
-        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
-        height: 27px;
-        border-radius: 70px;
+        height: 17px;
+        border-radius: calc(50%);
         cursor: pointer;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
         &:hover {
           background-color: mix($color_value, $card_light, 40%);
           @if ($color_name == "neutral") {
@@ -74,7 +79,7 @@ $form_pill_colors: (
       }
       #{$selector}_tag {
         color: $color_value;
-        padding-left: $space-sm;
+        padding: 0 $space-xs;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
@@ -92,24 +97,37 @@ $form_pill_colors: (
   .pb_form_pill_icon {
     height: 12px !important;
     width: 12px !important;
+    padding-right: $space_xs;
+    + .pb_form_pill_text, + .pb_form_pill_tag {
+      padding-left: 0;
+    }
   }
   &.small {
-    height: fit-content;
-    height: -moz-fit-content;
+    height: 17px;
+    padding: 0 $space-xs;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: $font_base;
-      font-weight: $regular;
+      font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
       line-height: 1.7;
-      padding-left: $space_xs;
-      padding-right: 2px;
+      padding: 0 $space_xxs;
+    }
+    .pb_form_pill_close {
+      height: 10px;
+      border-radius: calc(50%);
     }
-    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
-      width: 20px;
-      height: 20px;
-      flex-basis: 20px;
-      &::before { line-height: 21px; }
+    [class^=pb_avatar_kit] .avatar_wrapper {
+      flex-basis: 16px;
+      height: 16px;
+      margin-top: 2px;
+      width: 16px;
+      &::before { line-height: 16.5px; }
+    }
+    .pb_form_pill_icon {
+      padding-right: $space_xxs;
+      + .pb_form_pill_text, + .pb_form_pill_tag {
+        padding-left: 0;
+      }
     }
   }
   &.dark {
@@ -118,7 +136,7 @@ $form_pill_colors: (
       // Primary and Neutral are exceptions to the general rule in the handoff 
       &[class*=_#{$color_name}]  {
       //   background-color: mix($color_value, $card_dark, 10%);
-        // .pb_form_pill_tag {
+        // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
         //   color: $color_name;
         // }
         // .pb_form_pill_close {
@@ -136,7 +154,7 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           background-color: transparent;
           border: 1px solid $border_dark;
-          .pb_form_pill_text, .pb_form_pill_tag {
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
             color: $text_dk_default;
           }
           .pb_form_pill_close {
@@ -157,7 +175,7 @@ $form_pill_colors: (
         }
         @if ($color_name == "primary") {
           background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag {
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
             color: $active_dark;
           }
           .pb_form_pill_close {

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -46,6 +46,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   } = props
 
   const iconClass = icon ? "_icon" : ""
+  const closeIconSize = size === "small" ? "xs" : "sm"
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
@@ -69,7 +70,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xs"
+              size="xxs"
               status={null}
           />
           <Title
@@ -84,7 +85,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xs"
+              size="xxs"
               status={null}
           />
           <Title
@@ -94,6 +95,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           />
           <Icon
               className="pb_form_pill_icon"
+              color={color}
               icon={icon}
           />
         </>
@@ -102,6 +104,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <>
           <Icon
               className="pb_form_pill_icon"
+              color={color}
               icon={icon}
           />
           <Title
@@ -126,6 +129,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <Icon
             fixedWidth
             icon="times"
+            size={closeIconSize}
         />
       </div>
     </div>