playbook_ui_docs 14.3.2.pre.alpha.revert3614PBNTR455ganttchartPOC3783 → 14.4.0.pre.alpha.PLAY1529removefaeasy3876

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

@@ -0,0 +1,31 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
+<% end %>

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Typeahead } from 'playbook-ui'
+
+const options = [
+  { label: 'Windows', value: '#FFA500' },
+  { label: 'Siding', value: '#FF0000' },
+  { label: 'Doors', value: '#00FF00' },
+  { label: 'Roofs', value: '#0000FF' },
+]
+
+const TypeaheadWithPills = (props) => {
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Colors"
+          options={options}
+          pillColor="neutral"
+          placeholder=""
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPills

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md

@@ -0,0 +1 @@
+Change the form pill color by passing the optional `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md

@@ -0,0 +1 @@
+Change the form pill color by passing the optional `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

@@ -9,6 +9,8 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
+    - typeahead_margin_bottom: Margin Bottom
+    - typeahead_with_pills_color: With Pills (Custom Color)
 
   react:
     - typeahead_default: Default
@@ -23,3 +25,5 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
+    - typeahead_margin_bottom: Margin Bottom
+    - typeahead_with_pills_color: With Pills (Custom Color)

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

@@ -10,3 +10,5 @@ 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'
+export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'