playbook_ui 12.18.0 → 12.19.0.pre.alpha.PLAY699zindexresponsive650

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 066fe5069146426c6fb9111de27a23e19513b840bc5c0173fe862f05c9a6ad3a
-  data.tar.gz: b72f2e69c675d622a6dbdebec865da68d2914cadafa00b2f729319cb66b9e442
+  metadata.gz: 79e97a67011051e8187bac717ed8b2cc199f71e734a3d239384343489dc52c0b
+  data.tar.gz: 0c8a7f21df4e5190feee41f12a69513721bff189a83d9d41184bd25930effb6e
 SHA512:
-  metadata.gz: ac985c76a200cc24cfb19fc1c7cf58f0ff7d1d514c5f1d3b25f49e191498a283096d57b046a3fdafbece5f51373c1bb3c92b03fe2b5c62557243b6b38813eb49
-  data.tar.gz: bc02a9551e56ff2ba4ac05d4afa7cf9b488abe1d5b3293347798ceb8b563bea793fe6f64b1925eb70d4da1d649b6556e18e7586501feb12d73eb2850baf2bbce
+  metadata.gz: 854df41d949dee72464fc27f20827fc741399c06af493e40f49e18e55e61d0e419f5a70a061f9be357f9f466e981f39b7b3b95f89da7a46d6ae85820f93fcd3c
+  data.tar.gz: '09057a46d7390ad744d988ec907ddb53e4e1fd0d3afd8945b04c1c59e5b3c77c98beca823c3341e5ce054649ba487647ce42cc5f003fd99bc63bb6cdeb917981'

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/app/pb_kits/playbook/utilities/_positioning.scss

@@ -48,3 +48,17 @@
 .z_index_10 {
   z-index: 1000;
 }
+
+$zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+    
+@each $size, $size_value in $breakpoints_grid {
+  @each $zIndex_value in $zIndex_values {
+      $min_size: map-get($size_value, "min");
+      $max_size: map-get($size_value, "max");
+      .z_index_#{$size}_#{$zIndex_value} {
+        @include break_on($min_size, $max_size) {
+          z-index: #{$zIndex_value * 100} !important;
+        }
+      }
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -113,9 +113,11 @@ type Shadow = {
 
 type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
 
+type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
-}
+  zIndex?: ZIndexType,
+} | ZIndexResponsiveType
 
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
@@ -178,9 +180,19 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${maxWidth } ` : ''
     return css
   },
-  zIndexProps: ({ zIndex }: ZIndex) => {
+  zIndexProps: (zIndex: ZIndex) => {
     let css = ''
-    css += zIndex ? `z_index_${zIndex } ` : ''
+    Object.entries(zIndex).forEach((zIndexEntry) => {
+      if (zIndexEntry[0] == "zIndex") {
+        if (typeof zIndexEntry[1] == "number") {
+          css += `z_index_${zIndexEntry[1]} `
+        } else if (typeof zIndexEntry[1] == "object") {
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          })
+        }
+      }
+    })
     return css
   },
   shadowProps: ({ shadow }: Shadow) => {

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.19.0"
+  VERSION = "12.19.0.pre.alpha.PLAY699zindexresponsive650"
 end

data/lib/playbook/z_index.rb

@@ -16,16 +16,29 @@ module Playbook
       }
     end
 
-  private
+    def screen_size_values
+      %w[xs sm md lg xl]
+    end
 
     def z_index_props
-      selected_index_props = z_index_options.keys.select { |sk| try(sk) }
-      return nil unless selected_index_props.present?
+      selected_props = z_index_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      responsive = selected_props.present? && try(:z_index).is_a?(::Hash)
+      css = ""
+      if responsive
+        z_index_value = send(:z_index)
+        z_index_value.each do |key, value|
+          css += "z_index_#{key}_#{value} " if screen_size_values.include?(key.to_s) && z_index_values.include?(value.to_s)
+        end
+      else
+        selected_props.each do |k|
+          z_index_value = send(k)
+          css += "z_index_#{z_index_value} " if z_index_values.include? z_index_value
+        end
+      end
 
-      selected_index_props.map do |k|
-        index_value = send(k)
-        "z_index_#{index_value}" if z_index_values.include? index_value
-      end.compact.join(" ")
+      css unless css.blank?
     end
   end
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.18.0
+  version: 12.19.0.pre.alpha.PLAY699zindexresponsive650
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-03 00:00:00.000000000 Z
+date: 2023-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2485,7 +2485,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2496,12 +2496,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []