playbook_ui 13.29.0.pre.alpha.testingcollapsibleissue3052 → 13.30.0.pre.alpha.PBNTR353draggablev53136

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("overlay") do %>
+    <%= pb_rails("table", props: { size: "sm" }) do %>
+        <thead>
+            <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+                <th>Column 4</th>
+                <th>Column 5</th>
+            </tr>
+        </thead>
+        <tbody>
+            <% 7.times do %>
+                <tr>
+                    <td>Value 1</td>
+                    <td>Value 2</td>
+                    <td>Value 3</td>
+                    <td>Value 4</td>
+                    <td>Value 5</td>
+                </tr>
+            <% end %>   
+        </tbody>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+    Overlay,
+    Table,
+} from '../..'
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+
+const OverlayDefault = () => (
+    <>
+        <Overlay>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayDefault

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -0,0 +1,7 @@
+Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
+
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
+
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from '../..'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayMultiDirectional = () => (
+    <>
+        <Overlay
+            color="card_light"
+            layout={{"x": "xl"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayMultiDirectional

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md

@@ -0,0 +1,5 @@
+Optionally, you can pass multi-directional options (`x` or `y`) to the `position` key, which creates multiple overlays. 
+
+Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` value you set. 
+
+NOTE: Multi-directional overlays share the available container space, so passing `full` or a percentage string greater than 50% to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a percentage size of 25% when using multi-directional overlays.

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

@@ -0,0 +1,8 @@
+examples:
+  react:
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional
+
+  rails:
+    - overlay_default: Default
+    - overlay_multi_directional: Multi-directional

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

@@ -0,0 +1,2 @@
+export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -0,0 +1,27 @@
+<%= pb_content_tag(:div,
+aria: object.aria,
+class: object.classname,
+data: object.data,
+id: object.id,
+**combined_html_options) do %>
+    <% if is_size_percentage %>
+        <div class="overlay_linear_gradient"
+        style="background: <%= previous_overlay %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="overlay_linear_gradient"
+            style="background: <%= subsequent_overlay %>"></div>
+        <% end %>
+
+    <% else %>
+        <div class="<%= previous_overlay_class_name %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbOverlay
+    class Overlay < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[card_light bg_light card_dark bg_dark],
+                   default: "card_light"
+      prop :layout, type: Playbook::Props::HashProp,
+                    default: { "bottom": "full" }
+
+      def classname
+        generate_classname("pb_overlay")
+      end
+
+      def position
+        layout.keys[0]
+      end
+
+      def size
+        layout.values[0]
+      end
+
+      def is_size_percentage
+        size.include?("%")
+      end
+
+      def previous_overlay
+        "linear-gradient(#{previous_overlay_direction}, #{color_map[color.to_sym]} 0%, transparent #{size})"
+      end
+
+      def subsequent_overlay
+        "linear-gradient(#{subsequent_overlay_direction}, #{color_map[color.to_sym]} 0%, transparent #{size})"
+      end
+
+      def previous_overlay_class_name
+        "overlay_#{color}_#{previous_overlay_direction_token}_#{size}"
+      end
+
+      def subsequent_overlay_class_name
+        "overlay_#{color}_#{subsequent_overlay_direction_token}_#{size}"
+      end
+
+      def previous_overlay_direction
+        previous_overlay_direction_map[position.to_sym]
+      end
+
+      def subsequent_overlay_direction
+        subsequent_overlay_direction_map[position.to_sym]
+      end
+
+      def previous_overlay_direction_token
+        has_subsequent_overlay ? previous_overlay_direction_map_token[position.to_sym] : position
+      end
+
+      def subsequent_overlay_direction_token
+        has_subsequent_overlay ? subsequent_overlay_direction_map_token[position.to_sym] : position
+      end
+
+      def previous_overlay_direction_map
+        {
+          "bottom": "to top",
+          "top": "to bottom",
+          "left": "to right",
+          "right": "to left",
+          "x": "to right",
+          "y": "to top",
+        }
+      end
+
+      def subsequent_overlay_direction_map
+        {
+          "bottom": "to top",
+          "top": "to bottom",
+          "left": "to right",
+          "right": "to left",
+          "x": "to left",
+          "y": "to bottom",
+        }
+      end
+
+      def previous_overlay_direction_map_token
+        {
+          "x": "left",
+          "y": "top",
+        }
+      end
+
+      def subsequent_overlay_direction_map_token
+        {
+          "x": "right",
+          "y": "bottom",
+        }
+      end
+
+      def has_subsequent_overlay
+        position == "x".to_sym || position == "y".to_sym
+      end
+
+      def color_map
+        {
+          "card_light": "#fff",
+          "bg_light": "#F3F7FB",
+          "card_dark": "#231E3D",
+          "bg_dark": "#0a0527",
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { render, screen } from '../utilities/test-utils'
+import { Overlay } from '..'
+
+const testId = "overlay"
+const children = "This is the Overlay children"
+
+test('should pass data prop', () => {
+    const props = {
+        children,
+        data: { testid: testId }
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test("should pass className prop", () => {
+    const className = "custom-class-name"
+    const props = {
+        className,
+        children,
+        data: { testid: testId },
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    const props = {
+        aria: { label: testId },
+        children,
+        data: { testid: testId },
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should pass id prop', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('id', testId)
+})
+
+test('should render children', () => {
+    const props = {
+        children,
+        data: { testid: testId }
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent(props.children)
+})

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import defaultColors from "../../tokens/exports/_colors.scss";
+import { OverlayChildrenProps } from '../_overlay';
+
+
+const previousOverlayDirectionMap: { [key: string]: string } = {
+    "bottom": "to top",
+    "top": "to bottom",
+    "left": "to right",
+    "right": "to left",
+    "x": "to right",
+    "y": "to top",
+}
+
+const subsequentOverlayDirectionMap: { [key: string]: string } = {
+    ...previousOverlayDirectionMap,
+    "x": "to left",
+    "y": "to bottom",
+}
+
+const OverlayPercentage = (props: OverlayChildrenProps) => {
+    const {
+        children,
+        color,
+        position,
+        size,
+    } = props
+
+    const getPreviousOverlayDirection = () => {
+        return previousOverlayDirectionMap[position]
+    }
+
+    const getSubsequentOverlayDirection = () => {
+        return subsequentOverlayDirectionMap[position]
+    }
+
+    const hasSubsequentOverlay = position === "x" || position === "y"
+
+    const previousOverlay = `linear-gradient(${getPreviousOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${size})`
+    const subsequentOverlay = `linear-gradient(${getSubsequentOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${size})`
+
+    return (
+        <>
+            <div className="overlay_linear_gradient"
+                style={{ background: previousOverlay }} />
+
+            {children}
+
+            { hasSubsequentOverlay &&
+                <div className="overlay_linear_gradient"
+                    style={{ background: subsequentOverlay }} />
+            }       
+        </>
+    )
+}
+
+export default OverlayPercentage

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { OverlayChildrenProps } from '../_overlay'
+
+const previousOverlayDirectionMap: { [key: string]: string } = {
+    "x": "left",
+    "y": "top",
+}
+
+const subsequentOverlayDirectionMap: { [key: string]: string } = {
+    "x": "right",
+    "y": "bottom",
+}
+
+const OverlayToken = (props: OverlayChildrenProps) => {
+    const {
+        children,
+        color,
+        position,
+        size,
+    } = props
+
+    const hasSubsequentOverlay = position === "x" || position === "y"
+
+    const getPreviousOverlayDirection = () => {
+        return hasSubsequentOverlay ? previousOverlayDirectionMap[position] : position
+    }
+
+    const getSubsequentOverlayDirection = () => {
+        return hasSubsequentOverlay ? subsequentOverlayDirectionMap[position] : position
+    }
+
+    const previousOverlayClassName = `overlay_${color}_${getPreviousOverlayDirection()}_${size}`
+    const subsequentOverlayClassName = `overlay_${color}_${getSubsequentOverlayDirection()}_${size}`
+
+    return (
+        <>
+            <div className={previousOverlayClassName} />
+
+            {children}
+
+            { hasSubsequentOverlay &&
+                <div className={subsequentOverlayClassName} />
+            }
+        </>
+    )
+}
+
+export default OverlayToken

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -24,8 +24,13 @@ $flag-min-resolution: 192dpi;
     transition: $transition_default;
   }
 
+  .iti__divider {
+    border-bottom: 1px solid $border_light !important;  
+  }
+
   .iti__selected-flag {
     padding: 0 $space_xxs 0 $space_sm;
+    border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -33,7 +38,6 @@ $flag-min-resolution: 192dpi;
 
     &:focus-visible {
       outline-style: solid;
-      border-radius: $space_xxs 0px 0px $space_xxs;
       outline-color: $primary;
     }
   }
@@ -55,7 +59,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__flag {
-    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
+    background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
     border-radius: 1px;
   }
 
@@ -101,28 +105,36 @@ $flag-min-resolution: 192dpi;
     color: $primary_action;
   }
 
-  .iti__active::after {
-    float: right;
+  .iti__country-list .iti__country {
+    display: flex;
+    align-items: center;
+  }
+
+  .iti__flag-box,
+  .iti__country-name,
+  .iti__dial-code {
+    flex-grow: 0;
+  }
+
+  .iti__dial-code {
+    margin-right: $space_sm;
+  }
+
+
+  .iti__country-list .iti__country.iti__active::after {
     content: "";
-    margin-top: $space_xxs + 1px;
-    transform: rotate($transform-rotate-deg/3);
-    height: $space_xs + 4px;
-    width: $space_xxs + 2px;
+    margin-left: auto;
+    transform: rotate(45deg);
+    height: 12px;
+    width: 6px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 1px;
   }
 
-  .iti__country-list {
-    min-width: $dropdown-min-width;
-    border-radius: $border_radius_md;
-    border: 1px solid $border_light;
-    box-shadow: $shadow_deep;
-    margin-top: 1px;
-  }
-
-  .iti__divider {
-    border-bottom: 1px solid $border_light;
+  .iti__dropdown-content {
+    border-radius: $space_xs; 
+    border: 1px solid $border_light !important;
   }
 
   &.dark {
@@ -147,6 +159,15 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
 
+    .iti__dropdown-content {
+      border-radius: $space_xs; 
+      border: 1px solid $border_dark !important;
+    }
+
+    .iti__divider {
+      border-bottom: 1px solid $border_dark !important;  
+    }
+
     .iti__country-list {
       background-color: $bg_dark;
       border: 1px solid $border_dark;
@@ -157,17 +178,14 @@ $flag-min-resolution: 192dpi;
         .iti__country-name {
           color: $text_dk_default;
         }
-  
+
         .iti__dial-code {
           color: $text_lt_lighter;
+          margin-right: $space_sm;
         }
       }
     }
 
-    .iti__divider {
-      border-bottom: 1px solid $border_dark;
-    }
-
     .iti__arrow.iti__arrow--up::before {
       color: $slate;
     }
@@ -178,10 +196,10 @@ $flag-min-resolution: 192dpi;
       }
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
-      background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
+      background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
     }
   }
 }

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import classnames from "classnames";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, domSafeProps } from "../utilities/globalProps";
 
 import Checkbox from "../pb_checkbox/_checkbox";
 import ListItem from "../pb_list/_list_item";
@@ -16,6 +16,7 @@ export type SelectableListItemProps = {
   className?: string;
   data?: GenericObject;
   defaultChecked?: boolean;
+  dragId?: string;
   dragHandle?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -33,6 +34,7 @@ const SelectableListItem = ({
   children,
   className,
   data = {},
+  dragId,
   dragHandle = true,
   defaultChecked,
   htmlOptions = {},
@@ -67,7 +69,7 @@ const SelectableListItem = ({
         {...props}
         className={classnames(checkedState ? "checked_item" : "", className)}
         dragHandle={dragHandle}
-        id={id}
+        dragId={dragId}
     >
       <div 
           {...ariaProps} 
@@ -106,7 +108,9 @@ const SelectableListItem = ({
                 text={label}
                 type="radio"
                 value={value}
-                {...props}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                {...domSafeProps(props)}
             />
             {children}
           </>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -14,7 +14,7 @@ type SelectableListProps = {
   children?: React.ReactElement[],
   className?: string,
   data?: GenericObject,
-  draggable?: boolean,
+  enableDrag?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',
@@ -26,7 +26,7 @@ const SelectableList = (props: SelectableListProps) => {
     children,
     className,
     data = {},
-    draggable = false,
+    enableDrag = false,
     htmlOptions = {},
     id,
   } = props
@@ -68,7 +68,7 @@ const SelectableList = (props: SelectableListProps) => {
         className={classes}
         id={id}
     >
-      <List draggable={draggable}
+      <List enableDrag={enableDrag}
           variant={props.variant}
       >
         {selectableListItems}