playbook_ui 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
+import { useDropzone, DropzoneInputProps, DropzoneRootProps, FileRejection } from 'react-dropzone'
 import classnames from 'classnames'
 
 import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
@@ -9,8 +9,10 @@ import type { Callback } from '../types'
 import Body from '../pb_body/_body'
 import Card from '../pb_card/_card'
 
+import { isEmpty } from '../utilities/object'
+
 type FileUploadProps = {
-  accept?: string[],
+  accept?: Record<string, string[]>,
   className?: string,
   customMessage?: string,
   dark?: boolean,
@@ -19,7 +21,7 @@ type FileUploadProps = {
   acceptedFilesDescription?: string,
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
-  onFilesRejected: (error: string, files: File[]) => void,
+  onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
 }
 
 const getFormattedFileSize = (fileSize: number): string => {
@@ -28,7 +30,7 @@ const getFormattedFileSize = (fileSize: number): string => {
 
 const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const {
-    accept = null,
+    accept = {},
     acceptedFilesDescription = '',
     className,
     customMessage,
@@ -48,30 +50,37 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     getRootProps: () => DropzoneRootProps & any;
     getInputProps: () => DropzoneInputProps & any;
     isDragActive: boolean;
-    rejectedFiles: File[];
+    fileRejections: readonly FileRejection[];
   }
 
-  const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
+  const { getRootProps, getInputProps, isDragActive, fileRejections }: DropZoneProps = useDropzone({
     accept,
     maxSize,
     onDrop,
   })
 
-  const prevRejected = useRef<File[] | null>(null);
+  const prevRejected = useRef<readonly FileRejection[] | null>(null);
 
-  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
+  let maxFileSizeText = ''
+  if (maxSize !== undefined) {
+    maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
+  }
 
   useEffect(() => {
-    if (rejectedFiles === prevRejected.current) return
-    const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
+    if (fileRejections === prevRejected.current) return
+    const isFileTooLarge = maxSize && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
     if (isFileTooLarge) {
-      onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
+      onFilesRejected(`File size is too large! ${maxFileSizeText}`, fileRejections)
     }
-    prevRejected.current = rejectedFiles
-  }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
+    prevRejected.current = fileRejections
+  }, [maxFileSizeText, maxSize, onFilesRejected, fileRejections])
 
   const acceptedFileTypes = () => {
-    return accept.map((fileType) => {
+    if (!accept) {
+      return []
+    }
+
+    return Object.keys(accept).map((fileType) => {
       if (fileType.startsWith('image/')) {
         return fileType.replace('image/', ' ')
       } else {
@@ -86,7 +95,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const getDescription = () => {
     return customMessage
       ? customMessage
-      : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
+      : `Choose a file or drag it here.${isEmpty(accept) ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
   }
 
   return (

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -28,7 +28,9 @@ const FileUploadAccept = (props) => {
           {...props}
       />
       <FileUpload
-          accept={['image/svg+xml']}
+          accept={{
+            "image/svg+xml": [".svg", ".xml"],
+          }}
           onFilesAccepted={handleOnFilesAccepted}
           {...props}
       />

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -25,7 +25,10 @@ const FileUploadCustomDescription = (props) => {
           {...props}
       />
       <FileUpload
-          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
+          accept={{
+            "application/pdf": [".pdf"],
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+          }}
           acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
           onFilesAccepted={handleOnFilesAccepted}
           {...props}

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
 const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
-      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
+      <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
     ))}
   </List>
 )

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -14,16 +14,6 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-@mixin svg_size($name, $match, $adjust) {
-  @if $name == $match {
-    $svg_xy: $adjust;
-    & > svg {
-      width: #{$svg_xy};
-      height: #{$svg_xy};
-    }
-  }
-}
-
 [class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
@@ -57,13 +47,11 @@ $pb_icon_circle_sizes: (
       border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: $size * 0.38;
+      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
       line-height: $size;
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
-
-      @include svg_size($name, "xxs", $size - 6px);
     }
   }
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -3,6 +3,11 @@
 @import "../tokens/opacity";
 @import "./section_separator_mixin";
 
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$merge_kits3: map-merge($merge_kits2, $text_colors);
+$section_selector_colors: map-merge($merge_kits3, $data_colors);
+
 $section_colors_light: (
   background:   $bg_light,
   card:         $card_light,
@@ -19,8 +24,11 @@ $section_colors_dark: (
   align-items: center;
   position: relative;
   span {
-    padding: 0 $space_xs;
+    padding: 0;
     display: flex;
+    [class*="pb_caption_kit"] {
+      padding: 0 $space_xs;
+    }
   }
   &::before {
     content: "";
@@ -34,12 +42,40 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
+  @each $color_name, $color_value in $section_selector_colors {
+    &[class*="color_#{$color_name}"] {
+      &::before, &::after {
+        background: $color_value;
+      }
+
+      &[class*=_vertical] {
+        &::after {
+          background: $color_value;
+        }
+      }
+      &[class*=_dashed] {
+        &::before, &::after {
+          border: 1px dashed $color_value;
+        }
+        &[class*=_vertical] {
+          &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+        }
+      }
+    }
+  }
+
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     margin-left: $space_xs;
     margin-right: $space_xs;
+    &::before {
+      display: none;
+    }
     &::after {
       @include section_separator_vertical(false);
     }
@@ -54,6 +90,33 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
+    @each $color_name, $color_value in $section_selector_colors {
+      &[class*="color_#{$color_name}"] {
+        &::before, &::after {
+          background: $color_value;
+        }
+
+        &[class*=_vertical] {
+          &::after {
+            @include section_separator_vertical(false);
+            background: $color_value;
+          }
+        }
+
+        &[class*=_dashed] {
+          &::before, &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+          &[class*=_vertical] {
+            &::after {
+              border: 1px dashed $color_value;
+              background: none;
+            }
+          }
+        }
+      }
+    }
     &::before {
       @include section_separator_horizontal(true);
     }

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -10,6 +10,7 @@ type SectionSeparatorProps = {
   aria?: { [key: string]: string; },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
+  color?: "default" | "primary",
   dark?: boolean,
   data?: { [key: string]: string; },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,6 +26,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
     aria = {},
     children,
     className,
+    color ="default",
     data = {},
     htmlOptions = {},
     id,
@@ -37,7 +39,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary" }) do %>
+  <%= pb_rails("flex", props: { padding: "xs" }) do %>
+    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
+    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
+
+const children = (
+  <Flex padding="xs">
+    <Icon color="primary"
+        icon="arrow-down"
+    />
+    <Detail
+        color="link"
+        size="sm"
+        text="Children"
+    />
+  </Flex>
+)
+
+const SectionSeparatorColor = (props) => {
+  return (
+    <div>
+      <SectionSeparator text="Default Separator"
+          {...props}
+      />
+      <SectionSeparator color="primary"
+          text="Primary Separator"
+          {...props}
+      />
+      <SectionSeparator
+          color="primary"
+          lineStyle="dashed"
+          text="Primary Dashed Separator"
+          {...props}
+      />
+       <SectionSeparator color="primary"
+           {...props}
+       >
+        {children}
+      </SectionSeparator>
+    </div>
+  )
+}
+
+export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -0,0 +1,3 @@
+Pass "primary" to the `color` prop to change any section separator color.
+
+**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

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

@@ -6,6 +6,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -13,6 +14,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

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

@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
+export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbSectionSeparator
     class SectionSeparator < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default primary],
+                   default: "default"
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],
@@ -17,7 +20,7 @@ module Playbook
                         default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
       end
 
     private

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

@@ -1,8 +1,8 @@
 @import 'skeleton_loading_mixins';
 
 .pb_skeleton_loading {
-    display: "flex";
-    flex-direction: "column";
+    display: flex;
+    flex-direction: column;
     height: 100%;
     .color_default {
         @include skeleton-shimmer($silver);

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

@@ -0,0 +1,3 @@
+The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
+
+**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

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

@@ -0,0 +1,9 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
+<% end %>

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

@@ -0,0 +1 @@
+The `border_radius` 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.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("card", props: { border_none: true }) do %>
+    <%= pb_rails("skeleton_loading") %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
+    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
+<% end %>

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

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

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

@@ -0,0 +1,119 @@
+<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
+
+<div id="skeleton-loading-filter-content">
+  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
+    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
+        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
+      <% end %>
+      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
+        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
+</div>
+
+<div id="filter-content" style="display: none;">
+  <%= pb_rails("filter", props: {
+    margin_bottom: "xl",
+    min_width: "360px",
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    results: 546,
+    template: "single"
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("filter", props: {
+    min_width: "360px",
+    id: "1",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+  }) do %>
+    <% example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
+    ] %>
+    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+      <%= form.text_field :example_text_field, props: { label: true } %>
+      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+      <%= form.actions do |action| %>
+        <%= action.submit props: {
+          text: "Apply",
+          data: {
+            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+        },}%>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const toggleButton = document.getElementById('toggle-filter-button')
+    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
+    const filterContentDiv = document.getElementById('filter-content')
+    const secondFilterContentDiv = document.getElementById('second-filter-content')
+
+    let isLoading = true
+
+    toggleButton.addEventListener('click', function() {
+      isLoading = !isLoading
+
+      if (isLoading) {
+        skeletonFilterContentDiv.style.display = 'block'
+        filterContentDiv.style.display = 'none'
+        toggleButton.textContent = 'Show Filter'
+      } else {
+        skeletonFilterContentDiv.style.display = 'none'
+        filterContentDiv.style.display = 'block'
+        toggleButton.textContent = 'Show Skeleton Loading'
+      }
+    })
+  })
+</script>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 
 const SortingChangeCallback = (sortOptions) => {
@@ -6,7 +6,8 @@ const SortingChangeCallback = (sortOptions) => {
 }
 
 const SkeletonLoadingFilter = (props) => {
-  const isLoading = true
+  const [isLoading, setIsLoading] = useState(true)
+  const toggleLoading = () => setIsLoading((prev) => !prev)
 
   const options = [
     { value: 'USA' },
@@ -18,6 +19,13 @@ const SkeletonLoadingFilter = (props) => {
 
   return (
     <div>
+      <Button 
+          marginBottom="md" 
+          onClick={toggleLoading} 
+          variant="secondary"
+      >
+          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
+      </Button>
       <div>
         {isLoading ? (
           <Card 

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

@@ -0,0 +1,15 @@
+<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
+
+<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
+
+<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
+<% end %>
+
+<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
+    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
+<% end %>
+
+<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
+
+<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>

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

@@ -17,9 +17,11 @@ const SkeletonLoadingHeightWidth = (props) => (
         width="50px"
         {...props}
     />
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+    <Card 
+        height='200px' 
         marginBottom="md"
         padding="none" 
+        width='100%'
         {...props}
     >
       <SkeletonLoading
@@ -30,8 +32,10 @@ const SkeletonLoadingHeightWidth = (props) => (
           {...props}
       />
     </Card>
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+    <Card 
+        height='200px'
         padding="none"
+        width='100%'
         {...props}
     >
       <SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.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` border_radius 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.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("skeleton_loading", props: { stack: 5 }) %>
+
+<%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %>