[PBNTR-515] Remove margin bottom from Typeahead kit, un-revert PBNTR-479

playbook/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;

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

@@ -107,4 +107,18 @@ 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')
+  expect(kit).toHaveClass("pb_typeahead_kit mb_sm")
+  const textInput = kit.querySelector(".pb_text_input_kit")
+  expect(textInput).toHaveClass("mb_none")
 })

playbook/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,6 +77,7 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
+  marginBottom = "sm",
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -134,6 +136,7 @@ const Typeahead = ({
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
+    `mb_${marginBottom}`,
     globalProps(props),
     className
   )

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

@@ -11,14 +11,15 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
+        dark={props.selectProps.dark}
+        error={props.selectProps.error}
+        label={props.selectProps.label}
+        marginBottom="none"
     >
       <Flex>
         <components.Control
-          className="text_input"
-          {...props}
+            className="text_input"
+            {...props}
         />
       </Flex>
     </TextInput>

playbook/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 %>

playbook/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

playbook/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

playbook/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'

playbook/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 %>

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

@@ -34,9 +34,13 @@ class Typeahead < Playbook::KitBase
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
       prop :value
+      prop :margin_bottom, type: Playbook::Props::Enum,
+                           values: %w[none xxs xs sm md lg xl],
+                           default: "sm"
 
       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 @@ def typeahead_react_options
           inline: inline,
           isMulti: is_multi,
           label: label,
+          marginBottom: margin_bottom,
           multiKit: multi_kit,
           name: name,
           options: options,

playbook/spec/pb_kits/playbook/kits/typeahead_spec.rb

@@ -17,6 +17,7 @@
   it { is_expected.to define_prop(:inline).with_default(false) }
   it { is_expected.to define_prop(:label) }
   it { is_expected.to define_prop(:load_options) }
+  it { is_expected.to define_prop(:margin_bottom).with_default("sm") }
   it { is_expected.to define_prop(:name) }
   it {
     is_expected.to define_prop(:options)
@@ -32,7 +33,7 @@
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
-      expect(subject.new({}).classname).to eq "pb_typeahead_kit"
+      expect(subject.new({}).classname).to eq "pb_typeahead_kit mb_sm"
     end
   end
 end

playbook/spec/pb_kits/playbook/pb_typeahead/typeahead_spec.rb

@@ -8,6 +8,7 @@
   it { is_expected.to define_prop(:async).with_default(false) }
   it { is_expected.to define_prop(:label) }
   it { is_expected.to define_prop(:load_options) }
+  it { is_expected.to define_prop(:margin_bottom).with_default("sm") }
   it { is_expected.to define_prop(:multi_kit).with_default("") }
   it { is_expected.to define_prop(:name) }
   it { is_expected.to define_prop(:options).with_default([]) }