playbook_ui 13.22.0 → 13.23.0.pre.alpha.PLAY1284investigation2657

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb

@@ -10,13 +10,6 @@
   picker_id: "date-picker-default-date2"
 }) %>
 
-<%= pb_rails("date_picker", props: {
-  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
-  label: "Default Date Range",
-  mode: "range",
-  picker_id: "date-picker-default-date3"
-}) %>
-
 <%= pb_rails("date_picker", props: {
   label: "Default Behavior",
   picker_id: "date-picker-default-date4"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx

@@ -16,13 +16,6 @@ const DatePickerDefaultDate = (props) => (
         pickerId="date-picker-default-date2"
         {...props}
     />
-    <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(7)]}
-        label="Default Date Range"
-        mode="range"
-        pickerId="date-picker-default-date3"
-        {...props}
-    />
     <DatePicker
         label="Default Behavior"
         pickerId="date-picker-default-date4"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb

@@ -2,4 +2,11 @@
   default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   mode: "range",
   picker_id: "date-picker-range"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
+  label: "Default Date Range",
+  mode: "range",
+  picker_id: "date-picker-default-date3"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -10,6 +10,13 @@ const DatePickerRange = (props) => (
         pickerId="date-picker-range"
         {...props}
     />
+    <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
+        label="Default Date Range"
+        mode="range"
+        pickerId="date-picker-default-date3"
+        {...props}
+    />
   </div>
 )
 

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

@@ -7,7 +7,7 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
-  - date_picker_range: Range
+  # - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
@@ -37,7 +37,7 @@ examples:
   - date_picker_label: Label
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
-  - date_picker_range: Range
+  # - date_picker_range: Range
   - date_picker_quick_pick_react: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates

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

@@ -9,7 +9,7 @@
             <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
                 <%= object.confirm_button %>
             <% end %>
-            <%= pb_rails("button", props: { 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"}) do %>
                 <%= object.cancel_button %>
             <% end %>
         <% end %>

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

@@ -6,8 +6,8 @@
     **combined_html_options) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
-            
-            <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
+
+            <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
                 <%= pb_rails("icon", props:{icon: "times"}) %>
             </button>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
+  <form>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -12,4 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+  </form>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -57,6 +57,36 @@
     margin-bottom: 16px;
   }
 
+  & > [class^=pb_phone_number_input]:not(:last-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+
+  & > [class^=pb_phone_number_input]:not(:first-child) {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > div:not(:first-child) > [class^=pb_phone_number_input] {
+    .text_input {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  & > div:not(:last-child) > [class^=pb_phone_number_input] {
+    .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right: none;
+    }
+  }
+
   &[class*=rails] > [class^=pb_date_picker_kit] {
     margin-bottom: 0px;
   }
@@ -82,6 +112,10 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
+      &:focus {
+        outline: $primary solid 1px;
+        outline-offset: -1px;
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,6 +1,7 @@
 <div>
+
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
+    <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
       blank_selection: "Genre",
       options: [
@@ -16,4 +17,19 @@
       ]
     }) %>
   <% end %>
+  <br>
+  <br>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("select", props: {
+        blank_selection: "Phone",
+        options: [
+          { value: "Cell" },
+          { value: "Work" },
+          { value: "Home" },
+        ]
+      }) %>
+      <%= pb_rails("phone_number_input", props: {
+        id: "phone"
+    }) %>
+  <% end %>
 </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import FormGroup from '../_form_group'
-
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
@@ -18,11 +18,16 @@ const FormGroupSelect = (props) => {
     { value: 'Other' },
   ]
 
+  const phoneOptions = [
+    { value: 'Cell' },
+    { value: 'Work' },
+    { value: 'Home' },
+  ]
+
   return (
     <div>
       <FormGroup>
         <TextInput
-            label="Artist"
             placeholder="Enter Artist Name"
             {...props}
         />
@@ -32,6 +37,17 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
+      <br />
+      <br />
+      <FormGroup>
+        <Select
+            blankSelection="Phone"
+            options={phoneOptions}
+            />
+        <PhoneNumberInput
+            id='default'
+        />
+    </FormGroup>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -5,6 +5,7 @@
 @import "../pb_icon/icon";
 
 $pb_icon_circle_sizes: (
+  "xxs":  16px,
   "xs":   28px,
   "sm":   38px,
   "md":   60px,
@@ -13,6 +14,16 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
+@mixin svg_size($name, $match, $adjust) {
+  @if $name == $match {
+    $svg_xy: $adjust;
+    & > svg {
+      width: #{$svg_xy};
+      height: #{$svg_xy};
+    }
+  }
+}
+
 [class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
@@ -51,6 +62,8 @@ $pb_icon_circle_sizes: (
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
+
+      @include svg_size($name, "xxs", $size - 6px);
     }
   }
 
@@ -64,3 +77,4 @@ $pb_icon_circle_sizes: (
     }
   }
 }
+

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -15,7 +15,7 @@ type IconCircleProps = {
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
+  size?: "base" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   variant?: | "default"
     | "royal"
     | "blue"

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -1,3 +1,8 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "rocket",
+  size: "xxs"
+}) %>
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "rocket",
   size: "xs"

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -4,6 +4,12 @@ import { IconCircle } from '../..'
 const IconCircleSizes = (props) => {
   return (
     <div>
+      <IconCircle
+          icon="rocket"
+          size="xxs"
+          {...props}
+      />
+      <br />
       <IconCircle
           icon="rocket"
           size="xs"

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -7,7 +7,7 @@ module Playbook
       prop :emoji, type: Playbook::Props::String,
                    default: ""
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md base lg xl],
+                  values: %w[xxs xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default royal blue orange purple teal red yellow green orange],

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -74,6 +74,7 @@ describe("IconCircle Kit", () => {
 
       test('displays size as expected', () => {
         [
+          "xxs",
           "xs",
           "sm",
           "md",

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -33,7 +33,6 @@ module Playbook
       end
 
       def title_size
-        # rubocop:disable Style/CaseLikeIf
         if size == "lg"
           1
         elsif size == "md"
@@ -41,7 +40,6 @@ module Playbook
         else
           3
         end
-        # rubocop:enable Style/CaseLikeIf
       end
     end
   end

data/app/pb_kits/playbook/pb_list/list.rb

@@ -41,7 +41,6 @@ module Playbook
         dark ? "dark" : nil
       end
 
-      # rubocop:disable Style/CaseLikeIf
       def layout_class
         if layout == "right"
           "layout_right"
@@ -51,7 +50,6 @@ module Playbook
           ""
         end
       end
-      # rubocop:enable Style/CaseLikeIf
 
       def size_class
         size ? "large" : nil

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md

@@ -1,5 +1,5 @@
-`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
+`selected_ids` is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
 
 Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
 
-When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx}

@@ -68,7 +68,7 @@ const treeData = [
   },
 ];
 
-const MultiLevelSelectSelectedIds = (props) => {
+const MultiLevelSelectSelectedIdsReact = (props) => {
   return (
     <div>
       <MultiLevelSelect
@@ -85,4 +85,4 @@ const MultiLevelSelectSelectedIds = (props) => {
   );
 };
 
-export default MultiLevelSelectSelectedIds;
+export default MultiLevelSelectSelectedIdsReact;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md

@@ -0,0 +1,5 @@
+`selected_ids` is an optional prop that accepts an array of ids and controls the selected state of the tree nodes that match the values passed. When used within react-hook-form, this prop can be used to manage the selected state of any ids passed to it. 
+
+Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
+
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

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

@@ -12,4 +12,4 @@ examples:
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
+  - multi_level_select_selected_ids_react: Selected Ids

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

@@ -2,4 +2,4 @@ export { default as MultiLevelSelectDefault } from './_multi_level_select_defaul
 export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
+export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"

data/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -5,16 +5,7 @@
 
   @each $status_name, $status_value in $pb_online_status_statuses {
     &[class*=_#{$status_name}]  {
-      background: $status_value;
+      @include pb_online_status($status_value);
     }
   }
-  &[class*=_online]  {
-    @include pb_online_status_online;
-  }
-  &[class*=_away]  {
-    @include pb_online_status_away;
-  }
-  &[class*=_offline]  {
-    @include pb_online_status_offline;
-  }
 }

data/app/pb_kits/playbook/pb_online_status/_online_status.tsx

@@ -10,7 +10,7 @@ type OnlineStatusProps = {
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  status?: "online" | "offline" | "away",
+  status?: "away" | "error" | "info" | "neutral" | "offline" |"online" | "primary"| "success" | "warning",
 } & GlobalProps
 
 const OnlineStatus = (props: OnlineStatusProps) => {

data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss

@@ -7,6 +7,12 @@ $pb_online_status_statuses: (
   online: $success,
   away: $warning,
   offline: $neutral,
+  success: $success,
+  warning: $warning,
+  error: $error,
+  info: $info,
+  neutral: $neutral,
+  primary: $primary,
 );
 
 @mixin pb_online_status($background: $neutral) {
@@ -23,16 +29,4 @@ $pb_online_status_statuses: (
   border-style: solid;
   border-radius: 50%;
   background: $background;
-}
-
-@mixin pb_online_status_away {
-  @include pb_online_status($warning);
-}
-
-@mixin pb_online_status_online {
-  @include pb_online_status($success);
-}
-
-@mixin pb_online_status_offline {
-  @include pb_online_status($neutral);
-}
+}

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb

@@ -1,9 +1,6 @@
-<%= pb_rails("online_status", props: { status: "offline" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "online" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "away" }) %>
+<%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -5,24 +5,35 @@ import OnlineStatus from '../_online_status'
 const OnlineStatusDefault = (props) => (
   <>
     <OnlineStatus
+        marginY="xs"
         status="offline"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="online"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="away"
         {...props}
     />
-
+    <OnlineStatus
+        marginY="xs"
+        status="error"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="info"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="primary"
+        {...props}
+    />
   </>
 )
 

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbOnlineStatus
     class OnlineStatus < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
-                    values: %w[online offline away],
+                    values: %w[online offline away success warning error info neutral primary],
                     default: "offline"
 
       def classname

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -1 +1,2 @@
-<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,5 +1,5 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
@@ -9,4 +9,4 @@
             if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
         })
     })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -2,16 +2,16 @@
 
 $color_checkbox_success: $data_1;
 $color_checkbox_default: $border_light;
+$color_disabled: darken($border_light, 20%);
 $transition: .2s ease-in-out;
 
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: $width/2;
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
-
   .pb_toggle_wrapper {
     .pb_toggle_control {
       cursor: pointer;
@@ -23,10 +23,11 @@ $transition: .2s ease-in-out;
       border: $border_default;
       position: relative;
       box-sizing: content-box;
+
       &:after {
         transition: $transition;
         content: "";
-        width: $width/2 - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -34,23 +35,55 @@ $transition: .2s ease-in-out;
         top: 2px;
         left: 2px;
       }
+
       &:hover {
         border: $border_success;
-        &:after{
+
+        &:after {
           background-color: $color_checkbox_success;
         }
       }
     }
+
     input {
       display: none;
+
+      &:disabled + .pb_toggle_control {
+        cursor: not-allowed;
+        opacity: 0.5; 
+        border: 3px solid $border_light;
+        background-color: $border_light;
+
+        &:after {
+          background-color: darken($neutral, 15%);
+        }
+      }
+    }
+
+    input:checked {
+      display: none;
+
       &:checked + .pb_toggle_control {
         border: $border_success;
         background-color: $color_checkbox_success;
-        &:after{
-          left: $width/2 + 2px;
+
+        &:after {
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }
+
+      &:disabled + .pb_toggle_control {
+        cursor: not-allowed;
+        opacity: 0.5; 
+        border: 3px solid $text_lt_light;
+        background-color: $text_lt_light;
+
+        &:after {
+          background-color: $neutral;
+        }
+      }
     }
   }
 }
+