playbook_ui_docs 14.4.0.pre.rc.16 → 14.5.0.pre.alpha.PBNTR568dropdowncleaning4041

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e3f91e117875db899b6462992d51c4dd25253aa31334f20c103916a2f613bd7
-  data.tar.gz: 8c1d353d202668c7e6bee8a768ee3ab12b97d2d649b845cd8dfea69c773d057c
+  metadata.gz: 550a78afc5639eda507b62f2abe64f654af17384358db564067e9240c59e9ead
+  data.tar.gz: 51e4219653158ac47821532074b2209a3025788ade3a9a70bd1f66c6ab4d502c
 SHA512:
-  metadata.gz: e439008d17a257bd9d934722ad010d648ec43547e1fcdb3c3e65977f334bc31b0b314b6f4604eb1c54b5fa2ab6ae019578b184f1f2398760145fe41574422bdb
-  data.tar.gz: 39ab8b54014ad6979cbbf81bf6919b099eb0fae7b1d37b0fe9ef2538daa9a5c07c6684eb3c49a0ba34b90bff354fbb54f65102ba1f11cb5bc97d6993431b2f71
+  metadata.gz: b85ca3057f7e63e2ff0767fb520416760b6cb220257c1a0132fbe0e7b8a3c121d6d5ee7b3229afb4e566c6d07522f0bfd5df8aca04a23382bb733567827ad565
+  data.tar.gz: ccd627b942f3aa982fbe8daceb72e450b09a6c3dea03ea1c93c294423396e13fa2d1b078030233cbdfd0b0698c107c1d622405421663644c78653b0e0815b650

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -14,4 +14,4 @@
     }
     fpInline.config.onChange.push(showAngleDownHandler)
   })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerBorders = () => {
+  // Individual state variables for each drawer size
+  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
+  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
+  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
+  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
+  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
+  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
+  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
+  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
+  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
+
+  return (
+    <>
+      <Flex padding="md"
+          wrap
+      >
+        <Button marginRight="md"
+            onClick={toggleBRightDrawer}
+        >
+         Drawer with border right
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBLeftDrawer}
+        >
+         Drawer with border left
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBFullDrawer}
+        >
+          Drawer with border full
+        </Button>
+        <Button marginRight="md"    
+            onClick={toggleBDefaultDrawer}
+        >
+          Default Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBRoundedDrawer}
+        > 
+          Rounded Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="float"
+          border="right"
+          fullHeight
+          onClose={toggleBRightDrawer}
+          opened={openedBRightDrawer}
+          overlay={false}
+          placement="left"
+          size="lg"
+      >
+        This is a Drawer with border right  
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="left"
+          fullHeight
+          onClose={toggleBLeftDrawer}
+          opened={openedBLeftDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border left
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="full"
+          fullHeight
+          onClose={toggleBFullDrawer}
+          opened={openedBFullDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border full
+      </Drawer>
+      <Drawer
+          behavior="float"
+          fullHeight
+          onClose={toggleBDefaultDrawer}
+          opened={openedBDefaultDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >   
+        This is a Default Drawer
+      </Drawer>
+      <Drawer
+          behavior="float"
+          borderRadius="rounded"
+          fullHeight
+          onClose={toggleBRoundedDrawer}
+          opened={openedBRoundedDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
+        This is a Rounded Drawer
+      </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerBorders;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleSmallDrawer}
+        >
+          {"Will open at small breakpoint"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}
+            breakpoint="sm"
+            fullHeight
+            onClose={toggleSmallDrawer}
+            opened={smallDrawerOpened}
+            overlay={false}
+            placement={"right"}
+            size={"lg"}
+        >
+          Open because small breakpoint 
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+
+export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("drawer") %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DrawerDefault = () => {
+  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
+  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
+
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleHeaderSeparatorDrawer}
+        >
+          {"Left Drawer"}
+        </Button>
+        <Button
+            marginRight="xl"
+            onClick={toggleBothSeparatorsDrawer}
+        >
+          {"Right Drawer"}
+        </Button>
+      </Flex>
+      <Flex>
+        {/* Left Drawer */}
+        <Drawer
+            behavior={"push"}
+            fullHeight
+            onClose={toggleHeaderSeparatorDrawer}
+            opened={headerSeparatorDrawerOpened}
+            overlay
+            placement={"left"}
+            size={"lg"}
+        >
+          Test me (Left Drawer)
+        </Drawer>
+
+        {/* Right Drawer */}
+        <Drawer
+            behavior={"push"}
+            fullHeight
+            onClose={toggleBothSeparatorsDrawer}
+            opened={bothSeparatorsDrawerOpened}
+            overlay
+            placement={"right"}
+            size={"lg"}
+        >
+          Test me (Right Drawer)
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+
+export default DrawerDefault;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
+
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight="md"
+            onClick={toggleNoOverlayDrawer}
+        >
+          No Overlay Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleOverlayDrawer}
+        >
+          Overlay Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleNoOverlayDrawer}
+          opened={openedNoOverlayDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with no overlay
+      </Drawer>
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleOverlayDrawer}
+          opened={openedOverlayDrawer}
+          overlay
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with an overlay 
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerSizes;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
+  const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
+  const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
+  const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
+  const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
+  const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
+  const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
+  const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
+  const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
+
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight="md"
+            onClick={toggleXsDrawer}
+        >
+          XS Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleSmDrawer}
+        >
+          SM Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleMdDrawer}
+        >
+          MD Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleLgDrawer}
+        >
+          LG Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleXlDrawer}
+        >
+          XL Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleXsDrawer}
+          opened={openedXsDrawer}
+          overlay
+          placement="right"
+          size="xs"
+      >
+        XS 
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleSmDrawer}
+          opened={openedSmDrawer}
+          overlay
+          placement="right"
+          size="sm"
+      >
+        This is an SM Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleMdDrawer}
+          opened={openedMdDrawer}
+          overlay
+          placement="right"
+          size="md"
+      >
+        This is an MD Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleLgDrawer}
+          opened={openedLgDrawer}
+          overlay
+          placement="right"
+          size="lg"
+      >
+        This is an LG Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleXlDrawer}
+          opened={openedXlDrawer}
+          overlay
+          placement="right"
+          size="xl"
+      >
+        This is an XL Drawer
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerSizes;

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - drawer_default: Default
+  
+  
+  react:
+  - drawer_default: Default
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_borders: Borders 
+  - drawer_breakpoints: Open on Breakpoints 

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

