playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexSpacing = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+import { Body, Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexWrap = (props) => {
   return (

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -22,76 +22,10 @@
 
 %>
 
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>
@@ -113,7 +47,6 @@
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
-  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,76 +21,10 @@
   ]
 %>
 
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
@@ -104,7 +38,6 @@
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
-  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from '../utilities/object'
+import { debounce } from 'lodash'
 
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'

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

@@ -205,26 +205,4 @@
       border-top-left-radius: 0;
     }
   }
-
-  .pb_text_input_kit.error {
-    .text_input_wrapper {
-      input:focus {
-        outline: none;
-      }
-    }
-
-    & + * input,
-    & + * select {
-      border-left-color: $red;
-    }
-  }
-
-  .pb_text_input_kit:not(.error):focus-within + .error,
-  .pb_text_input_kit:not(.error):focus-within + .pb_select .error {
-    input,
-    select {
-      border-left: none;
-      padding-left: calc(var(--iti-flag-width) + 1px);
-    }
-  }
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import FormPill from '../../pb_form_pill/_form_pill'
-import Title from '../../pb_title/_title'
+import { FormPill, Title } from 'playbook-ui'
 
 const FormPillColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,9 +1,5 @@
 import React from 'react'
-
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import FormPill from '../../pb_form_pill/_form_pill'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import GanttChart from '../../pb_gantt_chart/_gantt_chart'
+import { GanttChart } from "playbook-ui";
 
 const mockOptions = {
   title: {

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -13,7 +13,7 @@ import typography from "../tokens/exports/_typography.module.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
-import { merge } from '../utilities/object' 
+import { merge } from 'lodash'
 
 type GaugeProps = {
   aria: { [key: string]: string };

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Name', value: 67 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -1,13 +1,14 @@
 import React from "react";
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import Body from '../../pb_body/_body'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Title from '../../pb_title/_title'
+import {
+  Title,
+  Card,
+  Gauge,
+  Flex,
+  FlexItem,
+  SectionSeparator,
+  Body,
+  Caption,
+} from "playbook-ui";
 
 const data = [{ name: "Name", value: 10 }];
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Name', value: 45 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Participants', value: 84 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Capacity', value: 75 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const GaugeHeight = (props) => (
   <div>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-
-import Button from '../../pb_button/_button'
-import Gauge from '../../pb_gauge/_gauge'
+import { Button, Gauge } from 'playbook-ui'
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data = [{
   name: 'Rating', value: 4.5,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
+import { Flex, FlexItem, Gauge } from 'playbook-ui'
 
 const GaugeSizing = (props) => (
   <div>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Score', value: 780 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data1 = [
   { name: 'Data Used', value: 32 },

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Hashtag from '../../pb_hashtag/_hashtag'
+import { Hashtag } from 'playbook-ui'
 
 const HashtagDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Hashtag from '../../pb_hashtag/_hashtag'
+import { Hashtag } from 'playbook-ui'
 
 const HashtagLink = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,17 +1,10 @@
 @import "../tokens/colors";
 
-$additional_colors: (
-  "light": $text_lt_light,
-  "lighter": $text_lt_lighter,
-  "link": $primary
-);
-
 // All the merges below create $icon_colors, a map of all color tokens in colors.scss
 $merge_kits1: map-merge($status_colors, $category_colors);
 $merge_kits2: map-merge($merge_kits1, $product_colors);
 $merge_kits3: map-merge($merge_kits2, $text_colors);
-$merge_kits4: map-merge($merge_kits3, $data_colors);
-$icon_colors: map-merge($merge_kits4, $additional_colors);
+$icon_colors: map-merge($merge_kits3, $data_colors);
 
 .pb_custom_icon, .pb_icon_kit {
   @each $color_name, $color_value in $icon_colors {

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -1,11 +1,5 @@
-<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
     <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
-<% end %>
-
-<%= pb_rails("flex", props: {}) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -1,57 +1,32 @@
 import React from "react"
 import Icon from "../_icon"
-import Flex from "../../pb_flex/_flex"
 
 const IconDefault = (props) => {
   return (
-    <div>
-      <Flex marginBottom="sm">
-        <Icon
-            color="primary"
-            fixedWidth
-            icon="user"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="data_4"
-            fixedWidth
-            icon="recycle"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="product_5_background"
-            fixedWidth
-            icon="product-roofing"
-            size="2x"
-            {...props}
-        />
-      </Flex>
-
-      <Flex>
-        <Icon
-            color="light"
-            fixedWidth
-            icon="user"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="lighter"
-            fixedWidth
-            icon="recycle"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="link"
-            fixedWidth
-            icon="product-roofing"
-            size="2x"
-            {...props}
-        />
-      </Flex>
+    <div style={{ display: "flex", flexDirection: "column"}}>
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="user"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="data_4"
+          fixedWidth
+          icon="recycle"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="product_5_background"
+          fixedWidth
+          icon="product-roofing"
+          size="2x"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Icon from '../../pb_icon/_icon'
+import { Icon } from 'playbook-ui'
 
 const config = {
   icon: (

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -16,7 +16,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
     })
 
     test("renders rotate prop", () => {[
@@ -31,7 +31,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa rotate_${rotateProp} svg_fw`)
+        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
 
         cleanup()
     })
@@ -48,7 +48,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa flip_horizontal svg_fw")
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
     })
 
 
@@ -63,7 +63,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa spin svg_fw")
+        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
     })
 
     test("renders pull icon", () => {
@@ -77,7 +77,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
     })
 
     test("renders pull icon", () => {
@@ -91,7 +91,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
     })
 
     test("renders border around icon", () => {
@@ -105,7 +105,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_border svg_fw")
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
     })
 
     test("renders size prop", () => {
@@ -132,7 +132,7 @@ describe("Icon Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa svg_${sizeProp} svg_fw`)
+            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
 
             cleanup()
         }) 
@@ -149,7 +149,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
     })
 
     test("renders with color prop", () => {

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -17,7 +17,6 @@ type IconButtonProps = {
   id?: string,
   link?: string,
   newWindow?: boolean,
-  onClick?: React.MouseEventHandler<HTMLElement>,
   size?: IconSizes,
   target?: string,
   variant?: 'default' | 'link',
@@ -33,7 +32,6 @@ const IconButton = (props: IconButtonProps) => {
     id,
     link,
     newWindow = false,
-    onClick = noop,
     size = "2x",
     target,
     variant = "default",
@@ -51,11 +49,10 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          borderRadius="xs"
+          borderRadius="lg"
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}
-          onClick={onClick}
           target={target}
       >
         <Icon

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import IconButton from '../../pb_icon_button/_icon_button'
+import { IconButton } from 'playbook-ui'
 
 const IconButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import IconButton from '../../pb_icon_button/_icon_button'
-import Flex from '../../pb_flex/_flex'
+import { IconButton, Flex } from 'playbook-ui'
 
 const IconButtonSizes = (props) => (
   <div>