playbook_ui 16.2.0.pre.rc.2 → 16.2.0.pre.rc.3

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

@@ -61,7 +61,7 @@ module Playbook
                                   name.to_s.humanize
                                 end
                               else
-                                # Legacy behavior .(generate full label HTML) left untouched
+                                # Legacy behavior (generate full label HTML) left untouched
                                 @template.label(@object_name, name)
                               end
             elsif props[:label].is_a?(String)

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

@@ -10,21 +10,7 @@ module Playbook
         props[:input_options] ||= {}
         props[:input_options][:id] ||= input_id
 
-        # Determine if this will use React rendering
-        # React is used when: pills || !is_multi || wrapped || input_display == "none"
-        will_use_react = props[:pills] || props[:is_multi] == false || props[:wrapped] || props[:input_display] == "none"
-
-        if props[:label] == true
-          # Extract just the text for label
-          props[:label] = if @object && @object.class.respond_to?(:human_attribute_name)
-                            @object.class.human_attribute_name(name)
-                          else
-                            name.to_s.humanize
-                          end
-        elsif props[:label].is_a?(String) && !will_use_react && !props[:required_indicator]
-          # Only Rails (non-React) text_input without required_indicator: text_input creates its own label, so keep as plain text
-        end
-        # Keep label as plain text for both React and Rails (they handle their own label rendering)
+        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
 
         if props[:validation]
           validation_message = props[:validation][:message]

data/lib/playbook/forms/builder.rb

@@ -7,16 +7,16 @@ module Playbook
       require_relative "builder/checkbox_field"
       require_relative "builder/collection_select_field"
       require_relative "builder/date_picker_field"
-      require_relative "builder/dropdown_field"
       require_relative "builder/form_field_builder"
       require_relative "builder/select_field"
+      require_relative "builder/typeahead_field"
       require_relative "builder/intl_telephone_field"
       require_relative "builder/multi_level_select_field"
       require_relative "builder/phone_number_field"
+      require_relative "builder/dropdown_field"
       require_relative "builder/star_rating_field"
       require_relative "builder/time_zone_select_field"
       require_relative "builder/time_picker_field"
-      require_relative "builder/typeahead_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "16.1.0"
-  VERSION = "16.2.0.pre.rc.2"
+  VERSION = "16.2.0.pre.rc.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 16.2.0.pre.rc.2
+  version: 16.2.0.pre.rc.3
 platform: ruby
 authors:
 - Power UX
@@ -741,9 +741,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -2119,7 +2116,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
@@ -3673,9 +3669,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
@@ -3894,12 +3887,12 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_pb_line_graph-DuJNCf7N.js
-- dist/chunks/_typeahead-BKSzddAX.js
+- dist/chunks/_pb_line_graph-CG2X7d4a.js
+- dist/chunks/_typeahead-DjDiMPdY.js
 - dist/chunks/componentRegistry-DzmmLR2x.js
-- dist/chunks/globalProps-Bc-FVsRt.js
+- dist/chunks/globalProps-B_OY_vR9.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BwX82vim.js
+- dist/chunks/lib-9vEH4omL.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-rails-react-bindings.js

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("checkbox" , props: {
-  required_indicator: true,
-  text: "Checkbox Label",
-  value: "checkbox-value",
-  name: "checkbox-name"
-}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import Checkbox from '../_checkbox'
-
-const CheckboxRequiredIndicator = () => {
-  return (
-    <div>
-      <Checkbox
-          name="checkbox-name"
-          requiredIndicator
-          text="Checkbox label"
-          value="check-box value"
-      />
-    </div>
-  )
-}
-
-export default CheckboxRequiredIndicator

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md

@@ -1,3 +0,0 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
-
-You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md

@@ -1,3 +0,0 @@
-The MultiLevelSelect component optionally accepts a `label` prop to produce a label above the input. 
-
-Add an `id` to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb

@@ -1,16 +0,0 @@
-<% 
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-required-indicator",
-    is_multi: false,
-    label: "Colors",
-    options: options,
-    required_indicator: true,
-}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx

@@ -1,23 +0,0 @@
-import React from "react"
-import Typeahead from "../../pb_typeahead/_typeahead"
-
-const options = [
-  {label: "Orange", value: "#FFA500"},
-  {label: "Red", value: "#FF0000"},
-  {label: "Green", value: "#00FF00"},
-  {label: "Blue", value: "#0000FF"},
-]
-
-const TypeaheadRequiredIndicator = (props) => {
-  return (
-    <Typeahead
-        id="typeahead_required_indicator"
-        label="Colors"
-        options={options}
-        requiredIndicator
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadRequiredIndicator

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md

@@ -1,3 +0,0 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
-
-You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.