playbook_ui_docs 13.0.0 → 13.2.0.pre.alpha.PLAY986dateTimeRounding1150

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 51135798aedd7950657c2bb5395d2ca5d6a24ef73cd9d6896bd03698c22383b7
-  data.tar.gz: c5996c0b91ea99079247e9763ed70252235cebe185cf41608b32ec69d9e55421
+  metadata.gz: 90f6896845509edb763de24ac67790c51a4f59d7cefbb44a4e366e8365387e36
+  data.tar.gz: e3d50fff0e5bf4ac3ec0e7374f7b71e3804e057b77396d355f2e8376d8303eda
 SHA512:
-  metadata.gz: 8896446aaafd2f5f1c0ae0a713875738eb72a037493c039dd86eca14c32b9c42413c6dce3a92ef7c5f8f9687e5736bdcc86fbe2ee7776e34d53162e7bf4fb19a
-  data.tar.gz: e737d8d82b1e0f7cbd1fec4f47ef7bfee68ea1455b69acbf284d3eb329f94bc032b8626b94b6e277192bec32b31d122698969be5d8a47e16120f494f8e23867e
+  metadata.gz: 7df4fd817d0258ae5c6638320a14c37f8bbcfe11b105cce3f1e8da08a35343907839bf5f23b8ff4bab59bf83c2c4783158d450f1ecd1403e0053c1d0e9135b85
+  data.tar.gz: 762869ca5dd0867b61d5b6e5a0e69769f8684733fb413a4c988096a94ffabe4a9f1d49384b832821584aba0b42ad96b918550db7ef110c1a05da6364327315ce

data/app/pb_kits/playbook/pb_file_upload/docs/_description.md

@@ -1,7 +0,0 @@
-This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
-
-### Props
-
-`accept: [String]` Use this prop to set the list of valid file types
-`customMessage: [String]` Use this prop to set a custom message, replacing the default text
-`onFilesAccepted: Function` The callback function, providing the list of dropped files

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("file_upload", props: {id: "import_file"}) do %>
+  <input
+    id="import_file"
+    type="file"
+    name="import_file"
+  />
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom.md

@@ -0,0 +1 @@
+The `id` for the File Upload and the existing input you are choosing to wrap with our Kit with must match each other. This will ensure that the click on the button a.k.a, the underlying label's `for`, triggers the File Upload.

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.html.erb

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

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

@@ -1,6 +1,8 @@
 examples:
 
   rails:
+  - file_upload_default: File Upload
+  - file_upload_custom: Custom
 
   react:
   - file_upload_default: Default List of files to upload

data/app/pb_kits/playbook/pb_file_upload/docs/test.html

@@ -0,0 +1,25 @@
+
+  <div class="pb_file_upload_kit" id="import_file">
+    <div class="pb_form_group_kit cursor_pointer">
+      <label for="import_file" class="pb_button_kit_secondary_inline_enabled">Upload File</label>
+      <div class="pb_text_input_kit">
+        <div class=" text_input_wrapper">
+          <input placeholder="custom-placeholder" id="import_file" type="file">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h1>not custom</h1>
+
+  <div class="pb_file_upload_kit" id="test">
+    <div class="pb_form_group_kit cursor_pointer">
+      <label for="upload-test" class="pb_button_kit_secondary_inline_enabled">Upload File</label>
+      <div class="pb_text_input_kit">
+        <div class=" text_input_wrapper">
+          <input class="text_input cursor_pointer" id="upload-test" type="file" classname="cursor_pointer">
+        </div>
+      </div>
+    </div>
+  </div>
+ 

data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx

@@ -5,7 +5,7 @@ import NavItem from '../_item'
 
 const BlockNoTitleNav = (props) => {
   return (
-    <Nav>
+    <Nav {...props}>
       <NavItem
           iconLeft="newspaper"
           link="#"

data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const BorderlessNav = (props) => {
   return (
-    <Nav borderless>
+    <Nav 
+        borderless
+        {...props}
+    >
       <NavItem
           active
           link="#"

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb

@@ -1,20 +1,20 @@
-<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
     <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
         <% end %>
     <% end %>
     <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
             <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
         <% end %>
     <% end %>
     <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
-        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -3,14 +3,14 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
-    <Nav>
+    <Nav 
+        variant="bold"
+        {...props}
+    >
       <NavItem
           active
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -33,10 +33,7 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -59,10 +56,7 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md

@@ -1 +1 @@
-The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action. 
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -18,7 +18,10 @@ const CollapsibleNavCustom = (props) => {
 
   return (
     <>
-      <Nav variant='bold'>
+      <Nav 
+          variant="bold" 
+          {...props}
+      >
         {navItems.map((text, index) => {
           const [collapsed] = collapsibles[index]
           return (
@@ -26,8 +29,10 @@ const CollapsibleNavCustom = (props) => {
                 collapsed={collapsed}
                 collapsible
                 collapsibleTrail
+                fontSize="small"
                 fontWeight="bolder"
                 iconLeft="chevron-down"
+                iconRight={["plus", "minus"]}
                 id={`collapsible-nav-item-${index + 1}`}
                 key={index}
                 link="#"

data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_item_spacing.jsx}

@@ -1,87 +1,88 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavEmphasize = (props) => {
+const CollapsibleNavItemSpacing = (props) => {
   return (
-    <Nav variant="bold">
+    <Nav 
+        itemSpacing={{padding: "xs", marginY: "none"}}
+        variant="bold"
+        {...props}
+    >
       <NavItem
-          active 
-          collapsible
-          collapsibleTrail
-          fontSize="small"
-          fontWeight="bolder"
+          active
+          collapsible 
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
       >
         <NavItem
             link="#" 
+            paddingY="none"
             text="City"
             {...props}
         />
         <NavItem
             link="#"
+            paddingY="none"
             text="People"
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Business" 
             {...props}
         />
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontSize="small"
-          fontWeight="bolder"
           iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
       >
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Entertainment" 
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Food" 
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Style" 
             {...props}
         />
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontSize="small"
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}
       >
         <NavItem 
             link="#" 
+            paddingY="none"
             text="City"
             {...props} 
         />
         <NavItem
             link="#"
+            paddingY="none"
             text="People"
             {...props}
         />
         <NavItem 
             link="#" 
+            paddingY="none"
             text="Business" 
             {...props}
         />
@@ -90,4 +91,4 @@ const CollapsibleNavEmphasize = (props) => {
   );
 };
 
-export default CollapsibleNavEmphasize;
+export default CollapsibleNavItemSpacing

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md

@@ -0,0 +1 @@
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#", font_size:"small", margin_y:"none" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
+        <% end %>
+    <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { Nav, NavItem } from "../.."
+
+const CollapsibleNavWithAllOptions = (props) => {
+  const navItems = ["Overview", "Albums", "Similar Artists"]
+
+  return (
+    <>
+      <Nav 
+          variant="bold" 
+          {...props}
+      >
+        {navItems.map((text, index) => {
+          return (
+            <NavItem
+                collapsible
+                collapsibleTrail
+                fontWeight="bolder"
+                iconLeft="city"
+                iconRight={["plus", "minus"]}
+                key={index}
+                link="#"
+                text={text}
+                {...props}
+            >
+              <NavItem 
+                  fontSize="small"
+                  link="#" 
+                  marginY="none"
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem 
+                  fontSize="small"
+                  link="#" 
+                  marginY="none"
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem
+                  fontSize="small"
+                  link="#" 
+                  marginY="none"
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
+
+export default CollapsibleNavWithAllOptions

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.md

@@ -0,0 +1,4 @@
+Collapsible Navs optionally accept the following props:
+
+- `collapsibleTrail` / `collapsible_trail`, enables a vertical guideline to the left of the collapsible nav's children
+- `iconRight` optionally accepts an array of 2 icon values; the first is used as the default icon when the node is collapsed, the second is toggled when the node is expanded. If only 1 icon value is passed, the icon will not toggle between collapsible states.

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "About", link: "#", font_weight:"bolder", font_size:"small" }) %>
+    <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, font_weight:"bolder", font_size:"small"  }) %>
+    <%= pb_rails("nav/item", props: { text: "Service", link: "#", font_weight:"bolder", font_size:"small" }) %>
+    <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", font_weight:"bolder", font_size:"small" }) %>
+  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Nav, NavItem } from '../..'
+
+const NavWithFontControl = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="vertical"
+        variant="bold"
+        {...props}
+    >
+        <NavItem
+            fontSize="small"
+            fontWeight="bolder"            
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            fontSize="small"
+            fontWeight="bolder" 
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            fontSize="small"
+            fontWeight="bolder" 
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            fontSize="small"
+            fontWeight="bolder" 
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+    </Nav>
+
+  );
+};
+
+export default NavWithFontControl;

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.md

@@ -0,0 +1,4 @@
+All Nav variants' navItems accept the following props for customizing font:
+
+- `fontSize` / `font_size` defaults to `normal`, also accepts `small`
+- `fontWeight` / `font_weight` defaults to `regular`, also accepts `bold` and `bolder`

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "About", link: "#", padding_y:"xxs", margin:"none" }) %>
+    <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, padding_y:"xxs", margin:"none"  }) %>
+    <%= pb_rails("nav/item", props: { text: "Service", link: "#", padding_y:"xxs", margin:"none" }) %>
+    <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", padding_y:"xxs", margin:"none" }) %>
+  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const NavWithSpacingControl = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="vertical"
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          margin="none"
+          paddingY="xxs"
+          text="Contacts"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default NavWithSpacingControl

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -0,0 +1 @@
+All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const NoHighlightNav = (props) => {
   return (
-    <Nav highlight={false}>
+    <Nav 
+        highlight={false}
+        {...props}
+    >
       <NavItem
           active
           link="#"

data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const SubtleNav = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav 
+        variant="subtle"
+        {...props}
+    >
       <NavItem
           link="#"
           text="Overview"

data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const SubtleWithIconsNav = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav 
+        variant="subtle"
+        {...props}
+    >
       <NavItem
           iconLeft="city"
           link="#"

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

@@ -7,10 +7,12 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Collapsible Nav
-  # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
+  - nav_with_spacing_control: Nav with Spacing Control
+  - nav_with_font_control: Nav With Font Control
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_with_all_options: Collapsible Nav With Options
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -26,11 +28,14 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Collapsible Nav
-  # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
-  # - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
+  - nav_with_spacing_control: Nav with Spacing Control
+  - nav_with_font_control: Nav With Font Control
+  - collapsible_nav: Collapsible Nav
+  - collapsible_nav_with_all_options: Collapsible Nav With Options
+  - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
+  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav

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

@@ -15,4 +15,7 @@ export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
 export { default as CollapsibleNav } from './_collapsible_nav.jsx'
 export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
-export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
+export {default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_all_options.jsx"
+export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
+export {default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
+export {default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md

@@ -1 +1 @@
-We recommend using a typeahead for better UX
+The `multiple` prop enables multiple selections; however, for a better user experience, we recommend our [Typeahead](https://playbook.powerapp.cloud/kits/typeahead/react) kit.