playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4889 → 14.9.0.pre.alpha.play1742globalheightfixes4925

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c76303a7544e38deef03a9ac8c3e287b6013cf828a750766ec788f66e706bbc4
-  data.tar.gz: 98da736fc4c77104393be8ab4f11379e52113aecdc16fcb2ccdb954e4aecc97b
+  metadata.gz: 65c48523db92e25026da29dafc1e1d48373dd867a8d467a8a57eaaae093f26a0
+  data.tar.gz: b6044dcebf4a60671de1db8ed4a6252426679eceb2946a6eea71b4b944710dae
 SHA512:
-  metadata.gz: bbf0e95a2e97295650df84cdd1c87dfdd713eaaf68a6fb21c540dac59fa8084239c288becf3aa0eecb84f0dd6855e6e5440c37e748d0524560a4699f497c20f1
-  data.tar.gz: 49a7797ec7401bd8e09a81b696cc652c1557dda1a514116cd7263842629fc845ff2f8eb19c30c95566eb8838ca1b64be94182491c8e487cb76034e38459554c7
+  metadata.gz: c60478ac6a44d1ac360a61be53aace6afe588dc0f1ac47d595b0344ad08dbf1b49e3b76a8c2c7fbf6378dd90832f6244534671a389927faffac43044eac87b74
+  data.tar.gz: a8b5110687957cd2879660f4617e1ed2b764d905d0bae7e17543c31dfb8f406d7704cd43fc18bcb466d893e89d28e408f2d35d9b6794557861fe813099138fa9

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx

@@ -1,66 +1,70 @@
 import React from 'react'
-
+import ReactDOMServer from 'react-dom/server'
 import BarGraph from '../_bar_graph'
+import Icon from '../../pb_icon/_icon'
+
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
 
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
 
 const barGraphOptions = {
-  subtitle: {
-    text: "Overwritten subtitle",
-    style: {
-      color: "red"
-    }
+  yAxis: {
+    tickInterval: 5,
   },
   xAxis: {
-      labels: {
-          useHTML: true,
-          formatter: function() {
-              switch (this.value) {
-                  case 'Jan':
-                      return `<i class="far fa-apple-whole"></i> ${this.value}`
-                  case 'Feb':
-                      return `<i class="far fa-strawberry"></i> ${this.value}`
-                  case 'Mar':
-                      return `<i class="far fa-lemon"></i> ${this.value}`
-                  case 'Apr':
-                      return `<i class="far fa-pear"></i> ${this.value}`
-                  case 'May':
-                      return `<i class="far fa-peach"></i> ${this.value}`
-                  default:
-                      return ''
-              }
-          }
-      }
-  }
+    categories: ['1', '2', '3', '4', '5'],
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case '1':
+            return `${renderIcon('frown', 'error')}`;
+          case '2':
+            return `${renderIcon('frown', 'warning')}`;
+          case '3':
+            return `${renderIcon('frown-open', 'neutral')}`;
+          case '4':
+            return `${renderIcon('smile', 'category_7')}`;
+          case '5':
+            return `${renderIcon('smile-beam', 'success')}`;
+          default:
+            return ''
+        }
+      },
+      style: {
+        fontSize: '1.4em',
+      },
+      y: 42,
+    },
+  },
+  legend: {
+    itemMarginTop: 62,
+  },
 }
 
