playbook_ui 14.15.0.pre.alpha.PLAY1756pbcontenttagpt76722 → 14.15.0.pre.alpha.PLAY1871speedupvitebuildwatch6643

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c641ead30433eaf62a8e141ba3afb3c8060be63b51b13842ed43f859b79b70c
-  data.tar.gz: 43ca0c807ad91eedc4e198edfd4801b047a2884344ea532f18c01104f72f472c
+  metadata.gz: b06850c1ac1d1db64309d61fa6cac8e9f315214db6ab81455507e6fde789b8ce
+  data.tar.gz: 351e090b7c347cb5378ac9b238917d1a3663da8064766395ffedf87e85267477
 SHA512:
-  metadata.gz: 66a785b50cba9af13485bd5adaa85c8da08d345e586758b3bed6e28339a0802ca3d5aa33556e433c2f6701cd4565ecdcd08312880eb09f9b1c3d5cad812483e0
-  data.tar.gz: 478241bc25c4d1cde8397a828b8534687a5d0166bdbdeb495936380bd331664fbb284081df964b15679753660f3a4989ce554bb7da26c64aadb1b47827f07042
+  metadata.gz: ff636db5c3c57686bda88879f85dffe6323d73e3f1fe2ff47d20a3e12b30352be92f2290ab8058d8ec96f2aca193fe8a0513b2e131cfd2005118e9ff5ab1d01d
+  data.tar.gz: d7ad03832b1215e4c97c43e9f1fd75f1f1ed465298a0bf647b08229b4530456cebf636ef8414c89387aa7ece11b0bd0019a1ed978a9754769fabfa5cfc41c651

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,4 @@
 
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -15,8 +14,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_contact/contact';
 @import 'pb_copy_button/copy_button';
+@import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -46,7 +45,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -111,7 +109,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_empty_state/empty_state';
+@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -1,3 +1 @@
-You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
-
-Use `window.addEventListener("DOMContentLoaded", () => {})`, not `document.addEventListener("DOMContentLoaded", () => {})`.
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).

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

@@ -7,8 +7,6 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
-  - date_picker_on_change: onChange
-  - date_picker_on_close: onClose
   # - 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)

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

@@ -25,7 +25,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

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

@@ -24,7 +24,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -49,7 +49,7 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          borderRadius="xs"
+          borderRadius="lg"
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -4,7 +4,7 @@
                                   new_window:object.new_window,
                                   target: object.target,
                                   dark: object.dark,
-                                  border_radius: "xs" }) do %>
+                                  border_radius: "lg" }) do %>
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -23,7 +23,6 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  hiddenInputs?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   initialCountry?: string,
@@ -73,7 +72,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
-    hiddenInputs = false,
     htmlOptions = {},
     id = "",
     initialCountry = "",
@@ -245,10 +243,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
-      hiddenInput: hiddenInputs ? () => ({
-        phone: `${name}_full`,
-        country: `${name}_country_code`,
-      }) : null,
     })
 
     itiRef.current = telInputInit;

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

@@ -1,3 +1,3 @@
 <%= pb_rails("phone_number_input", props: {
-    id: "hello",
+    id: "hello"
 }) %>

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

@@ -16,6 +16,4 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
-  - phone_number_input_format: Format as You Type
-  - phone_number_input_hidden_inputs: Hidden Inputs
-  
+  - phone_number_input_format: Format as You Type

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -23,8 +23,6 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
-      prop :hidden_inputs, type: Playbook::Props::Boolean,
-                           default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -37,7 +35,6 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
-          hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,
           name: name,

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if enable_drag %>
     <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
       <%= pb_rails("draggable/draggable_container") do %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <% if layout_option == "number" %>
     <% case object.size %>
       <% when "xs", "sm" %>

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -6,11 +6,21 @@
 
 <%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
   <% if object.tag == "table" %>
