playbook_ui 13.21.0.pre.alpha.pbntr220improveexpansionspeed2451 → 13.22.0.pre.alpha.PLAY1297updatetextstyles2636

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableHeader < Playbook::KitBase
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
+
+      def classname
+        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
+      end
+
+      def th_classname
+        generate_classname("table-header-cells", separator: " ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+        <% object.column_definitions.each_with_index do |column, index| %>
+            <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
+                    <div style="padding-left: <%= depth * 1.25 %>em">
+                        <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                            <% if index.zero? && object.row[:children].present? %>
+                                <button class="gray-icon expand-toggle-icon">
+                                    <%= pb_rails("icon", props: { icon: "circle-play", cursor: "pointer" }) %>
+                                </button>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
+                                <% if index.zero? %>
+                                    <% if object.depth.zero? %>
+                                        <%= object.row[column[:accessor].to_sym] %>
+                                    <% else %>
+                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                            <% if object.depth - 1 == accessor_index %>
+                                                <% key = item.to_sym %>
+                                                <%= object.row[key] %>
+                                            <% end %>
+                                        <% end %>
+                                    <% end %>
+                                <% else %>
+                                    <%= object.row[column[:accessor].to_sym] %>
+                                <% end %>
+                            <% end %>
+                        <% end %>
+                    </div>
+                <% end %>
+            <% end %>
+        <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableRow < Playbook::KitBase
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :row
+      prop :depth
+
+      def classname
+        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
+      end
+
+      def td_classname
+        generate_classname("id-cell", "chrome-styles", separator: " ")
+      end
+
+      def depth_accessors
+        column_definitions.flat_map do |column|
+          column[:cellAccessors] if column.key?(:cellAccessors)
+        end.compact
+      end
+
+    private
+
+      def subrow_depth_classname
+        depth.positive? ? "depth-sub-row-#{depth}" : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data.merge(initials: object.initials),
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
   <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
     <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
   <% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.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.tooltip_text.present? %>
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -7,7 +7,8 @@
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
-              background-position: #{object.background_position};"
+              background-position: #{object.background_position};",
+      **combined_html_options
   ) do %>
     <%= content.presence %>
   <% end %>

data/app/pb_kits/playbook/pb_badge/badge.html.erb

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

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -19,7 +19,7 @@
     }
   }
   b, strong {
-    @include pb_title_4
+    font-weight: $bold;
   }
 
   a {
@@ -29,8 +29,8 @@
     }
   }
 
-  em {
-    font-weight: $bold;
+  em, i {
+    font-style: italic;
   }
 
   small {

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

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

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -1,4 +1,3 @@
-@import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
@@ -10,11 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
-  border-width: 1px;
-  border-style: solid;
-  border-color: $card_light;
 
   svg {
    margin-right: 8px;
@@ -44,8 +39,6 @@
   }
 
   &.dark {
-    border-width: 0;
-
     @each $color_name, $color_value in $status_colors {
       &[class*=_#{$color_name}]  {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do%>
+    aria: object.aria,
+    **combined_html_options) do%>
 <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     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_button/button.html.erb

@@ -1,5 +1,6 @@
 <%= content_tag(object.tag,
-    object.tag == "button" ? object.options : object.link_options) do %>
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -34,10 +34,8 @@ module Playbook
                               default: "far"
 
       def options
-        {
-          aria: aria,
+        options = {
           class: classname,
-          data: data,
           disabled: disabled,
           id: id,
           role: "button",
@@ -46,6 +44,7 @@ module Playbook
           value: value,
           form: form,
         }.compact
+        combined_html_options.merge!(options) if combined_html_options.present?
       end
 
       def target_attribute

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.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 || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.html.erb

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

data/app/pb_kits/playbook/pb_card/card.html.erb

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

data/app/pb_kits/playbook/pb_card/card_body.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.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card_header.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.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,7 +1,9 @@
 <%= content_tag(:label, aria: object.aria,
                         id: object.id,
                         data: object.data,
-                        class: object.classname) do %>
+                        class: object.classname,
+                        **combined_html_options
+                ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.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("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.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_collapsible/collapsible_content.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.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
 
     <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_contact/contact.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: { 
         tag: "span", 
         classname: "pb_contact_kit", 

data/app/pb_kits/playbook/pb_currency/currency.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: object.caption_props) %>
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_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 %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
 
   <% if object.unstyled %>
     <!-- icon -->

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -10,7 +10,6 @@
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
-    margin-bottom: $space_sm;
     position: relative;
 
     .flatpickr-wrapper {
@@ -76,4 +75,4 @@
   &:after {
     content: none;
   }
-}
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -135,6 +135,9 @@ useEffect(() => {
   }, scrollContainer)
 })
   const filteredProps = {...props}
+  if (filteredProps.marginBottom === undefined) {
+    filteredProps.marginBottom = "sm"
+  } 
   delete filteredProps?.position
 
   const classes = classnames(

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname + object.error_class,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>
@@ -16,6 +17,7 @@
         error: object.error,
         id: object.picker_id,
         label: object.hide_label ? nil : object.label,
+        margin_bottom: "none",
         name: object.name,
         placeholder: object.placeholder,
         required: object.required,
@@ -80,4 +82,4 @@
       }
     })
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -75,7 +75,8 @@ module Playbook
                         default: [1900, 2100]
 
       def classname
-        generate_classname("pb_date_picker_kit")
+        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
+        generate_classname("pb_date_picker_kit") + default_margin_bottom
       end
 
       def date_picker_config

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -37,7 +37,7 @@ describe('DatePicker Kit', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_date_picker_kit')
+    expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
   })
 
   test('shows DatePicker date format m/d/Y', async () => {

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr'
+import { Instance } from "flatpickr/dist/types/instance"
 import { BaseOptions } from 'flatpickr/dist/types/options'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
@@ -165,9 +166,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   // two way binding
-  const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
-  const yearChangeHook = () => {
-    initialDropdown.value = initialPicker.currentYear
+  const yearChangeHook = (fp: Instance) => {
+      const yearInput = document.querySelector(`#year-${fp.input.id}`) as HTMLInputElement
+      yearInput.value = fp.currentYear?.toString()
   }
 
   // ===========================================================
@@ -199,11 +200,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
       onClose(selectedDates, dateStr)
     }],
-    onChange: [(selectedDates, dateStr) => {
+    onChange: [(selectedDates, dateStr, fp) => {
+      yearChangeHook(fp)
       onChange(dateStr, selectedDates)
     }],
-    onYearChange: [() => {
-      yearChangeHook()
+    onYearChange: [(_selectedDates, _dateStr, fp) => {
+      yearChangeHook(fp)
     }],
     plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
     position,
@@ -248,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
         /* Reset date picker to default value on form.reset() */
         if (defaultDate){
           picker.setDate(defaultDate)
-          yearChangeHook()
+          yearChangeHook(picker)
         }
       }, 0)
     })

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

@@ -0,0 +1,7 @@
+
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-none", margin_bottom: "none"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-xs", margin_bottom: "xs"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-sm", margin_bottom: "sm"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-md", margin_bottom: "md"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-lg", margin_bottom: "lg"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-xl", margin_bottom: "xl"}) %>

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

@@ -0,0 +1,41 @@
+
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerMarginBottom = (props) => (
+  <div>
+    <DatePicker
+        marginBottom="none"
+        pickerId="date-picker-none"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="xs"
+        pickerId="date-picker-xs"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="sm"
+        pickerId="date-picker-sm"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="md"
+        pickerId="date-picker-md"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="lg"
+        pickerId="date-picker-lg"
+        {...props}
+    />
+    <DatePicker
+        marginBottom="xl"
+        pickerId="date-picker-xl"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerMarginBottom

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
@@ -20,6 +20,7 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
+  - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week
@@ -36,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
@@ -48,6 +49,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week