@@ -0,0 +1,5 @@
+export { default as DrawerDefault } from './_drawer_default.jsx'
+export { default as DrawerSizes } from './_drawer_sizes.jsx'
+export { default as DrawerOverlay } from './_drawer_overlay.jsx'
+export { default as DrawerBorders } from './_drawer_borders.jsx'
+export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { Button, Dropdown } from 'playbook-ui'
+
+const options = [
+    {
+        label: "United States",
+        value: "United States",
+    },
+    {
+        label: "Canada",
+        value: "Canada",
+    },
+    {
+        label: "Pakistan",
+        value: "Pakistan",
+    }
+]
+
+const DropdownClearSelection = (props) => {
+    const dropdownRef = useRef(null)
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                defaultValue={options[2]}
+                options={options}
+                ref={dropdownRef}
+                {...props}
+            />
+            <Button
+                marginTop="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+        </>
+    )
+}
+
+export default DropdownClearSelection

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

@@ -22,6 +22,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_clear_selection: Clear Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -30,7 +30,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>
@@ -64,7 +68,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb

@@ -35,7 +35,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb

@@ -30,7 +30,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -69,7 +69,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb

@@ -24,7 +24,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -22,7 +22,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -23,7 +23,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -29,7 +29,11 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -0,0 +1,19 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Names",
+    pills: true,
+    truncate: 1,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const FormPillTruncatedText = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" }}}
+          isMulti
+          label="Names"
+          options={names}
+          truncate={1}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default FormPillTruncatedText