playbook_ui 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605 → 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8d134303f815c6e0076c01a0aa625cda4c97ceff14ec8eff52b2716ebbb60a8
-  data.tar.gz: 1188d83da657ab95a2c0fb418f04734f2039c73278e1191fc8b75b14a37348f4
+  metadata.gz: 8e8a512656c877972bafc24c6eb07997b0416cd20fcd64e834c7e361e5994ae6
+  data.tar.gz: 8263da8743492e725a7883740bbab68a0991babf5a4d48c8ea3b5f91cd5968f2
 SHA512:
-  metadata.gz: d04fdd2687e6accfad40120bbeba65830b7be5c3a15157d21a2ed1cd7b4d0c13202179cf5eeece62f5a7f21559e79af4da3760f7b83ef76ad70c7df607563a75
-  data.tar.gz: 173ab72b24320b444d7f5930fd41e2fae8a2122bacf85e46f142ac8860d05d12dcee0111bcd730ebbdba5586fdceab590667b7c560f921218140e46803b46f06
+  metadata.gz: 2b943e98a13820d9797c4393c035dc9eeea40e152cbbc6743e1e922adbf5454ce869774aa69200a8109148fcc0e8a8426e8bb0d55261341d88030ee5806fbb9e
+  data.tar.gz: 8445df954e532fcf689cc502e7604e42714ed4fa32ede26a81b0fb35356646cd9224daa78274ac975ebc92d077a19ddbc286a6e4b397270146c168009c1460ca

data/app/pb_kits/playbook/_playbook.scss

@@ -108,7 +108,6 @@
 @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, .pb_table_td:first-child {
+    .table-header-cells:first-child, 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, .pb_th_link {
+    .sort-button-icon, .header-sort-button > div {
       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", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

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

@@ -42,10 +42,6 @@
     color: $white;
   }
 
-  &[class*=_notification_error] {
-    background: $error;
-  }
-
   &.dark {
     border-width: 0;
 
@@ -55,10 +51,5 @@
         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,7 +7,6 @@ import {
   buildCss,
   buildDataProps,
   buildHtmlProps } from '../utilities/props'
-import { getAllIcons } from "../utilities/icons/allicons"
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +25,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps): React.ReactElement => {
   const {
@@ -46,13 +45,10 @@ 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 === "notificationError" ? "notification_error" : variant,
-      rounded ? 'rounded' : ''),
+    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
     globalProps(props),
     className
   )
-  const timesIcon = getAllIcons()["times"]
 
   return (
     <div
@@ -71,9 +67,8 @@ 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 notification_error primary],
+                     values: %w[success warning error info neutral notification primary],
                      default: "neutral"
 
       def classname

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

@@ -94,21 +94,15 @@ test('displays success variant', () => {
 
 })
 
-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()
-  })
+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()
 })

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

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

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

@@ -3,7 +3,6 @@ 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"
@@ -66,7 +65,6 @@ const buttonClassName = (props: ButtonPropTypes) => {
 
   return className
 }
-const spinnerIcon = getAllIcons()["spinner"]
 
 const Button = (props: ButtonPropTypes): React.ReactElement => {
   const {
@@ -105,9 +103,8 @@ 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: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
+    <%= pb_rails("icon", props: { icon: "spinner", 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,10 +103,6 @@ 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_custom_icon.svg-inline--fa.clock')
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.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_custom_icon.svg-inline--fa.clock')
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
 
     expect(clock).toBeNull()
   })

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

@@ -1,24 +1,20 @@
 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 && !loading}
+            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -215,7 +215,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             {cancelButton && confirmButton ? (
               <Dialog.Footer>
                   <Button
-                      disabled={loading}
                       htmlType="button"
                       loading={loading}
                       onClick={onConfirm}
@@ -224,7 +223,6 @@ 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, screen } from "../utilities/test-utils";
+import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
 import { Dialog, Button } from 'playbook-ui'
 
 const text="Hello Body Text, Nice to meet ya."
@@ -110,22 +110,3 @@ 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: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
+                <%= pb_rails("icon", props:{icon: "times"}) %>
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>

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

@@ -12,10 +12,6 @@ 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,17 +5,21 @@ 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={close}
+          onConfirm={() => setIsLoading(!isLoading)}
           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/example.yml

@@ -22,7 +22,6 @@ 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,4 +8,3 @@ 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").rstrip
+        generate_classname("pb_filter_kit")
       end
 
       def result_text

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

@@ -35,7 +35,6 @@
   <%= 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,10 +3,9 @@
 @import "../tokens/opacity";
 @import "../tokens/shadows";
 @import "../pb_avatar/avatar";
-@import "../tokens/typography";
 
 $selector: ".pb_form_pill";
-$pb_form_pill_height: 27px;
+$pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
   neutral: map-get($status_color_text, "neutral"),
@@ -17,24 +16,18 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-md/2);
+  padding: 0 calc($space-sm/3);
   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;
@@ -58,18 +51,20 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        padding: 0 $space-xs;
+        padding-left: $space-sm;
+        padding-right: calc($space-sm/2);
       }
       #{$selector}_close {
         color: $color_value;
+        padding-left: calc($space-sm/4);
+        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
-        height: 17px;
-        border-radius: calc(50%);
+        // 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;
         cursor: pointer;
-        @if ($color_name == "neutral") {
-          color: $text_lt_default;
-        }
         &:hover {
           background-color: mix($color_value, $card_light, 40%);
           @if ($color_name == "neutral") {
@@ -79,7 +74,7 @@ $form_pill_colors: (
       }
       #{$selector}_tag {
         color: $color_value;
-        padding: 0 $space-xs;
+        padding-left: $space-sm;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
@@ -97,37 +92,24 @@ $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: 17px;
-    padding: 0 $space-xs;
+    height: fit-content;
+    height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: $font_smallest !important;
+      font-size: $font_base;
+      font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
       line-height: 1.7;
-      padding: 0 $space_xxs;
-    }
-    .pb_form_pill_close {
-      height: 10px;
-      border-radius: calc(50%);
+      padding-left: $space_xs;
+      padding-right: 2px;
     }
-    [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;
-      }
+    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
+      width: 20px;
+      height: 20px;
+      flex-basis: 20px;
+      &::before { line-height: 21px; }
     }
   }
   &.dark {
@@ -136,7 +118,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_text, .pb_form_pill_tag, .pb_form_pill_icon {
+        // .pb_form_pill_tag {
         //   color: $color_name;
         // }
         // .pb_form_pill_close {
@@ -154,7 +136,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_icon {
+          .pb_form_pill_text, .pb_form_pill_tag {
             color: $text_dk_default;
           }
           .pb_form_pill_close {
@@ -175,7 +157,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_icon {
+          .pb_form_pill_text, .pb_form_pill_tag {
             color: $active_dark;
           }
           .pb_form_pill_close {

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

@@ -46,7 +46,6 @@ 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),
@@ -70,7 +69,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xxs"
+              size="xs"
               status={null}
           />
           <Title
@@ -85,7 +84,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xxs"
+              size="xs"
               status={null}
           />
           <Title
@@ -95,7 +94,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           />
           <Icon
               className="pb_form_pill_icon"
-              color={color}
               icon={icon}
           />
         </>
@@ -104,7 +102,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <>
           <Icon
               className="pb_form_pill_icon"
-              color={color}
               icon={icon}
           />
           <Title
@@ -129,7 +126,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <Icon
             fixedWidth
             icon="times"
-            size={closeIconSize}
         />
       </div>
     </div>