playbook_ui 14.14.0.pre.alpha.PBNTR894allowingcurrencyzero6405 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9405959f28812ce17068b3a42e1c9207630234c73aa817005655afd22d708561
-  data.tar.gz: 0f3dfd8437117adbf036fe2e692265a6506e99b3755f69eef8a858715661e241
+  metadata.gz: 4c6ef102f160200110b47477b34a9a06798b4ef4f1122151a12341775c20c9a5
+  data.tar.gz: 14eb41101975901c5f557d1d8b6721fc9301e9b54a30ec0c335b8717dccbe508
 SHA512:
-  metadata.gz: d8075de7716d49fc0be0bda75d1be63bdaa3f9a07a8da9df1a3260d1327a8f43d1ebd948ec491c0aedf1404c971f157d6fa6b9d5bdafb79354f5cece6b2e01bd
-  data.tar.gz: 8b499830a6806d063e75e4e18f82f564dff2e1453f06a9834970ae4bbea6f8f3956c79676d4223faf8bf428675f8a852b26e283625d3eb1156ae98a181670ec7
+  metadata.gz: 301d0b715331e1e388be9b554865dc59f79b88f5ef11f3a7f038554f215c7b72d6541465d027adcf0c8f9a0fea2dd4e9e1e6f608c6b0d9b9f5360fc52a70ffc8
+  data.tar.gz: 6e1bc33d1fbe6b1bebe4b112b42c73107685786fbc7ddd01df4f95fe302d015e1225edcfbe042e2931728dcd655fe97a9d3629417c639392fa3753a7cb533ee6

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -120,6 +120,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
+  
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
           nullDisplay && !amount ? (
@@ -174,7 +175,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         )}
       </div>
     </div>
-  )
+  );
 }
 
 export default Currency

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -11,7 +11,7 @@
       <% end %>
     <% else %>
      <% if object.null_display && object.amount.blank? %>
-        <%= pb_rails("title", props: object.title_props) %>
+        <%= pb_rails("title", props: {text: object.null_display}) %>
       <% else %>
         <%= pb_rails("body", props: object.currency_wrapper_props) do %>
           <%= object.negative_sign %><%= object.symbol %>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,20 +68,10 @@ module Playbook
         }
       end
 
-      def title_text
-        if null_display
-          null_display
-        elsif swap_negative
-          absolute_amount(abbr_or_format_amount)
-        else
-          abbr_or_format_amount
-        end
-      end
-
       def title_props
         {
           size: size_value,
-          text: title_text,
+          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -158,10 +148,8 @@ module Playbook
           1
         when "md"
           3
-        when "sm"
-          4
         else
-          3
+          4
         end
       end
 

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb

@@ -3,7 +3,6 @@
     label: "Nil",
     margin_bottom: "md",
     null_display: "--",
-    size: "sm"
 }) %>
 
 <%= pb_rails("currency", props: {
@@ -11,12 +10,11 @@
     label: "Nil",
     margin_bottom: "md",
     null_display: "$0.00",
-    size: "sm"
 }) %>
 
 <%= pb_rails("currency", props: {
     amount: "",
     label: "Nil",
+    margin_bottom: "md",
     null_display: " ",
-    size: "sm"
 }) %>

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -134,6 +134,14 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
+.pb_drawer_lg_left.pb_drawer {
+  transform: translateX(-100%);
+}
+
+.pb_drawer_lg_right.pb_drawer {
+  transform: translateX(100%);
+}
+
 .pb_drawer.pb_drawer_after_open {
   pointer-events: auto;
   transform: translate3d(0, 0, 0);
@@ -149,34 +157,6 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
 
- &.pb_drawer_within_element_rails {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-
-    // Use max-height for a smooth accordion-like animation
-    max-height: 0;
-    transition: max-height $animation-duration ease-in-out;
-    z-index: 1;
-
-    &.open {
-      max-height: 1000px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -349,10 +329,6 @@ body.PBDrawer__Body--close {
     opacity: 1;
     pointer-events: none;
 
-    & .pb_drawer {
-      pointer-events: auto;
-    }
-
     &_before_close {
       height: 0;
     }

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1,20 +1 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-1", 
-    }) do  %>
-        Test me (Left Drawer)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-2", 
-        placement: "right"
-    }) do  %>
-        Test me (Right Drawer)
-    <% end %>
-<% end %>
-
+<%= pb_rails("drawer") %>

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

@@ -2,11 +2,6 @@ examples:
   
   rails:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders 
   
   
   react:

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb

@@ -1,20 +1,12 @@
-<% if within_element %>
-    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
-        <%= content %>
-    <% end %>
-<% else %>
-    <div class="pb_drawer_wrapper"
-        id="drawer-wrapper-<%= object.id %>"
-        style="display:none;"
-        data-behavior="<%= object.behavior %>"
-        data-size="<%= object.size %>"
-        data-placement="<%= object.placement %>"
-        data-breakpoint="<%= object.breakpoint %>"
-        >
-        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>"> 
-            <%= pb_content_tag do %>
-                <%= content %>
-            <% end %>
-        </div>
-    </div>
-<% end %>
+<!-- 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>DRAWER CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -2,55 +2,7 @@
 
 module Playbook
   module PbDrawer
-    class Drawer < Playbook::KitBase
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg xl full],
-                  default: "md"
-      prop :placement, type: Playbook::Props::Enum,
-                       values: %w[left right bottom],
-                       default: "left"
-      prop :behavior, type: Playbook::Props::Enum,
-                      values: %w[floating push],
-                      default: "floating"
-      prop :overlay, type: Playbook::Props::Boolean,
-                     default: true
-      prop :within_element, type: Playbook::Props::Boolean,
-                            default: false
-      prop :border, type: Playbook::Props::Enum,
-                    values: %w[full none right left],
-                    default: "none"
-      prop :breakpoint, type: Playbook::Props::Enum,
-                        values: %w[none xs sm md lg xl],
-                        default: "none"
-
-      def classname
-        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
-      end
-
-      def border_classes
-        case border
-        when "full"
-          "drawer_border-full"
-        when "right"
-          "drawer_border-right"
-        when "left"
-          "drawer_border-left"
-        else
-          ""
-        end
-      end
-
-      def overlay_close
-        !should_close_on_overlay_click ? "overlay_close" : ""
-      end
-
-      def within_class
-        within_element ? "pb_drawer_within_element_rails" : ""
-      end
-
-      def overlay_classes
-        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
-      end
+    class Drawer < ::Playbook::KitBase
     end
   end
 end

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -32,7 +32,7 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>

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

@@ -3,7 +3,3 @@ examples:
   rails:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
-
-  react:
-  - icon_button_default: Default
-  - icon_button_sizes: Sizes

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

@@ -8,5 +8,4 @@ examples:
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -16,14 +16,12 @@ id: object.id,
         <% end %>
 
     <% else %>
-        <div class="<%= previous_overlay_class_name %>" data-previous-overlay-classname="<%= previous_overlay_class_name %>"></div>
+        <div class="<%= previous_overlay_class_name %>"></div>
 
-        <div data-overlay-scroll-element="true">
-            <%= content.presence %>
-        </div>
+        <%= content.presence %>
 
         <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>" data-subsequent-overlay-classname="<%= subsequent_overlay_class_name %>"></div>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
         <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -8,8 +8,6 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
-      prop :dynamic, type: Playbook::Props::Boolean,
-                     default: false
 
       def classname
         generate_classname("pb_overlay")
@@ -107,13 +105,6 @@ module Playbook
           "bg_dark": "#0a0527",
         }
       end
-
-      def data_attributes
-        data ||= {}
-        data.merge!("data-pb-overlay" => true)
-        data.merge!("data-overlay-dynamic" => true) if dynamic
-        data
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:li) do %>
-  <div class="box" style="max-width: min-content;">
-    <div class="circle" id="<%= object.tooltip_trigger_class %>" >
+  <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
+    <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
     </div>
     <% if object.tooltip.present? %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -21,7 +21,6 @@ module Playbook
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
       prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
-      prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
         classname + inline_class + compact_class + show_arrow_class
@@ -89,13 +88,6 @@ module Playbook
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
 
-      def data_attributes
-        data = attributes[:data] || {}
-        data.merge!("data-pb-select" => true)
-        data.merge!("data-validation-message" => validation_message) if validation_message.present?
-        data
-      end
-
     private
 
       def error_class

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_tooltip/_tooltip.scss

@@ -141,6 +141,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -155,6 +156,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -167,6 +169,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

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

@@ -2,10 +2,8 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,7 +11,7 @@ const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
+    return '[data-pb-tooltip-kit]'
   }
 
   connect() {
@@ -152,4 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerMethod() {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
-}
+}

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,10 +7,6 @@ module Playbook
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
       prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :trigger_method, type: Playbook::Props::Enum,
@@ -22,19 +18,15 @@ module Playbook
       end
 
       def data
-        data = Hash(values[:data]).merge(
+        Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: trigger_method
         )
-        data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
-        data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close
-        data
       end
 
     private