playbook_ui 14.6.2.pre.alpha.PLAY1551tiptapextbump4350 → 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,19 +1,57 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.truncate %>
+      <div>
+        <%= pb_rails("title", props: { 
+          classname: "pb_form_pill_text truncate_#{object.truncate}",
+          id: object.id,
+          size: 4, 
+          text: object.name,
+        }) %>
+        <% if object.id.present? %>
+          <%= pb_rails("tooltip", props: {
+            position: "top",
+            tooltip_id: "tooltip-#{object.id}",
+            trigger_element_selector: "##{object.id}"
+          }) do %>
+            <%= object.name %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
+    <% end %>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-      <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-      <% end %>
-      <% if object.text.present? %>
-        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-      <% end %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+    <% end %>
+    <% if object.truncate %>
+      <div>
+        <%= pb_rails("title", props: { 
+          classname: "pb_form_pill_tag truncate_#{object.truncate}",
+          id: object.id,
+          size: 4, 
+          text: object.text,
+        }) %>
+        <% if object.id.present? %>
+          <%= pb_rails("tooltip", props: {
+            position: "top",
+            tooltip_id: "tooltip-#{object.id}",
+            trigger_element_selector: "##{object.id}"
+          }) do %>
+            <%= object.text %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
+    <% end %>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss

@@ -0,0 +1,37 @@
+@import 'skeleton_loading_mixins';
+
+.pb_skeleton_loading {
+    display: "flex";
+    flex-direction: "column";
+    height: 100%;
+    .color_default {
+        @include skeleton-shimmer($silver);
+    }
+    .color_white {
+        @include skeleton-shimmer-light($white);
+    }
+    .dark {
+        @include skeleton-shimmer($border_dark);
+    }
+    .gap_xxs {
+        margin-top: 4px;
+    }
+    .gap_xs {
+        margin-top: 8px;
+    }
+    .gap_sm {
+        margin-top: 16px;
+    }
+    .gap_md {
+        margin-top: 24px;
+    }
+    .gap_lg {
+        margin-top: 32px;
+    }
+    .gap_xl {
+        margin-top: 40px;
+    }
+    .gap_xxl {
+        margin-top: 48px;
+    }
+}

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.tsx

