playbook_ui_docs 14.12.0.pre.alpha.testingwithfas5689 → 14.12.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b60b153d519cbce924ac77bdc806874c1d8da24a92c8a8332d6e94fa8ca1a4a9
-  data.tar.gz: 980dbe992a6525e9616f25d515b7b9ca96ec437d17f554e84f39f6729f287f31
+  metadata.gz: 71e9003b205fa267a12af77bac18b9050b3a471625c9321c3e0489671d7c553f
+  data.tar.gz: cdc85654bd905ff59cc69f72108263b3fd0d46de927da058c1649b15d63e3d78
 SHA512:
-  metadata.gz: b8c2d81f18289da2c5a4d2b6035a3388b1f80db2a135e3221e8854923f1f32b4f3fee5c7a469858e3cae5dca58b7ceb98e7443070b57a2fbc5874b96713db743
-  data.tar.gz: c861e84fead7b248dcfdf5f7ae55d3ccf65ab60d18e1a825f8ecb0372e56066ac5ce3896c81056ab19a54e1b91022495a8d02c012bfa41adf49698b034935d56
+  metadata.gz: ce8a94240ae1e52eeb13856c03f8440153ada24ad0085b57c6acc2de3337c267c43f4e2a3c09dbb77a07bf1cf97dded856f680a8fe97d2da77b8dd53ba72503b
+  data.tar.gz: 218397ebd4b192b51c0bd87d49c4f91ef74a6a1e4e9e585deb364208b805c745af27120857b065baaca74332a7142b651df02252156b3a723f77213de029668f

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx

@@ -40,7 +40,6 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx

@@ -47,7 +47,6 @@ const AdvancedTablePaginationWithProps = (props) => {
           columnDefinitions={columnDefinitions}
           pagination
           paginationProps={paginationProps}
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md

@@ -1,3 +1,3 @@
-`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
 
-The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.

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

@@ -3,9 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
-  - advanced_table_table_props: Table Props
   - advanced_table_beta_sort: Enable Sorting
-  - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
@@ -28,8 +26,3 @@ 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_no_subrows: Table with No Subrows
-  - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
-  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -13,9 +13,4 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
-export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
-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 AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
+

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

@@ -28,7 +28,6 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
-  - date_picker_turbo_frames: Within Turbo Frames
 
   react:
   - date_picker_default: Default

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb

@@ -7,7 +7,8 @@
 <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
   <%= pb_rails("draggable/draggable_container") do %>
     <% initial_items.each do |item| %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
+      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
           <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
             <%= pb_rails("flex", props:{gap: "xs"}) do %>
               <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
@@ -31,6 +32,7 @@
             <% end %>
           <% end %>
         <% end %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md

@@ -1,7 +0,0 @@
-For a simplified version of the Draggable API for the Card kit, you can do the following:
-
-Use the `draggable` kit and manage state as shown.
-
-`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
-
-The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,8 +6,14 @@
 
 ] %>
 
-<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
-  <% initial_items.each do |item| %>
-    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("list", props: {ordered: false}) do %>
+        <% initial_items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
+            <% end %>
+        <% end %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -11,7 +11,6 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
 
 

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

@@ -6,15 +6,19 @@ const DrawerBorders = () => {
   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 
+      <Flex padding="md"
           wrap
       >
         <Button marginRight="md"
@@ -32,12 +36,23 @@ const DrawerBorders = () => {
         >
           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}
@@ -49,10 +64,11 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="left"
+          fullHeight
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -60,14 +76,40 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="full"
+          fullHeight
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          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>
     </>
   );
 };

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

