playbook_ui 13.32.0.pre.alpha.PLAY14143288 → 13.32.0.pre.alpha.PLAY14143297

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5618b32ebc83c42d8613bd4fa8b0a2744a51305118db04bfcf7ac130ea914db8
-  data.tar.gz: 54892a5dec259caa818c197140f0438179e1a9e3904438fe0f82aa5d317092b1
+  metadata.gz: 1bf37fab9295d3717df47ed17f25adf7ae6cadaea0c0db579ff0068323efbe02
+  data.tar.gz: fbae6cac44fcccb99e9e21a2bacd4d3d2030c7fb306b57dc9e0949dc77e4e6bd
 SHA512:
-  metadata.gz: a44280282310fbba58f3998a32eaa1a0f1979bdba5d28bafcc8de6c3e195295fe5acb1c71beef38666f8918af70f86286818a03250898d4d7d1bc158ef261ec9
-  data.tar.gz: 7afa46a34ac936970e8f0113cf2808b2ac56fac7e75c80ab3393c7ee844dbd304879070954e918f69a6281e23ff66f7f8be06fd10e97b3a446d833895813062c
+  metadata.gz: d2edcbb9d4d517bee989e93b152b68f97eea76ae30b79d47cc9e9a8567b67087ac4b2ceaa79010e3705f6e9a6b5aeef82de844456264cde30ca25cae1b5ff59f
+  data.tar.gz: f9de0eaf712a48b91db97b86be8f3e2b54800c213f8de69a26159cc2db89cf3a28403b43990651b8283c05d7ac9264c653040d311ef5895f0dc9342e32bfdadb

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1,2 +1,6 @@
 The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
  It's important to note that certain options may require specific script imports to function properly.
+
+Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
+
+You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <i
-                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -22,6 +22,7 @@ import {
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
+    blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
     dark?: boolean;
@@ -41,6 +42,7 @@ const Dropdown = (props: DropdownProps) => {
     const {
         aria = {},
         autocomplete = false,
+        blankSelection = '',
         children,
         className,
         dark = false,
@@ -118,11 +120,12 @@ const Dropdown = (props: DropdownProps) => {
         setIsDropDownClosed(isClosed)
     }, [isClosed])
 
-    const filteredOptions = options?.filter((option: GenericObject) => {
+    const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
+    const optionsWithBlankSelection = blankSelectionOption.concat(options);
+    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    }
-    );
+    });    
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -196,7 +199,7 @@ const Dropdown = (props: DropdownProps) => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    options,
+                    optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
@@ -235,8 +238,8 @@ const Dropdown = (props: DropdownProps) => {
                         <>
                             <DropdownTrigger />
                             <DropdownContainer>
-                                {options &&
-                                    options?.map((option: GenericObject) => (
+                                {optionsWithBlankSelection &&
+                                    optionsWithBlankSelection?.map((option: GenericObject) => (
                                         <Dropdown.Option key={option.id}
                                             option={option}
                                         />

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { blank_selection: "Select One...", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownBlankSelection = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+  return (
+  <>
+    <Dropdown
+        blankSelection="Select one..."
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownBlankSelection

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

@@ -9,6 +9,7 @@ examples:
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
 
   react:
   - dropdown_default: Default
@@ -20,6 +21,7 @@ examples:
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -10,4 +10,5 @@ export { default as DropdownWithExternalControl } from './_dropdown_with_externa
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
 export { default as DropdownError } from './_dropdown_error.jsx'
-export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
+export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
+export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -17,8 +17,8 @@
         <% else %>
             <%= pb_rails("dropdown/dropdown_trigger") %>
             <%= pb_rails("dropdown/dropdown_container") do %>
-                <% if object.options.present? %>
-                    <% object.options.each do |option| %>
+                <% if options_with_blank.present? %>
+                    <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
                     <% end %>
                 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -11,6 +11,8 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :default_value
+      prop :blank_selection, type: Playbook::Props::String,
+                             default: ""
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
@@ -29,6 +31,10 @@ module Playbook
       def input_default_value
         default_value.present? ? default_value.transform_keys(&:to_s) : ""
       end
+
+      def options_with_blank
+        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -11,7 +11,7 @@ module Playbook
       prop :custom_display
 
       def data
-        Hash(prop(:data)).merge(dropdown_trigger: true)
+        Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
       end
 
       def classname

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -9,6 +9,8 @@ const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
 const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
+const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
+const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -25,6 +27,7 @@ export default class PbDropdown extends PbEnhancedElement {
     this.bindEventListeners();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
+    this.handleFormReset();
   }
 
   bindEventListeners() {
@@ -84,9 +87,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   onOptionSelected(value, selectedOption) {
-    const triggerElement = this.element.querySelector(
-      "#dropdown_trigger_display"
-    );
+    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
@@ -195,13 +196,38 @@ export default class PbDropdown extends PbEnhancedElement {
         }
       });
 
-      const triggerElement = this.element.querySelector("#dropdown_trigger_display");
-      if (triggerElement) {
-        triggerElement.textContent = defaultValue.label;
-      }
+      this.setTriggerElementText(defaultValue.label);
 
       hiddenInput.value = defaultValue.id;
       inputFormValidation.value = defaultValue.id;
     }
   }
+
+  handleFormReset() {
+    const form = this.element.closest("form");
+
+    if (form) {
+      form.addEventListener("reset", () => {
+        this.resetDropdownValue();
+      });
+    }
+  }
+
+  resetDropdownValue() {
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+
+    hiddenInput.value = "";
+    inputFormValidation.value = "";
+
+    const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
+    this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);
+  }
+
+  setTriggerElementText(text) {
+    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
+    if (triggerElement) {
+      triggerElement.textContent = text;
+    }
+  }
 }

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

@@ -8,6 +8,7 @@ $selector: ".pb_form_pill";
 $pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
+  neutral: map-get($status_color_text, "neutral"),
 );
 
 
@@ -23,34 +24,71 @@ $form_pill_colors: (
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
-      background-color: rgba($color_value, $opacity-1);
+      background-color: mix($color_value, $card_light, 10%);
+      @if ($color_name == "neutral") {
+        background-color: $white;
+        border: 1px solid $border_light;
+      }
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
         &:hover {
-          background-color: rgba($color_value, $opacity-2);
+          background-color: mix($color_value, $card_light, 20%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 20%);
+            border: 1px solid $border_light;
+          }
+        }
+        &:active {
+          background-color: mix($color_value, $card_light, 30%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 30%);
+          }
         }
       }
       #{$selector}_text {
         color: $color_value;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
         padding-left: $space-sm;
-        padding-right: calc($space-sm/4);
+        padding-right: calc($space-sm/2);
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: calc($space-sm/2);
+        padding-left: calc($space-sm/4);
         padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
-        height: 100%;
+        // 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;
+        &:hover {
+          background-color: mix($color_value, $card_light, 40%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 60%);
+          }
+        }
       }
       #{$selector}_tag {
         color: $color_value;
         padding-left: $space-sm;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
       }
     }
   }
