playbook_ui 13.30.0.pre.alpha.PBNTR353draggablev53136 → 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -11,7 +11,6 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: Record<string, unknown>,
-  dragId?: string,
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -24,8 +23,7 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
-    enableDrag,
-    dragId, 
+    draggable = false,
     dragHandle = true,
     htmlOptions = {},
     id,
@@ -44,10 +42,8 @@ const ListItem = (props: ListItemProps) => {
   return (
     <>
     {
-      enableDrag ? (
-        <Draggable.Item 
-            dragId={dragId}
-        >
+      draggable ? (
+        <Draggable.Item id={id}>
         <li
             {...ariaProps}
             {...dataProps}

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

@@ -1,7 +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. 
+Overlays require 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 optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
 
-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 `position` key accepts `top`, `bottom`, `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). 
+The `size` value 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. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.

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

@@ -2,7 +2,3 @@ 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_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, domSafeProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import Checkbox from "../pb_checkbox/_checkbox";
 import ListItem from "../pb_list/_list_item";
@@ -16,7 +16,6 @@ export type SelectableListItemProps = {
   className?: string;
   data?: GenericObject;
   defaultChecked?: boolean;
-  dragId?: string;
   dragHandle?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -34,7 +33,6 @@ const SelectableListItem = ({
   children,
   className,
   data = {},
-  dragId,
   dragHandle = true,
   defaultChecked,
   htmlOptions = {},
@@ -69,7 +67,7 @@ const SelectableListItem = ({
         {...props}
         className={classnames(checkedState ? "checked_item" : "", className)}
         dragHandle={dragHandle}
-        dragId={dragId}
+        id={id}
     >
       <div 
           {...ariaProps} 
@@ -108,9 +106,7 @@ const SelectableListItem = ({
                 text={label}
                 type="radio"
                 value={value}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                //@ts-ignore
-                {...domSafeProps(props)}
+                {...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,
-  enableDrag?: boolean,
+  draggable?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',
@@ -26,7 +26,7 @@ const SelectableList = (props: SelectableListProps) => {
     children,
     className,
     data = {},
-    enableDrag = false,
+    draggable = false,
     htmlOptions = {},
     id,
   } = props
@@ -68,7 +68,7 @@ const SelectableList = (props: SelectableListProps) => {
         className={classes}
         id={id}
     >
-      <List enableDrag={enableDrag}
+      <List draggable={draggable}
           variant={props.variant}
       >
         {selectableListItems}

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

@@ -520,7 +520,6 @@ 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: *web
-        status: "stable"
+        platforms: *react_only
+        status: "beta"
       - name: "draggable"
         platforms: *react_only
         description: