playbook_ui 16.8.0.pre.alpha.PLAY3003websiteonlyiconboxsizing16656 → 16.8.0.pre.alpha.PLAY296916758

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7557676e684a60f6615ead3761ebdd7ec32898936e83db625d092387dad4d557
-  data.tar.gz: 36b720db0e15987e30b8257475739d44dfc8dd8c99ad0450cdcd389ecf3b2857
+  metadata.gz: 90d3f24d9b712247bfd1f98152216cf8677f2e479b6bcc3c41fd6d5b8e7bd3f3
+  data.tar.gz: 07d19fe6dbce4f09207d76da40552a143acf8554dc40f9d531037a540741a21c
 SHA512:
-  metadata.gz: 75cecbd2c9a5c0de217548fc5edf2e5b9ba928d93cbcb1cd574812131231e5f769726231a8b7aeb47c7abc034e3ce25cf73f76b56f6ec952abac31fb767e3159
-  data.tar.gz: e0961df6a09f63ed3f1cb933065b2d0660671e298fd7bd378399ac9c046d84959f4ab6c5d7d67d8b26c4b44b70142ea251db4071b8cf017d9f81c191937ea083
+  metadata.gz: bb8b1924408a0f70f8cd6d8fa68b0e8cdac329ba7ce8477e337527f44012fbc30a350f7b3fc1a403e900fdd85d2ae326e3276c5dcd724ccfa2e33fc29d102038
+  data.tar.gz: 679a8bbd8292b31d80cf2001881eec260e16459fea1711df3c1742246481b47e3330704513bdad9d332b642f5417bf2bfeb62462dd1e8907b129195f147db02c

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb

@@ -0,0 +1,62 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("title", props: { size: 4, text: "Normal Structure", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "enable-toggle-expansion-normal",
+  table_data: @table_data,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all"
+}) %>
+
+<%= pb_rails("title", props: { size: 4, text: "Subcomponent Structure", margin_top: "lg", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: { id: "enable-toggle-expansion-subcomponents" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    enable_toggle_expansion: "all"
+  }) %>
+  <%= pb_rails("advanced_table/table_body", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    subrow_headers: subrow_headers,
+    enable_toggle_expansion: "all"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md

@@ -0,0 +1,7 @@
+`enable_toggle_expansion` controls where AdvancedTable renders toggle-all expansion controls. It accepts `"header"`, `"all"`, or `"none"` and defaults to `"header"`.
+
+When using the normal Rails structure, pass `enable_toggle_expansion` to `advanced_table`. The parent kit renders its own `table_header` and `table_body`, so the prop is passed down automatically.
+
+When using the Rails subcomponent structure, pass `enable_toggle_expansion` directly to the subcomponents that need it. `advanced_table/table_header` uses it for the table header toggle-all button. **NOTE**: you must pass `table_data` to `advanced_table/table_header` as well so it can detect whether expandable rows exist. `advanced_table/table_body` uses it for nested subrow header toggle controls, such as when `subrow_headers` is present.
+
+Use `"all"` when you want toggle-all controls in both the table header and subrow headers. Use `"header"` when you only want the table header toggle-all control. Use `"none"` to suppress the header toggle-all control.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -40,11 +48,11 @@ const AdvancedTableStickyHeader = (props) => {
   }
 
   return (
-    <div>
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           responsive="none"
-          tableData={MOCK_DATA}
+          tableData={tableData}
           tableProps={tableProps}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md

@@ -1,3 +1,7 @@
 The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
 
+This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb

@@ -2,7 +2,6 @@
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -30,4 +29,19 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
+</div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md

@@ -1,3 +1,7 @@
 The `table_props` prop can also be used to render a sticky header for the Advanced Table.
 
+This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb

@@ -2,7 +2,6 @@
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -30,4 +29,19 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
+</div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -40,11 +48,10 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   }
 
   return (
-    <div>
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          tableData={MOCK_DATA}
+          tableData={tableData}
           tableProps={tableProps}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
+Scroll inside the table preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,7 +1,9 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
 
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
 
-Expand the table above to see this in action.
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
+Expand the table above to see responsive behavior in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -79,42 +79,57 @@
 
   <%= javascript_tag do %>
     (function() {
+      const initQuickPickChangeListener = (input) => {
+        if (!<%= object.selection_type == "quickpick" %>) return
+        if (input.dataset.quickpickInitialized) return
+
+        input.dataset.quickpickInitialized = "true"
+        input.addEventListener("change", ({ target }) => {
+          const startDate = document.getElementById("<%= object.start_date_id %>")
+          const endDate = document.getElementById("<%= object.end_date_id %>")
+          const splittedValue = target.value.split(" to ")
+          startDate.value = splittedValue[0]
+          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        })
+      }
+
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        const input = document.getElementById("<%= object.picker_id %>")
+
+        if (!input || input._flatpickr) return true
+        if (typeof window.datePickerHelper !== "function") return false
 
-          if (<%= object.selection_type == "quickpick" %>) {
-            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-              const startDate = document.getElementById("<%= object.start_date_id %>")
-              const endDate = document.getElementById("<%= object.end_date_id %>")
-              const splittedValue = target.value.split(" to ")
-              startDate.value = splittedValue[0]
-              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-            })
-          }
+        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        initQuickPickChangeListener(input)
+
+        return true
+      }
+
+      let attempts = 0
+      const retryLoad = () => {
+        if (loadDatePicker()) return
+
+        if (attempts++ < 20) {
+          setTimeout(retryLoad, 100)
         }
       }
 
-      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", loadDatePicker)
+        window.addEventListener("DOMContentLoaded", retryLoad)
       } else {
-        loadDatePicker()
+        retryLoad()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>");
+        const input = document.getElementById("<%= object.picker_id %>")
         if (input && !input._flatpickr) {
-          loadDatePicker();
+          retryLoad()
         }
-      }, 100);
+      }, 100)
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", () => {
-          loadDatePicker()
-        })
+        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
     })()
   <% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={`fixed-${pickerInstance}`}
