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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18291ca0456980f9a06e2b9c3a910f801022cdf274409cb2cab0934aa8be8776
-  data.tar.gz: 2f0d3114f36aadb7baf289ff5409a338128892a719a3fa5181e1ad4930c9df1a
+  metadata.gz: d3d5b87f2b6c16e79587bb3c5e948214ab861f720b447f1de049940fe74d6d3f
+  data.tar.gz: 35f0b35d0c9e112c30f0ca5af3916e1b57f05068650e320c1da973a97cf12936
 SHA512:
-  metadata.gz: 122b812d9296134396d95761119769934f705cc2ccff6c4fbaddfdda3b62b2b9b1dc4dda5961113c4cfa9c2e388c1ed63b0973d7c55fc8383ea021693d9c0ea0
-  data.tar.gz: 0f2977528ef40e2169bdb398a5e47aa9d3afafb0356eb8543dec4bbed9d8f8e038985bfe749835da77ff3db799ffaa2a0047496ac1a7c3a05855394e8cab1e36
+  metadata.gz: dcec116e1d5fb1e095e0b92fec1a0a80f85407472821bcd7a22bafdafbd6e3d412d72237ab150c3338e934043e7a5427e567ceb87b2615836716e1cf2928c5a1
+  data.tar.gz: 88b6924b8a19996f02acad09f739e80a04aec6c2caf49374bb5ec37709f84939c29ecc8a9e591297d4d436c5e80c2c5060552423a073ba1bc3be4c02e38b4be8

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_select/_select.scss

@@ -102,29 +102,20 @@
     pointer-events: none;
   }
   &.inline {
-    @mixin active_arrow_style {
-      svg {
-        color: $primary !important;
-        font-size: 16px;
-      }
-    }
     &:not(:hover) {
       svg {
         display: none;
       }
     }
-    &.show_arrow:not(:hover) {
-      svg {
-        display: block;
-      }
-      @include active_arrow_style();
-    }
     &:hover {
-      @include active_arrow_style();
       select {
         color: $primary !important;
         background: rgba(0,130,255,0.1);
       }
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
     }
     select {
       box-shadow: none;

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -36,7 +36,6 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
-  showArrow?: boolean,
   value?: string,
 } & GlobalProps
 
@@ -64,10 +63,9 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => undefined,
+  onChange = () => {},
   options = [],
   required = false,
-  showArrow = false,
   value,
   ...props
 }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
@@ -79,16 +77,15 @@ const Select = ({
   const inlineClass = inline ? 'inline' : null
   const compactClass = compact ? 'compact' : null
   const classes = classnames(
-    buildCss("pb_select"),
+    buildCss('pb_select'),
     globalProps({
       ...props,
-      marginBottom: props.marginBottom || props.margin || "sm",
+      marginBottom: props.marginBottom || props.margin || 'sm',
     }),
     className,
     inlineClass,
-    { show_arrow: showArrow },
     compactClass
-  );
+  )
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{

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

@@ -10,7 +10,6 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
-  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
@@ -27,7 +26,6 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
-  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
 

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

@@ -7,6 +7,5 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
-export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'

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

@@ -19,11 +19,10 @@ module Playbook
       prop :name
       prop :onchange
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
-      prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classnames
-        classname + inline_class + compact_class + show_arrow_class
+        classname + inline_class + compact_class
       end
 
       def all_attributes
@@ -50,10 +49,6 @@ module Playbook
         compact ? "compact" : ""
       end
 
-      def show_arrow_class
-        show_arrow ? "show_arrow" : ""
-      end
-
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       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

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