playbook_ui 15.0.0.pre.alpha.PLAY2419dialogaccessibility10324 → 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10588

data/lib/playbook/forms/builder/form_field_builder.rb

@@ -4,23 +4,58 @@ module Playbook
   module Forms
     class Builder
       class FormFieldBuilder < Module
+        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}',
+          "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
+          "cvv" => '\d{3,4}',
+        }.freeze
+
         def initialize(method_name, kit_name:)
           define_method method_name do |name, props: {}, **options, &block|
-            props[:label] = @template.label(@object_name, name) if props[:label] == true
+            props   = props.dup
             options = Hash(options)
 
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
+            options[:type] = props[:type] if props.key?(:type)
+            options[:value] = props[:value] if props.key?(:value)
+            options[:disabled] = true if props.key?(:disabled) && props[:disabled]
+            if props.key?(:disabled)
+              cursor_style = props[:disabled] ? "not-allowed" : "pointer"
+              existing_style = options[:style] || ""
+
+              options[:style] =
+                existing_style.empty? ? "cursor: #{cursor_style}" : "#{existing_style}; cursor: #{cursor_style}"
+            end
+            if props.key?(:autocomplete)
+              options[:autocomplete] = props[:autocomplete] == true ? nil : (props[:autocomplete].presence || "off")
+            end
+            if props.key?(:mask) && props[:mask].present?
+              options[:mask] = props[:mask]
+              options[:data] = (options[:data] || {}).merge(pb_input_mask: true)
+              options[:pattern] = MASK_PATTERNS[props[:mask]]
+            end
 
             if props.key?(:validation)
               validation = props[:validation]
               options[:pattern] = validation[:pattern] if validation[:pattern].present?
-              options[:data] = { message: validation[:message] } if validation[:message].present?
+              options[:data] = (options[:data] || {}).merge(message: validation[:message]) if validation[:message].present?
             end
 
             input = super(name, **options, &block)
 
+            input_id = input[/\bid="([^"]+)"/, 1] || "#{@object_name}_#{name}"
+
+            if props[:label] == true
+              props[:label] = @template.label(@object_name, name)
+            elsif props[:label].is_a?(String)
+              props[:label] = @template.label_tag(input_id, props[:label])
+            end
+
             @template.pb_rails(kit_name, props: props) do
               input
             end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.0.0"
-  VERSION = "15.0.0.pre.alpha.PLAY2419dialogaccessibility10324"
+  VERSION = "15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10588"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.0.0.pre.alpha.PLAY2419dialogaccessibility10324
+  version: 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10588
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-09 00:00:00.000000000 Z
+date: 2025-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1220,7 +1220,6 @@ files:
 - app/pb_kits/playbook/pb_dialog/dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog.rb
 - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
-- app/pb_kits/playbook/pb_dialog/dialogHelper.js
 - app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog_body.rb
 - app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
@@ -2091,6 +2090,8 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.html.erb
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.jsx
+- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb
+- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx
 - app/pb_kits/playbook/pb_loading_inline/docs/example.yml
 - app/pb_kits/playbook/pb_loading_inline/docs/index.js
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
@@ -2414,6 +2415,71 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss
+- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml
+- app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js
+- app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts
+- app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb
+- app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb
+- app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss
+- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js
+- app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts
+- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb
+- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/_person.tsx
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -3111,6 +3177,9 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
@@ -3620,12 +3689,12 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_line_graph-pjRvO-Xb.js
-- dist/chunks/_typeahead-CZo22jaG.js
-- dist/chunks/_weekday_stacked-CXuGHKcc.js
+- dist/chunks/_line_graph-CUfJ7E4h.js
+- dist/chunks/_typeahead-DCp1lVJx.js
+- dist/chunks/_weekday_stacked-YwRTPuBs.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-CY5ZPzic.js
-- dist/chunks/pb_form_validation-D3b0JKHH.js
+- dist/chunks/lib-BTs5acfO.js
+- dist/chunks/pb_form_validation-CKkaQFX3.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,65 +0,0 @@
-// Three places in Nitro depend on this function inside the window scope.
-// We will keep this file until we remove this dependency from Nitro.
-const dialogHelper = () => {
-  const openTrigger = document.querySelectorAll("[data-open-dialog]");
-  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
-  const dialogs = document.querySelectorAll(".pb_dialog_rails")
-
-  const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-  if (loadingButton) {
-    loadingButton.addEventListener("click", function() {
-      const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
-      const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
-      let currentClass = okayLoadingButton.className;
-      let cancelClass = cancelButton ? cancelButton.className : "";
-
-      let newClass = currentClass.replace("_enabled", "_disabled_loading");
-      let newCancelClass = cancelClass.replace("_enabled", "_disabled");
-
-      // Disable the buttons
-      okayLoadingButton.disabled = true;
-      if (cancelButton) cancelButton.disabled = true;
-
-      okayLoadingButton.className = newClass;
-      if (cancelButton) cancelButton.className = newCancelClass;
-    });
-  }
-
-
-  openTrigger.forEach((open) => {
-    open.addEventListener("click", () => {
-      var openTriggerData = open.dataset.openDialog;
-      var targetDialog = document.getElementById(openTriggerData)
-      if (targetDialog.open) return;
-      targetDialog.showModal();
-    });
-  });
-
-  closeTrigger.forEach((close) => {
-    close.addEventListener("click", () => {
-      var closeTriggerData = close.dataset.closeDialog;
-      document.getElementById(closeTriggerData).close();
-    });
-  });
-
-  // Close dialog box on outside click
-  dialogs.forEach((dialogElement) => {
-    dialogElement.addEventListener("mousedown", (event) => {
-      const dialogParentDataset = dialogElement.parentElement.dataset
-      if (dialogParentDataset.overlayClick === "overlay_close") return
-
-      const dialogModal = event.target.getBoundingClientRect()
-      const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
-                                        event.clientX > dialogModal.right ||
-                                        event.clientY < dialogModal.top ||
-                                        event.clientY > dialogModal.bottom
-
-      if (clickedOutsideDialogModal) {
-        dialogElement.close()
-        event.stopPropagation()
-      }
-    })
-  })
-};
-
-export default dialogHelper;