playbook_ui 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
+      prop :custom_options, default: {}
       prop :gradient, type: Playbook::Props::Boolean,
                       default: false
       prop :point_start, type: Playbook::Props::Numeric
@@ -38,7 +39,7 @@ module Playbook
         gradient ? "area" : "line"
       end
 
-      def chart_options
+      def standard_options
         {
           align: align,
           id: id,
@@ -64,6 +65,26 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
+      def vertical_align_props
+        if vertical_align
+          if object.vertical_align
+            original_result = super
+            class_to_remove = "vertical_align_#{object.vertical_align}"
+
+            modified_result = original_result.gsub(class_to_remove, "").strip
+            modified_result.empty? ? nil : modified_result
+          else
+            super
+          end
+        else
+          super
+        end
+      end
+
       def classname
         generate_classname("pb_line_graph")
       end

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>

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

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

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -35,6 +35,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;
 
+    &:first-of-type {
+      margin-left: 0;
+    }
+
     &.dark {
       .avatar_wrapper {
         border: $pb_multiple_users_border_size solid $bg_dark;
@@ -58,6 +62,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     .pb_multiple_users_item {
       margin-left: 0;
       margin-right: $pb_multiple_users_overlap;
+
+      &:first-of-type {
+        margin-right: 0;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.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 %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.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 %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

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

@@ -0,0 +1,12 @@
+[class^=pb_overlay] {
+  .overlay-container {
+    position: relative;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,93 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import defaultColors from "../tokens/exports/_colors.scss";
+
+type OverlayProps = {
+    aria?: { [key: string]: string },
+    className?: string,
+    children: React.ReactNode[] | React.ReactNode,
+    color: "white" | "bg_light" | "card_dark" | "bg_dark",
+    data?: { [key: string]: string },
+    htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+    id?: string,
+    layout: { [key: string]: string },
+}
+
+const previousOverlayDirectionMap: { [key: string]: string } = {
+    "bottom": "to top",
+    "top": "to bottom",
+    "left-right": "to right",
+    "top-bottom": "to top",
+}
+
+const subsequentOverlayDirectionMap: { [key: string]: string } = {
+    "bottom": "to top",
+    "top": "to bottom",
+    "left-right": "to left",
+    "top-bottom": "to bottom",
+}
+
+const Overlay = (props: OverlayProps) => {
+    const {
+        aria = {},
+        className,
+        children,
+        color = "white",
+        data = {},
+        htmlOptions = {},
+        id,
+        layout = { "bottom": "100%" },
+    } = props
+
+    const ariaProps = buildAriaProps(aria)
+    const dataProps = buildDataProps(data)
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
+    const htmlProps = buildHtmlProps(htmlOptions)
+
+    const getPosition = () => {
+        return Object.keys(layout)[0]
+    }
+
+    const getSize = () => {
+        return Object.values(layout)[0]
+    }
+
+    const getPreviousOverlayDirection = () => {
+        return previousOverlayDirectionMap[getPosition()]
+    }
+
+    const getSubsequentOverlayDirection = () => {
+        return subsequentOverlayDirectionMap[getPosition()]
+    }
+
+    const hasSubsequentOverlay = getPosition() === "left-right" || getPosition() === "top-bottom"
+
+    const previousOverlay = `linear-gradient(${getPreviousOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${getSize()})`
+    const subsequentOverlay = `linear-gradient(${getSubsequentOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${getSize()})`
+
+    return (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+            <div className="overlay-container">
+                <div className="overlay"
+                    style={{ background: previousOverlay }} />
+
+                {children}
+
+                { hasSubsequentOverlay &&
+                    <div className="overlay"
+                        style={{ background: subsequentOverlay }} />
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Overlay

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+    Overlay,
+    Table,
+} from '../..'
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+
+const OverlayDefault = () => (
+    <>
+        <Overlay>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayDefault

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

@@ -0,0 +1,7 @@
+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 a `position` and a `size` as a key:value pair object.
+
+The `position` prop sets the side 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` prop accepts 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 `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/_overlay_multi_directional.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from '../..'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayMultiDirectional = () => (
+    <>
+        <Overlay
+            color="white"
+            layout={{"left-right": "10%"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayMultiDirectional

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

@@ -0,0 +1,5 @@
+Optionally, you can pass multi-directional options (`left-right` or `top-bottom`) to the `position` prop, which create multiple overlays. 
+
+Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` percentage you set. 
+
+NOTE: Multi-directional overlays share the available container space, so passing a size greater than "50%" to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a size of 25% when using multi-directional overlays.

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

@@ -0,0 +1,4 @@
+examples:
+  react:
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional

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

@@ -0,0 +1,2 @@
+export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { render, screen } from '../utilities/test-utils'
+import { Overlay } from '..'
+
+const testId = "overlay"
+const children = "This is the Overlay children"
+
+test('should pass data prop', () => {
+    const props = {
+        children,
+        data: { testid: testId }
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test("should pass className prop", () => {
+    const className = "custom-class-name"
+    const props = {
+        className,
+        children,
+        data: { testid: testId },
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    const props = {
+        aria: { label: testId },
+        children,
+        data: { testid: testId },
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should pass id prop', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('id', testId)
+})
+
+test('should render children', () => {
+    const props = {
+        children,
+        data: { testid: testId }
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent(props.children)
+})

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -11,7 +11,7 @@ $top_bottom_radius: 0px;
   border-radius: $border_rad_light;
   border: $border_rad_lightest solid $border_light;
   background-color: $white;
-  padding: $space_xxs 0px;
+  padding: $space_xxs 0px !important;
   li {
     display: inline;
     > a, li > span {

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

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

data/app/pb_kits/playbook/pb_person/person.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 %>
       <%= pb_rails("body", props: {
         tag: "span",
         classname: "pb_person_first" }) { object.first_name } %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.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 %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.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.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -102,6 +102,9 @@
     pointer-events: none;
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     @mixin active_arrow_style {
       svg {
         color: $primary !important;
@@ -130,6 +133,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;
@@ -213,6 +217,9 @@
     }
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     &:not(:hover) {
       svg {
         display: none;
@@ -233,6 +240,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,6 +28,7 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
+    outline: 1px solid transparent; 
 
     @media (hover:hover) {
       &:hover {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -131,43 +131,41 @@ const SelectableCard = (props: SelectableCardProps) => {
           className={globalProps(labelProps)}
           htmlFor={inputIdPresent}
       >
-        <div className="buffer">
-              {variant === 'displayInput' ? 
-              <Flex vertical="center">
-                <Flex
-                    orientation="column"
-                    padding="sm"
-                    paddingRight="xs"
-                    vertical="center"
-                >
-                  <Input
-                      dark={dark}
-                  >
-                    <input
-                        checked={checked}
-                        disabled={disabled}
-                        onClick={handleClick}
-                        readOnly
-                        type={inputType}
-                    />
-                  </Input>
-                </Flex>
-                <div className="separator" />
-                <div className="psuedo_separator"/>
-                <Card
-                    borderNone
+          {variant === 'displayInput' ? 
+            <Flex vertical="center">
+              <Flex
+                  orientation="column"
+                  padding="sm"
+                  paddingRight="xs"
+                  vertical="center"
+              >
+                <Input
                     dark={dark}
-                    padding="sm"
-                    status={error ? 'negative' : null}
                 >
-                  {text ||props.children}
-                </Card>
+                  <input
+                      checked={checked}
+                      disabled={disabled}
+                      onClick={handleClick}
+                      readOnly
+                      type={inputType}
+                  />
+                </Input>
               </Flex>
-              :
+              <div className="separator" />
+              <div className="psuedo_separator"/>
+              <Card
+                  borderNone
+                  dark={dark}
+                  padding="sm"
+                  status={error ? 'negative' : null}
+              >
+                {text ||props.children}
+              </Card>
+            </Flex>
+          :
             text || props.children
-              }
+             }
           {displayIcon()}
-        </div>
       </label>
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -11,7 +11,6 @@
   <% end %>
 
   <label class="<%= object.label_class %>" for="<%= object.input_id_present %>">
-    <div class="buffer">
       <% if object.variant == "display_input" %>
         <%= pb_rails("flex", props: { vertical: "center" }) do %>
           <%= pb_rails("flex", props: {
@@ -46,7 +45,6 @@
           </div>
         <% end %>
       <% end %>
-    </div>
   </label>
 
   <% if object.variant == "display_input" %>

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -23,6 +23,7 @@ type TableProps = {
     disableHover?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
+    outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
     responsive?: "collapse" | "scroll" | "none",
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
@@ -45,6 +46,7 @@ const Table = (props: TableProps) => {
         disableHover = false,
         htmlOptions = {},
         id,
+        outerPadding = '',
         responsive = 'collapse',
         singleLine = false,
         size = 'sm',
@@ -59,6 +61,8 @@ const Table = (props: TableProps) => {
     const htmlProps = buildHtmlProps(htmlOptions)
     const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
     const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
+    const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
 
     const classNames = classnames(
@@ -73,6 +77,7 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
+            [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),
         tableCollapseCss,