playbook_ui 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159

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/example.yml

@@ -2,3 +2,7 @@ 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/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_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}

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -52,6 +52,20 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-      <%= content.presence || object.text %>
+      <% unless sorting_style? %>
+        <%= content.presence || object.text %>
+      <% else %>
+        <%= link_to next_link, style: link_style do %>
+          <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
+            <%= content.presence || object.text %>
+              <% if sorting_style? %>
+                <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
+                                              fixed_width: true,
+                                              classname: active_item.any? ? "pb_th_active" : "",
+                                              padding_left: "xs" }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
   <% end %>
-<% end %>

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

@@ -520,6 +520,7 @@ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: st
     'paddingY',
     'padding',
     'dark',
+    'enableDrag',
   ]
   return omit(props, notSafeProps)
 }

data/dist/menu.yml

@@ -353,8 +353,8 @@ kits:
         description: 
         status: "stable"
       - name: "overlay"
-        platforms: *react_only
-        status: "beta"
+        platforms: *web
+        status: "stable"
       - name: "draggable"
         platforms: *react_only
         description: