playbook_ui 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 → 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274

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 }) %>

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

@@ -0,0 +1,63 @@
+<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
+
+<div id="skeleton-loading-user-content">
+    <%= pb_rails("flex", props: { align_items: "center" }) do %>
+        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
+        <%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
+    <% end %>
+    <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
+        <%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
+            <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
+            <%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
+            <%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
+        <% end %>
+    <% end %>
+</div>
+
+<div id="user-content" style="display: none;">
+    <div>
+        <%= pb_rails("user", props: {
+            name: "Anna Black",
+            title: "Remodeling Consultant",
+            orientation: "horizontal",
+            align: "left",
+            avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+        }) %>
+    </div>
+    <div>
+        <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
+            <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Remodeling Consultant",
+                orientation: "vertical",
+                align: "center",
+                size: "lg",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+            }) %>
+        <% end %>
+    </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const toggleButton = document.getElementById('toggle-user-button')
+    const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
+    const userContentDiv = document.getElementById('user-content')
+
+    let isLoading = true
+
+    toggleButton.addEventListener('click', function() {
+      isLoading = !isLoading
+
+      if (isLoading) {
+        skeletonUserContentDiv.style.display = 'block'
+        userContentDiv.style.display = 'none'
+        toggleButton.textContent = 'Show User'
+      } else {
+        skeletonUserContentDiv.style.display = 'none'
+        userContentDiv.style.display = 'block'
+        toggleButton.textContent = 'Show Skeleton Loading'
+      }
+    })
+  })
+</script>

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

@@ -1,11 +1,19 @@
-import React from 'react';
-import { Flex, SkeletonLoading, User } from "playbook-ui";
+import React, { useState } from 'react';
+import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
 
 const SkeletonLoadingUser = (props) => {
-  const isLoading = true
+  const [isLoading, setIsLoading] = useState(true)
+  const toggleLoading = () => setIsLoading((prev) => !prev)
 
   return (
     <div>
+      <Button 
+          marginBottom="md" 
+          onClick={toggleLoading} 
+          variant="secondary"
+      >
+          {isLoading ? "Show User" : "Show Skeleton Loading"}
+      </Button>
       <div>
         {isLoading ? (
           <Flex alignItems="center">

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

@@ -1,8 +1,13 @@
 examples:
   
   rails:
-  # - skeleton_loading_default: Default
-  
+  - skeleton_loading_default: Default
+  - skeleton_loading_color: Color
+  - skeleton_loading_layout: Layout
+  - skeleton_loading_border_radius: Border Radius
+  - skeleton_loading_height_width: Height & Width  
+  - skeleton_loading_user: User Component Example
+  - skeleton_loading_filter: Filter Component Example
   
   react:
   - skeleton_loading_default: Default

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

@@ -1,12 +1,8 @@
-<!-- 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 %>
+<%= pb_content_tag do %>
+  <% stack.times do |index| %>
+    <div
+      class="<%= item_classname(index) %>"
+      style="<%= item_inline_styles %>"
+    ></div>
+  <% end %>
+<% end %>

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

@@ -2,7 +2,54 @@
 
 module Playbook
   module PbSkeletonLoading
-    class SkeletonLoading < ::Playbook::KitBase
+    class SkeletonLoading < Playbook::KitBase
+      prop :height, type: Playbook::Props::String,
+                    default: "16px"
+      prop :width, type: Playbook::Props::String,
+                   default: "100%"
+      prop :border_radius, type: Playbook::Props::Enum,
+                           values: %w[none xs sm md lg xl rounded],
+                           default: "sm"
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[none xxs xs sm md lg xl xxl],
+                 default: "xxs"
+      prop :stack, type: Playbook::Props::Number,
+                   default: 1
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default white],
+                   default: "default"
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def classname
+        generate_classname("pb_skeleton_loading")
+      end
+
+      def global_inline_props
+        {}
+      end
+
+      def item_classname(index = nil)
+        classes = [
+          "pb_skeleton_loading_item",
+          "border_radius_#{border_radius}",
+          "color_#{color}",
+          ("dark" if dark),
+          gap_class(index),
+        ]
+        classes.compact.join(" ")
+      end
+
+      def item_inline_styles
+        styles = []
+        styles << "height: #{height}"
+        styles << "width: #{width}"
+        styles.join("; ")
+      end
+
+      def gap_class(index = nil)
+        stack > 1 && index.to_i.positive? && gap != "none" ? "gap_#{gap}" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -4,6 +4,26 @@
     display: block;
     overflow-x: scroll;
 
+    // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
+    // hides outer scroll bar in chrome and safari
+    &:not(.table-responsive-scroll .table-responsive-scroll) {
+        &::-webkit-scrollbar {
+            height: 0px;
+        }
+    }
+    // hides outer scroll bar in firefox
+    @supports (scrollbar-width: none) {
+        scrollbar-width: none;
+        .pb_table {
+            overflow-x: auto;
+            scrollbar-width: auto;
+        }
+    }
+    // ensures visible inner scroll bar can scroll
+    .pb_table {
+        overflow-x: auto;
+    }
+
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -123,6 +123,13 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
   const childInput = children ? children.type === "input" : undefined
 
+  let formattedValue;
+  if (isMaskedInput && value) {
+    formattedValue = INPUTMASKS[mask].formatDefaultValue(value.toString())
+  } else {
+    formattedValue = value
+  }
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -138,7 +145,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         ref={ref}
         required={required}
         type={type}
-        value={value}
+        value={formattedValue}
      />)
   )
 

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -1,5 +1,6 @@
 type InputMask = {
     format: (value: string) => string
+    formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
 }
@@ -8,6 +9,24 @@ type InputMaskDictionary = {
     [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
 }
 
+const formatCurrencyDefaultValue = (value: string): string => {
+    // Remove non-numeric characters except for the decimal point
+    const numericValue = value.replace(/[^0-9.]/g, '')
+
+    if (!numericValue) return ''
+
+    // Parse the numeric value as a float to handle decimals
+    const dollars = parseFloat(numericValue)
+    if (isNaN(dollars) || dollars === 0) return ''
+
+    // Format as currency
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+    }).format(dollars)
+}
+
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
@@ -42,22 +61,26 @@ const formatSSN = (value: string): string => {
 export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
+        formatDefaultValue: formatCurrencyDefaultValue,
         // eslint-disable-next-line no-useless-escape
         pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
         placeholder: '$0.00',
     },
     zipCode: {
         format: formatBasicPostal,
+        formatDefaultValue: formatBasicPostal,
         pattern: '\\d{5}',
         placeholder: '12345',
     },
     postalCode: {
         format: formatExtendedPostal,
+        formatDefaultValue: formatExtendedPostal,
         pattern: '\\d{5}-\\d{4}',
         placeholder: '12345-6789',
     },
     ssn: {
         format: formatSSN,
+        formatDefaultValue: formatSSN,
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
     },

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

@@ -66,9 +66,6 @@ $gap_lg: $height_from_top + $space_lg;
         [class*=pb_timeline_item_kit] {
             &[class*=_solid] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_left_block] {
-                    height: 0px;
-                }
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     margin-top: $space_xs;
@@ -80,9 +77,6 @@ $gap_lg: $height_from_top + $space_lg;
             }
             &[class*=_dotted] {
                 flex-basis: 100%;
-                [class=pb_timeline_item_left_block] {
-                    height: 0;
-                }
                 [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     margin-top: $space_xs;
@@ -92,6 +86,11 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
+            [class=pb_timeline_item_step] { 
+                > :first-child:not([class^=pb_icon_circle_kit]) { 
+                    margin-top: $space_xs;
+                }
+            }
         }
         &[class*=_with_date] {
             @include flex_wrapper(row);