playbook_ui 13.15.0.pre.alpha.reactselectbump581876 → 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ca676b218e6956f950563cede091218e594c685e9c902ba0e5b7478e0561c1c
-  data.tar.gz: af5307c638dc31401f477054c274923745611d3c1568d28c3d26cf0129912953
+  metadata.gz: d3d5b87f2b6c16e79587bb3c5e948214ab861f720b447f1de049940fe74d6d3f
+  data.tar.gz: 35f0b35d0c9e112c30f0ca5af3916e1b57f05068650e320c1da973a97cf12936
 SHA512:
-  metadata.gz: fb7968ecdf0f3d18fbd18a6f55111189137d5007b73b6fb0a00f52749430de3b439877539dfb156ffd847ca3d34de035cc13bd74055c42c21f8d1f86f621fe4b
-  data.tar.gz: 1e0bc3be07289cc06e6143304203cd20cd3e831e5cbe604f05a8e5229688a9240166a618293537a70ae2f34ef276604c0aa2e987f453d16554683bf7a146b689
+  metadata.gz: dcec116e1d5fb1e095e0b92fec1a0a80f85407472821bcd7a22bafdafbd6e3d412d72237ab150c3338e934043e7a5427e567ceb87b2615836716e1cf2928c5a1
+  data.tar.gz: 88b6924b8a19996f02acad09f739e80a04aec6c2caf49374bb5ec37709f84939c29ecc8a9e591297d4d436c5e80c2c5060552423a073ba1bc3be4c02e38b4be8

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -122,9 +122,11 @@ const highchartsDarkTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: [{
+    background: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
+      // @ts-ignore
       borderColor: colors.border_dark,
-    }],
+    },
   },
 
   plotOptions: {

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -122,9 +122,11 @@ const highchartsTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: [{
-      borderColor: colors.border_light,
-    }],
+    background: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
+      // @ts-ignore
+      borderColor: colors.border_light, 
+    },
   },
 
   plotOptions: {

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 {
@@ -47,7 +46,7 @@
   .text_input_wrapper_add_on .add-on-right .text_input{
     cursor: pointer;
   }
-  
+
 }
 
 
@@ -76,4 +75,4 @@
   &:after {
     content: none;
   }
-}
+}

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

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
+import { Spacing } from "../types"
+
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
@@ -9,6 +11,7 @@ import Icon from '../pb_icon/_icon'
 import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 
+
 type DatePickerProps = {
   allowInput?: boolean,
   aria?: { [key: string]: string },
@@ -34,6 +37,13 @@ type DatePickerProps = {
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   inputValue?: string,
   label?: string,
+  margin?: Spacing;
+  marginBottom?: Spacing;
+  marginTop?: Spacing;
+  marginRight?: Spacing;
+  marginLeft?: Spacing;
+  marginX?: Spacing;
+  marginY?: Spacing;
   maxDate: string,
   minDate: string,
   name: string,
@@ -78,6 +88,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     inputOnChange,
     inputValue,
     label = 'Date Picker',
+    margin,
+    marginBottom = "sm",
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY,
     maxDate,
     minDate,
     mode = 'single',
@@ -134,8 +151,33 @@ useEffect(() => {
     required: false,
   }, scrollContainer)
 })
+
+  const spacingMarginProps = {
+    margin,
+    marginBottom,
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY,
+  }
+
   const filteredProps = {...props}
   delete filteredProps?.position
+  delete filteredProps?.margin;
+  delete filteredProps?.marginX;
+  delete filteredProps?.marginY;
+  delete filteredProps?.marginBottom;
+  delete filteredProps?.marginTop;
+  delete filteredProps?.marginRight;
+  delete filteredProps?.marginLeft;
+
+  const inputClasses = classnames(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    globalProps(spacingMarginProps),
+    className
+  )
 
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
@@ -179,7 +221,7 @@ useEffect(() => {
             text={hideLabel ? null : label}
         />
           <>
-            <div className="date_picker_input_wrapper">
+            <div className={`date_picker_input_wrapper ${inputClasses}`}>
               <input
                   autoComplete="off"
                   className="date_picker_input"

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

@@ -19,6 +19,7 @@
         name: object.name,
         placeholder: object.placeholder,
         required: object.required,
+        classname: margins_to_remove.join(" ")
       }) %>
     <% end %>
 
@@ -80,4 +81,4 @@
       }
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -74,8 +74,22 @@ module Playbook
       prop :year_range, type: Playbook::Props::Array,
                         default: [1900, 2100]
 
+      def margins_to_remove
+        margin_classes_to_remove = []
+        margin_classes_to_remove << "m_#{object.margin}" if object.margin
+        margin_classes_to_remove << "mx_#{object.margin_x}" if object.margin_x
+        margin_classes_to_remove << "my_#{object.margin_y}" if object.margin_y
+        margin_classes_to_remove << "mb_#{object.margin_bottom}" if object.margin_bottom
+        margin_classes_to_remove << "mt_#{object.margin_top}" if object.margin_top
+        margin_classes_to_remove << "mr_#{object.margin_right}" if object.margin_right
+        margin_classes_to_remove << "ml_#{object.margin_left}" if object.margin_left
+        margin_classes_to_remove
+      end
+
       def classname
-        generate_classname("pb_date_picker_kit")
+        regex = Regexp.union(margins_to_remove)
+        classnames = generate_classname("pb_date_picker_kit")
+        classnames.gsub(regex, "").strip.gsub(/\s+/, " ")
       end
 
       def date_picker_config

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

@@ -70,12 +70,15 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const shouldShowAddOn = icon !== null
   const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
   const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
+  const defaultMarginBottom = props.marginBottom ?? "mb_sm"
+
   const css = classnames([
     'pb_text_input_kit',
     inline ? 'inline' : "",
     error ? 'error' : "",
     globalProps(props),
     className,
+    defaultMarginBottom
   ])
   const addOnIcon = (
     <Icon
@@ -144,7 +147,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && 
+      {label &&
         <Caption
             className="pb_text_input_kit_label"
             text={label}

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

@@ -25,8 +25,12 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
+      def default_margin_bottom
+        object.margin_bottom.present? ? "" : " mb_sm"
+      end
+
       def classname
-        generate_classname("pb_text_input_kit") + error_class + inline_class
+        generate_classname("pb_text_input_kit") + error_class + inline_class + default_margin_bottom
       end
 
       def input_tag