playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import SelectableCard from '../../pb_selectable_card/_selectable_card'
-import Title from '../../pb_title/_title'
+import { Body, SelectableCard, Title } from 'playbook-ui'
 
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.multi %>
     <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -1,4 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <% if object.inputs == "disabled" %>
 

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if enable_drag %>
     <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
       <%= pb_rails("draggable/draggable_container") do %>

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

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Flex, SkeletonLoading } from "playbook-ui"
 
-import Flex from '../../pb_flex/_flex'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingBorderRadius = (props) => (
   <Flex justify="evenly">

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

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
 
-import Card from '../../pb_card/_card'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingColor = (props) => (
   <div>

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import { SkeletonLoading } from "playbook-ui"
+
 
 const SkeletonLoadingDefault = (props) => (
   <div>

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

@@ -1,12 +1,5 @@
 import React, { useState } from 'react';
-
-import Button from '../../pb_button/_button'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Card from '../../pb_card/_card'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

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

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
 
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Card from '../../pb_card/_card'
 
 const SkeletonLoadingHeightWidth = (props) => (
   <div>

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import { SkeletonLoading } from "playbook-ui"
+
 
 const SkeletonLoadingLayout = (props) => (
   <div>

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

@@ -1,9 +1,5 @@
 import React, { useState } from 'react';
-
-import Button from '../../pb_button/_button'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Flex from '../../pb_flex/_flex'
-import User from '../../pb_user/_user'
+import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
 
 const SkeletonLoadingUser = (props) => {
   const [isLoading, setIsLoading] = useState(true)

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <% if layout_option == "number" %>
     <% case object.size %>
       <% when "xs", "sm" %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatChange from '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatChange from '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeUnit = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import StatChange from '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeUnitTwo = (props) => {
   return (

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
+import { Table, Icon } from 'playbook-ui'
 
 const TableWithClickableRows = (props) => {
 

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

@@ -1,8 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
+import { Table, Icon, Body, Card } from 'playbook-ui'
 
 const TableWithCollapsible = (props) => {
 

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

@@ -1,8 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
+import { Table, Card, Icon, Body } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomClick = (props) => {
 

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

@@ -1,11 +1,5 @@
 import React from 'react'
-
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
+import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomContent = (props) => {
 

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

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

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

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

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

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-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'
+import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
 
 const TableWithSelectableRows = (props) => {
     const [checkboxes, setCheckboxes] = useState([

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,12 @@
 <% if object.collapsible && object.tag == "table" %>
-    <%= pb_content_tag(:tr,
+    <%= content_tag(:tr,
+    aria: object.aria,
     class: object.classname + " collapsible-tr",
-    data: object.data.merge(id: object.id),
+    data: object.data.merge(id: object.id),  
+    id: object.id,
     'data-pb-table-collapsible-wrapper' => true,
-    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id) do %>
+    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
+    **combined_html_options) do %>
     <%= content.presence %>
   <% end %>
 
@@ -21,12 +24,22 @@
         <%= content.presence %>
       <% end %>
     <% else %>
-      <%= pb_content_tag(:tr) do %>
+      <%= content_tag(:tr,
+        aria: object.aria,
+        class: object.classname,
+        data: object.data,
+        id: object.id,
+        **combined_html_options) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
 <% else %>
-    <%= pb_content_tag do %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) 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)) return ''
+    if (isNaN(dollars) || dollars === 0) return ''
 
     // Format as currency
     return new Intl.NumberFormat('en-US', {
@@ -30,9 +30,10 @@ const formatCurrencyDefaultValue = (value: string): string => {
 const formatCurrency = (value: string): string => {
     const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
 
-    if (!numericValue || numericValue === "00") return ''
+    if (!numericValue) 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,4 +1,8 @@
-<%= pb_content_tag(:div, id: nil ) do  %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    **combined_html_options) 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 '../../pb_textarea/_textarea'
+import { Textarea } from 'playbook-ui'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) 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,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) 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 '../../pb_time_range_inline/_time_range_inline'
+import { TimeRangeInline } from 'playbook-ui'
 
 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;
-                        min-width: $space_lg;
+                        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;
-                        min-width: $space_lg;
+                        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,7 +1,5 @@
 import React from 'react'
-import Caption from '../../pb_caption/_caption'
-import Timestamp from '../../pb_timestamp/_timestamp'
-import Title from '../../pb_title/_title'
+import { Caption, Timestamp, Title } from 'playbook-ui'
 
 const TimestampUnstyled = (props) => {
   return (

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

@@ -31,38 +31,6 @@
     @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" | "display"
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
 type SizeResponsiveType = {[key: string]: SizeType}
 
 type TitleProps = {
@@ -16,7 +16,6 @@ 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",
@@ -33,7 +32,6 @@ const Title = (props: TitleProps): React.ReactElement => {
     htmlOptions = {},
     id,
     size = 3,
-    displaySize = null,
     bold = true,
     tag = 'h3',
     text,
@@ -58,16 +56,9 @@ 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,9 +1,10 @@
 <%= 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/example.yml

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