playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4889 → 14.9.0.pre.alpha.play1703errorstatealignment4991

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c76303a7544e38deef03a9ac8c3e287b6013cf828a750766ec788f66e706bbc4
-  data.tar.gz: 98da736fc4c77104393be8ab4f11379e52113aecdc16fcb2ccdb954e4aecc97b
+  metadata.gz: 318db5e48d61c4f9e603ab27952a39bd05319cbe45dff4a1d161f4548dcd9427
+  data.tar.gz: 07ddd504ecece5906d8a7314c091a20f46198cb2066a6d68c2ee86a18dfe336b
 SHA512:
-  metadata.gz: bbf0e95a2e97295650df84cdd1c87dfdd713eaaf68a6fb21c540dac59fa8084239c288becf3aa0eecb84f0dd6855e6e5440c37e748d0524560a4699f497c20f1
-  data.tar.gz: 49a7797ec7401bd8e09a81b696cc652c1557dda1a514116cd7263842629fc845ff2f8eb19c30c95566eb8838ca1b64be94182491c8e487cb76034e38459554c7
+  metadata.gz: 49900fec67aadb7513278c047c1820785f466b091cc39623374b782754923ff05ae6025acd87287f8c3ebe3b7b687f26af1f0d63a228b2ccd22e69c8577992a0
+  data.tar.gz: '08a03da6ba0846064abec714a74f788ccaac562ca3a016d030a7ff2c5662c2695783c7b1d3df5e20924bdb125a369ee50fb863f8f921dbe06cf78225870a33df'

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_form_group/_error_state_mixin.scss

@@ -0,0 +1,49 @@
+@mixin error-state-flex-start-selectors {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+    align-items: flex-start;
+  }
+}
+
+@mixin error-state-center-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+    align-items: center;
+  }
+}
+
+@mixin error-state-flex-end-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-end;
+  }
+}
+
+@mixin error-state-left-side-select-kit {
+  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+    align-items: flex-start;
+
+    .pb_select_kit_wrapper,
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
+      }
+    }
+  }
+}
+
+@mixin error-state-right-side-select-kit {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
+
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+    }
+  }
+}

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

@@ -1,7 +1,10 @@
+@import "../tokens/spacing";
+@import "./error_state_mixin";
+
 [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,17 +15,48 @@
     }
   }
 
-  &: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;
-  }
+@include error-state-flex-start-selectors;
+@include error-state-center-selectors;
+@include error-state-flex-end-selectors;
+@include error-state-left-side-select-kit;
+@include error-state-right-side-select-kit;
+
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  // &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  // &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+  //   align-items: flex-start;
+  // }
+
+  // &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+  //   align-items: flex-start;
+  //   .pb_select_kit_wrapper,
+  //   .pb_select_kit_wrapper.error {
+  //     padding-top: $space_md;
+  //     margin-top: 2px;
+  //     .pb_select_kit_caret {
+  //       padding-top: $space_xl;
+  //     }
+  //   }
+  // }
+
+  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
+  // &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+  //   align-items: center;
+  // }
+
+  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+  //   align-items: flex-end;
+  // }
+
+  // &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+  //   align-items: flex-start;
+  //   .pb_text_input_kit.error {
+  //     padding-top: $space_md;
+  //     margin-top: 2px;
+  //   }
+  // }
 
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,

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.

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

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Table, Card, Icon, Body } from 'playbook-ui'
+
+const TableWithCollapsibleWithCustomClick = (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/>}
+              toggleCellId="cell-1"
+              {...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 cursor="pointer" 
+                id="cell-1"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-2"
+              {...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 cursor="pointer" 
+                id="cell-2"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              toggleCellId="cell-3"
+              {...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 cursor="pointer" 
+                id="cell-3"
+                textAlign="right"
+            >
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />
+            </Table.Cell>
+
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithCollapsibleWithCustomClick

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

@@ -0,0 +1,2 @@
+When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
+__NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.