+                        key={"fixed-" + pickerInstance}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        pickerId={"datePickerFixed-" + pickerInstance}
                         staticPosition={false}
                     />
                 </Dialog.Body>

data/app/pb_kits/playbook/pb_passphrase/index.ts

@@ -0,0 +1,58 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+export default class PbPassphrase extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-passphrase]'
+  }
+
+  toggle: HTMLElement | null
+  input: HTMLInputElement | null
+  visible: boolean
+
+  connect() {
+    this.toggle = this.element.querySelector('.show-passphrase-icon')
+    this.input = this.element.querySelector('.passphrase-text-input input')
+    this.visible = false
+
+    if (!this.toggle || !this.input) return
+
+    this.toggle.addEventListener('click', this.handleToggle)
+    this.toggle.addEventListener('keydown', this.handleKeydown)
+  }
+
+  disconnect() {
+    if (!this.toggle) return
+
+    this.toggle.removeEventListener('click', this.handleToggle)
+    this.toggle.removeEventListener('keydown', this.handleKeydown)
+  }
+
+  handleToggle = (event: Event) => {
+    event.preventDefault()
+    this.setVisible(!this.visible)
+  }
+
+  handleKeydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+
+    event.preventDefault()
+    this.setVisible(!this.visible)
+  }
+
+  setVisible(visible: boolean) {
+    this.visible = visible
+    this.input.type = visible ? 'text' : 'password'
+    this.toggle.setAttribute('aria-pressed', String(visible))
+    this.toggle.setAttribute(
+      'aria-label',
+      visible
+        ? 'Passphrase currently visible. Click icon to hide password'
+        : 'Passphrase currently hidden. Click icon to reveal password'
+    )
+
+    const icons = this.toggle.querySelectorAll('.passphrase-toggle-icon')
+    icons.forEach((iconWrapper, index) => {
+      iconWrapper.classList.toggle('hide-icon', visible ? index === 0 : index === 1)
+    })
+  }
+}

data/app/pb_kits/playbook/pb_passphrase/kit.schema.json

@@ -84,6 +84,19 @@
         "react",
         "rails"
       ]
