playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3d5b87f2b6c16e79587bb3c5e948214ab861f720b447f1de049940fe74d6d3f
-  data.tar.gz: 35f0b35d0c9e112c30f0ca5af3916e1b57f05068650e320c1da973a97cf12936
+  metadata.gz: fd6f86769005f1cf4bd5400be7f925bf38d3e16560fbec5da24158c969873663
+  data.tar.gz: 5c879bd8ecc90a4e2d02adbab1d208f81098708f949e60ece5c95eb2875bd81e
 SHA512:
-  metadata.gz: dcec116e1d5fb1e095e0b92fec1a0a80f85407472821bcd7a22bafdafbd6e3d412d72237ab150c3338e934043e7a5427e567ceb87b2615836716e1cf2928c5a1
-  data.tar.gz: 88b6924b8a19996f02acad09f739e80a04aec6c2caf49374bb5ec37709f84939c29ecc8a9e591297d4d436c5e80c2c5060552423a073ba1bc3be4c02e38b4be8
+  metadata.gz: 3d4bfff63b93a145834de3cfe80f3ecfa04f3d29ef10e7194fe2ad9149111a61efaeb70557b289db0fe499b1297e150ef0008af6f712289f45a84eaa83eab120
+  data.tar.gz: 94718a4b5a91761a32365bcb149b47c4e2aaea0a58fbc9860773117069875627018e92ea69626de9556d064fa50fde854107eee264e86bbede4d5bf0e14054da

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

@@ -14,9 +14,3 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
-
-  swift:
-  - collapsible_default_swift: Default
-  - collapsible_sizes_swift: Sizes
-  - collapsible_colors_swift: Colors
-  - collapsible_props_table: ""

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

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

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

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

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

@@ -10,6 +10,7 @@
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
+    margin-bottom: $space_sm;
     position: relative;
 
     .flatpickr-wrapper {
@@ -46,7 +47,7 @@
   .text_input_wrapper_add_on .add-on-right .text_input{
     cursor: pointer;
   }
-
+  
 }
 
 
@@ -75,4 +76,4 @@
   &:after {
     content: none;
   }
-}
+}

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

@@ -1,8 +1,6 @@
 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'
 
@@ -11,7 +9,6 @@ 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 },
@@ -37,13 +34,6 @@ 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,
@@ -88,13 +78,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     inputOnChange,
     inputValue,
     label = 'Date Picker',
-    margin,
-    marginBottom = "sm",
-    marginTop,
-    marginRight,
-    marginLeft,
-    marginX,
-    marginY,
     maxDate,
     minDate,
     mode = 'single',
@@ -151,33 +134,8 @@ 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'),
@@ -221,7 +179,7 @@ useEffect(() => {
             text={hideLabel ? null : label}
         />
           <>
-            <div className={`date_picker_input_wrapper ${inputClasses}`}>
+            <div className="date_picker_input_wrapper">
               <input
                   autoComplete="off"
                   className="date_picker_input"

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

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

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

@@ -74,22 +74,8 @@ 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
-        regex = Regexp.union(margins_to_remove)
-        classnames = generate_classname("pb_date_picker_kit")
-        classnames.gsub(regex, "").strip.gsub(/\s+/, " ")
+        generate_classname("pb_date_picker_kit")
       end
 
       def date_picker_config

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

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

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

@@ -42,20 +42,3 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
-
-  swift:
-  - nav_vertical_default_swift: Vertical Default
-  - nav_vertical_subtle_swift: Vertical Subtle
-  - nav_vertical_subtle_no_highlight_swift: Vertical Subtle No Highlight
-  - nav_vertical_bold_swift: Vertical Bold
-  - nav_horizontal_default_swift: Horizontal Default
-  - nav_horizontal_subtle_swift: Horizontal Subtle
-  - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
-  - nav_horizontal_bold_swift: Horizontal Bold
-  - nav_props_swift: ""
-
-
-
-  
-
-  

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

@@ -3,6 +3,7 @@
 @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,15 +70,12 @@ 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
@@ -147,7 +144,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,12 +25,8 @@ 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 + default_margin_bottom
+        generate_classname("pb_text_input_kit") + error_class + inline_class
       end
 
       def input_tag