-const BarGraphCustom = (props) => (
+const BarGraphCustom = () => (
   <div>
     <BarGraph
-        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="bar-custom"
-        subTitle="Subtitle to replace"
+        id="happiness-dashboard"
+        legend
         title="Bar Graph with Custom Overrides"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -1,49 +1,42 @@
 <% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
+  name: 'Role',
+  data: [0, 200, 300, 654, 656],
 }, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
+  name: 'Company',
+  data: [150, 524, 320, 440, 500],
 }] %>
 
 <% bar_graph_options = {
-    customOptions: {
-        subtitle: {
-            text: "Overwritten subtitle",
-            style: {
-                color: "red"
-            }
+  customOptions: {
+    yAxis: {
+      tickInterval: 5,
+    },
+    xAxis: {
+      categories: [
+        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
+      ],
+      labels: {
+        useHTML: true,
+        sytle: {
+          fontSize: '1.4em',
         },
-        xAxis: {
-            categories: [
-                '<i class="far fa-apple-whole"></i> Jan',
-                '<i class="far fa-strawberry"></i> Feb',
-                '<i class="far fa-lemon"></i> Mar',
-                '<i class="far fa-pear"></i> Apr',
-                '<i class="far fa-peach"></i> May'
-            ],
-            labels: {
-                useHTML: true,
-            }
-        }
-    }
+        y: 42,
+      },
+    },
+    legend: {
+      itemMarginTop: 62,
+    },
+  } 
 } %>
 
 <%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    y_axis_min: 0,
-    subtitle: 'Subtitle to replace',
+    legend: true,
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,6 +32,7 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 
 const Collapsible = ({
@@ -47,8 +48,9 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
+  tag = 'div',
   ...props
-}: CollapsibleProps): React.ReactElement => {
+}: CollapsibleProps & GlobalProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
@@ -76,9 +78,12 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
+
+  const Tag: React.ReactElement | any = `${tag}`;
+
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <div
+      <Tag
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -96,7 +101,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </div>
+      </Tag>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps): React.ReactElement => {
+}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps): React.ReactElement=> {
+}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -287,7 +287,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
-              style={dynamicInlineProps}
               className={classnames(drawerClassNames.base, {
               [drawerClassNames.afterOpen]:
                 animationState === "afterOpen",
@@ -296,6 +295,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             })}
               id={id}
               onClick={(e) => e.stopPropagation()}
+              style={dynamicInlineProps}
           >
             {children}
           </div>
@@ -306,7 +306,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classes}
-            style={dynamicInlineProps}
         >
           {isModalVisible && (
             <div
@@ -327,6 +326,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
                     animationState === "beforeClose",
                 })}
                   onClick={(e) => e.stopPropagation()}
+                  style={dynamicInlineProps}
               >
                 {children}
               </div>

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,7 +1,7 @@
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: flex-start;
 
   &[class*=_full] {
@@ -12,18 +12,6 @@
     }
   }
 
-  &:has(.pb_text_input_kit):has(.pb_text_input_kit_label){
-    align-items: flex-end;
-  }
-
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
-    align-items: center;
-  }
-
-  &:has(.pb_phone_number_input):has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
-    align-items: center;
-  }
-
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -39,7 +27,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-
+    
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -162,7 +150,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    }
+    } 
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -24,34 +24,37 @@ type LayoutPropTypes = {
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutBodyProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
-}
+} & GlobalProps
 
 type LayoutHeaderProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutFooterProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
-// Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_sidebar', globalProps(props), className)}>
+    <div
+        className={classnames('layout_sidebar', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -60,8 +63,12 @@ const Side = (props: LayoutSideProps) => {
 // Body component
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_body', globalProps(props), className)}>
+    <div
+        className={classnames('layout_body', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -71,8 +78,12 @@ const Body = (props: LayoutBodyProps) => {
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
   const sizeClass = `size_${size}`
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
+    <div
+        className={classnames('layout_item', sizeClass, globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -81,8 +92,12 @@ const Item = (props: LayoutItemProps) => {
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_header', globalProps(props), className)}>
+    <div
+        className={classnames('layout_header', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -91,8 +106,12 @@ const Header = (props: LayoutHeaderProps) => {
 // Footer component
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_footer', globalProps(props), className)}>
+    <div
+        className={classnames('layout_footer', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: $data_3;
+    color: darken($primary_action, 10%);
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }
@@ -48,7 +48,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }

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

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Table, Icon, Body, Card } from 'playbook-ui'
+
+const TableWithCollapsible = (props) => {
+
+  const Content = () => {
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell textAlign="right">{ 
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />}
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md

@@ -0,0 +1 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.