playbook_ui 14.13.0 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275

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 {

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

@@ -13,6 +13,7 @@ type ProgressPillsProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  fullWidthPill?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   steps?: number,
@@ -20,19 +21,19 @@ type ProgressPillsProps = {
   value?: string,
 }
 
-const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
+const ProgressPill = ({ active, dark, steps: step, fullWidthPill }: ProgressPillsProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }`}
+      }${fullWidthPill ? ' full_width_pill' : ''}`}
       key={step}
   />
 )
 
-const showSteps = (steps: number, active: number, dark: boolean) => {
+const showSteps = (steps: number, active: number, dark: boolean, fullWidthPill: boolean) => {
   const items = []
 
   for (let step = 1; step <= steps; step++) {
-    items.push(ProgressPill({ steps: step, active, dark }))
+    items.push(ProgressPill({ steps: step, active, dark, fullWidthPill }))
   }
 
   return items
@@ -44,6 +45,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
     aria = { hidden: 'true' },
     className,
     data = {},
+    fullWidthPill = false,
     htmlOptions = {},
     id,
     steps = 3,
@@ -79,7 +81,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
               text={value}
           />
         </div>}
-      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
+      <div className="progress_pills">{showSteps(steps, active, dark, fullWidthPill)}</div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,6 +10,13 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
+            <ProgressPills
+                active={9}
+                aria={{ label: '9 out of 18 steps complete' }}
+                marginTop="md"
+                steps={18}
+                {...props}
+            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md

@@ -0,0 +1 @@
+Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills'
+
+const ProgressPillsFullWidth = (props) => {
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 5 steps complete' }}
+                fullWidthPill
+                steps={5}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default ProgressPillsFullWidth

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md

@@ -0,0 +1 @@
+Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md

@@ -0,0 +1 @@
+Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width
 
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width

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

@@ -1,2 +1,3 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
+export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria_attributes,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>
@@ -14,7 +9,7 @@
 
     <div class="progress_pills">
       <% object.each_step do |step| %>
-        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
+        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.make_full_width %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -9,6 +9,8 @@ module Playbook
       prop :steps, type: Playbook::Props::Number,
                    default: 3
       prop :title
+      prop :full_width_pill, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_progress_pills_kit")
@@ -26,6 +28,10 @@ module Playbook
         step <= active ? "_active" : "_inactive"
       end
 
+      def make_full_width
+        full_width_pill ? " full_width_pill" : nil
+      end
+
       def aria_attributes
         return aria if aria.present?
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js

@@ -23,6 +23,20 @@ const ProgressPillsDefault = () => {
     )
 }
 
+const ProgressPillsFullWidth = () => {
+    return (
+        <ProgressPills
+            active={2}
+            aria={{ label: ariaLabel }}
+            data={{ testid: testId }}
+            fullWidthPill
+            steps={3}
+            title={title}
+            value={value}
+        />
+    )
+}
+
 test('should pass data prop', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByTestId(testId)
@@ -51,4 +65,15 @@ test('should render value', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByText(value)
     expect(kit).toBeInTheDocument()
-})
+})
+
+test('should apply fullWidthPill styling when fullWidthPill prop is true', () => {
+    render(<ProgressPillsFullWidth />)
+    const container = screen.getByTestId(testId)
+    const pillElements = container.querySelectorAll('.full_width_pill')
+  
+    expect(pillElements.length).toBeGreaterThan(0)
+    pillElements.forEach((pill) => {
+        expect(pill).toHaveClass('full_width_pill')
+    })
+})

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,11 +1,7 @@
 <%= content_tag(:div,
 class: object.wrapper_classname,
 style: object.style) do %>
-  <%= content_tag(:div,
-  id: object.id,
-  data: object.data_values,
-  class: object.classname,
-  **combined_html_options) do %>
+  <%= pb_content_tag do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

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

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:li,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(:li) do %>
   <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
     <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -7,26 +7,21 @@
     data: object.data,
     **combined_html_options
   }) do %>
