playbook_ui 14.11.1.pre.alpha.play1724darkmodeauditmap5437 → 14.11.1.pre.alpha.play17725372

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd2c4386840b8ed40fbdcf38b8ee5bdfb9ae12835b7514488a3c45e447e979d2
-  data.tar.gz: 556917dff9d652fa0f85daba1bbc773edb9565d8a073e58a6ac1762cbe062936
+  metadata.gz: 605e8fba05e7ad729b24918b880cd6d2c3b42c040d63b72ce79a718a6b5f5078
+  data.tar.gz: 2c576ffcf40d00c75f2a8fbe09c1987ea33956b52d4db438731e9b94e16fa599
 SHA512:
-  metadata.gz: af6e2d7210fb12307df00c21f083c04c39e7ff2b4a4f7795c1e48b045d8b7f94b9d1b02695e2c536cf989c000f5df907bcf581af6d60766f9061236ce41cc034
-  data.tar.gz: c357bbc958caaa66a17d3c5f965987fa0eb6f97bbdd3b11c2999faa0b1b171ae0f0e1bd8f4500337840feeb672bef03fb061a2a13351b8cc0e35521fb1352ff2
+  metadata.gz: 5d9aeb7d6aca91c1698da83d050f0073fabf03158f5f6006ebe5d71ae326c48525b2de9f2ea0ae6dc20fb08337bf584e4714cec299ba80d27fb9e1990f43d318
+  data.tar.gz: 60dafa94ed713fba0242a8b9e297963d3f422191c5deb77332efcfdc9f37c47110a588fd80605934a5e445a83ed585614f4db298f46af99fdb89f468f6aa83a6

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
+

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

@@ -11,7 +11,6 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
 
 

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -3,7 +3,6 @@
 @import "../tokens/shadows";
 @import "../tokens/border_radius";
 @import "./_pb_map_button_mixin.scss";
