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

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

@@ -7,4 +7,3 @@ examples:
   react:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
-  - icon_button_click: Click Handler

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

@@ -1,3 +1,2 @@
 export { default as IconButtonDefault } from './_icon_button_default.jsx'
 export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
-export { default as IconButtonClick } from './_icon_button_click.jsx'

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -4,7 +4,7 @@
                                   new_window:object.new_window,
                                   target: object.target,
                                   dark: object.dark,
-                                  border_radius: "xs" }) do %>
+                                  border_radius: "lg" }) do %>
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import IconCircle from '../../pb_icon_circle/_icon_circle'
+import { IconCircle } from 'playbook-ui'
 
 const IconCircleSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -29,7 +29,7 @@ describe("IconCircle Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector('.pb_custom_icon')
+        const icon = kit.querySelector('.pb_icon_kit')
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
+import { IconStatValue } from 'playbook-ui'
 
 const IconStatValueColor = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
+import { IconStatValue } from 'playbook-ui'
 
 const IconStatValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
+import { IconStatValue } from 'playbook-ui'
 
 const IconStatValueSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
+import { IconStatValue } from 'playbook-ui'
 
 const IconStatValueVertical = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -33,7 +33,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".pb_custom_icon")
+        const icon = kit.querySelector(".fa-lightbulb-on.pb_icon_kit.fa-fw")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js

@@ -29,7 +29,7 @@ describe("IconValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".pb_custom_icon")
+        const icon = kit.querySelector(".fa-clipboard.pb_icon_kit.fa-fw")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LabelValue from '../../pb_label_value/_label_value'
+import { LabelValue } from 'playbook-ui'
 
 const LabelValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LabelValue from '../../pb_label_value/_label_value'
+import { LabelValue } from 'playbook-ui'
 
 const LabelValueDetails = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx

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

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -56,7 +56,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".pb_custom_icon")
+        const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
         expect(icon).toBeInTheDocument()
     })
 

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

@@ -10,8 +10,6 @@ $list-header-height: $space_lg;
 $list-footer-height: $space_lg;
 $list-border-radius: $border_rad_lighter;
 $card-border-radius: $border_rad_lightest;
-$bracket-connector-width: 45px;
-$bracket-border-width: 4px;
 
 
 [class^=pb_layout_kit] {
@@ -170,62 +168,6 @@ $bracket-border-width: 4px;
     }
   }
 
-  &[class*=_bracket]{
-    display: flex;
-    overflow-x: scroll;
-
-    div.layout_round {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      flex-grow: 1;
-    }
-
-    .connector_container {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-    }
-    .right_connector {
-      border-top: $bracket-border-width solid $border_light;
-      width: $bracket-connector-width;
-      margin-left: $bracket-connector-width;
-    }
-
-    .layout_round .layout_game {
-      position: relative;
-    }
-
-    .half_box {
-      content: '';
-      position: absolute;
-      top: calc(50% - $bracket-border-width / 2);
-      height: calc(100% + $bracket-border-width);
-      width: $bracket-connector-width;
-      right: -$bracket-connector-width;
-      border-top-right-radius: $border_radius_lg;
-      border-bottom-right-radius: $border_radius_lg;
-      border-top: $bracket-border-width solid $border_light;
-      border-bottom: $bracket-border-width solid $border_light;
-      border-right: $bracket-border-width solid $border_light;
-    }
-
-    .layout_round_label {
-      display: none;
-    }
-
-    @media (max-width: $screen-md-max) {
-      flex-direction: column;
-      .layout_round_label {
-        display: block;
-      }
-      .layout_round .layout_game::after,
-      .connector_container,
-      .half_box {
-        display: none !important;
-      }
-    }
-  }
 
   &[class*=_sidebar]{
     $layout_sizes: (

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

@@ -4,9 +4,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 
-import { Round, RoundLabel } from "./subcomponents/_round";
-import Game from "./subcomponents/_game";
-
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
   children?: React.ReactChild[] | React.ReactChild,
@@ -21,7 +18,7 @@ type LayoutPropTypes = {
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
-  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry" | "bracket",
+  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
 } & GlobalProps
 
 type LayoutSideProps = {
@@ -143,7 +140,7 @@ const Layout = (props: LayoutPropTypes) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const layoutCss =
-    (layout == 'collection' || layout == 'bracket')
+    layout == 'collection'
       ? `pb_layout_kit_${layout}`
       : layout == 'kanban'
         ? `pb_layout_kit_${layout}${responsiveClass}`
@@ -154,9 +151,11 @@ const Layout = (props: LayoutPropTypes) => {
         })
 
   const layoutCollapseCss =
-    (layout == 'collection' || layout == 'kanban' || layout == 'bracket')
+    layout == 'collection'
       ? ''
-      : buildCss('layout', position, 'collapse', collapse)
+      : layout == 'kanban'
+        ? ''
+        : buildCss('layout', position, 'collapse', collapse)
 
   const layoutChildren = React.Children.toArray(children)
 
@@ -176,15 +175,6 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
-  const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
-    (child) => {
-      return (child as React.ReactElement).type === Layout.Round;
-    }
-  ).length : 0
-  const bracketChildren = nonSideChildren.map(child =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
-  )
-  
   const filteredProps = {...props}
   delete filteredProps?.position
 
@@ -206,7 +196,7 @@ const Layout = (props: LayoutPropTypes) => {
         style={dynamicInlineProps}
     >
       {subComponentTags('Side')}
-      {layout === 'bracket' ? bracketChildren : nonSideChildren}
+      {nonSideChildren}
     </div>
   )
 }
@@ -216,8 +206,5 @@ Layout.Body = Body
 Layout.Item = Item
 Layout.Header = Header
 Layout.Footer = Footer
