playbook_ui 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -0,0 +1,71 @@
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Button from '../pb_button/_button'
+import Icon from '../pb_icon/_icon'
+import { IconSizes } from "../pb_icon/_icon"
+
+type IconButtonProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  htmlType?: 'submit' | 'reset' | 'button' | undefined,
+  icon?: string,
+  id?: string,
+  link?: string,
+  newWindow?: boolean,
+  size?: IconSizes,
+  target?: string,
+  variant?: 'default' | 'link',
+}
+
+const IconButton = (props: IconButtonProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    htmlType = 'button',
+    icon = 'bars',
+    id,
+    link,
+    newWindow = false,
+    size = "2x",
+    target,
+    variant = "default",
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Button
+          borderRadius="lg"
+          htmlType={htmlType}
+          link={link}
+          newWindow={newWindow}
+          target={target}
+      >
+        <Icon
+            className="icon_button_icon"
+            fixedWidth
+            icon={icon}
+            paddingX="xxs"
+            paddingY="xs"
+            size={size}
+        />
+      </Button>
+    </div>
+  )
+}
+
+export default IconButton

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -1,3 +1,2 @@
 <%= pb_rails("icon_button") %>
-</br>
-<%= pb_rails("icon_button", props: {variant: "link"}) %>
+<%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { IconButton } from 'playbook-ui'
+
+const IconButtonDefault = (props) => (
+  <div>
+    <IconButton
+        {...props}
+    />
+    <IconButton
+        {...props}
+        marginTop="md"
+        variant="link"
+    />
+  </div>
+)
+
+export default IconButtonDefault

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("flex", props: { align: "center"}) do %>
+  <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
+  <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
+<% end %>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { IconButton, Flex } from 'playbook-ui'
+
+const IconButtonSizes = (props) => (
+  <div>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="lg"
+      />
+      <span>Large</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="sm"
+      />
+      <span>Small</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="xs"
+      />
+      <span>XSmall</span>
+    </Flex>
+    <Flex
+        align="center"
+        marginTop="md"
+    >
+      <IconButton
+          {...props}
+          size="1x"
+      />
+      <span>1x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="2x"
+      />
+      <span>2x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="3x"
+      />
+      <span>3x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="4x"
+      />
+      <span>4x</span>
+    </Flex>
+  </div>
+)
+
+export default IconButtonSizes

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

@@ -2,6 +2,8 @@ examples:
   
   rails:
   - icon_button_default: Default
-  
-  
-  
+  - icon_button_sizes: Sizes
+
+  react:
+  - icon_button_default: Default
+  - icon_button_sizes: Sizes

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

@@ -0,0 +1,2 @@
+export { default as IconButtonDefault } from './_icon_button_default.jsx'
+export { default as IconButtonSizes } from './_icon_button_sizes.jsx'

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -8,7 +8,7 @@
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,
-                                size: "2x",
+                                size: object.size,
                                 color: "text_lt_default",
                                 classname: "icon_button_icon",
                                 padding_x: "xxs", padding_y: "xs" }) %>

data/app/pb_kits/playbook/pb_icon_button/icon_button.rb

@@ -14,6 +14,9 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default link],
                      default: "default"
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[1x 2x 3x 4x 5x 6x 7x 8x 9x 10x xs sm lg],
+                  default: "2x"
       def classname
         generate_classname("pb_icon_button_kit", variant)
       end

data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx

@@ -0,0 +1,39 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import { IconButton } from 'playbook-ui'
+
+const props = {
+  data: { testid: 'default', icon: 'plus' }
+}
+
+test('default test', () => {
+  const kit = renderKit(IconButton, props)
+
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_default')
+
+  const iconElement = kit.querySelector('.icon_button_icon')
+  expect(iconElement).toBeInTheDocument()
+})
+
+it("should be accessible", async () => {
+  ensureAccessible(IconButton, props)
+})
+
+test('passes link variant prop', () => {
+  const kit = renderKit(IconButton, { ...props, variant: "link" })
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_link')
+})
+
+test('should set button type to "submit" when htmlType prop is passed', () => {
+  const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
+  const buttonElement = kit.querySelector('button')
+  expect(buttonElement).toHaveAttribute('type', 'submit')
+})
+
+test('passes custom classname', () => {
+  const kit = renderKit(IconButton, { ...props, className: "extra_class" })
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
+})

data/app/pb_kits/playbook/pb_layout/body.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/footer.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

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

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div, object.text,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
     <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>
     <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
         <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
-      **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

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

