playbook_ui 14.12.0.pre.alpha.PLAY1865reactdatepickerreinitializingbug5732 → 14.12.0.pre.alpha.PLAY18565866

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4b2ad0e481643abe338553036ee4fb39c7c7ebe3e388e9486acb5a27cc565e7
-  data.tar.gz: 5c17ee40aba4bace77b6354bac9f417cfd7fb3e8bd3cc9029e9f11142b0808ca
+  metadata.gz: 2036447bc24867ea60730bcd2106f70198ab5d0b0469fcf4536e95bc467d0438
+  data.tar.gz: 49c1a74a43759e755c88ff965447295cb4beb5ed1e8f6da6d049d4dac840feee
 SHA512:
-  metadata.gz: 0633f4de5953b60ab7e9f0543bfe25de05b99e2e7378478c4c5858e17f61d271fb63ff8b73f2fe9f991c0c9848ea6bb0cf40cb1c9bba790cfff95d4f84fa9fe6
-  data.tar.gz: fa388b6846808f7e7a0b78c3822ad741b4f8302bdbff50c92527bf6af5a90ec002c3cade3a6ae96d24f85c23b19d26a53713321f52402d46b68d9a0e234ac044
+  metadata.gz: f2c5119a00e999065041fe72546b5236642efc0131902b659f3e89d3b4c381bd747f107bc9142858cd05ff8907716c642e7b8ef3c5ef6717b0f19894874afde9
+  data.tar.gz: 249ba89e0cbd98113f0d0e913fd039608d585e9f5ae1c9b4d1f5002c4b3dded98964692616c341ff476f2a5602e7a29c45cd5287459182fa3c145fedf3ebe5fc

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -89,7 +89,6 @@
     }
   }
 
-
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -179,7 +178,7 @@
   }
 
   // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {  
+  @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
@@ -215,7 +214,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-      
+
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -306,4 +305,4 @@
       }
     }
   }
-}
+}

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

@@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
-    if (isVisible) {
-      this.hideElement(elements);
-      this.displayDownArrow();
-    } else {
-      this.showElement(elements);
-      this.displayUpArrow();
+
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
+    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+
+    const row = this.element.closest("tr");
+    if (row) {
+      row.classList.toggle("bg-silver", !isVisible);
+      row.classList.toggle("bg-white", isVisible);
     }
   }
 
+
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -14,10 +14,13 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                                </button>
+                              <button
+                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                class="gray-icon expand-toggle-icon"
+                                data-advanced-table="true">
+                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                              </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
                                 <% if column[:custom_renderer].present? %>
@@ -42,4 +45,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -27,6 +27,9 @@ $avatar-sizes: (
       flex-basis: $size;
 
       & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit] {
+          padding: 2px;
+        }
         [class^=pb_card_kit].overlay_bottom_center,
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
@@ -52,6 +55,10 @@ $avatar-sizes: (
         flex-grow: 0;
         flex-basis: $size;
 
+        .dark & {
+          background: $text_dk_light;
+        }
+
         &::before {
           content: attr(data-initials);
           width: 100%;
@@ -78,9 +85,11 @@ $avatar-sizes: (
       }
     }
   }
+
   &.dark {
     [class^=pb_card_kit] {
       position: absolute;
+      padding: 2px;
     }
   }
 }

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -23,8 +23,8 @@ export type AvatarProps = {
     variant?: string,
     icon?: string
   },
-  data?: {[key: string]: string},
   dark?: boolean,
+  data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
@@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
-  const onlineStatusSize = 
+  const onlineStatusSize =
     ['xxs', 'xs'].includes(size) ? 'sm' :
       ['sm', 'md'].includes(size) ? 'md' :
         ['lg', 'xl'].includes(size) ? 'lg' :
           'sm';
 
-  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
+  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
     {
       top: { inset: true, value: "0" },
       right: { inset: false, value: "xxs" }
@@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         id={id}
     >
       {componentOverlay ? (
-        <Flex display="display_inline_block" 
+        <Flex display="display_inline_block"
             position="relative"
         >
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (
@@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
              <Card
                  borderNone
                  borderRadius="rounded"
+                 dark={dark}
                  padding="none"
                  position="absolute"
                  {...getPlacementProps(componentOverlay.placement, size)}
              >
-    
+
             <Badge
+                dark={dark}
                 rounded
                 text={componentOverlay.text}
                 variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
@@ -131,11 +133,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
             <Card
                 borderNone
                 borderRadius="rounded"
+                dark={dark}
                 htmlOptions={{style: {padding:"2px"}}}
                 position="absolute"
                 {...getPlacementProps(componentOverlay.placement, size)}
             >
               <IconCircle
+                  dark={dark}
                   icon={componentOverlay.icon}
                   size="xxs"
                   variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
@@ -145,7 +149,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         </Flex>
       ) : (
         <>
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -1,22 +1,22 @@
 
 <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
   <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
-    <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+    <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
       <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
         <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
       <% end %>
-      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
+      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
         
-        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
+        <%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
-  <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+  <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
     <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
       <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
     <% end %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
-    <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
+    <%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
     <% end %>
     <% end %>
   <% else %>
@@ -26,4 +26,3 @@
     <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>
 <% end %>
-

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

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

data/app/pb_kits/playbook/pb_button/button.rb

@@ -65,7 +65,7 @@ module Playbook
       end
 
       def tag
-        link ? "a" : "button"
+        link && !disabled ? "a" : "button"
       end
 
       def valid_emoji(icon)

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -14,6 +14,7 @@ type PbDateProps = {
   alignment?: "left" | "center" | "right";
   aria?: { [key: string]: string };
   className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     aria = {},
     alignment = "left",
     className,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -56,7 +58,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
   );
 
   return (
-    <div 
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -93,7 +95,9 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
           </>
         : size == "md" || size == "lg"
           ? (
-            <Title size={4}
+            <Title
+                dark={dark}
+                size={4}
                 tag="h4"
             >
               {showIcon && (
@@ -127,6 +131,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <>
                 {showIcon && (
                   <Caption className="pb_icon_kit_container"
+                      dark={dark}
                       tag="span"
                   >
                     <Icon fixedWidth
@@ -138,15 +143,20 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
                 {showDayOfWeek && (
                   <>
-                    <Caption tag="div">{weekday}</Caption>
+                    <Caption dark={dark}
+                        tag="div">
+                        {weekday}
+                    </Caption>
                     <Caption color="light"
+                        dark={dark}
                         tag="div"
                         text=" • "
                     />
                   </>
                 )}
 
-                <Caption tag="span">
+                <Caption dark={dark}
+                    tag="span">
                   {month} {day}
                   {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>

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

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

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

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

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -134,7 +134,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-}, [])
+})
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

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

@@ -1,42 +1,77 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
+const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+  const navItems = ["Overview", "Albums", "Similar Artists"]
 
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+  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 (
-    <>
-      <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"}
+    <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'
         >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
+          {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>
+  )
+}
 
-export default DrawerBreakpoints;
+export default DrawerMenu

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,4 +10,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag("div",
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>