+    },
+    "required": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "boolean",
+      "default": false
+    },
+    "minLength": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "number"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1 +1,70 @@
-  <%= react_component('Passphrase', object.passphrase_options, class: object.classname, **combined_html_options) %>
+<%= pb_content_tag(:div) do %>
+  <label>
+    <%= pb_rails("flex", props: { align: "baseline", margin_bottom: show_label? ? "xs" : nil }.compact) do %>
+      <% if show_label? %>
+        <% if show_required_indicator? %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "passphrase-label", color: "lighter" }) do %>
+            <%= object.display_label %> <span class="required_indicator">*</span>
+          <% end %>
+        <% else %>
+          <%= pb_rails("caption", props: {
+            dark: object.dark,
+            classname: "passphrase-label",
+            color: "lighter",
+            text: object.display_label,
+          }) %>
+        <% end %>
+      <% end %>
+
+      <% if object.show_tips? %>
+        <%= pb_rails("circle_icon_button", props: {
+          classname: object.tips_button_class,
+          dark: object.dark,
+          icon: "info-circle",
+          id: object.tips_trigger_id,
+          variant: "link",
+        }) %>
+        <%= pb_rails("popover", props: {
+          close_on_click: "outside",
+          position: "right",
+          trigger_element_id: object.tips_trigger_id,
+          tooltip_id: object.tips_tooltip_id,
+        }) do %>
+          <%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
+            <%= pb_rails("caption", props: {
+              color: "lighter",
+              margin_bottom: "xs",
+              text: "Tips for a good passphrase",
+            }) %>
+            <div>
+              <% object.tips.each do |tip| %>
+                <%= pb_rails("flex", props: { align: "center", margin_bottom: "xs" }) do %>
+                  <%= pb_rails("icon", props: { icon: "shield-check", margin_right: "xs" }) %>
+                  <%= pb_rails("caption", props: { color: "lighter", size: "xs", text: tip }) %>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <div class="passphrase-text-input-wrapper">
+      <%= pb_rails("text_input", props: object.text_input_props) %>
+      <span
+        aria-label="Passphrase currently hidden. Click icon to reveal password"
+        aria-pressed="false"
+        class="show-passphrase-icon"
+        role="button"
+        tabindex="0"
+      >
+        <%= pb_rails("body", props: { classname: "passphrase-toggle-icon", color: "light", dark: object.dark }) do %>
+          <%= pb_rails("icon", props: { aria: { label: "eye icon" }, icon: "eye-slash" }) %>
+        <% end %>
+        <%= pb_rails("body", props: { classname: "passphrase-toggle-icon hide-icon", color: "light", dark: object.dark }) do %>
+          <%= pb_rails("icon", props: { aria: { label: "eye icon" }, icon: "eye" }) %>
+        <% end %>
+      </span>
+    </div>
+  </label>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -11,12 +11,69 @@ module Playbook
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
       prop :required_indicator, type: Playbook::Props::Boolean, default: false
+      prop :required, type: Playbook::Props::Boolean, default: false
+      prop :min_length, type: Playbook::Props::Number
       prop :value, type: Playbook::Props::String
 
       def classname
         generate_classname("pb_passphrase")
       end
 
+      def data
+        Hash(values[:data]).merge(pb_passphrase: true)
+      end
+
+      def display_label
+        return label if label.present?
+        return "Confirm Passphrase" if confirmation
+
+        "Passphrase"
+      end
+
+      def show_label?
+        display_label.present?
+      end
+
+      def show_required_indicator?
+        required_indicator || required
+      end
+
+      def show_tips?
+        tips.present? && !confirmation
+      end
+
+      def tips_trigger_id
+        @tips_trigger_id ||= "passphrase-tips-trigger-#{dom_id_suffix}"
+      end
+
+      def tips_tooltip_id
+        @tips_tooltip_id ||= "passphrase-tips-tooltip-#{dom_id_suffix}"
+      end
+
+      def tips_button_class
+        classes = %w[passphrase-popover passphrase-tips]
+        classes << "show-below-#{show_tips_below}" unless show_tips_below == "always"
+        classes.join(" ")
+      end
+
+      def text_input_props
+        {
+          dark: dark,
+          data: text_input_data,
+          margin_bottom: "none",
+          classname: "passphrase-text-input",
+          placeholder: "Enter a passphrase...",
+          required: required,
+          type: "password",
+          value: value,
+          input_options: merged_input_options,
+        }.compact
+      end
+
+      def text_input_data
+        input_props.with_indifferent_access.fetch(:data, {}).to_h
+      end
+
       def passphrase_options
         {
           dark: dark,
@@ -31,6 +88,19 @@ module Playbook
           value: value,
         }.compact
       end
+
+    private
+
+      def dom_id_suffix
+        id.presence || object_id
+      end
+
+      def merged_input_options
+        options = input_props.deep_dup.with_indifferent_access.except(:data)
+        options[:class] = [options[:class], options.delete(:classname)].compact.join(" ").strip.presence
+        options[:minlength] = min_length if min_length.present?
+        options
+      end
     end
   end
 end