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

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

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

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -11,7 +11,7 @@ module Playbook
         if precision.nil?
           number_with_delimiter(value, delimiter: ",", separator: ".")
         else
-          number_with_precision(value, precision: precision, delimiter: ",", separator: ".")
+          number_with_precision(value, precision:, delimiter: ",", separator: ".")
         end
       end
 

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -3,7 +3,6 @@
 @import "../tokens/colors";
 
 [class^="pb_text_input_kit"] {
-  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -60,6 +60,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const filteredProps = {...props}
+  if (filteredProps.marginBottom === undefined) {
+     filteredProps.marginBottom = "sm"
+  }
 
   const { alignment, border, icon } = addOn
   const addOnAlignment = alignment === 'left' ? 'left' : 'right'
@@ -74,7 +78,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     'pb_text_input_kit',
     inline ? 'inline' : "",
     error ? 'error' : "",
-    globalProps(props),
+    globalProps(filteredProps),
     className,
   ])
   const addOnIcon = (

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -26,7 +26,8 @@ module Playbook
                     nested_kit: Playbook::PbTextInput::AddOn
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class + inline_class
+        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
+        generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
       end
 
       def input_tag
@@ -42,7 +43,7 @@ module Playbook
       end
 
       def add_on_props
-        { dark: dark }.merge(add_on || {})
+        { dark: }.merge(add_on || {})
       end
 
     private
@@ -52,14 +53,14 @@ module Playbook
           autocomplete: autocomplete ? nil : "off",
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,
-          disabled: disabled,
+          disabled:,
           id: input_options.dig(:id) || id,
-          name: name,
+          name:,
           pattern: validation_pattern,
-          placeholder: placeholder,
-          required: required,
-          type: type,
-          value: value,
+          placeholder:,
+          required:,
+          type:,
+          value:,
         }.merge(input_options)
       end
 

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -16,7 +16,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(kitClass)
+  expect(kit).toHaveClass(`${kitClass} mb_sm`)
 })
 
 test('returns additional class name', () => {

data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb

@@ -23,13 +23,13 @@ module Playbook
         {
           chartData: chart_data,
           className: classname,
-          colors: colors,
+          colors:,
           dark: dark ? "dark" : "",
-          drillable: drillable,
-          grouped: grouped,
-          height: height,
-          id: id,
-          title: title,
+          drillable:,
+          grouped:,
+          height:,
+          id:,
+          title:,
           tooltipHtml: tooltip_html,
           type: chart_type,
         }

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -57,17 +57,17 @@ module Playbook
 
       def typeahead_react_options
         base_options = {
-          dark: dark,
+          dark:,
           defaultValue: default_options,
-          error: error,
-          id: id,
-          inline: inline,
+          error:,
+          id:,
+          inline:,
           isMulti: is_multi,
-          label: label,
+          label:,
           multiKit: multi_kit,
-          name: name,
-          options: options,
-          placeholder: placeholder,
+          name:,
+          options:,
+          placeholder:,
           plusIcon: plus_icon,
         }