playbook_ui_docs 14.12.0.pre.alpha.PLAY18565866 → 14.12.0.pre.alpha.advancedtablealignmentfixes5693

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c89a2f859ec71c2b1faa06105b4dc44f3a858bb2159135043c20505a9587053
-  data.tar.gz: c103f3118042d9007ca2d215e6220281099a14775910d6daf8cd841edb2e987a
+  metadata.gz: 344b71ae89268038e47155204febd508fccf953b1e6100fd9f53597d3401c38e
+  data.tar.gz: f18620c7996d51d9353f1d083c888eea89a08ceeb08dc5dbb2fe11cf1f94b821
 SHA512:
-  metadata.gz: a8bb3d13c3ed180b477dc9109ebdb20e354e73aa2e3e3170d52ad5f52425815d8f5a153fab74294edd48a1bd276f14d6cdcf4e2a2c2177147e5d14a285f9e494
-  data.tar.gz: 436ce9c8e4d73a8e14d6b5f289bea8c10c4f573807795e395c45d668d1beabd1d5c3f69896929bb89fb5e45bc203330af002a794c76c8b76c57e36bbd40e5172
+  metadata.gz: 4cf2b4f16d213281ad0701f3f83231f47b47af9c5ba08087d3b928ad55beb1ea4a73eca09a09ffd404f0f053191311c642634fce78316ff6246fae749b218f9b
+  data.tar.gz: 6dbdd38729dc26c77140db5bc93578c618e46edfdf1e2951c9590da2cb8b6000db85a07392a37c54531d35c67d3701a10ee52634e8e42978558c8a31137423a7

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading_react.md → _advanced_table_loading.md}

@@ -1,3 +1,3 @@
-The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
+the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

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

@@ -1,7 +1,6 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,19 +1,18 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarBadgeComponentOverlay = (props) => {
+const AvatarBadgeComponentOverlay = () => {
     return (
         <div>
             <Avatar
                 componentOverlay={{
                     component: "badge",
                     placement: "bottom-right",
-                    text: "12",
+                    text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="sm"
-                {...props}
             />
 
             <Avatar
@@ -25,8 +24,6 @@ const AvatarBadgeComponentOverlay = (props) => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="md"
-                {...props}
-
             />
 
             <Avatar
@@ -39,8 +36,6 @@ const AvatarBadgeComponentOverlay = (props) => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="lg"
-                {...props}
-
             />
 
             <Avatar
@@ -53,8 +48,7 @@ const AvatarBadgeComponentOverlay = (props) => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-                {...props}
-            />
+            /> 
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarCircleIconComponentOverlay = (props) => {
+const AvatarCircleIconComponentOverlay = () => {
     return (
         <div>
         <Avatar
@@ -14,7 +14,6 @@ const AvatarCircleIconComponentOverlay = (props) => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="sm"
-            {...props}
         />
 
         <Avatar
@@ -27,7 +26,6 @@ const AvatarCircleIconComponentOverlay = (props) => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="md"
-            {...props}
         />
 
         <Avatar
@@ -40,7 +38,6 @@ const AvatarCircleIconComponentOverlay = (props) => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="lg"
-            {...props}
         />
 
         <Avatar
@@ -53,8 +50,7 @@ const AvatarCircleIconComponentOverlay = (props) => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="xl"
-            {...props}
-        />
+        /> 
     </div>
     )
 }

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -18,7 +18,7 @@ const DateDefault = (props) => {
             value={"2012-08-03"}
             {...props}
         />
-        <Caption {...props}>{"(Hyphenated Date)"}</Caption>
+        <Caption>{"(Hyphenated Date)"}</Caption>
       </div>
 
       <br />
@@ -56,7 +56,6 @@ const DateDefault = (props) => {
         <Title
             size={4}
             text={"(Hyphenated Date)"}
-            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -4,8 +4,7 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (
     <>
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Basic unstyled example"
       />
       <FormattedDate
@@ -16,14 +15,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-
-          size="xs"
+      <Caption size="xs"
           text="Example with wrapping typography kit"
       />
-      <Title {...props}
-          size={1}
-      >
+      <Title size={1}>
         <FormattedDate
             unstyled
             value={new Date('25 Dec 1995')}
@@ -33,13 +28,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Example with icon + subcaption"
       />
-      <Caption {...props}
-          size="xs"
-      >
+      <Caption size="xs">
         <FormattedDate
             showDayOfWeek
             showIcon

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

@@ -1,77 +1,42 @@
-import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
 
-const DrawerMenu = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false)
-  const navItems = ["Overview", "Albums", "Similar Artists"]
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(max-width: 992px)")
-    const updateScreen = (e) => setIsSmallScreen(e.matches)
-    updateScreen(mediaQuery)
-    mediaQuery.addEventListener('change', updateScreen)
-    return () => mediaQuery.removeEventListener('change', updateScreen)
-  }, [])
+  return [opened, toggle];
+};
+
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
 
   return (
-    <div>
-      <Button id='sidebar'
-          padding='xs'
-      >
-        <Icon icon='bars'
-            size='2x'
-        />
-      </Button>
-      <Drawer
-          behavior={"push"}
-          breakpoint='md'
-          overlay={isSmallScreen ? true : false}
-          placement='left'
-          size='md'
-          triggerId='sidebar'
-      >
-        <Nav
-            link='#'
-            orientation='vertical'
-            padding={isSmallScreen ? "none" : "sm"}
-            variant='bold'
+    <>
+      <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"}
         >
-          {navItems.map((text, index) => {
-            return (
-              <NavItem
-                  collapsible
-                  collapsibleTrail
-                  fontWeight='bolder'
-                  iconLeft='city'
-                  iconRight={["plus", "minus"]}
-                  key={index}
-                  link='#'
-                  text={text}
-              >
-                <NavItem fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='City'
-                />
-                <NavItem
-                    fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='People'
-                />
-                <NavItem
-                    fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='Business'
-                />
-              </NavItem>
-            )
-          })}
-        </Nav>
-      </Drawer>
-    </div>
-  )
-}
+          Open because small breakpoint 
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
 
-export default DrawerMenu
+export default DrawerBreakpoints;

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

@@ -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/example.yml

@@ -10,5 +10,4 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

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

@@ -5,7 +5,6 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
-  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

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

@@ -5,14 +5,12 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

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

@@ -2,4 +2,3 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
-export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb

@@ -39,17 +39,20 @@
     </tr>
   </tbody>
 <% end %>
+
 <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
   <colgroup>
     <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
-    <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
     <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
   </colgroup>
-  <thead>
-    <th>Column 1</th>
-    <th>Column 2</th>
-    <th>Column 3</th>
-  </thead>
+  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+    </tr>
+  <% end %>
   <tbody>
     <tr>
       <td>Value 1</td>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx

@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
             <Background
-                backgroundColor="info_subtle"
+                backgroundColor="card_light"
                 tag='col'
             />
             <Background
@@ -76,13 +76,16 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
           </colgroup>
-          <thead>
+          <Background
+              backgroundColor="card_light"
+              tag='thead'
+          >
             <tr>
-              <th>{'Column 1'}</th>
-              <th>{'Column 2'}</th>
-              <th>{'Column 3'}</th>
+                <th>{'Column 1'}</th>
+                <th>{'Column 2'}</th>
+                <th>{'Column 3'}</th>
             </tr>
-          </thead>
+          </Background>
           <tbody>
             <tr>
               <td>{'Value 1'}</td>

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

@@ -2,7 +2,6 @@ examples:
 
   rails:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
@@ -12,7 +11,6 @@ examples:
 
   react:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size

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

@@ -1,5 +1,4 @@
 export { default as UserDefault } from './_user_default.jsx'
-export { default as UserLightWeight } from './_user_light_weight.jsx'
 export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'