playbook_ui 14.21.2.pre.alpha.PLAY22558410 → 14.22.0.pre.alpha.PLAY2207preservesearchinputrails8526

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e74ebcaf8b226f04a617fc63083c59c61951a3f792409c906b7556ef4976f6c0
-  data.tar.gz: 755270c0eee4c986ca9d0534ffd31bec09383994a038ab4a6da7e43740537e10
+  metadata.gz: fb55b0bca007611e41aa7ce0472e8e483b7cd331474f40cb148c7b1035a49f55
+  data.tar.gz: '062979c589167bf83791e83d6ba8bdf57027f60a5f3dca112becf14c5329eeb3'
 SHA512:
-  metadata.gz: f7329823f5e763a4aa9712a78d7467fde07db90542cb2d6416ade72983d3984651f03fb3bb847f92582293623569a9c24a8756b051eec84a524b525a2164b9ce
-  data.tar.gz: 5fab13b2c33b5ee332beb81aed83254723ed0808a7d0b85cc68acadde24d79f8cdf773c7b97e73025e1a6ed00e118304533fab5581ce7bcfd46db7c7b98a843d
+  metadata.gz: 8bcbbe90d7ab4ba8461d71468d0f12ba34c2fcda3d6254de02d4ef3b0ab9ca49009af25122de796e7e7403dbacc0241781d03fd5401516a605dc2bb831c6fd46
+  data.tar.gz: c1d521f3b072a5326b6caa43efbdd462c68d8861b91a8db031fa8c974c088e947709d0c2bfe28a46a38358232d152a01924d097214e74b7e88883a82f432e4ef

data/app/pb_kits/playbook/_playbook.scss

@@ -104,7 +104,6 @@
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
 @import 'pb_tooltip/tooltip';
-@import 'pb_treemap_chart/treemap_chart';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -56,7 +56,7 @@
   }
 
   .bg-row-selection {
-    background-color: $info_subtle;
+    background-color: #E5EEFA;
   }
 
   .full-width {
@@ -227,7 +227,7 @@
 
       &.bg-row-selection {
         td:first-child {
-          background-color: $info_subtle;
+          background-color: #E5EEFA;
         }
       }
     }
@@ -892,6 +892,18 @@
         }
       }
     }
+    .bg-row-selection {
+      background-color: #202850;
+    }
+    .pb_advanced_table_body {
+      tr.virtualized-table-row {
+        &.bg-row-selection {
+          td:first-child {
+            background-color: #202850;
+          }
+        }
+      }
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -2,7 +2,8 @@
   $border-color,
   $bg-main,
   $bg-secondary,
-  $highlight: $info_subtle
+  $highlight: #E5EEFA,
+  $highlight-dark: #202850,
 ) {
   border-radius: 4px;
   box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
@@ -95,4 +96,18 @@
       box-shadow: none !important;
     }
   }
+
+  &.dark {
+    .bg-row-selection {
+      td:first-child,
+      .sticky-left {
+        background-color: $highlight-dark;
+      }
+    }
+    .virtualized-table-row {
+      &.bg-row-selection td:first-child {
+        background-color: $highlight-dark;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -77,12 +77,12 @@ test('returns correct icon', () => {
 
   expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
+  expect(screen.getByTestId('test-work').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
+  expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -166,43 +164,7 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -165,43 +163,7 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -58,12 +58,12 @@ function FilterTest(props) {
 }
 
 test("triggers popover on filter button click", () => {
-  render(<FilterTest data={{ testid: "render-test" }}/>);
+  const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
 
   const btn = screen.getAllByRole("button")[0];
 
   // checks if the sort menu rendered
-  expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
+  expect(container.querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered 
 
   // hits the filter button and triggers popover

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -22,6 +22,10 @@
               border-radius: 0 4px 0 0;
               border-width: 1px 1px 1px 0;
             }
+            &:only-child {
+              border-radius: 4px 4px 0 0;
+              border-width: 1px 1px 1px 1px;
+            }
           }
         }
       }
@@ -39,6 +43,9 @@
             &:last-child {
               border-width: 0 1px 1px 0;
             }
+            &:only-child {
+              border-width: 0 1px 1px 1px;
+            }
           }
 
           &:last-child {
@@ -53,6 +60,10 @@
                 border-radius: 0 0 4px 0;
                 border-width: 0 1px 1px 0;
               }
+              &:only-child {
+                border-radius: 0 0 4px 4px;
+                border-width: 0 1px 1px 1px;
+              }
             }
           }
         }

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -9,6 +9,7 @@ import {
   shift,
   useFloating,
   useHover,
+  useClick,
   useInteractions,
 } from "@floating-ui/react"
 
@@ -23,6 +24,7 @@ type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
   children: JSX.Element,
+  useClickToOpen?: boolean,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
   height?: string,
@@ -46,6 +48,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     aria = {},
     className,
     children,
+    useClickToOpen = false,
     data = {},
     delay = 0,
     height,
@@ -110,14 +113,21 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     placement: preferredPlacement
   })
 
