playbook_ui 13.21.0.pre.alpha.PBNTR224letuserresetrowexpansion2466 → 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf18b9275cd75d7a727f6e7a3891cb3e5fba5872bc687e8abeafc44082d0d773
-  data.tar.gz: c24eacd44ea5c95620641bf9859fc3eec5bbe5f94556c475b2ba419f6084997a
+  metadata.gz: f7cfb7021f51c07eb77a7166393965f50d634939c88a3d7b2a72890fc8f76aea
+  data.tar.gz: 4e0fd0437700056b9fcd95076dd5f700e89b616cf83f97ef9f96ae50c205352f
 SHA512:
-  metadata.gz: fb03d54205fa39f8c058cf7031a0b3264ca98bdf56ac13396761113154f3071380b5f36217ef514ba6daa4f8db2581161b25cc9ab73afa7b383cdf261f58a4f4
-  data.tar.gz: 535b35150645902fe5eb99fa49466bc31eb7a8ad4c7ea87a595406d33bb24b0ac42b56fa5c60aa4443e5fa4fb4af1e031acd2903ff43552e8216daec78264f50
+  metadata.gz: '09e5b5458d55ae87b2f8ccd44d3f8dc9a95391b8e8ae5493fa5f05408acfe0bd5f2db7c84343fa450bbc05299a597fc8bf6ca48d9976eeac0b1720d353b0cba7'
+  data.tar.gz: e360ce6a4f2074667af1b2e8a9067fd28e8e7a6f30136d04a69c7f7e3f1dcda3835d4cf4663be4e816dd89909698b4c9b0ac8991ff779b3666e845239dd5afa8

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -24,16 +24,12 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
 
   const handleOnExpand = (row: Row<GenericObject>) => {
-    onRowToggleClick && onRowToggleClick(row);
-    
-    if (!expandedControl) {
-      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
-    }
-  };
-
+    onRowToggleClick && onRowToggleClick(row)
+    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
+  }
   const RowHasChildren = row.original.children ? true : false
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 

data/app/pb_kits/playbook/pb_advanced_table/README.md

@@ -81,7 +81,7 @@ const MOCK_DATA = [
             graduatedStudents: "43",
             children: [
               {
-                year: "2021",
+                year: "2011",
                 quarter: "Q1",
                 month: "February",
                 day: "15",
@@ -173,7 +173,7 @@ const MOCK_DATA = [
             graduatedStudents: "43",
             children: [
               {
-                year: "2022",
+                year: "2011",
                 quarter: "Q1",
                 month: "May",
                 day: "2",

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -83,17 +83,12 @@
 
   // Vertical separator
   .table-header-cells:first-child,
-  td:first-child,
-  .pb_table_td:first-child {
-    box-shadow: 1px 0px 0px 0px $border_light !important;
+  td:first-child {
+    box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
   }
 
   @include chrome_styles($border-color);
 
-  tr:hover {
-    position: relative;
-  }
-
   &.dark {
     .bg-white {
       background: $bg_dark_card;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -226,7 +226,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions,
             enableToggleExpansion,
             expanded,
-            expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -44,16 +44,11 @@ const AdvancedTableExpandedControl = (props) => {
     onChange: setExpanded,
   }
 
-  const onRowToggleClick = (row) => {
-    setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
-  }
-
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           expandedControl={expandedControl}
-          onRowToggleClick={onRowToggleClick}
           tableData={MOCK_DATA}
           {...props}
       />

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

@@ -1,6 +1,4 @@
 examples:
-  # rails:
-  #   - advanced_table_default: Default (Required Props)
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State

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

@@ -2,8 +2,7 @@
     id: object.id,
     data: object.data.merge(initials: object.initials),
     class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+    aria: object.aria) 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,8 +2,7 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) 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,8 +7,7 @@
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
-              background-position: #{object.background_position};",
-      **combined_html_options
+              background-position: #{object.background_position};"
   ) do %>
     <%= content.presence %>
   <% end %>

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

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

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

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

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

@@ -1,3 +1,4 @@
+@import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
@@ -9,7 +10,11 @@
   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;
@@ -39,6 +44,8 @@
   }
 
   &.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,8 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do%>
+    aria: object.aria) 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,7 +2,6 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
       <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,6 +1,5 @@
 <%= content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options,
-                **combined_html_options) do %>
+    object.tag == "button" ? object.options : object.link_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,8 +34,10 @@ module Playbook
                               default: "far"
 
       def options
-        options = {
+        {
+          aria: aria,
           class: classname,
+          data: data,
           disabled: disabled,
           id: id,
           role: "button",
@@ -44,7 +46,6 @@ 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,7 +2,6 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+    id: object.id) do %>
       <%= content.presence || object.text %>
 <% end %>

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,7 @@
 <%= content_tag(:label, aria: object.aria,
                         id: object.id,
                         data: object.data,
-                        class: object.classname,
-                        **combined_html_options
-                ) do %>
+                        class: object.classname) 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,8 +2,7 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+  class: object.classname) 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,7 +2,6 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+    id: object.id) do %>
   <%= content.presence %>
 <% end %>

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

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

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

@@ -2,8 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+    aria: object.aria) 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,8 +2,7 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <%= pb_rails("body", props: { 
         tag: "span", 
         classname: "pb_contact_kit", 

data/app/pb_kits/playbook/pb_currency/currency.html.erb

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

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

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

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

@@ -135,9 +135,6 @@ 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,8 +2,7 @@
     aria: object.aria,
     class: object.classname + object.error_class,
     data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+    id: object.id) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>
@@ -17,7 +16,6 @@
         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,
@@ -82,4 +80,4 @@
       }
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -75,8 +75,7 @@ module Playbook
                         default: [1900, 2100]
 
       def classname
-        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_date_picker_kit") + default_margin_bottom
+        generate_classname("pb_date_picker_kit")
       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 mb_sm')
+    expect(kit).toHaveClass('pb_date_picker_kit')
   })
 
   test('shows DatePicker date format m/d/Y', async () => {

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

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

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

@@ -20,7 +20,6 @@ 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
@@ -49,7 +48,6 @@ 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

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

@@ -19,7 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerMarginBottom} from './_date_picker_margin_bottom'
 export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
 export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -1,6 +1,7 @@
 @import "../../pb_textarea/textarea_mixin";
 
 [class^=pb_date_picker_kit] {
+  margin-bottom: $space_sm;
 
   .pb_date_picker_kit_label {
     margin-bottom: $space_xs;
@@ -64,4 +65,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <div class="pb_date_range_inline_wrapper">
     <% if object.icon == true %>
       <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
 
     <%= pb_rails("flex", props: {vertical: "center"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
 
     <% if object.bold == false %>
 

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

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

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -2,8 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+    aria: object.aria) do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>
@@ -15,4 +14,4 @@
       <% end %>
   <% end %>
 
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb

@@ -1,8 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+    class: object.classname) do %>
   <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
   <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
 <% end %>

data/app/pb_kits/playbook/pb_detail/detail.html.erb

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

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

@@ -3,8 +3,7 @@
         aria: object.aria,
         data: object.data,
         id: object.id,
-        class: object.classname,
-        **combined_html_options) do %>
+        class: object.classname) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>