playbook_ui 14.17.0.pre.alpha.playcdntest7233 → 14.17.0.pre.rc.0

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/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_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_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_multi_level_select/_multi_level_select.tsx

@@ -7,12 +7,11 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { cloneDeep } from "../utilities/object";
-
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
+import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -95,13 +95,11 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_right")
-    expect(icon).toBeInTheDocument()
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
 })
 
 test('should have a left icon', () => {
-    render(<NavDefault iconLeft="angle-up" />)
+    render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
-    const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
-    expect(icon).toBeInTheDocument()
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
 })

data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js

@@ -19,27 +19,23 @@ test('it renders preset icon', () => {
     render(
       <StatChange
           change="increase"
-          id="preset-icon"
           value="28.4"
       />
     )
 
-    const kit = document.querySelector('#preset-icon')
-    const icon = kit.querySelector(".pb_custom_icon")
-    expect(icon).toBeInTheDocument()
+    const kit = screen.getByLabelText('arrow-up icon')
+    expect(kit).toBeTruthy
 })
 
 test('it renders custom icon', () => {
     render(
       <StatChange
           icon="chart-line-down"
-          id="custom-icon"
           value={6.1}
       />
 
     )
 
-    const kit = document.querySelector('#custom-icon')
-    const icon = kit.querySelector(".pb_custom_icon")
-    expect(icon).toBeInTheDocument()
+    const kit = screen.getByLabelText('chart-line-down icon')
+    expect(kit).toBeTruthy
 })

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

@@ -1 +1 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `background` or `backgroundColor` for the element in which it is nested).
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).

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

@@ -37,8 +37,6 @@ examples:
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
-    - table_with_header_style_borderless: Header Style Borderless
-    - table_with_header_style_floating: Header Style Floating
 
   react:
     - table_sm: Small

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -6,20 +6,8 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        th:not(:has(
-          [class*="pb_body_kit"],
-          [class*="pb_detail_kit"],
-          [class*="pb_title_kit"]
-        )),
-        .pb_table_th:not(:has(
-          [class*="pb_body_kit"],
-          [class*="pb_detail_kit"],
-          [class*="pb_title_kit"]
-        )) {
-          @include caption;
-        }
-
         th, .pb_table_th {
+          @include caption;
           border-bottom: 1px solid $border_light;
         }
       }
@@ -95,10 +83,10 @@
 
 // flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
 .header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
-  border-top-left-radius: 0 !important;
-}
-.header-floating > thead > tr:first-child > th:last-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
-  border-top-right-radius: 0 !important;
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
+  border-top-left-radius: 0 !important; 
+} 
+.header-floating > thead > tr:first-child > th:last-child, 
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
+  border-top-right-radius: 0 !important; 
 }

data/app/pb_kits/playbook/pb_table/styles/_striped.scss

@@ -1,7 +1,7 @@
-[class^=pb_table]:not(:has(colgroup)) {
+[class^=pb_table] {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {
+        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

data/app/pb_kits/playbook/pb_table/table.rb

@@ -37,16 +37,13 @@ module Playbook
       prop :outer_padding, type: Playbook::Props::Enum,
                            values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
                            default: nil
-      prop :header_style, type: Playbook::Props::Enum,
-                          values: %w[default borderless floating],
-                          default: "default"
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
-          "table-responsive-#{responsive}", header_style_class, separator: " "
+          "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -126,15 +123,6 @@ module Playbook
           outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
         end
       end
-
-      def header_style_class
-        case header_style
-        when "borderless"
-          "header-borderless"
-        when "floating"
-          "header-floating"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -26,12 +26,9 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :header_style, type: Playbook::Props::Enum,
-                          values: %w[default borderless floating],
-                          default: "default"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
+        generate_classname("pb_table_header_kit", align_class) + tag_class
       end
 
       def tag_class
@@ -109,15 +106,6 @@ module Playbook
         end
         active_item
       end
-
-      def header_style_class
-        case header_style
-        when "borderless"
-          "header-borderless"
-        when "floating"
-          "header-floating"
-        end
-      end
     end
   end
 end