+  &:focus {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
+  &:focus-visible {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;
@@ -70,6 +108,71 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
+  &.dark {
+    @each $color_name, $color_value in $form_pill_colors {
+      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
+      // 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 {
+        //   color: $color_name;
+        // }
+        // .pb_form_pill_close {
+        //   color: $color_name;
+        //   &:hover {
+        //     background-color: mix($color_value, $card_dark, 40%);
+        //   }
+        // }
+        // &:hover {
+        //   background-color: mix($color_value, $card_dark, 20%);
+        // }
+        // &:active {
+        //   background-color: mix($color_value, $card_dark, 30%);
+        // }
+        @if ($color_name == "neutral") {
+          background-color: transparent;
+          border: 1px solid $border_dark;
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $text_dk_default;
+          }
+          .pb_form_pill_close {
+            color: $text_dk_default;
+            &:hover {
+              background-color: mix($neutral, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($white, $card_dark, 10%);
+          }
+          &:active {
+            background-color: mix($white, $card_dark, 20%);
+          }
+          &:focus {
+            border: 1px solid $primary;
+          }
+        }
+        @if ($color_name == "primary") {
+          background-color: mix($active_dark, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $active_dark;
+          }
+          .pb_form_pill_close {
+            color: $active_dark;
+            &:hover {
+              background-color: mix($active_dark, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($active_dark, $card_dark, 20px);
+          }
+          &:active {
+            background-color: mix($active_dark, $card_dark, 30%);
+          }
+        }
+      }
+    }
+  }
+
   &[class*=lowercase] {
     text-transform: lowercase;
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import FormPill from './_form_pill';
+
+const testId = 'formpill';
+
+test('should render classname', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        /> 
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
+});
+
+test('displays text content', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        /> 
+    )
+  
+    const text = screen.getByText("test")
+    expect(text).toBeInTheDocument()
+});
+
+test('displays color variant', () => {
+    render(
+        <FormPill
+            color={"neutral"}
+            data={{ testid: testId }}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
+});
+
+test('displays size variant', () => {
+    render(
+        <FormPill            
+            data={{ testid: testId }}
+            size={"small"}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});

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

@@ -4,7 +4,7 @@ import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildHtmlProps } from '../utilities/props'
+import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
@@ -17,6 +17,9 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
+  color?: "primary" | "neutral",
+  data?: {[key: string]: string},
+  tabIndex?: number,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -35,20 +38,26 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
+    color = "primary",
+    data = {},
+    tabIndex,
   } = props
   const css = classnames(
-    `pb_form_pill_kit_${'primary'}`,
+    `pb_form_pill_kit_${color}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
   )
 
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <div className={css}
         id={id}
+        tabIndex={tabIndex}
+        {...dataProps}
         {...htmlProps}
     >
         {name &&

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>
+<%= pb_rails("form_pill", props: {
+    text_transform: "lowercase" ,
+    text: "THIS IS A TAG",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -6,6 +6,7 @@ const FormPillExample = (props) => {
     <div>
       <FormPill
           onClick={() => alert('Click!')}
+          tabIndex={0}
           text="THIS IS A TAG"
           textTransform="lowercase"
           {...props}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -2,6 +2,7 @@
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    size: "small",
+   tabindex: 0,
 }) %>
 
 <br />
@@ -10,4 +11,5 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    size: "small",
+   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -9,6 +9,7 @@ const FormPillSize = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
       <br />
@@ -16,6 +17,7 @@ const FormPillSize = (props) => {
       <FormPill
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -1 +1,4 @@
-<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>
+<%= pb_rails("form_pill", props: {
+    text: "this is a tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -6,8 +6,9 @@ const FormPillDefault = (props) => {
     <div>
       <FormPill
           onClick={() => {
-alert('Click!')
-}}
+            alert('Click!')
+          }}
+          tabIndex={0}
           text="this is a tag"
           {...props}
       />

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+   tabindex: 0,
 }) %>
 
 <br />
@@ -8,4 +9,5 @@
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
+   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -9,6 +9,7 @@ const FormPillDefault = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => alert('Click!')}
+          tabIndex={0}
           {...props}
       />
       <br />
@@ -16,6 +17,7 @@ const FormPillDefault = (props) => {
       <FormPill
           name="Anna Black"
           onClick={() => alert('Click!')}
+          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -11,9 +11,13 @@ module Playbook
       prop :text_transform, type: Playbook::Props::Enum,
                             values: %w[none lowercase],
                             default: "none"
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[primary neutral],
+                   default: "primary"
+      prop :tabindex
 
       def classname
-        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
       end
 
       def display_text