playbook_ui 14.2.0 → 14.2.1.pre.alpha.PBNTR479removeextraspacingfromradiochildren3671

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 96bcbc355f0f0c460a0785dd98e96219a1536dd5968e5432a5dd1ab31f210601
-  data.tar.gz: afb31b40160a14734e11c2bf5fff5a5bb7625206aec7e93f90c397786740930f
+  metadata.gz: a098ecd4904a9a1556b4ca07981470f95fe8e8fab7cc23a1233757a2e464eeec
+  data.tar.gz: 32bff33341da40b5eb9fbb9181e186dd599b0462ead7718006e8321dc4b4d8d7
 SHA512:
-  metadata.gz: 7f4fffedba94d1f391506066ac2808a9743b2b332e5098c50afd4074fea57ba5d69b4efbdf6941617bbaa9c4a41f88969e04d9d63c4c1957e5a3459e204ebded
-  data.tar.gz: 0b8a4f8d8394065ae4ea2e85d24dd7955b14063d38388348a7caf7593764f0ee7ec9c149f54721d75b4f68ea34dc5283ac3b26461cf4e4e2371b1bcf43dfc8fa
+  metadata.gz: 703269f687eaa900e408827c04ac3ac320c4336ca27fb4d2994d89ff2bba1743d9aa106ebf1e462f9b0946371dce790b9b239ccc67dd1068330358c467ba4726
+  data.tar.gz: 9a76788c8ad4f8d7a57af8704847ccfc01a3141ad7e92eb8547f6e10269355cad762e4c54804249217b2c165ebf9d567db91f23635141cd837639dae8275262c

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -60,6 +60,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__flag {
+    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
     border-radius: 1px;
   }
 
@@ -196,4 +197,10 @@ $flag-min-resolution: 192dpi;
       }
     }
   }
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
+    .iti__flag {
+      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+    }
+  }
 }

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

@@ -45,7 +45,6 @@
       }
     }
     .text_input_wrapper {
-      margin-bottom: 1rem;
       input::placeholder,
       .text_input .placeholder {
         @include pb_body_light_dark;

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -107,4 +107,17 @@ test('should pass className prop', () => {
 
   const kit = screen.getByTestId('typeahead-test')
   expect(kit).toHaveClass(className)
+})
+
+test('typeahead textinput has mb_sm class by default', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'default-mb-test' }}
+        options={options} 
+    />
+  )
+
+  const kit = screen.getByTestId('default-mb-test')
+  const textInput = kit.querySelector(".pb_text_input_kit")
+  expect(textInput).toHaveClass("mb_sm")
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -45,6 +45,7 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
+  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
 } & GlobalProps
 
 export type SelectValueType = {
@@ -76,12 +77,18 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
+  marginBottom = "sm",
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
     cacheOptions: true,
     components: {
-      Control,
+      Control: (controlProps: any) => (
+        <Control 
+            {...controlProps} 
+            marginBottom={marginBottom} 
+        />
+      ),
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null as null,

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -6,23 +6,30 @@ import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
   selectProps: any,
+  marginBottom?: string,
 }
 
-const TypeaheadControl = (props: Props) => (
-  <div className="pb_typeahead_wrapper">
-    <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
-    >
-      <Flex>
-        <components.Control
-          className="text_input"
-          {...props}
-        />
-      </Flex>
-    </TextInput>
-  </div>
-)
+const TypeaheadControl = (props: Props) => {
+  const { selectProps, marginBottom } = props
+  const { dark, error, label } = selectProps
+
+  return (
+    <div className="pb_typeahead_wrapper">
+      <TextInput
+          dark={dark}
+          error={error}
+          label={label}
+          marginBottom={marginBottom}
+      >
+        <Flex>
+          <components.Control
+              className="text_input"
+              {...props}
+          />
+        </Flex>
+      </TextInput>
+    </div>
+  )
+}
 
 export default TypeaheadControl

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb

@@ -0,0 +1,88 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "None",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "none",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XXS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xxs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Default - SM",
+    name: :foo,
+    is_multi: false,
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "MD",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "md",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "LG",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "lg",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XL",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xl",
+  })
+%>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadMarginBottom = (props) => {
+  return (
+    <>
+      <Typeahead
+          label="None"
+          marginBottom="none"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XXS"
+          marginBottom="xxs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="XS"
+          marginBottom="xs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="Default - SM"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="MD"
+          marginBottom="md"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="LG"
+          marginBottom="lg"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XL"
+          marginBottom="xl"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadMarginBottom

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

@@ -9,6 +9,7 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
+    - typeahead_margin_bottom: Margin Bottom
 
   react:
     - typeahead_default: Default
@@ -23,3 +24,4 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
+    - typeahead_margin_bottom: Margin Bottom

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

@@ -10,3 +10,4 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
 export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
+export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -20,7 +20,8 @@
         label: object.label,
         name: object.name,
         value: object.value,
-        placeholder: object.placeholder
+        placeholder: object.placeholder,
+        margin_bottom: "none",
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>

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

@@ -14,6 +14,9 @@ module Playbook
                     default: false
       prop :label
       prop :load_options
+      prop :margin_bottom, type: Playbook::Props::Enum,
+                           values: %w[none xxs xs sm md lg xl],
+                           default: "sm"
       prop :multi_kit, type: Playbook::Props::String,
                        default: ""
       prop :name
@@ -36,7 +39,8 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_typeahead_kit")
+        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
+        generate_classname("pb_typeahead_kit") + default_margin_bottom
       end
 
       def inline_class
@@ -65,6 +69,7 @@ module Playbook
           inline: inline,
           isMulti: is_multi,
           label: label,
+          marginBottom: margin_bottom,
           multiKit: multi_kit,
           name: name,
           options: options,