playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import {Pill, Background, Table, Icon} from "playbook-ui"
+
+import Pill from '../../pb_pill/_pill'
+import Background from '../../pb_background/_background'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
 
 const TableWithCollapsibleWithNestedTable = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Button from '../../pb_button/_button'
 
 const TableWithSelectableRows = (props) => {
     const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -6,21 +6,11 @@
 
 <%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
   <% if object.tag == "table" %>
-    <%= content_tag(:table,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag(:table) do %>
       <%= content.presence %>
     <% end %>
   <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -4,22 +4,12 @@
         <%= content.presence %>
       <% end %>
     <% else %>
-      <%= content_tag(:tbody,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
+      <%= pb_content_tag(:tbody) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_cell.html.erb

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:td,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag(:td) do %>
       <%= content.presence || object.text %>
     <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence || object.text %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_head.html.erb

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:thead,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag(:thead) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -1,11 +1,7 @@
 <% if object.tag == "table" %>  
-  <%= content_tag(:th,
+  <%= pb_content_tag(:th,
       colspan: object.colspan,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: "pb-th#{object.id}",
-      **combined_html_options) do %>
+      id: "pb-th#{object.id}") do %>
     <% unless sorting_style? %>
         <%= content.presence || object.text %>
     <% else %>
@@ -46,12 +42,7 @@
     <% end %>
   <% end %>
 <% else %>
-  <%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+  <%= pb_content_tag do %>
       <% unless sorting_style? %>
         <%= content.presence || object.text %>
       <% else %>

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -1,12 +1,9 @@
 <% if object.collapsible && object.tag == "table" %>
-    <%= content_tag(:tr,
-    aria: object.aria,
+    <%= pb_content_tag(:tr,
     class: object.classname + " collapsible-tr",
-    data: object.data.merge(id: object.id),  
-    id: object.id,
+    data: object.data.merge(id: object.id),
     'data-pb-table-collapsible-wrapper' => true,
-    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
-    **combined_html_options) do %>
+    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id) do %>
     <%= content.presence %>
   <% end %>
 
@@ -24,22 +21,12 @@
         <%= content.presence %>
       <% end %>
     <% else %>
-      <%= content_tag(:tr,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
+      <%= pb_content_tag(:tr) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence %>
     <% end %>
 <% end %>

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

@@ -17,7 +17,7 @@ const formatCurrencyDefaultValue = (value: string): string => {
 
     // Parse the numeric value as a float to handle decimals
     const dollars = parseFloat(numericValue)
-    if (isNaN(dollars) || dollars === 0) return ''
+    if (isNaN(dollars)) return ''
 
     // Format as currency
     return new Intl.NumberFormat('en-US', {
@@ -30,10 +30,9 @@ const formatCurrencyDefaultValue = (value: string): string => {
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
-    if (!numericValue) return ''
+    if (!numericValue || numericValue === "00") return ''
 
     const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
-    if (dollars === 0) return ''
 
     return new Intl.NumberFormat('en-US', {
         style: 'currency',

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import { Textarea } from 'playbook-ui'
+import Textarea from '../../pb_textarea/_textarea'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_textarea/textarea.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 %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.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 %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { TimeRangeInline } from 'playbook-ui'
+import TimeRangeInline from '../../pb_time_range_inline/_time_range_inline'
 
 const TimeRangeInlineDefault = (props) => (
   <div>

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

@@ -243,7 +243,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        width: $space_lg;
+                        min-width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);
@@ -263,7 +263,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        width: $space_lg;
+                        min-width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Caption, Timestamp, Title } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Timestamp from '../../pb_timestamp/_timestamp'
+import Title from '../../pb_title/_title'
 
 const TimestampUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -31,6 +31,38 @@
     @include pb_title_thin;
   }
 
+  &[class*=_display] {
+    font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
+  }
+
+  &[class*=_dynamic] {
+    &[class*=_xs] {
+      font-size: min(2vw, 80vw / 16); 
+    }
+  
+    &[class*=_sm] {
+      font-size: min(2.5vw, 96vw / 16); 
+    }
+  
+    &[class*=_md] {
+      font-size: min(4vw, 160vw / 16);
+    }
+  
+    &[class*=_lg] {
+      font-size: min(5vw, 192vw / 16);
+    }
+  
+    &[class*=_xl] {
+      font-size: min(6vw, 224vw / 16);
+    }
+  
+    &[class*=_xxl] {
+      font-size: min(8vw, 256vw / 16);
+    }
+  }
+  
+
+
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4" | "display"
 type SizeResponsiveType = {[key: string]: SizeType}
 
 type TitleProps = {
@@ -16,6 +16,7 @@ type TitleProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: SizeType | SizeResponsiveType,
+  displaySize?: null | "xs" | "sm" | "md" | "lg" | "xl" | "xxl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -32,6 +33,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     htmlOptions = {},
     id,
     size = 3,
+    displaySize = null,
     bold = true,
     tag = 'h3',
     text,
@@ -56,9 +58,16 @@ const Title = (props: TitleProps): React.ReactElement => {
     return css.trim()
   }
 
+  const buildDisplaySize = () => {
+    if (displaySize) {
+      return `pb_title_kit_dynamic_${displaySize}`
+    }
+  }
+
   const classes = classnames(
     buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildDisplaySize(),
     buildResponsiveSizeCss(),
     className
   )

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb

@@ -1,10 +1,9 @@
 <%= pb_rails("title", props: {
+    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
 
-<br/>
-
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
+          marginBottom='md'
           text="Default Title"
           {...props}
       />
-      <br />
       <Title
           size={1}
           tag="h1"

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
+<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
+<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
+<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
+<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
+<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
+<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleDisplaySize = (props) => {
+  return (
+    <div>
+      <Title
+          displaySize="xs"
+          tag="h1"
+          text="Display Size xs"
+          {...props}
+      />
+      <Title
+          displaySize="sm"
+          tag="h1"
+          text="Display Size sm"
+          {...props}
+      />
+      <Title
+          displaySize="md"
+          tag="h1"
+          text="Display Size md"
+          {...props}
+      />
+      <Title
+          displaySize="lg"
+          tag="h1"
+          text="Display Size lg"
+          {...props}
+      />
+      <Title
+          displaySize="xl"
+          tag="h1"
+          text="Display Size xl"
+          {...props}
+      />
+      <Title
+          displaySize="xxl"
+          tag="h1"
+          text="Display Size xxl"
+          {...props}
+      />
+      <Title
+          size="display"
+          tag="h1"
+          text="This is a size of display"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleDisplaySize

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md

@@ -0,0 +1 @@
+Responsive sizes for large screens and tablets, perfect for digital signage.

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

@@ -5,6 +5,7 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -12,3 +13,4 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size

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

@@ -3,3 +3,4 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
+export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,7 +1,2 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %><%= content.presence || object.text %><% end %>
+<%= pb_content_tag(object.tag) do %><%= content.presence || object.text %><% end %>
     

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,12 +16,15 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
+      prop :display_size, type: Playbook::Props::Enum,
+                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
+                          default: nil
 
       def classname
         if is_size_responsive
           generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold)
+          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
         end
       end
 
@@ -29,6 +32,12 @@ module Playbook
         bold ? nil : "thin"
       end
 
+      def generate_display_size
+        return "" if display_size.nil?
+
+        " pb_title_kit_dynamic_#{display_size}"
+      end
+
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -54,7 +54,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       margin-bottom: 50px;
     }
 
-    &.visible, 
+    &.visible,
     &.show {
       z-index: $z_9;
       padding: $space_xs $space_sm;
@@ -117,7 +117,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
         color: $charcoal;
         background-color: $white;
       }
-      .arrow {        
+      .arrow {
         border-color: $white transparent transparent transparent;
         opacity: $opacity_10;
       }

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -25,12 +25,18 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
+  height?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   interaction?: boolean,
+  maxHeight?: string,
+  maxWidth?: string,
+  minHeight?: string,
+  minWidth?: string,
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
+  width: string,
   showTooltip?: boolean,
   forceOpenTooltip?: boolean,
 } & GlobalProps
@@ -42,13 +48,19 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     children,
     data = {},
     delay = 0,
+    height,
     htmlOptions = {},
     icon = null,
     interaction = false,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
     showTooltip = true,
+    width,
     zIndex,
     forceOpenTooltip = false,
     ...rest
@@ -115,6 +127,18 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     top: "bottom",
   }[placement.split("-")[0]]
 
+  const tooltipSizing = () => {
+    return Object.assign(
+      {},
+      height ? { height: height } : {},
+      maxHeight ? { maxHeight: maxHeight } : {},
+      maxWidth ? { maxWidth: maxWidth } : {},
+      minHeight ? { minHeight: minHeight } : {},
+      minWidth ? { minWidth: minWidth } : {},
+      width ? { width: width } : {}
+    );
+};
+
   return (
     <>
       <div
@@ -144,6 +168,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               ref: refs.setFloating,
               role: "tooltip",
               style: {
+                ...tooltipSizing(),
                 position: strategy,
                 top: y ?? 0,
                 left: x ?? 0,