playbook_ui 13.21.0.pre.alpha.PLAY12582474 → 13.21.0.pre.alpha.PLAY12582514

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1cac7b0753d888ee1b718932bbbb638ebad8f37d7e3b30dfb683dd0a575cbcad
-  data.tar.gz: d9e47ec1c043e9358f3618c0510484ebfce1d346743377228ca016336072dd3f
+  metadata.gz: b0dd38dd97e8c632b8821888bfd3e15a2d357c941f76cb1e7672ad60450903f7
+  data.tar.gz: b8d9ead67a51d3d96dd50c71ee8a5f5e33f4be1112df425ca1ea9e7a1a3307c8
 SHA512:
-  metadata.gz: f07bcb349a1e387b6497cbc75fdc31fb39ee33c259515670723642d7484d8da526f20f6484c5beda1086e7d8aa36ecc0b25f0e1b6aa3e021095571949a839e07
-  data.tar.gz: b6c92cff8163105411b1d21bb9b065b725f775af4fea9f760ba945a04437e0f00da16b80cf346a37f5e681da3884f97c30cfa373621ab7409c277704daf2016a
+  metadata.gz: 654314ebddb64ce6547c51c51c434296381b9f70f3101610b5f8fd70712c2ecf1236c37e528d3a52828c2de237413106b039570ec051ce4fc115e5a4b6d12f60
+  data.tar.gz: 846774c0f9715ff7fbdad5a017e0308a921b62256db62e06fe6213cee136431b3cbab70fccb8ac99b283c064776b2ece40c0c1f1b8683a9243e56fde9053cb1d

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

@@ -11,7 +11,7 @@ module Playbook
       def render_row_and_children(row, column_definitions, current_depth = 0)
         output = ActiveSupport::SafeBuffer.new
 
-        output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
+        output << pb_rails("advanced_table/table_row", props: { row:, column_definitions:, depth: current_depth })
 
         if row[:children].present?
           row[:children].each do |child_row|

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -22,7 +22,7 @@ module Playbook
       end
 
       def online_status_props
-        { status: status, classname: "size_#{size}" }
+        { status:, classname: "size_#{size}" }
       end
 
       def alt_text

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -42,27 +42,27 @@ module Playbook
 
       def standard_options
         {
-          align: align,
-          id: id,
+          align:,
+          id:,
           className: classname,
           chartData: chart_data,
           dark: dark ? "dark" : "",
           type: chart_type,
-          title: title,
+          title:,
           subTitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
           xAxisCategories: x_axis_categories,
           yAxisMin: y_axis_min,
           yAxisMax: y_axis_max,
-          legend: legend,
+          legend:,
           toggleLegendClick: toggle_legend_click,
-          height: height,
-          colors: colors,
-          layout: layout,
+          height:,
+          colors:,
+          layout:,
           verticalAlign: vertical_align,
-          x: x,
-          y: y,
+          x:,
+          y:,
         }
       end
 

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

@@ -36,13 +36,13 @@ module Playbook
       def options
         options = {
           class: classname,
-          disabled: disabled,
-          id: id,
+          disabled:,
+          id:,
           role: "button",
           tabindex: 0,
-          type: type,
-          value: value,
-          form: form,
+          type:,
+          value:,
+          form:,
         }.compact
         combined_html_options.merge!(options) if combined_html_options.present?
       end

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -42,15 +42,15 @@ module Playbook
 
       def chart_options
         {
-          align: align,
-          id: id,
-          colors: colors,
+          align:,
+          id:,
+          colors:,
           chartData: chart_data,
           dark: dark ? "dark" : "",
-          title: title,
-          height: height,
+          title:,
+          height:,
           type: style,
-          legend: legend,
+          legend:,
           dataLabelHtml: data_label_html,
           dataLabels: data_labels,
           tooltipHtml: tooltip_html,
@@ -60,11 +60,11 @@ module Playbook
           innerSize: inner_size,
           zMin: z_min,
           startAngle: start_angle,
-          rounded: rounded,
-          layout: layout,
+          rounded:,
+          layout:,
           verticalAlign: vertical_align,
-          x: x,
-          y: y,
+          x:,
+          y:,
         }
       end
 

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -51,14 +51,14 @@ module Playbook
         {
           classname: "dollar_sign",
           color: "light",
-          dark: dark,
+          dark:,
         }
       end
 
       def caption_props
         {
           text: label,
-          dark: dark,
+          dark:,
         }
       end
 
@@ -67,7 +67,7 @@ module Playbook
           size: size_value,
           text: abbreviate ? abbreviated_value : whole_value,
           classname: "pb_currency_value",
-          dark: dark,
+          dark:,
         }
       end
 
@@ -76,7 +76,7 @@ module Playbook
           text: units_element,
           color: "light",
           classname: "unit",
-          dark: dark,
+          dark:,
         }
       end
 

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

@@ -17,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,
@@ -81,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
@@ -87,17 +88,17 @@ module Playbook
           disableRange: disable_range,
           disableWeekdays: disable_weekdays,
           enableTime: enable_time,
-          format: format,
+          format:,
           hideIcon: hide_icon,
-          inline: inline,
+          inline:,
           maxDate: max_date,
           minDate: min_date,
-          mode: mode,
+          mode:,
           pickerId: picker_id,
-          plugins: plugins,
-          position: position,
+          plugins:,
+          position:,
           positionElement: position_element,
-          required: required,
+          required:,
           selectionType: selection_type,
           showTimezone: show_timezone,
           staticPosition: static_position,

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/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_distribution_bar/distribution_bar.rb

