RubyGems - playbook_ui_docs - Versions diffs - 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593 - Mend

playbook_ui_docs 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED Viewed

@@ -5,6 +5,7 @@ examples:
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
+  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -30,6 +31,7 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js CHANGED Viewed

@@ -19,4 +19,5 @@ export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_tab
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
-export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
+export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx ADDED Viewed

@@ -0,0 +1,69 @@
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+import { Button, Checkbox, Flex, Body } from "playbook-ui"
+const CheckboxReactHook = () => {
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      Small: false,
+      Medium: false,
+      Large: false,
+    },
+  })
+  const [submittedData, setSubmittedData] = useState({
+    Small: false,
+    Medium: false,
+    Large: false,
+  })
+  const onSubmit = (data) => {
+    setSubmittedData(data)
+  }
+  return (
+    <Flex orientation="row">
+      <Flex align="start"
+          orientation="column"
+          paddingRight="lg"
+      >
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Checkbox padding="xs"
+              text="Small"
+              {...register("Small")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Medium"
+              {...register("Medium")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Large"
+              {...register("Large")}
+          />
+          <br />
+          <Button htmlType="submit"
+              marginTop="sm"
+              text="submit"
+          />
+        </form>
+      </Flex>
+      <Flex align="start"
+          orientation="column"
+      >
+        <Body padding="xs"
+            text={`Small: ${submittedData.Small ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Large: ${submittedData.Large ? "true" : "false"}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ You can pass react hook props to the checkbox kit.

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED Viewed

@@ -11,6 +11,7 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
+  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -21,4 +22,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""

data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
+export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb ADDED Viewed

@@ -0,0 +1,22 @@
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "--",
+    size: "sm"
+}) %>
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "$0.00",
+    size: "sm"
+}) %>
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    null_display: " ",
+    size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Currency } from 'playbook-ui'
+const CurrencyNullDisplay = (props) => {
+  return (
+    <>
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="--"
+          {...props}
+      />
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="$0.00"
+          {...props}
+      />
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay=" "
+          {...props}
+      />
+    </>
+  )
+}
+export default CurrencyNullDisplay

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/example.yml CHANGED Viewed

@@ -10,6 +10,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   react:
   - currency_variants: Variants
@@ -21,6 +22,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   swift:
   - currency_size_swift: Size

data/app/pb_kits/playbook/pb_currency/docs/index.js CHANGED Viewed

@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb ADDED Viewed

@@ -0,0 +1,8 @@
+<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
+<%= pb_rails("drawer", props: {
+    id:"drawer-3",
+    behavior: "push"
+}) do  %>
+    Test me (Push Behavior)
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb ADDED Viewed

@@ -0,0 +1,33 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-12",
+        overlay: false,
+        border: "right"
+    }) do  %>
+        Test me (Border Right)
+    <% end %>
+    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-13",
+        overlay: false,
+        border: "left"
+    }) do  %>
+        Test me (Border Left)
+    <% end %>
+    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-14",
+        overlay: false,
+        border: "full"
+    }) do  %>
+        Test me (Border Full)
+    <% end %>
+<% end %>

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

@@ -41,7 +41,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border right
@@ -52,7 +52,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -63,7 +63,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border full

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb ADDED Viewed

File without changes

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

@@ -1,42 +1,25 @@
-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();
+import React from "react"
+import { Button, Body } from "playbook-ui"
+const DrawerMenu = () => {
   return (
     <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
-        >
-          Open because small breakpoint
-        </Drawer>
-      </Flex>
+      <Body>
+        The breakpoint prop determines when the Drawer is always visible. Above
+        the specified breakpoint, the Drawer remains open on the page. Below it,
+        only the trigger element is shown, allowing you to toggle the drawer
+        open and closed. To see this in action, click the button below and
+        resize your window.
+      </Body>
+      <Button
+          link='https://8njdkc.csb.app/'
+          marginTop='md'
+          newWindow
+      >
+        Open Doc Example in New Tab
+      </Button>
     </>
-  );
-};
+  )
+}
-export default DrawerBreakpoints;
+export default DrawerMenu

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

@@ -1 +1,20 @@
-<%= pb_rails("drawer") %>
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-1",
+    }) do  %>
+        Test me (Left Drawer)
+    <% end %>
+    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-2",
+        placement: "right"
+    }) do  %>
+        Test me (Right Drawer)
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
+    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
+<% end %>
+<%= pb_rails("drawer", props: {
+    id:"drawer-4",
+    within_element: true,
+    placement: "bottom",
+    breakpoint: "md",
+    size: "full"
+}) do  %>
+    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
+        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+    <% end %>
+    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
+        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx CHANGED Viewed

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener('change', handler)
-    return () => mediaQuery.removeEventListener('change', handler)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'}
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb ADDED Viewed

@@ -0,0 +1,21 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-10",
+        overlay: false
+    }) do  %>
+        Test me (No Overlay)
+    <% end %>
+    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-11",
+        placement: "right"
+    }) do  %>
+        Test me (Has Overlay)
+    <% end %>
+<% end %>

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

@@ -31,6 +31,7 @@ const DrawerSizes = () => {
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
+          placement='right'
           size='lg'
       >
         This is a Drawer with no overlay

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Click the button to close the drawer when there is no overlay.

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb ADDED Viewed

@@ -0,0 +1,49 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-5",
+        size: "xs"
+    }) do  %>
+        XS
+    <% end %>
+    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-6",
+        size: "sm",
+        placement: "right"
+    }) do  %>
+        This is a small drawer
+    <% end %>
+    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-7",
+        size: "md"
+    }) do  %>
+        This is a medium drawer
+    <% end %>
+    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-8",
+        size: "lg",
+        placement: "right"
+    }) do  %>
+        This is a large drawer
+    <% end %>
+    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-9",
+        size: "xl"
+    }) do  %>
+        This is an extra large drawer
+    <% end %>
+<% end %>

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

@@ -2,6 +2,11 @@ examples:
   rails:
   - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_borders: Borders
   react:
@@ -10,4 +15,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED Viewed

@@ -46,6 +46,7 @@
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

@@ -32,11 +32,12 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb ADDED Viewed

@@ -0,0 +1,40 @@
+<%
+  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: "Wrapped Within Typeahead",
+    pills: true,
+    wrapped: true,
+}) %>
+<%= pb_rails("caption", props: { text: "Form Pill Wrapped Text" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx ADDED Viewed

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+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 FormPillWrapped = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" } }}
+          isMulti
+          label="Wrapped Within Typeahead"
+          options={names}
+          wrapped
+          {...props}
+      />
+      <Caption text="Form Pill Wrapped Text"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            wrapped
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show wrapped text"
+            wrapped
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show wrapped text"
+            wrapped
+        />
+      </Card>
+    </>
+  )
+}
+export default FormPillWrapped

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md ADDED Viewed

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the `wrapped` prop can be used to wrap the label within each Form Pill.
+**Note**: Avoid using the `wrapped` and `small` props together, as their styles conflict and may cause functionality issues.