@@ -1,15 +1,9 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= content_tag(object.tag,
-          aria: object.aria,
-          class: object.classname,
-          data: object.data,
-          dark: object.dark,
-          id: object.id,
-          href: object.link && object.link,
-          target: object.link && object.target,
-          **combined_html_options
+        <%= pb_content_tag( object.tag,
+            href: object.link && object.link,
+            target: object.link && object.target
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -20,22 +14,16 @@
           <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
-        <% end %>    
+        <% end %>
        <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
   <% else %>
-    <%= content_tag(object.tag,
-      aria: object.aria,
-      class: object.classname,
-      **combined_html_options,
-      data: object.data,
-      dark: object.dark,
-      id: object.id,
-      href: object.link && object.link,
-      target: object.link && object.target
+    <%= pb_content_tag( object.tag,
+        href: object.link && object.link,
+        target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

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

@@ -1,12 +1,7 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
   <% if object.title %>
-    <%= content_tag(:div, class: "pb_nav_list_title") do %>
-      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
+    <%= pb_content_tag do %>
+      <%= pb_content_tag(:a) do %>
         <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,7 +1,2 @@
-<%= content_tag(:div,
-    aria: object.aria.merge!(label: object.status),
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -8,6 +8,7 @@ import OverlayToken from './subcomponents/_overlay_token'
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    dynamic?: boolean,
     position: string,
     size: string,
 }
@@ -18,6 +19,7 @@ type OverlayProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
     data?: { [key: string]: string },
+    dynamic?: false,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
@@ -30,6 +32,7 @@ const Overlay = (props: OverlayProps) => {
         children,
         color = "card_light",
         data = {},
+        dynamic = false,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
@@ -69,6 +72,7 @@ const Overlay = (props: OverlayProps) => {
                 }) : OverlayToken({
                     children,
                     color,
+                    dynamic: dynamic,
                     position: getPosition(),
                     size: getSize()
                 })

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

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
+
+const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            ref={ref} 
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+})
+
+const OverlayVerticalDynamicMultiDirectional = () => (
+    <>
+        <Overlay
+            color="card_light"
+            dynamic
+            layout={{"x": "xl"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayVerticalDynamicMultiDirectional

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

@@ -0,0 +1 @@
+Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar. You must also add a `ref` to the child that's being passed through the Overlay.

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

@@ -2,6 +2,7 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
 
   rails:

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

@@ -1,3 +1,4 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
+export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { OverlayChildrenProps } from '../_overlay'
+import React, { useRef, useEffect, useState } from 'react';
+import { OverlayChildrenProps } from '../_overlay';
 
 const previousOverlayDirectionMap: { [key: string]: string } = {
     "x": "left",
@@ -15,11 +15,40 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     const {
         children,
         color,
+        dynamic,
         position,
         size,
     } = props
 
-    const hasSubsequentOverlay = position === "x" || position === "y"
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [isAtStart, setIsAtStart] = useState(true);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+
+
+    const handleScroll = () => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            const { scrollLeft, scrollWidth, clientWidth } = container;
+            const atStart = scrollLeft === 0;
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
+
+            setIsAtStart(atStart);
+            setIsAtEnd(atEnd);
+        }
+    };
+
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            container.addEventListener('scroll', handleScroll);
+            handleScroll();
+            return () => {
+                container.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, []);
+
+    const hasSubsequentOverlay = position === "x" || position === "y";
 
     const getPreviousOverlayDirection = () => {
         return hasSubsequentOverlay ? previousOverlayDirectionMap[position] : position
@@ -34,15 +63,24 @@ const OverlayToken = (props: OverlayChildrenProps) => {
 
     return (
         <>
-            <div className={previousOverlayClassName} />
-
-            {children}
-
-            { hasSubsequentOverlay &&
-                <div className={subsequentOverlayClassName} />
+            <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
+            {dynamic ? 
+                <div
+                    ref={scrollContainerRef}
+                    style={{
+                        overflowX: 'auto',     
+                    }}
+                >
+                    {children}
+                </div>
+                : 
+                    children
+                }
+            {hasSubsequentOverlay &&
+                <div className={dynamic ? isAtEnd ? '' : subsequentOverlayClassName : subsequentOverlayClassName} />
             }
         </>
     )
 }
 
-export default OverlayToken
+export default OverlayToken;

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -3,7 +3,8 @@
 @import "../tokens/border_radius";
 
 @mixin pb_progress_pill {
-  width: 45px;
+  width: 100%;
+  max-width: 45px;
   height: 4px;
   border-radius: $border_rad_light;
   margin-right: $space_xs;
@@ -27,6 +28,10 @@
   [class*=pb_progress_pill] {
     @include pb_progress_pill;
 
+    &.full_width_pill {
+      max-width: none;
+    }
+
     &[class*=_inactive] {
       background-color: $border_light;
       &.dark {