playbook_ui 14.7.0.pre.rc.17 → 14.7.0.pre.rc.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2072d24d3604697c8b8201173a1b3fe1384f8acdcc7fffd52442d302f5e2f38
-  data.tar.gz: 9766561957de9ca49b03df0e3cb54d11c9e2350e95031b8a732779e8acf908bf
+  metadata.gz: 60f5cff6912e2865399cef73254a7b2dc0c44d6569424298bb634f68f32379cd
+  data.tar.gz: 83369d0166a9aa85827c3df19ed00880ad84d6b258c03dc2ff48f2de41c05c75
 SHA512:
-  metadata.gz: 8eb6bf2917756b803c3d70ef69a353b9a4e5d900a2f43d5bb6fac6e6e5319e43b0687b409ab35257f7ab38e7f01bd98269650f954cd1f0cf887478899752baa9
-  data.tar.gz: 38e59e257ba51802810b8fa7164586d9b8e1e68092ce52c894240b5fb8726712dce06bd1b46524e7a1e5cd8aeefa08cddf3d1ef55b7da8ef357edd156f8b3f43
+  metadata.gz: 9d9fc03ccd849622b9f5cc1bc47deb85a9733c42fbc986ebe01c3bdcc7ce7446a70f2c21f9da2da2bb3335ba826da717f76b1ccc8a9f5ef8e7aecd2414cb4bf4
+  data.tar.gz: 3f2825d50037ea12633a8ad29a02769e85796681ed3fbaa63b846384e8c50a99fafdaa78eb7bdaea4c20a88379d165d9b94d3f251458f2ab2c8b48c18ce9a2f2

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -85,6 +84,7 @@
 @import 'pb_selectable_card_icon/selectable_card_icon';
 @import 'pb_selectable_icon/selectable_icon';
 @import 'pb_selectable_list/selectable_list';
+@import 'pb_skeleton_loading/skeleton_loading';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
+
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,10 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
+  const dynamicInlineProps = globalInlineProps(props);
+  const { style: htmlStyle = {}, ...restHtmlProps } = htmlProps as { style?: React.CSSProperties };
+  const mergedStyles: React.CSSProperties = { ...htmlStyle, ...dynamicInlineProps };
+
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -122,7 +127,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-
+  
   return (
     <>
     {
@@ -133,8 +138,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
         <Tag
             {...ariaProps}
             {...dataProps}
-            {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
+            {...restHtmlProps}
+            style={mergedStyles} 
         >
           {subComponentTags('Header')}
           {
@@ -161,8 +167,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           <Tag
               {...ariaProps}
               {...dataProps}
-              {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
+              {...restHtmlProps}
+              style={mergedStyles} 
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
+  const dynamicInlineProps = globalInlineProps(props); 
+
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -184,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
+            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -192,6 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
+              
               >
                 <Flex align="center"
                     orientation="column"

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
+        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
+  const dynamicInlineProps = globalInlineProps(props)
+  const combinedStyles = {
+    ...fixedStyle,
+    ...dynamicInlineProps
+  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={fixedStyle}
+        style={combinedStyles}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    style: object.style_value,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, 
+  style: object.inline_styles
+) do %> 
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -20,8 +20,13 @@ module Playbook
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def style_value
-        "flex-basis: #{fixed_size};" if fixed_size.present?
+      def inline_styles
+        styles = []
+        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
+        styles << "height: #{height};" if height.present?
+        styles << "min-height: #{min_height};" if min_height.present?
+        styles << "max-height: #{max_height};" if max_height.present?
+        styles.join(" ")
       end
 
     private

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