playbook_ui 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438 → 13.21.0.pre.alpha.PBNTR243globalpositioningpropinset2504

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_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/example.yml

@@ -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
@@ -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

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

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

data/app/pb_kits/playbook/pb_date_range_inline/date_range_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 %>
   <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,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("flex", props: {vertical: "center"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.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 %>
 
     <% if object.bold == false %>
 

data/app/pb_kits/playbook/pb_date_time/date_time.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("flex", props: {
       orientation: "row",

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.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: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>
@@ -14,4 +15,4 @@
       <% end %>
   <% end %>
 
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.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("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,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= object.content %>
 <% end %>

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

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

data/app/pb_kits/playbook/pb_dialog/dialog_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 || object.text %>
-<% end %>
+<% end %>

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

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

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

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.sticky_header,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
             
@@ -11,4 +12,4 @@
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/file_upload.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("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {

data/app/pb_kits/playbook/pb_filter/filter.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 %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -36,6 +36,8 @@ $confirmation_toast_colors: (
     z-index: $z_9;
     display: flex;
     justify-content: space-around;
+    max-width: max-content;
+    width: 90%;
 
     &.top {
       top: $space_md;
@@ -82,9 +84,12 @@ $confirmation_toast_colors: (
 
       &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
         color: $white;
-        margin: 0 $space_md 0 $space_md;
-        max-width: 100%;
-        white-space: break-spaces;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical; 
+        white-space: normal;
+        text-align: left;
       }
     }
   }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -98,6 +98,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             (text && (
               <Title
                   className="pb_fixed_confirmation_toast_text"
+                  flex="1"
                   size={4}
                   text={text}
               />

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -1,5 +1,55 @@
+<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
+
 <%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "multitoast-to-hide",
+  closeable: true,
+  id: "toast-short",
   multi_line: true,
-  text: "Scan to Assign Selected Items. Click here to generate report",
+  text: "Multi-line is used when the given text will not fit on one line.",
   status: "tip",
+  vertical: "top",
+  horizontal: "center"
 }) %>
+
+<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "multitoast-to-hide",
+  closeable: true,
+  id: "toast-long",
+  multi_line: true,
+  text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+
+<script type="text/javascript">
+  const multitoasts = document.querySelectorAll(".multitoast-to-hide")
+  const multibuttons = document.querySelectorAll("button[data-multitoast]")
+
+  const hideMultiToasts = () => {
+    multitoasts.forEach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  multibuttons.forEach((button) => {
+    button.onclick = () => {
+      hideMultiToasts()
+      let toast = document.querySelector(button.getAttribute("data-multitoast"))
+
+      if (toast) {
+        toast.style.display = "flex"
+      }
+    }
+  })
+</script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-long, #toast-short {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,18 +1,69 @@
-import React from 'react'
+import React, { useState } from 'react'
 
+import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../_fixed_confirmation_toast'
 
 const FixedConfirmationToastMultiLine = (props) => {
-  return (
-    <div>
-      <FixedConfirmationToast
-          multiLine
-          status="tip"
-          text="Scan to Assign Selected Items. Click here to generate report"
-          {...props}
-      />
-    </div>
-  )
+
+    const [openShort, setOpenShort] = useState(false)
+    const [openLong, setOpenLong] = useState(false)
+
+    const handleClickShort = () => {
+        setOpenShort(true)
+    }
+    const handleClickLong= () => {
+        setOpenLong(true)
+    }
+
+    const handleCloseShort = () => {
+        setOpenShort(false)
+    }
+
+    const handleCloseLong= () => {
+        setOpenLong(false)
+    }
+
+    return (
+        <>
+            <Button
+                onClick={handleClickShort}
+                text="Short Multiline"
+                variant="secondary"
+                {...props}
+            />
+            {' '}
+            <Button
+                onClick={handleClickLong}
+                text="Long Multiline"
+                variant="secondary"
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                closeable 
+                horizontal='center'
+                multiLine
+                onClose={handleCloseShort}
+                open={openShort}
+                status='tip'
+                text='Multi-line is used when the given text will not fit on one line.'
+                vertical='top'
+                {...props}
+            />
+
+            <FixedConfirmationToast
+                closeable
+                horizontal='center'
+                multiLine
+                onClose={handleCloseLong}
+                open={openLong}
+                status='tip'
+                text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
+                vertical='top'
+                {...props}
+            />
+        </>
+    )
 }
 
 export default FixedConfirmationToastMultiLine

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -75,8 +75,6 @@
     })
   }
 
-  hideToasts()
-
   buttons.forEach((button) => {
     button.onclick = () => {
       hideToasts()
@@ -88,3 +86,10 @@
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -2,14 +2,15 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>
-        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
     <% end %>
 
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb

@@ -46,7 +46,3 @@
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
-
-
-
-</div>

data/app/pb_kits/playbook/pb_flex/flex.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_flex/flex_item.html.erb

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

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 %>