playbook_ui 13.21.0.pre.alpha.PBNTR243globalpositioningpropinset2504 → 13.21.0.pre.alpha.PLAY12582474

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 862f27be95870b310dd89d38cd466bca0175ffa286df0b80b62c581e604e9db4
-  data.tar.gz: 31c27ba009fba844f070688d282d59631f86091635854517ea3714c7fae6ad8c
+  metadata.gz: 1cac7b0753d888ee1b718932bbbb638ebad8f37d7e3b30dfb683dd0a575cbcad
+  data.tar.gz: d9e47ec1c043e9358f3618c0510484ebfce1d346743377228ca016336072dd3f
 SHA512:
-  metadata.gz: 67145d68c85367df0bf1c7bf5d409955e27a5e9c0a170dfa0139a215471cbd4b93ccf53b94a7f2d4448f0da4adcee9a3fa02a7ea6636df8b540bef34a19a027d
-  data.tar.gz: 819ba714430f9efd7109f822dbb20e01d7e00d004557522fe51a6290d024af97d23ba401365398192bce5f4f2f132db4526433093664e58091d9e27f749f7bf1
+  metadata.gz: f07bcb349a1e387b6497cbc75fdc31fb39ee33c259515670723642d7484d8da526f20f6484c5beda1086e7d8aa36ecc0b25f0e1b6aa3e021095571949a839e07
+  data.tar.gz: b6c92cff8163105411b1d21bb9b065b725f775af4fea9f760ba945a04437e0f00da16b80cf346a37f5e681da3884f97c30cfa373621ab7409c277704daf2016a

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 {
@@ -75,4 +76,4 @@
   &:after {
     content: none;
   }
-}
+}

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

@@ -135,9 +135,6 @@ 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,7 +17,6 @@
         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,
@@ -82,4 +81,4 @@
       }
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -75,8 +75,7 @@ module Playbook
                         default: [1900, 2100]
 
       def classname
-        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_date_picker_kit") + default_margin_bottom
+        generate_classname("pb_date_picker_kit")
       end
 
       def date_picker_config

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 mb_sm')
+    expect(kit).toHaveClass('pb_date_picker_kit')
   })
 
   test('shows DatePicker date format m/d/Y', async () => {

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

@@ -20,7 +20,6 @@ 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
@@ -49,7 +48,6 @@ 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,7 +19,6 @@ 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,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_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

@@ -60,10 +60,6 @@ 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'
@@ -78,7 +74,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     'pb_text_input_kit',
     inline ? 'inline' : "",
     error ? 'error' : "",
-    globalProps(filteredProps),
+    globalProps(props),
     className,
   ])
   const addOnIcon = (

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

@@ -26,8 +26,7 @@ module Playbook
                     nested_kit: Playbook::PbTextInput::AddOn
 
       def classname
-        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
+        generate_classname("pb_text_input_kit") + error_class + inline_class
       end
 
       def input_tag

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} mb_sm`)
+  expect(kit).toHaveClass(kitClass)
 })
 
 test('returns additional class name', () => {

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -88,31 +88,18 @@ $space_classes: (
 
 $positions: "top", "right", "bottom", "left";
 
-
-@mixin position-property($position, $space_name, $space, $is_inset: false) {
-  @if $space_name == "0" {
-    #{$position}: 0 !important;
-  }
-  @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
-    #{$position}: #{$space} !important;
-  }
-  @else {
-    @if $is_inset {
-      #{$position}: #{$space} !important;
-    } @else {
-      #{$position}: #{-$space} !important;
-    }
-  }
-}
-
 @each $position in $positions {
   @each $space_name, $space in $space_classes {
-    $space_name_str: "#{ $space_name }";
-    .#{$position}_#{$space_name_str} {
-      @include position-property($position, $space_name_str, $space)
-    }
-    .#{$position}_#{$space_name_str}_inset {
-      @include position-property($position, $space_name_str, $space, true)
+    .#{$position}_#{$space_name} {
+      @if $space_name == "0" {
+        #{$position}: 0 !important;
+      }
+      @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
+        #{$position}: #{$space} !important;
+      }
+      @else {
+        #{$position}: #{-$space} !important;
+      }
     }
   }
 }

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -119,19 +119,19 @@ type Position = {
 }
 
 type Top = {
-  top?: Sizes | {value: string, inset: boolean},
+  top?: Sizes,
 }
 
 type Right = {
-  right?: Sizes | {value: string, inset: boolean},
+  right?: Sizes,
 }
 
 type Bottom = {
-  bottom?: Sizes | {value: string, inset: boolean},
+  bottom?: Sizes,
 }
 
 type Left = {
-  left?: Sizes | {value: string, inset: boolean},
+  left?: Sizes,
 }
 
 type Shadow = {
@@ -441,54 +441,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     return css
   },
 
-  topProps: ({ top }) => {
-    let css = "";
-    if (typeof top === 'string') {
-      css += `top_${top}`;
-    } else if (typeof top === 'object' && top.inset) {
-      css += `top_${top.value}_inset`;
-    } else if (typeof top === 'object' && !top.inset) {
-      css += `top_${top.value}`;
-    }
-    return css;
-  },
-  
-  rightProps: ({ right }) => {
-    let css = "";
-    if (typeof right === 'string') {
-      css += `right_${right}`;
-    } else if (typeof right === 'object' && right.inset) {
-      css += `right_${right.value}_inset`;
-    } else if (typeof right === 'object' && !right.inset) {
-      css += `right_${right.value}`;
-    }
-    return css;
-  },
-  
-  bottomProps: ({ bottom }) => {
-    let css = "";
-    if (typeof bottom === 'string') {
-      css += `bottom_${bottom}`;
-    } else if (typeof bottom === 'object' && bottom.inset) {
-      css += `bottom_${bottom.value}_inset`;
-    } else if (typeof bottom === 'object' && !bottom.inset) {
-      css += `bottom_${bottom.value}`;
-    }
-    return css;
-  },
-  
-  leftProps: ({ left }) => {
-    let css = "";
-    if (typeof left === 'string') {
-      css += `left_${left}`;
-    } else if (typeof left === 'object' && left.inset) {
-      css += `left_${left.value}_inset`;
-    }else if (typeof left === 'object' && !left.inset) {
-      css += `left_${left.value}`;
-    }
-    return css;
-  },
-  
+  topProps: ({ top }: Top) => top ? `top_${top}` : '',
+  rightProps: ({ right }: Right) => right ? `right_${right}` : '',
+  bottomProps: ({ bottom }: Bottom) => bottom ? `bottom_${bottom}` : '',
+  leftProps: ({ left }: Left) => left ? `left_${left}` : '',
+
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')