+  const hover = useHover(context, {
+    delay,
+    handleClose: interaction ? safePolygon({
+      blockPointerEvents: false
+    }) : null,
+    enabled: !useClickToOpen // Disable hover when useClickToOpen is true
+  })
+
+  const click = useClick(context, {
+    enabled: useClickToOpen // Only enable click when useClickToOpen is true
+  })
 
-  const { getFloatingProps } = useInteractions([
-    useHover(context, {
-      delay,
-      handleClose: interaction ? safePolygon({
-        blockPointerEvents: false
-      }) : null
-    })
+  const { getFloatingProps, getReferenceProps } = useInteractions([
+    hover,
+    click
   ])
 
   const staticSide = {
@@ -142,22 +152,24 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   return (
     <>
       <div
-          className={`pb_tooltip_kit ${css}`}
-          ref={(element) => {
-            refs.setReference(element);
-            if (ref) {
-              if (typeof ref === "function") {
-                ref(element);
-              } else if (typeof ref === "object") {
-                ref.current = element;
+          {...getReferenceProps({
+            className: `pb_tooltip_kit ${css}`,
+            ref: (element) => {
+              refs.setReference(element);
+              if (ref) {
+                if (typeof ref === "function") {
+                  ref(element);
+                } else if (typeof ref === "object") {
+                  ref.current = element;
+                }
               }
-            }
-          }}
-          role="tooltip_trigger"
-          style={{ display: "inline-block" }}
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
+            },
+            role: "tooltip_trigger",
+            style: { display: "inline-block" },
+            ...ariaProps,
+            ...dataProps,
+            ...htmlProps,
+          })}
       >
         {children}
       </div>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Button from '../../pb_button/_button'
+import Tooltip from '../_tooltip'
+import Flex from '../../pb_flex/_flex'
+
+const TooltipClickOpen = (props) => {
+  return (
+    <Flex flexDirection='row'
+        gap='md'
+        wrap
+    >
+      <Tooltip
+          placement='top'
+          text='Tooltip Opened'
+          useClickToOpen
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Click to Open' />
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export default TooltipClickOpen

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md

@@ -0,0 +1 @@
+Set the prop `useClickToOpen` so that the tooltip will only appear when an item is clicked rather than hovered over.

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

@@ -18,3 +18,4 @@ examples:
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
+  - tooltip_click_open: Click to Open

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

@@ -5,3 +5,4 @@ export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'
+export { default as TooltipClickOpen } from './_tooltip_click_open'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb

@@ -0,0 +1,17 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    is_multi: false,
+    label: "Colors",
+    options: options,
+    placeholder: "Select...",
+    preserve_search_input: true,
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md

@@ -0,0 +1 @@
+By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserve_search_input` prop in order to prevent text from being cleared when the field loses focus

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

@@ -15,6 +15,7 @@ examples:
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
     - typeahead_disabled: Disabled
+    - typeahead_preserve_input: Preserve Search Input
 
   react:
     - typeahead_default: Default

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -54,6 +54,8 @@ module Playbook
                                      default: nil
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :preserve_search_input, type: Playbook::Props::Boolean,
+                                   default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -103,6 +105,7 @@ module Playbook
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,
           disabled: disabled,
+          preserveSearchInput: preserve_search_input,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?