-    <%= content_tag(:label,
+    <%= pb_content_tag(:label,
       'data-pb-radio-children': 'true',
       checked: object.checked,
-      class: object.classname,
-      id: object.id,
-      value: object.value) do %>
+      value: object.value
+      ) do %>
       <%= input %>
       <span class="pb_radio_button"></span>
     <% end %>
     <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
   <% end %>
 <% else %>
-  <%= content_tag(:label,
-      aria: object.aria,
+  <%= pb_content_tag(:label,
       checked: object.checked,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
       value: object.value,
-      **combined_html_options) do %>
+      ) do %>
 
       <% if content.present? %>
         <%= content %>
@@ -37,4 +32,4 @@
       <span class="pb_radio_button"></span>
       <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb

@@ -0,0 +1,47 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+    <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
+        <%= pb_rails("table/table_header", props: { text: "" }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) do %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
+        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+  
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
+        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+  
+      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
+        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
+          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Table, Icon } from 'playbook-ui'
+
+const TableWithClickableRows = (props) => {
+
+
+  return (
+      <Table 
+          size="sm" 
+          {...props}
+      >
+          <Table.Head>
+              <Table.Row>
+                  <Table.Header>{"Column 1"}</Table.Header>
+                  <Table.Header>{"Column 2"}</Table.Header>
+                  <Table.Header>{"Column 3"}</Table.Header>
+                  <Table.Header>{"Column 4"}</Table.Header>
+                  <Table.Header>{"Column 5"}</Table.Header>
+                  <Table.Header>{""}</Table.Header>
+              </Table.Row>
+          </Table.Head>
+          <Table.Body>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
+                  {...props}
+              >
+                <Table.Cell>{"Value 1"}</Table.Cell>
+                <Table.Cell>{"Value 2"}</Table.Cell>
+                <Table.Cell>{"Value 3"}</Table.Cell>
+                <Table.Cell>{"Value 4"}</Table.Cell>
+                <Table.Cell>{"Value 5"}</Table.Cell>
+                <Table.Cell textAlign="right">
+                    <Icon 
+                        color="primary_action"
+                        fixedWidth
+                        icon="chevron-right" 
+                        size="xs"
+                        {...props}
+                    />
+                </Table.Cell>
+              </Table.Row>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
+                  {...props}
+              >
+                  <Table.Cell>{"Value 1"}</Table.Cell>
+                  <Table.Cell>{"Value 2"}</Table.Cell>
+                  <Table.Cell>{"Value 3"}</Table.Cell>
+                  <Table.Cell>{"Value 4"}</Table.Cell>
+                  <Table.Cell>{"Value 5"}</Table.Cell>
+                  <Table.Cell textAlign="right">
+                      <Icon 
+                          color="primary_action"
+                          fixedWidth
+                          icon="chevron-right" 
+                          size="xs"
+                          {...props}
+                      />                
+                  </Table.Cell>
+              </Table.Row>
+              <Table.Row
+                  cursor="pointer"
+                  htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
+                  {...props}
+              >
+                  <Table.Cell>{"Value 1"}</Table.Cell>
+                  <Table.Cell>{"Value 2"}</Table.Cell>
+                  <Table.Cell>{"Value 3"}</Table.Cell>
+                  <Table.Cell>{"Value 4"}</Table.Cell>
+                  <Table.Cell>{"Value 5"}</Table.Cell>
+                  <Table.Cell textAlign="right">
+                      <Icon 
+                          color="primary_action"
+                          fixedWidth
+                          icon="chevron-right" 
+                          size="xs"
+                          {...props}
+                      />
+                  </Table.Cell>
+              </Table.Row>
+          </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithClickableRows

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md

@@ -0,0 +1 @@
+Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-return (
+  return (
       <Table
           size="sm"
           {...props}