-    <%= pb_content_tag(:table) do %>
+    <%= content_tag(:table,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -4,12 +4,22 @@
         <%= content.presence %>
       <% end %>
     <% else %>
-      <%= pb_content_tag(:tbody) do %>
+      <%= content_tag(:tbody,
+        aria: object.aria,
+        class: object.classname,
+        data: object.data,
+        id: object.id,
+        **combined_html_options) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
 <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_cell.html.erb

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-    <%= pb_content_tag(:td) do %>
+    <%= content_tag(:td,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
 <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_head.html.erb

@@ -1,9 +1,19 @@
 <% if object.tag == "table" %>
-    <%= pb_content_tag(:thead) do %>
+    <%= content_tag(:thead,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -1,7 +1,11 @@
 <% if object.tag == "table" %>  
-  <%= pb_content_tag(:th,
+  <%= content_tag(:th,
       colspan: object.colspan,
-      id: "pb-th#{object.id}") do %>
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: "pb-th#{object.id}",
+      **combined_html_options) do %>
     <% unless sorting_style? %>
         <%= content.presence || object.text %>
     <% else %>
@@ -42,7 +46,12 @@
     <% end %>
   <% end %>
 <% else %>
-  <%= pb_content_tag do %>
+  <%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <% unless sorting_style? %>
         <%= content.presence || object.text %>
       <% else %>

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -1,9 +1,12 @@
 <% if object.collapsible && object.tag == "table" %>
-    <%= pb_content_tag(:tr,
+    <%= content_tag(:tr,
+    aria: object.aria,
     class: object.classname + " collapsible-tr",
-    data: object.data.merge(id: object.id),
+    data: object.data.merge(id: object.id),  
+    id: object.id,
     'data-pb-table-collapsible-wrapper' => true,
-    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id) do %>
+    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
+    **combined_html_options) do %>
     <%= content.presence %>
   <% end %>
 
@@ -21,12 +24,22 @@
         <%= content.presence %>
       <% end %>
     <% else %>
-      <%= pb_content_tag(:tr) do %>
+      <%= content_tag(:tr,
+        aria: object.aria,
+        class: object.classname,
+        data: object.data,
+        id: object.id,
+        **combined_html_options) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
 <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, id: nil ) do  %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -54,7 +54,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       margin-bottom: 50px;
     }
 
-    &.visible,
+    &.visible, 
     &.show {
       z-index: $z_9;
       padding: $space_xs $space_sm;
@@ -117,7 +117,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
         color: $charcoal;
         background-color: $white;
       }
-      .arrow {
+      .arrow {        
         border-color: $white transparent transparent transparent;
         opacity: $opacity_10;
       }

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

@@ -4,7 +4,6 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
-  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,11 +1,10 @@
 <%= content_tag(:div,
-      id: object.id,
-      data: object.data,
-      class: object.classname,
-      style: remove_height_properties(combined_html_options[:style]) || "",
-      **combined_html_options.except(:style)) do %>
-  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
+  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -3,49 +3,24 @@
 module Playbook
   module PbTooltip
     class Tooltip < Playbook::KitBase
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :delay_open
-      prop :delay_close
-      prop :height
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :max_height
-      prop :max_width
-      prop :min_height
-      prop :min_width
       prop :position
-      prop :tooltip_id
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
+      prop :tooltip_id
+      prop :interaction, type: Playbook::Props::Boolean,
+                         default: false
+      prop :delay_open
+      prop :delay_close
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
-      prop :width
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
       end
 
-      def remove_height_properties(combined_html_options_style)
-        return nil if combined_html_options_style.nil?
-
-        combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
-                                   .strip
-                                   .presence
-      end
-
-      def height_and_width_helper
-        out = ""
-        out += "width: #{width};" if width.present?
-        out += "height: #{height};" if height.present?
-        out += "max-height: #{max_height};" if max_height.present?
-        out += "max-width: #{max_width};" if max_width.present?
-        out += "min-height: #{min_height};" if min_height.present?
-        out += "min-width: #{min_width};" if min_width.present?
-        out
-      end
-
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,

data/app/pb_kits/playbook/tokens/_display.scss

@@ -4,12 +4,10 @@ $display_inline_block: inline-block !default;
 $display_flex: flex !default;
 $display_none: none !default;
 $display_inline_flex: inline-flex !default;
-$display_grid: grid !default;
 $displays: (
   display_none:   $display_none,
   display_flex: $display_flex,
   display_inline: $display_inline,
   display_inline_block: $display_inline_block,
-  display_block: $display_block,
-  display_grid: $display_grid
+  display_block: $display_block
 );

data/app/pb_kits/playbook/utilities/_display.scss

@@ -24,18 +24,13 @@
     display: none;
 }
 
-.display_grid {
-    display: grid;
-}
-
 $display_values: (
     none: $display_none,
     flex: $display_flex,
     inline: $display_inline,
     inline_block: $display_inline_block,
     inline_flex: $display_inline_flex,
-    block: $display_block,
-    grid: $display_grid
+    block: $display_block
 );
 
 // using a grid here

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -9,7 +9,7 @@ const testSubject = 'body'
 
 // %w[block inline_block inline flex inline_flex none]
 test('Global Props: returns proper class name', () => {
-  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
+  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
   for(let x = 0, y = propValues.length; x < y; ++x) {
     const testId = `${testSubject}-${propValues[x]}`
     render(