@@ -0,0 +1,67 @@
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { Sizes } from '../types'
+
+
+type SkeletonLoadingProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  height?: string,
+  width?: string,
+  borderRadius?: string,
+  gap?: Sizes | "none",
+  stack?: number,
+  color?: "default" | "white",
+  dark?: boolean,
+} & GlobalProps
+
+const SkeletonLoading = (props: SkeletonLoadingProps): React.ReactElement => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    htmlOptions = {},
+    height = "16px",
+    width = "100%",
+    borderRadius = "sm",
+    gap = "xxs",
+    stack = 1,
+    color = "default",
+    dark = false,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const skeletonContainerCss = classnames(buildCss('pb_skeleton_loading'), globalProps(props), className)
+  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
+  const innerSkeletonCss = classnames(`border_radius_${borderRadius}`,`color_${color}`, dark && 'dark', )
+  const innerSizeStyle = { height, width }
+  
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={skeletonContainerCss}
+        id={id}
+    >
+      {Array.from({ length: Number(stack) }).map((_, index) => (
+        <div
+            className={classnames(buildCss('pb_skeleton_loading_item'), innerSkeletonCss, index > 0 && gapClass)}
+            key={index}
+            style={innerSizeStyle}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss

@@ -0,0 +1,40 @@
+// Animation
+@keyframes wave {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+}
+
+// Shimmer animation and gradient mixin based on color
+@mixin skeleton-shimmer($color) {
+    background: $color;
+    background-color: $color;
+    background-image: linear-gradient(
+      to left,
+      $color 0%,
+      lighten($color, 1%) 50%,
+      lighten($color, 1%) 60%,
+      $color 80%,
+      $color 100%
+    );
+    background-repeat: no-repeat;
+    animation: wave 1.5s linear infinite forwards;
+}
+
+@mixin skeleton-shimmer-light($color) {
+    background: $color;
+    background-color: $color;
+    background-image: linear-gradient(
+      to left,
+      $color 0%,
+      darken($color, 1%) 50%,
+      darken($color, 1%) 60%,
+      $color 80%,
+      $color 100%
+    );
+    background-repeat: no-repeat;
+    animation: wave 1.5s linear infinite forwards;
+}

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Flex, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingBorderRadius = (props) => (
+  <Flex justify="evenly">
+    <SkeletonLoading 
+        borderRadius="rounded" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="xl" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="lg" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="md" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="xs" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="none" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+  </Flex>
+)
+
+export default SkeletonLoadingBorderRadius

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md

@@ -0,0 +1 @@
+The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingColor = (props) => (
+  <div>
+    <Card 
+        borderNone 
+        {...props}
+    >
+      <SkeletonLoading {...props}/>
+    </Card>
+    <Card 
+        background="light" 
+        borderNone 
+        {...props}
+    >
+      <SkeletonLoading 
+          color="white" 
+          {...props} 
+      />
+    </Card>
+  </div>
+)
+
+export default SkeletonLoadingColor

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md

@@ -0,0 +1 @@
+The SkeletonLoading component has a default and a white `color` variant.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingDefault = (props) => (
+  <div>
+    <SkeletonLoading {...props} />
+  </div>
+)
+
+export default SkeletonLoadingDefault

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingHeightWidth = (props) => (
+  <div>
+    <SkeletonLoading
+        height="100px"
+        width="50%"
+        {...props}
+    />
+    <SkeletonLoading
+        gap="md"
+        height="20px"
+        marginY="md"
+        stack="3"
+        width="50px"
+        {...props}
+    />
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+        marginBottom="md"
+        padding="none" 
+    >
+      <SkeletonLoading
+          borderRadius="md"
+          gap="xl"
+          height="50%"
+          width="300px"
+          {...props}
+      />
+    </Card>
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+        padding="none"
+    >
+      <SkeletonLoading
+          borderRadius="md"
+          gap="xl"
+          height="30%"
+          stack="2"
+          width="70%"
+          {...props}
+      />
+    </Card>
+    <SkeletonLoading 
+        height="150px"
+        marginY="md"
+        width="150px"
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="rounded"
+        height="150px"
+        width="150px"
+        {...props}
+    />
+  </div>
+)
+
+export default SkeletonLoadingHeightWidth

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md

@@ -0,0 +1,3 @@
+The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
+
+Set the `height` and `width` props to the same value to make a square. A `rounded` borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingLayout = (props) => (
+  <div>
+    <SkeletonLoading
+        stack="5"
+        {...props}
+    />
+    <SkeletonLoading
+        gap="md"
+        paddingTop="xl"
+        stack="3"
+        {...props}
+    />
+  </div>
+)
+
+export default SkeletonLoadingLayout

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -0,0 +1,3 @@
+Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
+
+`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

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

@@ -0,0 +1,13 @@
+examples:
+  
+  rails:
+  # - skeleton_loading_default: Default
+  
+  
+  react:
+  - skeleton_loading_default: Default
+  - skeleton_loading_color: Color
+  - skeleton_loading_layout: Layout
+  - skeleton_loading_border_radius: Border Radius
+  - skeleton_loading_height_width: Height & Width
+  

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

@@ -0,0 +1,5 @@
+export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
+export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
+export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
+export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
+export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -0,0 +1,12 @@
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>SKELETON_LOADING CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSkeletonLoading
+    class SkeletonLoading < ::Playbook::KitBase
+    end
+  end
+end

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ensureAccessible } from '../utilities/test-utils'
+import { SkeletonLoading } from 'playbook-ui'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+describe('SkeletonLoading', () => {
+  const defaultProps = {
+    data: { testid: 'skeleton-loading' }
+  }
+
+  it('should be accessible', async () => {
+    ensureAccessible(SkeletonLoading, defaultProps)
+  })
+
+  it('renders with default props', () => {
+    const { container } = render(<SkeletonLoading {...defaultProps} />)
+    const skeleton = screen.getByTestId('skeleton-loading')
+    
+    expect(skeleton).toBeInTheDocument()
+    expect(skeleton).toHaveClass('pb_skeleton_loading')
+    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(1)
+  })
+
+  it('renders multiple skeleton items based on stack prop', () => {
+    const props = {
+      ...defaultProps,
+      stack: 3
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    
+    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(3)
+  })
+
+  it('applies custom styles correctly', () => {
+    const props = {
+      ...defaultProps,
+      height: '24px',
+      width: '50%',
+      borderRadius: 'lg',
+      color: 'light',
+      dark: true
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    const skeletonItem = container.querySelector('div[class*="border_radius_"]')
+
+    expect(skeletonItem).toHaveClass('border_radius_lg')
+    expect(skeletonItem).toHaveClass('dark')
+  })
+
+  it('applies gap class to items after first one', () => {
+    const props = {
+      ...defaultProps,
+      stack: 3,
+      gap: 'md'
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
+    
+    expect(skeletonItems[0]).not.toHaveClass('gap_md')
+    expect(skeletonItems[1]).toHaveClass('gap_md')
+    expect(skeletonItems[2]).toHaveClass('gap_md')
+  })
+
+  it('handles no gap properly', () => {
+    const props = {
+      ...defaultProps,
+      stack: 2,
+      gap: 'none'
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
+    
+    expect(skeletonItems[0]).not.toHaveClass('gap_none')
+    expect(skeletonItems[1]).not.toHaveClass('gap_none')
+  })
+})

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

@@ -1,12 +1,15 @@
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { globalProps, GlobalProps } from "../utilities/globalProps"
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 
+import TimelineLabel from './subcomponents/Label'
+import TimelineStep from './subcomponents/Step'
+import TimelineDetail from './subcomponents/Detail'
+
 type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
@@ -17,6 +20,13 @@ type ItemProps = {
   lineStyle?: 'solid' | 'dotted',
 } & GlobalProps
 
+function isElementOfType<P>(
+  element: React.ReactNode,
+  component: React.ComponentType<P>
+): element is React.ReactElement<P> {
+  return React.isValidElement<P>(element) && element.type === component
+}
+
 const TimelineItem = ({
   className,
   children,
@@ -31,31 +41,57 @@ const TimelineItem = ({
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+  const childrenArray = React.Children.toArray(children)
+
+  const labelChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineLabel)
+  )
+
+  const stepChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineStep)
+  )
+
+  const detailChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineDetail)
+  )
+
+  const otherChildren = childrenArray.filter(
+    (child) =>
+      !isElementOfType(child, TimelineLabel) &&
+      !isElementOfType(child, TimelineStep) &&
+      !isElementOfType(child, TimelineDetail)
+  )
+
   return (
-    <div 
+    <div
         {...htmlProps}
         className={classnames(timelineItemCss, globalProps(props), className)}
     >
-      <div className="pb_timeline_item_left_block">
-        {date &&
-          <DateStacked
-              align="center"
-              date={date}
-              size="sm"
-          />
-        }
-      </div>
-      <div className="pb_timeline_item_step">
-        <IconCircle
-            icon={icon}
-            size="xs"
-            variant={iconColor}
-        />
-        <div className="pb_timeline_item_connector" />
-      </div>
-      <div className="pb_timeline_item_right_block">
-        {children}
-      </div>
+        {labelChild || (
+          <div className="pb_timeline_item_left_block">
+            {date && (
+              <DateStacked
+                  align="center"
+                  date={date}
+                  size="sm"
+              />
+            )}
+          </div>
+        )}
+        {stepChild || (
+          <div className="pb_timeline_item_step">
+            <IconCircle icon={icon}
+                size="xs"
+                variant={iconColor}
+            />
+            <div className="pb_timeline_item_connector" />
+          </div>
+        )}
+        {detailChild || (
+          <div className="pb_timeline_item_right_block">
+           { otherChildren }
+          </div>
+        )}
     </div>
   )
 }

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

@@ -5,6 +5,11 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
+import {
+  TimelineStep,
+  TimelineLabel,
+  TimelineDetail,
+} from './subcomponents'
 
 type TimelineProps = {
   aria?: { [key: string]: string },
@@ -47,5 +52,8 @@ const Timeline = ({
 }
 
 Timeline.Item = TimelineItem
+Timeline.Step = TimelineStep
+Timeline.Label = TimelineLabel
+Timeline.Detail = TimelineDetail
 
 export default Timeline

data/app/pb_kits/playbook/pb_timeline/detail.html.erb

@@ -0,0 +1,3 @@
+<%= pb_content_tag do %>
+  <%= content.presence %>
+<% end %>