-Layout.Round = Round
-Layout.Game = Game
-Layout.RoundLabel = RoundLabel
 
 export default Layout

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

@@ -18,5 +18,4 @@ examples:
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
   - layout_masonry: Masonry Layout
-  - layout_bracket: Bracket Layout
 

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

@@ -7,5 +7,4 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
 export { default as LayoutMasonry } from './_layout_masonry.jsx'
-export { default as LayoutBracket } from './_layout_bracket.jsx'
 

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -82,10 +82,6 @@ test("render all layout variants", () => {
       layout: "masonry",
       expected: "pb_layout_kit_masonry_size_md_left_light",
     },
-    {
-      layout: "bracket",
-      expected: "pb_layout_kit_bracket",
-    },
   ]
 
   testValues.forEach(({ layout, expected }) => {

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Legend from '../../pb_legend/_legend'
+import { Legend } from 'playbook-ui'
 
 const LegendColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Legend from '../../pb_legend/_legend'
+import { Legend } from 'playbook-ui'
 
 const LegendCustomColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Legend from '../../pb_legend/_legend'
+import { Legend } from 'playbook-ui'
 
 const LegendPrefix = (props) => (
   <div>

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { noop } from '../../utilities/object' 
+import { noop } from 'lodash'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import Image from '../../pb_image/_image'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,4 +1,4 @@
-import { noop } from '../../utilities/object'
+import { noop } from 'lodash'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx

@@ -1,4 +1,4 @@
-import { noop } from '../../utilities/object'
+import { noop } from 'lodash'
 import classnames from 'classnames'
 import React, { useLayoutEffect } from 'react'
 import { useWindowSize } from '../hooks/useWindowSize'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCompoundComponent = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,10 +1,5 @@
 import React, { useState } from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Button from '../../pb_button/_button'
-import Body from '../../pb_body/_body'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCurrentPhoto = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Title from '../../pb_title/_title'
-import Pill from '../../pb_pill/_pill'
+import { Flex, Image, Title, Pill } from "playbook-ui";
 import Lightbox from "../_lightbox.tsx";
 
 const LightboxCustomHeader = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxDefault = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxMultiple = (props) => {

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from "../../utilities/object" 
+import { debounce } from 'lodash'
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -8,7 +8,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from '../utilities/object' 
+import { merge } from 'lodash'
 
 type LineGraphProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+import { LineGraph } from 'playbook-ui'
 
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+import { LineGraph } from 'playbook-ui'
 
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
-import Title from '../../pb_title/_title'
+import { LineGraph, Title } from 'playbook-ui'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from '../../pb_link/_link'
+import { Link } from 'playbook-ui'
 
 const LinkColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from '../../pb_link/_link'
+import { Link } from 'playbook-ui'
 
 const LinkDisabled = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from '../../pb_link/_link'
+import { Link } from 'playbook-ui'
 
 const LinkIcon = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from '../../pb_link/_link'
+import { Link } from 'playbook-ui'
 
 const LinkTag = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from '../../pb_link/_link'
+import { Link } from 'playbook-ui'
 
 const LinkTarget = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from '../../pb_link/_link'
+import { Link } from 'playbook-ui'
 
 const LinkUnderline = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -73,7 +73,7 @@ test('adds icon', () => {
 
   const kit = screen.getByTestId('icon-test')
 
-  const icon = kit.querySelector('.pb_custom_icon')
+  const icon = kit.querySelector('.pb_icon_kit')
   expect(icon).toBeInTheDocument();
 })
 
@@ -87,7 +87,7 @@ test('adds icon right', () => {
 
   const kit = screen.getByTestId('icon-right-test')
 
-  const icon = kit.querySelector('.pb_custom_icon')
+  const icon = kit.querySelector('.pb_icon_kit')
   expect(icon).toBeInTheDocument();
 })
 

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import Map from '../../pb_map/_map'
-import mapTheme from '../../pb_map/pbMapTheme'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 
 const MapDefault = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -1,9 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-
-import Map from '../../pb_map/_map'
-import mapTheme from '../../pb_map/pbMapTheme'
-import MapCustomButton from '../../pb_map/_map_custom_button'
-
+import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 
 const MapWithCustomButton = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import Map from '../../pb_map/_map'
-import mapTheme from '../../pb_map/pbMapTheme'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Message from '../../pb_message/_message'
+import { Message } from 'playbook-ui'
 
 const MessageTimestamp = (props) => {
   return (

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -88,11 +88,7 @@ export const getDefaultCheckedItems = (
     items.forEach((item: { [key: string]: any }) => {
       if (item.checked) {
         if (item.children && item.children.length > 0) {
-           // Filter out disabled children (only consider selectable items)
-           const selectableChildren = item.children.filter(
-            (child: { [key: string]: any }) => !child.disabled
-          );
-          const uncheckedChildren = selectableChildren.filter(
+          const uncheckedChildren = item.children.filter(
             (child: { [key: string]: any }) => !child.checked
           );
           if (uncheckedChildren.length === 0) {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -10,16 +10,6 @@
 .pb_multi_level_select {
   font-family: $font-family-base;
 
-&.error {
-  .wrapper {
-    .input_wrapper {
-      border-color: $error;
-    }
-  }
-  [class*=pb_body_kit_negative] {
-    margin-top: $space_xxs;
-  }
-}
   .wrapper {
     position: relative;
 
@@ -102,17 +92,4 @@
   .open {
     display: block;
   }
-
-  &.dark {
-    &.error {
-      .wrapper {
-        .input_wrapper {
-          border-color: $error_dark;
-        }
-      }
-      [class*=pb_body_kit_negative] {
-        color: $error_dark;
-      }
-    }
-  }
 }