-@import "../tokens/titles";
 
 [class*="pb_map"] {
   .pb_map-custom-button {
@@ -160,7 +159,6 @@
   }
 
   .maplibregl-popup-content {
-    @include pb_title_4;
     padding: $space_sm;
     background-color: $card_light;
     box-shadow: $shadow_deeper;
@@ -196,7 +194,6 @@
     }
 
     .maplibregl-popup-content {
-      @include pb_title_4;
       background-color: $bg_dark;
       color: $text_dk_default;
     }

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -25,12 +25,12 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll
         map.scrollZoom.disable();
-
+        
         //add attributioncontrols
         map.addControl(new maplibregl.AttributionControl({
           compact: true
@@ -49,7 +49,7 @@ const MapDefault = (props) => {
 
     }, [])
 
-return (
+return ( 
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -63,7 +63,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0,
+              top: 0, 
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -25,12 +25,12 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll
         map.scrollZoom.disable();
-
+        
         //add attributioncontrols
         map.addControl(new maplibregl.AttributionControl({
           compact: true
@@ -49,8 +49,8 @@ const MapWithCustomButton = (props) => {
 
     }, [])
 
-return (
-  <Map
+return ( 
+  <Map 
       {...props}
   >
     <Map.Controls flyTo
@@ -59,10 +59,10 @@ return (
         zoomInClick={() => {handleZoomIn(mapInstance)}}
         zoomOutClick={()=> {handleZoomOut(mapInstance)}}
     >
-      <MapCustomButton icon="home"
+      <MapCustomButton icon="home" 
           onClick={() => alert("button clicked!")}
       />
-      <MapCustomButton icon="search"
+      <MapCustomButton icon="search" 
           onClick={() => alert("button clicked!")}
       />
     </Map.Controls>
@@ -72,7 +72,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0,
+              top: 0, 
               bottom: 0,
            }}
        />

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -25,7 +25,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML('Hello World!')) // add popup
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls
@@ -48,7 +48,7 @@ const MapWithPlugin = (props) => {
         map.addControl(new maplibregl.AttributionControl({
             compact: true
         }));
-
+          
         //set map instance
         setMapInstance(map)
     }
@@ -62,8 +62,8 @@ const MapWithPlugin = (props) => {
     }, [])
 
 
-
-return (
+    
+return ( 
   <Map flyTo
       flyToClick={()=> {handleFlyTo(mapInstance)}}
       zoomBtns
@@ -77,7 +77,7 @@ return (
               position: 'absolute',
               left: 0,
               right: 0,
-              top: 0,
+              top: 0, 
               bottom: 0,
            }}
        />

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

@@ -4,23 +4,9 @@
     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 %>
-        <%= pb_rails("list", props: {ordered: false}) do %>
-          <% object.items.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props: {drag_id: item[:drag_id]}) do %>
-              <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item), drag_id: item[:drag_id]) )%>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% else %>
-    <%= pb_rails("list") do %>
-      <% object.items.each do |item| %>
-        <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
-      <% end %>
+  <%= pb_rails("list") do %>
+    <% object.items.each do |item| %>
+      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -14,9 +14,6 @@ module Playbook
       prop :items, type: Playbook::Props::Array,
                    default: []
 
-      prop :enable_drag, type: Playbook::Props::Boolean,
-                         default: false
-
       def classname
         generate_classname("pb_selectable_list_kit")
       end

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

@@ -4,13 +4,6 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-  <% if object.drag_id && object.drag_handle %>
-    <span style="vertical-align: middle;">
-      <%= pb_rails("body") do %>
-        <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
-      <% end %>
-    </span>
-  <% end %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
@@ -26,10 +19,10 @@
   <% if object.variant == "checkbox"%>
     <script>
       var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
-
+      
       checkboxElement.addEventListener("change", (evt) => {
         var listItemElement = document.querySelector("#<%=object.id%>")
-
+        
         if (evt.target.checked) {
           listItemElement.classList.add("checked_item");
         } else {
@@ -41,9 +34,9 @@
     <script>
       var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
 
-      radioElement.addEventListener("change", () => {
+      radioElement.addEventListener("change", () => {        
         var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
-
+        
         radios.forEach((radio) => {
           if (radio.checked) {
             radio.closest("li").classList.add("checked_item");

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -6,9 +6,6 @@ module Playbook
       prop :tabindex
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
-      prop :drag_handle, type: Playbook::Props::Boolean,
-                         default: true
-      prop :drag_id, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :text, type: Playbook::Props::String
       prop :value, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -0,0 +1,50 @@
+
+
+
+<%= pb_rails("title", props: { text: "Input Masks", size: 4, margin_bottom: "md" }) %>
+
+<div class="pb--doc-demo-elements">
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "ZIP Code",
+    mask: "zip_code",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Postal Code",
+    mask: "postal_code",
+    placeholder: "12345-6789",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Social Security Number",
+    mask: "ssn",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("title" , props: {
+    text: "Hidden Input Under The Hood",
+    padding_bottom: "sm"
+  })%>
+
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    id: "example-currency"
+  }) %>
+
+<style>
+#example-currency-sanitized {display: flex !important;}
+</style>
+
+</div>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md

@@ -0,0 +1,3 @@
+This mask feature lets you style your inputs while maintaining the value that the user typed in.
+
+There's a hidden input file that stores the raw value, and has the `name` feild. It will also copy the id field with a "#{your-id-sanitized}"

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

@@ -8,6 +8,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
+  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -23,4 +24,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""

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

@@ -0,0 +1,103 @@
+export default class PbTextInput {
+  static start() {
+    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
+
+    inputElements.forEach((inputElement) => {
+      inputElement.addEventListener("input", (event) => {
+        const maskType = inputElement.getAttribute("mask");
+        const cursorPosition = inputElement.selectionStart;
+
+        let rawValue = event.target.value;
+        let formattedValue = rawValue;
+
+        // Apply formatting based on the mask type
+        switch (maskType) {
+          case "currency":
+            formattedValue = formatCurrency(rawValue);
+            break;
+          case "ssn":
+            formattedValue = formatSSN(rawValue);
+            break;
+          case "postal_code":
+            formattedValue = formatPostalCode(rawValue);
+            break;
+          case "zip_code":
+            formattedValue = formatZipCode(rawValue);
+            break;
+        }
+
+        // Update the sanitized input field in the same wrapper
+        const sanitizedInput = inputElement
+          .closest(".text_input_wrapper")
+          ?.querySelector('[data="sanitized-pb-input"]');
+
+        if (sanitizedInput) {
+          switch (maskType) {
+            case "ssn":
+              sanitizedInput.value = sanitizeSSN(formattedValue);
+              break;
+            case "currency":
+              sanitizedInput.value = sanitizeCurrency(formattedValue);
+              break;
+            default:
+              sanitizedInput.value = formattedValue; 
+          }
+        }
+
+        inputElement.value = formattedValue;
+        setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
+      });
+    });
+
+  }
+}
+
+function formatCurrency(value) {
+  const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
+
+  if (!numericValue) return "";
+
+  const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
+  if (dollars === 0) return "";
+
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(dollars);
+}
+
+function formatSSN(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned
+    .replace(/(\d{5})(?=\d)/, "$1-")
+    .replace(/(\d{3})(?=\d)/, "$1-");
+}
+
+function formatZipCode(value) {
+  return value.replace(/\D/g, "").slice(0, 5);
+}
+
+function formatPostalCode(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
+}
+
+function sanitizeSSN(input) {
+  return input.replace(/\D/g, ""); 
+}
+
+function sanitizeCurrency(input) {
+  return input.replace(/[$,]/g, ""); 
+}
+
+// function to set cursor position
+function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
+  const difference = formattedValue.length - rawValue.length;
+
+  const newPosition = Math.max(0, cursorPosition + difference);
+
+  requestAnimationFrame(() => {
+    inputElement.setSelectionRange(newPosition, newPosition);
+  });
+}

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

@@ -13,9 +13,13 @@
       <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
         <%= input_tag %>
       <% end %>
+    <% elsif mask.present? %>
+      <%= input_tag %>
+      <%= tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: object.name, style: "display: none;") %>
     <% else %>
       <%= input_tag %>
     <% end %>
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -4,6 +4,22 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
+      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
+
+      MASK_PATTERNS = {
+        "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
+        "zip_code" => '\d{5}',
+        "postal_code" => '\d{5}-\d{4}',
+        "ssn" => '\d{3}-\d{2}-\d{4}',
+      }.freeze
+
+      MASK_PLACEHOLDERS = {
+        "currency" => "$0.00",
+        "zip_code" => "12345",
+        "postal_code" => "12345-6789",
+        "ssn" => "123-45-6789",
+      }.freeze
+
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,
@@ -25,6 +41,9 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
+      prop :mask, type: Playbook::Props::String,
+                  default: nil
+
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
@@ -46,6 +65,10 @@ module Playbook
         { dark: dark }.merge(add_on || {})
       end
 
+      def sanitized_id
+        "#{object.id}-sanitized" if id.present?
+      end
+
     private
 
       def all_input_options
@@ -55,12 +78,13 @@ module Playbook
           data: validation_data,
           disabled: disabled,
           id: input_options.dig(:id) || id,
-          name: name,
-          pattern: validation_pattern,
-          placeholder: placeholder,
+          name: mask.present? ? "" : name,
+          pattern: validation_pattern || mask_pattern,
+          placeholder: placeholder || mask_placeholder,
           required: required,
           type: type,
           value: value,
+          mask: mask,
         }.merge(input_options)
       end
 
@@ -75,7 +99,7 @@ module Playbook
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        fields
+        mask ? fields.merge(pb_input_mask: true) : fields
       end
 
       def error_class
@@ -85,6 +109,25 @@ module Playbook
       def inline_class
         inline ? " inline" : ""
       end
+
+      def mask_data
+        return {} unless mask
+        raise ArgumentError, "mask must be one of: #{VALID_MASKS.join(', ')}" unless VALID_MASKS.include?(mask)
+
+        { mask: mask }
+      end
+
+      def mask_pattern
+        return nil unless mask
+
+        MASK_PATTERNS[mask]
+      end
+
+      def mask_placeholder
+        return nil unless mask
+
+        MASK_PLACEHOLDERS[mask]
+      end
     end
   end
 end