@@ -23,9 +23,9 @@ module Playbook
 
       def chart_options
         {
-          size: size,
-          widths: widths,
-          colors: colors,
+          size:,
+          widths:,
+          colors:,
         }
       end
     end

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -16,7 +16,7 @@ module Playbook
         if type == "rails"
           render inline: source
         elsif type == "react"
-          react_component example_key.camelize, { dark: dark }
+          react_component example_key.camelize, { dark: }
         elsif type == "swift"
           ## render the markdown file
           render inline: source

data/app/pb_kits/playbook/pb_form/form.rb

@@ -18,11 +18,11 @@ module Playbook
 
       def form_options
         {
-          id: id,
-          aria: aria,
+          id:,
+          aria:,
           class: classname,
-          data: data,
-          validate: validate,
+          data:,
+          validate:,
         }.merge(prop(:options) || prop(:form_system_options) || {})
       end
     end

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -24,22 +24,22 @@ module Playbook
 
       def chart_options
         {
-          id: id,
+          id:,
           chartData: chart_data,
           circumference: full_circle ? [0, 360] : [-100, 100],
           dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
-          height: height,
-          min: min,
-          max: max,
-          title: title,
-          suffix: suffix,
-          prefix: prefix,
+          height:,
+          min:,
+          max:,
+          title:,
+          suffix:,
+          prefix:,
           showLabels: show_labels,
-          style: style,
+          style:,
           tooltipHtml: tooltip_html,
           type: style,
-          colors: colors,
+          colors:,
         }
       end
 

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -49,28 +49,28 @@ module Playbook
 
       def city_emphasis_props
         {
-          address_house_style: address_house_style,
-          address_house_style2: address_house_style2,
-          city_state: city_state,
-          dark: dark,
-          home_id: home_id,
-          home_url: home_url,
-          new_window: new_window,
-          territory: territory,
-          zip: zip,
+          address_house_style:,
+          address_house_style2:,
+          city_state:,
+          dark:,
+          home_id:,
+          home_url:,
+          new_window:,
+          territory:,
+          zip:,
         }
       end
 
       def street_emphasis_props
         {
-          address_house_style: address_house_style,
-          address_house_style2: address_house_style2,
-          city_state_zip: city_state_zip,
-          dark: dark,
-          home_id: home_id,
-          home_url: home_url,
-          new_window: new_window,
-          territory: territory,
+          address_house_style:,
+          address_house_style2:,
+          city_state_zip:,
+          dark:,
+          home_id:,
+          home_url:,
+          new_window:,
+          territory:,
         }
       end
 

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_line_graph/line_graph.rb

@@ -40,27 +40,27 @@ module Playbook
 
       def chart_options
         {
-          align: align,
-          id: id,
+          align:,
+          id:,
           className: classname,
           chartData: chart_data,
           dark: dark ? "dark" : "",
           type: chart_type,
-          title: title,
+          title:,
           subTitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
           xAxisCategories: x_axis_categories,
           yAxisMin: y_axis_min,
           yAxisMax: y_axis_max,
-          legend: legend,
+          legend:,
           toggleLegendClick: toggle_legend_click,
-          height: height,
-          colors: colors,
-          layout: layout,
+          height:,
+          colors:,
+          layout:,
           verticalAlign: vertical_align,
-          x: x,
-          y: y,
+          x:,
+          y:,
         }
       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_multi_level_select/multi_level_select.rb

@@ -26,14 +26,14 @@ module Playbook
 
       def multi_level_select_options
         {
-          id: id,
+          id:,
           inputDisplay: input_display,
-          name: name,
+          name:,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          input_name: input_name,
-          variant: variant,
+          input_name:,
+          variant:,
         }
       end
     end

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -18,15 +18,15 @@ module Playbook
 
       def passphrase_options
         {
-          dark: dark,
-          id: id,
-          confirmation: confirmation,
+          dark:,
+          id:,
+          confirmation:,
           inputProps: input_props,
-          label: label,
+          label:,
           showTipsBelow: show_tips_below,
-          tips: tips,
+          tips:,
           uncontrolled: true,
-          value: value,
+          value:,
         }.compact
       end
     end

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

@@ -28,17 +28,17 @@ module Playbook
 
       def phone_number_input_options
         {
-          id: id,
-          dark: dark,
-          disabled: disabled,
-          error: error,
+          id:,
+          dark:,
+          disabled:,
+          error:,
           initialCountry: initial_country,
-          label: label,
-          name: name,
+          label:,
+          name:,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
-          required: required,
-          value: value,
+          required:,
+          value:,
         }
       end
     end

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -39,16 +39,16 @@ module Playbook
 
       def rich_text_options
         {
-          id: id,
-          inline: inline,
+          id:,
+          inline:,
           className: classname,
-          focus: focus,
-          simple: simple,
-          sticky: sticky,
+          focus:,
+          simple:,
+          sticky:,
           toolbarBottom: toolbar_bottom,
-          value: value,
-          template: template,
-          placeholder: placeholder,
+          value:,
+          template:,
+          placeholder:,
         }
       end
     end

data/app/pb_kits/playbook/pb_select/select.rb

@@ -28,13 +28,13 @@ module Playbook
 
       def all_attributes
         {
-          id: id,
+          id:,
           prompt: blank_selection,
-          disabled: disabled,
-          required: required,
-          multiple: multiple,
-          onchange: onchange,
-          include_blank: include_blank,
+          disabled:,
+          required:,
+          multiple:,
+          onchange:,
+          include_blank:,
         }.merge(attributes)
       end
 

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -42,7 +42,7 @@ module Playbook
       def additional_input_options
         input_options.merge(
           id: input_id_present,
-          disabled: disabled
+          disabled:
         )
       end