playbook_ui_docs 15.1.0 → 15.2.0.pre.alpha.PLAY2428advancedtablerailscellpadding11387

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

@@ -21,6 +21,15 @@
   ]
 %>
 
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -89,8 +98,10 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

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

@@ -9,23 +9,27 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name"
+  placeholder: "Enter last name",
+  id: "last-name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number"
+    placeholder: "Enter phone number",
+    id: "phone"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address"
+    placeholder: "Enter email address",
+    id: "email"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code"
+    placeholder: "Enter zip code",
+    id: "zip"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,6 +38,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -46,6 +47,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -55,6 +57,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -64,6 +67,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -84,6 +88,7 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
+          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

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

@@ -0,0 +1 @@
+Add an `id` to your Text Input so that clicking the label will move focus directly to the input.