playbook_ui 13.30.0.pre.alpha.20240515remotebuildkitconversion3150 → 13.30.0

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -23,7 +23,6 @@ type FixedConfirmationToastProps = {
   data?: string;
   horizontal?: "right" | "left" | "center";
   htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
-  icon?: string,
   id?: string;
   multiLine?: boolean;
   onClose?: VoidCallback;
@@ -42,7 +41,6 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     closeable = false,
     horizontal,
     htmlOptions = {},
-    icon,
     multiLine = false,
     onClose = () => undefined,
     open = true,
@@ -50,18 +48,14 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     text,
     vertical,
   } = props;
-
-  const returnedIcon = icon || iconMap[status]
-  const iconClass = icon ? "custom_icon" : ""
-
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
     { _multi_line: multiLine },
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
-    `${iconClass}`,
     globalProps(props),
     className
   );
+  const icon = iconMap[status];
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
@@ -92,11 +86,11 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {returnedIcon && (
+          {icon && (
             <Icon
                 className="pb_icon"
                 fixedWidth
-                icon={returnedIcon}
+                icon={icon}
             />
           )}
 

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

@@ -6,7 +6,6 @@ examples:
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_children: Children
-  - fixed_confirmation_toast_custom_icon: Custom Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -15,7 +14,6 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
-  - fixed_confirmation_toast_custom_icon: Custom Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -4,4 +4,3 @@ export { default as FixedConfirmationToastClose } from './_fixed_confirmation_to
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
-export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -20,7 +20,6 @@ module Playbook
                       values: [nil, "top", "bottom"],
                       default: nil
       prop :auto_close, type: Playbook::Props::Number
-      prop :icon, type: Playbook::Props::String
 
       def show_text?
         text.present?
@@ -43,24 +42,20 @@ module Playbook
       end
 
       def icon_value
-        icon || case status
-                when "success"
-                  "check"
-                when "error"
-                  "exclamation-triangle"
-                when "neutral"
-                  "info-circle"
-                when "tip"
-                  "info-circle"
-                end
-      end
-
-      def icon_class
-        icon.present? ? " custom_icon" : ""
+        case status
+        when "success"
+          "check"
+        when "error"
+          "exclamation-triangle"
+        when "neutral"
+          "info-circle"
+        when "tip"
+          "info-circle"
+        end
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class
       end
     end
   end

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
-import aliasesJson from './icon_aliases.json'
 
 export type IconSizes = "lg"
 | "xs"
@@ -41,19 +40,6 @@ type IconProps = {
   spin?: boolean,
 } & GlobalProps
 
-type AliasType = string | string[];
-
-interface Aliases {
-  [key: string]: AliasType;
-}
-
-interface AliasesJson {
-  aliases: Aliases;
-}
-
-const aliases: AliasesJson = aliasesJson;
-
-
 const flipMap = {
   horizontal: 'fa-flip-horizontal',
   vertical: 'fa-flip-vertical',
@@ -66,22 +52,6 @@ declare global {
   var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
 }
 
-// Resolve alias function
-const resolveAlias = (icon: string): string => {
-  const alias = aliases.aliases[icon];
-
-  if (alias) {
-    if (Array.isArray(alias)) {
-      return alias[0];
-    } else {
-      return alias;
-    }
-  }
-
-  return icon;
-};
-
-
 const Icon = (props: IconProps) => {
   const {
     aria = {},
@@ -104,8 +74,7 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
 
-  const resolvedIcon = resolveAlias(icon as string)
-  let iconElement: ReactSVGElement | null = typeof(resolvedIcon) === "object" ? resolvedIcon : null
+  let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
 
   const faClasses = {
     'fa-border': border,
@@ -121,12 +90,12 @@ const Icon = (props: IconProps) => {
 
   if (!customIcon && !iconElement) {
     const PowerIcon: React.FunctionComponent<any> | undefined =
-      window.PB_ICONS ? window.PB_ICONS[resolvedIcon as string] : null
+      window.PB_ICONS ? window.PB_ICONS[icon as string] : null
 
     if (PowerIcon) {
       iconElement = <PowerIcon /> as ReactSVGElement
     } else {
-      faClasses[`fa-${resolvedIcon}`] = resolvedIcon as string
+      faClasses[`fa-${icon}`] = icon as string
     }
   }
 
@@ -146,7 +115,7 @@ const Icon = (props: IconProps) => {
     className
   )
 
-  aria.label ? null : aria.label = `${resolvedIcon} icon`
+  aria.label ? null : aria.label = `${icon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -168,7 +137,7 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
-    else if (isValidEmoji(resolvedIcon as string))
+    else if (isValidEmoji(icon as string))
       return (
         <>
           <span
@@ -177,7 +146,7 @@ const Icon = (props: IconProps) => {
               className={classesEmoji}
               id={id}
           >
-            {resolvedIcon}
+            {icon}
           </span>
         </>
       )

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb

@@ -1,6 +1 @@
-<%= pb_rails("icon", props: { icon: "angles-down", fixed_width: true }) %>
-<%= pb_rails("icon", props: { icon: "circle-arrow-right", fixed_width: true }) %>
-<%= pb_rails("icon", props: { icon: "arrow-circle-right", fixed_width: true }) %>
-
-<%= pb_rails("caption", props: { text: "Font Awesome (no alias & not in our Playbook-icons lib)", margin_y: "md" }) %>
-<%= pb_rails("icon", props: { icon: "elephant", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -1,29 +1,13 @@
-import React from "react"
+import React from 'react'
 
-import Icon from "../_icon"
-import {Caption} from "../.."
+import Icon from '../_icon'
 
 const IconDefault = (props) => {
   return (
     <div>
-      <Icon fixedWidth
-          icon='angles-down'
-          {...props}
-      />
-      <Icon fixedWidth
-          icon='circle-arrow-right'
-          {...props}
-      />
-      <Icon fixedWidth
-          icon='arrow-circle-right'
-          {...props}
-      />
-      <Caption
-          marginY='md'
-          text='Font Awesome (no alias & not in our Playbook-icons lib)'
-      />
-      <Icon fixedWidth
-          icon='elephant'
+      <Icon
+          fixedWidth
+          icon="user"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -3,7 +3,6 @@
 # rubocop:disable Style/HashLikeCase
 
 require "open-uri"
-require "json"
 
 module Playbook
   module PbIcon
@@ -39,8 +38,6 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
-      ALIASES = JSON.parse(File.read(Playbook::Engine.root.join("app/pb_kits/playbook/pb_icon/icon_aliases.json")))["aliases"].freeze
-
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
@@ -86,8 +83,7 @@ module Playbook
         return unless Rails.application.config.respond_to?(:icon_path)
 
         base_path = Rails.application.config.icon_path
-        resolved_icon = resolve_alias(icon)
-        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{resolved_icon}.svg")).first
+        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{icon}.svg")).first
         icon_path if icon_path && File.exist?(icon_path)
       end
 
@@ -110,22 +106,6 @@ module Playbook
 
     private
 
-      def resolve_alias(icon)
-        aliases = ALIASES[icon]
-        return icon unless aliases
-
-        if aliases.is_a?(Array)
-          aliases.find { |alias_name| file_exists?(alias_name) } || icon
-        else
-          aliases
-        end
-      end
-
-      def file_exists?(alias_name)
-        base_path = Rails.application.config.icon_path
-        File.exist?(Dir.glob(Rails.root.join(base_path, "**", "#{alias_name}.svg")).first)
-      end
-
       def svg_size
         size.nil? ? "1x" : size
       end

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

@@ -10,7 +10,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  enableDrag?: boolean;
+  draggable?: boolean;
   data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -32,7 +32,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
-    enableDrag = false,
+    draggable = false,
     htmlOptions = {},
     id,
     layout = "",
@@ -54,7 +54,7 @@ const List = (props: ListProps) => {
   const childrenWithProps = React.Children.map(
     children,
     (child: React.ReactElement) => {
-      return React.cloneElement(child, { text, variant, enableDrag });
+      return React.cloneElement(child, { text, variant, draggable });
     }
   );
   const ariaProps = buildAriaProps(aria);
@@ -74,7 +74,7 @@ const List = (props: ListProps) => {
   return (
     <>
     {
-      enableDrag ? (
+      draggable ? (
         <Draggable.Container>
      <div className={classes}>
       {ordered ? (

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_nav/docs/_collapsible_nav.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("nav", props: { variant: "bold" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsed: false }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
         <%= pb_rails("nav", props: { variant: "bold" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -9,7 +9,6 @@ const CollapsibleNav = (props) => {
     >
       <NavItem
           active
-          collapsed={false}
           collapsible 
           iconLeft="city" 
           link="#" 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md

@@ -1,3 +1 @@
-The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
-
-The optional `collapsed` prop can also be used to set the default state for the collapsed nav on first render of the page. `collapsed` takes a boolean value that is set to true (meaning nav is collapsed) by default. Set it to false as shown here to have the nav open on first render.
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -22,7 +22,7 @@
           </span>
         <% end %>    
        <% end %>
-      <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
+      <%= pb_rails("collapsible/collapsible_content") do %>
         <%= content.presence %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -12,7 +12,6 @@ module Playbook
                          default: "regular"
       prop :highlighted_border, type: Playbook::Props::Boolean, default: true
       prop :collapsible, type: Playbook::Props::Boolean, default: false
-      prop :collapsed, type: Playbook::Props::Boolean, default: true
       prop :link
       prop :text
       prop :collapsible_trail, type: Playbook::Props::Boolean, default: false

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/pb_table/table_header.html.erb

@@ -52,20 +52,6 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-      <% 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 %>
+      <%= content.presence || object.text %>
   <% end %>
+<% end %>

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

@@ -2,7 +2,6 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps";
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
@@ -15,7 +14,7 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
-} & GlobalProps
+}
 
 const TimelineItem = ({
   className,
@@ -25,7 +24,7 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
-  ...props
+
 }: ItemProps) => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
@@ -33,23 +32,23 @@ const TimelineItem = ({
 
   return (
     <div 
-        {...htmlProps}
-        className={classnames(timelineItemCss, globalProps(props), className)}
+      {...htmlProps}
+      className={classnames(timelineItemCss, className)}
     >
       <div className="pb_timeline_item_left_block">
         {date &&
           <DateStacked
-              align="center"
-              date={date}
-              size="sm"
+            align="center"
+            date={date}
+            size="sm"
           />
         }
       </div>
       <div className="pb_timeline_item_step">
         <IconCircle
-            icon={icon}
-            size="xs"
-            variant={iconColor}
+          icon={icon}
+          size="xs"
+          variant={iconColor}
         />
         <div className="pb_timeline_item_connector" />
       </div>

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
 
@@ -15,7 +14,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-} & GlobalProps
+}
 
 const Timeline = ({
   aria = {},
@@ -26,7 +25,6 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  ...props
 }: TimelineProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -35,11 +33,11 @@ const Timeline = ({
   const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(timelineCss, globalProps(props), className)}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classnames(timelineCss, className)}
+      id={id}
     >
       {children}
     </div>

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: