playbook_ui 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71177d67df222d53293af018a05b5a4aa6e8c2320e2666e4a0fa306f9c7fa6b6
-  data.tar.gz: 4020bc3572296e4c84a58b117cd6b194d2875429baf2bcf606f5a9e2f3772b25
+  metadata.gz: 76d5446d59ffafe0e3da366fc35ae5a85ce4965c57204e395724cd9bd4fbd4e2
+  data.tar.gz: b1b7f18e82863f99ff0a7d7d22dd9f0e6b55d78b709f739bf28f6a12a8dc0514
 SHA512:
-  metadata.gz: b628362eb09ed93b1084e3452766c4753edda243367d3217379e4ad4b83738567931f26af432583a7d38e34dcf8085c6ae05bb6415460a8cbf5b438a25ffd603
-  data.tar.gz: 1aed46186c6455ad3e8adb45e63fe1a55358237eec9c2fd72db3b12a4a9cdbc7031099be20d38e2e79a9bedf89b74cb97a96ed4cc67b05649e5d682064bfade0
+  metadata.gz: e64335a9b6dea16cd26759da7db490f4058f962c2f86c2d0ef381fa02be563c684a02774f9797a874bb13694626313277c4089a536c902f8e10f723e5ff07bd0
+  data.tar.gz: a1191a5963dd004a8601ce004476d65d8eaccb94234f4d8289cc46bf21a5a93bd8aa044f80d203904f958bbcc4c1d2c09a861ad3acaa91e7d8375912bb57f2ed

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -102,7 +102,7 @@ const BarGraph = ({
       max: yAxisMax,
       opposite: false,
       title: {
-        text: typeof axisTitle === 'string' ? axisTitle : axisTitle[0].name,
+        text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
       },
       plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
         value: 0,

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -74,6 +74,31 @@ $transition: $transition_cubic;
         opacity: $opacity_10;
       }
     }
+
+    &:disabled ~ .pb_checkbox_checkmark {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 5%);
+      border-color: $border_light;
+
+      & ~ .pb_checkbox_label {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+      & ~ .pb_checkbox_label .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+    }
+
+    &:disabled:checked ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
+
+    &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
   }
 
   &.dark {
@@ -81,6 +106,30 @@ $transition: $transition_cubic;
       &:focus ~ .pb_checkbox_checkmark {
         box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
       }
+
+      &:disabled ~ .pb_checkbox_checkmark {
+        cursor: not-allowed;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_checkbox_label {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+        & ~ .pb_checkbox_label .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+      }
+
+      &:disabled:checked ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+      }
+
+      &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+        border-color: $border_dark;
+      }
     }
     
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -12,6 +12,7 @@ type CheckboxProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    disabled = false,
     error = false,
     htmlOptions = {},
     id,
@@ -67,6 +69,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     return (
     <input
         defaultChecked={checked}
+        disabled={disabled}
         name={name}
         onChange={onChange}
         ref={checkRef}

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :text
       prop :value
       prop :name
+      prop :disabled, type: Playbook::Props::Boolean, default: false
 
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
@@ -26,7 +27,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked, input_options.merge(disabled: disabled))
       end
 
       def checkbox_label_status

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -92,3 +92,17 @@ test('has checked attribute', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('checked')
 })
+
+test('has disabled attribute', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        disabled
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />)
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('input')
+  expect(input).toHaveAttribute('disabled')
+}) 

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            margin_bottom: "xs",
+            text: "Disabled unchecked",
+            value: "checkbox-value",
+            disabled: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            text: "Disabled checked",
+            value: "checkbox-value",
+            disabled: true,
+            checked: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import Checkbox from '../_checkbox'
+
+const CheckboxDisabled = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <Checkbox
+          disabled
+          marginBottom="xs"
+          name="default name"
+          tabIndex={0}
+          text="Disabled unchecked"
+          value="default value"
+          {...props}
+      />
+      <Checkbox
+          checked
+          disabled
+          name="checkbox-name"
+          text="Disabled checked"
+          value="check-box value"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default CheckboxDisabled

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

@@ -6,6 +6,7 @@ examples:
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
     - checkbox_indeterminate: Indeterminate Checkbox
+    - checkbox_disabled: Disabled Checkbox
 
   react:
   - checkbox_default: Default
@@ -13,6 +14,7 @@ examples:
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
+  - checkbox_disabled: Disabled Checkbox
 
   swift:
     - checkbox_default_swift: Default

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

@@ -3,3 +3,4 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
+export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -1,3 +1,5 @@
 Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -1,3 +1,5 @@
 The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
+Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.

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

@@ -7,28 +7,11 @@
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
+@import "./scss_partials/dropdown_animation";
 
 .pb_dropdown {
   .dropdown_wrapper {
-    [class*=dropdown_trigger_wrapper] {
+    [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -47,7 +30,6 @@
       .dropdown_input {
         @include pb_body;
         border: unset;
-        border-radius: $border_rad_heavier;
         padding: 0;
         background-color: $white;
         &:focus-visible {
@@ -55,17 +37,17 @@
         }
       }
       &:focus {
-        box-shadow: 0px 0px 0 1px $primary;
+        box-shadow: 0px 0px 0 1px $primary !important;
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }
-      
-      &[class*=_select_only] {
+
+      &[class*="_select_only"] {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
       }
 
-      &[class*=_focus] {
-        box-shadow: 0px 0px 0 1px $primary;
+      &[class*="_focus"] {
+        box-shadow: 0px 0px 0 1px $primary !important;
         transition: box-shadow 0.1s ease-in-out;
       }
     }
@@ -80,34 +62,34 @@
       z-index: $z_1;
       width: 100%;
 
-      .pb_dropdown_option {
+      [class*="pb_dropdown_option"] {
         cursor: pointer;
         &:hover {
           background-color: $border_light;
         }
-      }
-
-      .dropdown_option_focused {
-        background-color: $border_light;
-      }
 
-      .dropdown_option {
-        width: 100%;
-      }
+        &[class*="_focused"] {
+          background-color: $border_light;
+        }
 
-      .dropdown_option_list {
-        border-bottom: 1px solid $border_light;
-      }
-      .dropdown_option_selected {
-        background-color: $primary;
-        [class^="pb_body"],
-        [class^="pb_title_kit"] {
-          color: $white !important;
+        &[class*="_list"] {
+          border-bottom: 1px solid $border_light;
         }
-        &:hover {
-          background-color: $primary !important;
+        &[class*="selected"] {
+          background-color: $primary;
+          [class^="pb_body"],
+          [class^="pb_title_kit"] {
+            color: $white !important;
+          }
+          &:hover {
+            background-color: $primary !important;
+          }
         }
       }
+
+      .dropdown_option_wrapper {
+        width: 100%;
+      }
     }
     .close {
       display: none;
@@ -128,7 +110,7 @@
 
   &.dark {
     .dropdown_wrapper {
-      [class*=dropdown_trigger_wrapper] {
+      [class*="dropdown_trigger_wrapper"] {
         @include pb_body_light_dark;
         background-color: rgba($white, 0.1) !important;
         background: none;
@@ -143,10 +125,9 @@
         [class^="pb_body"] {
           color: $white;
         }
-        &[class*=_select_only] {
-          box-shadow: inset 0 -11px 20px rgba($white, 0.05) !important;
+        &[class*="_select_only"] {
+          box-shadow: inset 0 -11px 20px rgba($white, 0.05);
         }
-
         .dropdown_input {
           background-color: unset;
           color: $white;
@@ -157,24 +138,26 @@
       background-color: $bg_dark !important;
       border-color: rgba($white, 0.15);
       color: $white;
-      .dropdown_option_list {
-        border-color: rgba($white, 0.15);
-      }
       [class^="pb_body"],
       [class^="pb_title_kit"] {
         color: $white !important;
       }
 
-      .pb_dropdown_option {
+      [class*="pb_dropdown_option"] {
         &:hover {
           background-color: $hover_dark;
         }
-      }
-      .dropdown_option_focused {
-        background-color: $hover_dark;
-      }
-      .dropdown_option_selected {
-        background-color: $primary;
+
+        &[class*="_focused"] {
+          background-color: $hover_dark;
+        }
+
+        &[class*="_list"] {
+          border-color: rgba($white, 0.15);
+        }
+        &[class*="selected"] {
+          background-color: $primary;
+        }
       }
     }
   }

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

@@ -1,27 +1,28 @@
-import React, { useState, useRef, useEffect, ReactElement } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GenericObject } from "../types";
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
+import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
-import DropdownContext from "./context";
 import useDropdown from "./hooks/useDropdown";
 
 import {
   separateChildComponents,
   prepareSubcomponents,
-} from "./utilities/subComponentHelper";
-import { GenericObject } from "../types";
+  handleClickOutside,
+} from "./utilities";
 
 type DropdownProps = {
   aria?: { [key: string]: string };
   autocomplete?: boolean;
-  children?: React.ReactChild[] | React.ReactChild | ReactElement[];
+  children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
   className?: string;
   dark?: boolean;
   data?: { [key: string]: string };
@@ -89,31 +90,17 @@ const Dropdown = (props: DropdownProps) => {
       }
   }
   // Handle clicks outside the dropdown
-    const handleClickOutside = (e: MouseEvent) => {
-      let targetElement = e.target as HTMLElement;
-      let shouldClose = true;
-  
-      while (targetElement && shouldClose) {
-        //Only needed for when useDropdown hook used with external trigger
-        if (targetElement.getAttribute('data-dropdown') === 'pb-dropdown-trigger') {
-          shouldClose = false;
-        }
-        targetElement = targetElement.parentElement as HTMLElement;
-      }
-      if (
-        inputWrapperRef.current && !inputWrapperRef.current.contains(e.target) &&
-        (dropdownContainerRef.current && !dropdownContainerRef.current.contains(e.target)) &&
-        shouldClose
-      ) {
-        setIsDropDownClosed(true);
-        setFocusedOptionIndex(-1);
-        setIsInputFocused(false);
-      }
-    };
+  const handleClick = handleClickOutside({
+    inputWrapperRef,
+    dropdownContainerRef,
+    setIsDropDownClosed,
+    setFocusedOptionIndex,
+    setIsInputFocused,
+  });
   
-    window.addEventListener("click", handleClickOutside);
+    window.addEventListener("click", handleClick);
     return () => {
-      window.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("click", handleClick);
     };
   }, []);
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.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: {options: options}) %>

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

@@ -24,13 +24,7 @@ const DropdownDefault = (props) => {
     <Dropdown
         options={options}
         {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        /> 
-      ))}
-    </Dropdown>
+    />
   </div>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md

@@ -1 +1 @@
-`options` for the Dropdown and `option` for the Dropdown.Option are the only required props for this kit. `options` must be an array of objects. Each object can contain any key/value pairs needed but 'label' and 'value' are required.
+The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.

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

@@ -0,0 +1,17 @@
+<% 
+  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: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Dropdown } from '../..'
+
+const DropdownSubcomponentStructure = (props) => {
+
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownSubcomponentStructure

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md

@@ -0,0 +1,7 @@
+The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+
+`Dropdown. Trigger` / `dropdown/dropdown_trigger`
+`Dropdown.Container`/ `dropdown/dropdown_container`
+`Dropdown.Option` / `dropdown/dropdown_option`
+
+See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 

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

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Dropdown, User, Badge, FlexItem } from '../..'
 
 const DropdownWithAutocomplete = (props) => {
-// eslint-disable-next-line no-unused-vars
-  const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -18,7 +16,7 @@ const DropdownWithAutocomplete = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Desinger",
+      title: "Senior UX Designer",
       id: "ramon-ruiz",
       status: "Away"
     },
@@ -44,7 +42,6 @@ const DropdownWithAutocomplete = (props) => {
   return (
   <div>
     <Dropdown autocomplete
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
-// eslint-disable-next-line no-unused-vars
   const [selectedOption, setSelectedOption] = useState();
 
   const options = [
@@ -18,7 +17,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Desinger",
+      title: "Senior UX Designer",
       id: "ramon-ruiz",
       status: "Away"
     },