@@ -26,6 +26,7 @@ const DrawerBreakpoints = () => {
         <Drawer
             behavior={"push"}
             breakpoint="sm"
+            fullHeight
             onClose={toggleSmallDrawer}
             opened={smallDrawerOpened}
             overlay={false}

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

@@ -9,8 +9,8 @@ const useDrawer = (visible = false) => {
 };
 
 const DrawerDefault = () => {
-  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
-  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
+  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
+  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
 
   return (
     <>
@@ -18,13 +18,13 @@ const DrawerDefault = () => {
         <Button
             id="sm"
             marginRight="md"
-            onClick={toggleDrawerLeftOpen}
+            onClick={toggleHeaderSeparatorDrawer}
         >
           {"Left Drawer"}
         </Button>
         <Button
             marginRight="xl"
-            onClick={toggleDrawerRightOpen}
+            onClick={toggleBothSeparatorsDrawer}
         >
           {"Right Drawer"}
         </Button>
@@ -32,8 +32,12 @@ const DrawerDefault = () => {
       <Flex>
         {/* Left Drawer */}
         <Drawer
-            onClose={toggleDrawerLeftOpen}
-            opened={drawerLeftOpen}
+            behavior={"push"}
+            fullHeight
+            onClose={toggleHeaderSeparatorDrawer}
+            opened={headerSeparatorDrawerOpened}
+            overlay
+            placement={"left"}
             size={"lg"}
         >
           Test me (Left Drawer)
@@ -41,8 +45,11 @@ const DrawerDefault = () => {
 
         {/* Right Drawer */}
         <Drawer
-            onClose={toggleDrawerRightOpen}
-            opened={drawerRightOpen}
+            behavior={"push"}
+            fullHeight
+            onClose={toggleBothSeparatorsDrawer}
+            opened={bothSeparatorsDrawerOpened}
+            overlay
             placement={"right"}
             size={"lg"}
         >
@@ -53,4 +60,4 @@ const DrawerDefault = () => {
   );
 };
 
-export default DrawerDefault;
+export default DrawerDefault;

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

@@ -1,56 +1,31 @@
-import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+import React from "react";
+import { Button, Drawer, Icon, Title } from "playbook-ui";
 
 const DrawerMenu = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false)
-
-  useEffect(() => {
-    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)
-  }, [])
 
   return (
-    <div>
-      <Button id='menuButton'
-          padding='xs'
+    <>
+      <Button id="menuButton"
+          padding="sm"
       >
-        <Icon icon='bars'
-            size='2x'
+        <Icon icon="bars"
+            size="3x"
         />
       </Button>
       <Drawer
-          breakpoint="md"
-          placement='bottom'
-          size='full'
-          triggerId='menuButton'
+          behavior="push"
+          closeBreakpoint="md"
+          menuButtonID="menuButton"
+          overlay={false}
+          placement="left"
+          size="lg"
           withinElement
       >
-        <Nav 
-            highlight={false}
-            link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
-            padding={isSmallScreen ? 'none' : 'sm'}
-        >
-          <NavItem link='#'
-              text='About'
-          />
-          <NavItem active
-              link='#'
-              text='Case Studies'
-          />
-          <NavItem link='#'
-              text='Service'
-          />
-          <NavItem link='#'
-              text='Contacts'
-          />
-        </Nav>
+        <Title paddingBottom="md">A really neat menu</Title>
+        <Button text="This Button does nothing" />
       </Drawer>
-    </div>
-  )
-}
+    </>
+  );
+};
 
-export default DrawerMenu
+export default DrawerMenu;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md

@@ -1,24 +1,6 @@
-The Drawer component can be used to create responsive navigation menus and sidebars. It provides flexible options for controlling when and how the drawer appears based on screen size.
-
-### Within Element
-The `withinElement` prop allows you to render the drawer within its parent container:
-- The drawer will be positioned relative to its parent element
-- Useful for creating nested navigation structures
-- This must be used in conjunction with the `triggerId` prop
-
-This provides a clean way to create responsive navigation patterns that adapt to different screen sizes while maintaining a consistent user experience.
-
-### Trigger Id
-The `triggerId` prop allows you to connect an element to control the drawer:
-- The specified element will toggle the drawer open/closed
-- The element is automatically hidden when the drawer is opened via breakpoint
-- The element reappears when the drawer is closed via breakpoint
-
-### Breakpoint
-Use the `breakpoint` prop to control when the drawer automatically opens or closes based on screen size. For example, setting `breakpoint="md"` will:
-- Close the drawer on screens smaller than the medium breakpoint (992px)
-- Automatically open the drawer on screens larger than or equal to the medium breakpoint
-
+Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
 
+Set a menu button with  the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
 
+Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.
 

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

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

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

@@ -19,8 +19,7 @@ const DrawerSizes = () => {
   return (
     <>
       <Flex wrap>
-        <Button 
-            marginRight="md"
+        <Button marginRight="md"
             onClick={toggleXsDrawer}
         >
           XS Drawer
@@ -49,8 +48,11 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
+          behavior="push"
+          fullHeight
           onClose={toggleXsDrawer}
           opened={openedXsDrawer}
+          overlay
           placement="right"
           size="xs"
       >
@@ -58,32 +60,47 @@ const DrawerSizes = () => {
       </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"
       >

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

@@ -6,8 +6,7 @@ examples:
   
   react:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
+  - drawer_menu: Menu Behavior 
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
   - drawer_borders: Borders 

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

@@ -4,4 +4,3 @@ export { default as DrawerOverlay } from './_drawer_overlay.jsx'
 export { default as DrawerBorders } from './_drawer_borders.jsx'
 export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
 export { default as DrawerMenu } from './_drawer_menu.jsx'
-export { default as DrawerBehavior } from './_drawer_behavior.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md

@@ -1 +1 @@
-For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a cleaner look.
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.

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

@@ -8,12 +8,10 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
-  - phone_number_input_format: Format as You Type
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
-  - phone_number_input_format: Format as You Type
+  - phone_number_input_validation: Form Validation

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

@@ -5,4 +5,3 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
-export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -29,7 +29,6 @@ const RadioChildren = (props) => {
             marginBottom="none"
             minWidth="xs"
             options={options}
-            {...props}
         />
       </Radio>
       <Radio
@@ -41,11 +40,10 @@ const RadioChildren = (props) => {
           value="Typeahead"
           {...props}
       >
-        <Typeahead
+        <Typeahead 
             marginBottom="none"
             minWidth="xs"
             options={options}
-            {...props}
         />
       </Radio>
       <Radio
@@ -56,12 +54,9 @@ const RadioChildren = (props) => {
           value="Typography"
           {...props}
       >
-        <Title
-            text="Custom Typography"
-            {...props}
-        />
+        <Title text="Custom Typography" />
       </Radio>
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren