playbook_ui 13.21.0 → 13.22.0.pre.alpha.pbntr254barchartnegativenumber2640

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_form_group/form_group.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

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) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **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" }) %>
@@ -9,4 +9,4 @@
               <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
                 <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
                   <% end %>
-                    <% end %>
+                    <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:span,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -103,6 +103,7 @@ const Icon = (props: IconProps) => {
     flipMap[flip],
     (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
     (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
+    iconElement ? 'svg-inline--fa' : '',
     faClasses,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -8,7 +8,8 @@
   <%= content_tag(:i, nil,
       id: object.id,
       data: object.data,
-      class: object.classname
+      class: object.classname,
+      **combined_html_options
   ) %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-# rubocop:disable Style/StringConcatenation, Style/HashLikeCase
+# rubocop:disable Style/HashLikeCase
 
 require "open-uri"
 
@@ -89,7 +89,7 @@ module Playbook
       def render_svg
         doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
         svg = doc.at_css "svg"
-        svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+        svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
         svg["aria"] = object.aria
@@ -167,4 +167,4 @@ module Playbook
   end
 end
 
-# rubocop:enable Style/StringConcatenation, Style/HashLikeCase
+# rubocop:enable Style/HashLikeCase

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.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

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.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

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_icon_value/icon_value.html.erb

@@ -2,7 +2,8 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
-  id: object.id) do %>
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_image/image.html.erb

@@ -6,5 +6,6 @@
     src: object.url,
     alt: object.alt,
     onerror: object.on_error,
+    **combined_html_options
     )
-%>
+%>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
@@ -23,4 +24,4 @@
     <% else %>
         <%= pb_rails("body", props: { text: object.value, dark: object.dark }) if object.value.present? %>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/body.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(object.tag,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/footer.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(object.tag,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(object.tag,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/item.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
     <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>
     <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -3,7 +3,8 @@
                 class: object.classname,
                 data: object.data,
                 id: object.id,
-                tabindex: object.tabindex
+                tabindex: object.tabindex,
+                **combined_html_options
   ) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -5,7 +5,8 @@
                   data: object.data,
                   id: object.id,
                   role: object.role,
-                  tabindex: object.tabindex
+                  tabindex: object.tabindex,
+                  **combined_html_options
     ) do %>
       <%= content.presence %>
   <% 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_loading_inline/loading_inline.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -2,6 +2,7 @@
   id: object.id,
   data: object.data,
   class: object.classname,
-  aria: object.aria) do %>
+  aria: object.aria,
+  **combined_html_options) do %>
     <%= content %>
-<% end %>
+<% end %>

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_multi_level_select/multi_level_select.html.erb

@@ -2,6 +2,7 @@
       aria: object.aria,
       data: object.data,
       id: object.id,
-      class: object.classname) do %>
+      class: object.classname,
+      **combined_html_options) do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -2,7 +2,8 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
-  id: object.id) do %>
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -8,7 +8,8 @@
           dark: object.dark,
           id: object.id,
           href: object.link && object.link,
-          target: object.link && object.target    
+          target: object.link && object.target,
+          **combined_html_options
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -29,6 +30,7 @@
     <%= content_tag(object.tag,
       aria: object.aria,
       class: object.classname,
+      **combined_html_options,
       data: object.data,
       dark: object.dark,
       id: object.id,
@@ -48,4 +50,4 @@
         <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
       <% end %>
     <% end %>
-  <% end %>
+  <% end %>