playbook_ui 12.18.0 → 12.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 066fe5069146426c6fb9111de27a23e19513b840bc5c0173fe862f05c9a6ad3a
-  data.tar.gz: b72f2e69c675d622a6dbdebec865da68d2914cadafa00b2f729319cb66b9e442
+  metadata.gz: 0f60bb863c6a7be595fe8ffcaa866a7796a0bb896732cf7ba5990d40444e6405
+  data.tar.gz: a3e06332bf074ce75e69c35184fd624b26ee9bfd02efcfad057dbafbcac3c608
 SHA512:
-  metadata.gz: ac985c76a200cc24cfb19fc1c7cf58f0ff7d1d514c5f1d3b25f49e191498a283096d57b046a3fdafbece5f51373c1bb3c92b03fe2b5c62557243b6b38813eb49
-  data.tar.gz: bc02a9551e56ff2ba4ac05d4afa7cf9b488abe1d5b3293347798ceb8b563bea793fe6f64b1925eb70d4da1d649b6556e18e7586501feb12d73eb2850baf2bbce
+  metadata.gz: c30ebfe71f1649440d65fda7871d6c6b4d11a0ced08299f38b5de90bd9f0c3108e3179e54fcbe3a064ef0b0411a11eb76382fcb9e464b2cc5c88e7c57224b33d
+  data.tar.gz: dda14920f8aa81dc398a665fee7b51d4bbedf537669f297fe76b3f04df0b813b47229cff6e809571bf62bbaa00909e9956b6e77d1895e338a956b4d3bf6d947d

data/app/pb_kits/playbook/pb_table/index.ts

@@ -11,8 +11,12 @@ export default class PbTable extends PbEnhancedElement {
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      var headers = [].map.call(table.querySelectorAll('th'), (header: Element) => {
-        return header.textContent.replace(/\r?\n|\r/, '')
+      let headers: string[] = [];
+      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        let colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+        }
       });
 
       // for each row in tbody

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

@@ -6,7 +6,7 @@ import {
   offset, 
   Placement, 
   safePolygon, 
-  shift, 
+  shift,
   useFloating, 
   useHover, 
   useInteractions,
@@ -17,9 +17,6 @@ import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
-
-
-
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
@@ -29,8 +26,8 @@ type TooltipProps = {
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
+  position?: "absolute" | "fixed";
   text: string,
-  zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
 const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -43,6 +40,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     icon = null,
     interaction = false,
     placement: preferredPlacement = "top",
+    position = "absolute",
     text,
     zIndex,
     ...rest
@@ -50,24 +48,26 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
 
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
-
+  
   const css = classnames(
     globalProps({...rest}),
     className,
   )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
-  const {
 
+
+  const {
     context,
     floating,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
     reference,
     strategy,
     x,
     y,
   } = useFloating({
+    strategy: position,
     middleware: [
       arrow({
         element: arrowRef,
@@ -87,6 +87,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement
   })
 
+
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -142,7 +143,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
               className="arrow_bg"
               ref={arrowRef}
               style={{
-                position: strategy,
+                position: "absolute",
                 left: arrowX != null ? `${arrowX}px` : "",
                 top: arrowY != null ? `${arrowY}px` : "",
                 [staticSide]: "-5px",
@@ -154,4 +155,4 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
   )
 }
 
-export default Tooltip
+export default Tooltip

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -65,3 +65,32 @@ test("closes on mouseleave", async () => {
 
   cleanup();
 });
+
+test("has default position absolute", async () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
+    cleanup();
+  })
+
+  cleanup();
+});
+
+test("has position fixed", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        position="fixed"
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "fixed"});
+    cleanup();
+  })
+
+  cleanup();
+});

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -68,7 +68,7 @@ $background_colors: (
 
 /* Card colors ------------------*/
 $card_light:          $white !default;
-$card_dark:           rgba($white, $opacity_1) !default;
+$card_dark:           mix(white, $bg_dark, 10%)  !default;
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
@@ -109,16 +109,18 @@ $focus_input_colors: (
 
 /* Border colors ----------------------*/
 $border_light:        #E4E8F0 !default;
-$border_dark:         rgba($white, $opacity_1) !default;
+$border_dark:         mix(white, $bg_dark, 20%) !default;
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 
 /* Shadow colors ----------------------*/
-$shadow:        rgba(#3C6AAC, $opacity_2) !default;
+$shadow:             rgba(#3C6AAC, $opacity_2) !default;
+$shadow_dark:        $bg_dark !default;
 $shadow_colors: (
   shadow:       $shadow,
+  shadow_dark:       $shadow_dark,
 );
 
 /* Text colors ------------------------*/

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.17.1"
-  VERSION = "12.18.0"
+  PREVIOUS_VERSION = "12.18.0"
+  VERSION = "12.19.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.18.0
+  version: 12.19.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-05-03 00:00:00.000000000 Z
+date: 2023-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack