playbook_ui_docs 14.19.0 → 14.20.0.pre.alpha.play2168firstcolumnborderbug7950

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownMultiSelectDisplay = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+        label: "United Kingdom",
+        value: "United Kingdom",
+    },  
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    },
+    {
+      label: "India",
+      value: "India",
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        formPillProps={{size:"small", color:"neutral"}}
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownMultiSelectDisplay

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md

@@ -0,0 +1,3 @@
+By default, the `multiSelect` prop will render selected options as the default FormPill. `FormPillProps` however can be used to customize these Pills with any props that exist for the FormPill. 
+
+This prop must be an object that contains valid FormPill props. For a full list of FormPill props, see [here](https://playbook.powerapp.cloud/kits/form_pill/react).

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb

@@ -0,0 +1,20 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  options: options,
+  multi_select: true,
+  form_pill_props: { size:"small", color:"neutral" },
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md

@@ -0,0 +1 @@
+By default, the `multi_select` prop will render selected options as the default form_pill. `form_pill_props` however can be used to customize these Pills with props that exist for the form_pill. Currently, only the '[color](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-colors)' and '[size](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-size)' props are supported as shown here.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  options: options,
+  multi_select: true,
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md

@@ -0,0 +1,3 @@
+`multi_select` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown.
+
+`multi_select` is set to false by default.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb

@@ -0,0 +1,20 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  autocomplete: true,
+  options: options,
+  multi_select: true,
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownMultiSelectWithAutocomplete = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+        label: "United Kingdom",
+        value: "United Kingdom",
+    },  
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    },
+    {
+      label: "India",
+      value: "India",
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+    }
+  ];  
+
+  return (
+  <div>
+    <Dropdown
+        autocomplete
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownMultiSelectWithAutocomplete

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md

@@ -0,0 +1 @@
+`multiSelect` can also be used with the `autocomplete` functionality.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb

@@ -0,0 +1,50 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { options: options, multi_select: true }) do %>
+    <%= pb_rails("dropdown/dropdown_trigger", props:{ multi_select: true }) %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+
+const DropdownMultiSelectWithCustomOptions = (props) => {
+
+ const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    },
+    {
+      label: "India",
+      value: "India",
+      areaCode: "+91",
+      icon: "🇮🇳",
+      id: "india"
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+      areaCode: "+61",
+      icon: "🇦🇺",
+      id: "australia"
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+      areaCode: "+64",
+      icon: "🇳🇿",
+      id: "new-zealand"
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+      areaCode: "+39",
+      icon: "🇮🇹",
+      id: "italy"
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+      areaCode: "+34",
+      icon: "🇪🇸",
+      id: "spain"
+    }
+  ];  
+
+  return (
+  <div>
+    <Dropdown
+        multiSelect
+        options={options}
+        {...props}
+    >
+    {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex
+                align="center"
+                justify="between"
+            >
+              <FlexItem>
+                <Flex>
+                  <Icon icon={option.icon} 
+                      paddingRight="xs"
+                  />
+                  <Body text={option.label} />
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Body color="light" 
+                    text={option.areaCode} 
+                />
+              </FlexItem>
+            </Flex>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownMultiSelectWithCustomOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb

@@ -0,0 +1,22 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<% 
+default_value = [
+  { label: 'United States', value: 'United States', id: 'us' },
+  { label: 'Canada', value: 'Canada', id: 'ca' },
+]
+ %>
+<%= pb_rails("dropdown", props: {options: options, multi_select: true, default_value: default_value}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+
+const DropdownMultiSelectWithDefault = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    },
+    {
+      label: "India",
+      value: "India",
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+    },
+  ];
+
+  const defaultSelectedOptions = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+  ];
+
+  return (
+    <div>
+      <Dropdown
+          defaultValue={defaultSelectedOptions}
+          multiSelect
+          options={options}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default DropdownMultiSelectWithDefault;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -6,6 +6,7 @@ import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
 import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -50,10 +51,20 @@ const DropdownWithCustomDisplay = (props) => {
       <>
       {
         selectedOption && (
+          <Flex align="center">
             <Avatar
                 name={selectedOption.label}
                 size="xs"
             />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
         )
       }
     </>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md

@@ -1,4 +1,4 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -38,7 +38,11 @@
 
 <%
   custom_display = capture do
-    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
   end
 %>
 
@@ -62,4 +66,31 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
+<% end %>
+
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    const option   = e.detail;
+    const dropdown = e.target;
+
+    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
+    const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+    if (avatarEl) {
+      avatarEl.dataset.name = option.label;
+      avatarEl.setAttribute("data-initials", initials);
+    }
+    const badgeEl   = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online"  ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = 'pb_badge_kit_' + variant;
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md

@@ -1,4 +1,6 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
+
+Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
 

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

@@ -1,35 +1,45 @@
 examples:
   rails:
-  - dropdown_default: Default
+  - dropdown_default_rails: Default
   - dropdown_with_autocomplete: Autocomplete
+  - dropdown_multi_select_rails: Multi Select
+  - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
+  - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
+  - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
+  - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
 
   react:
   - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
+  - dropdown_multi_select: Multi Select
+  - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
+  - dropdown_multi_select_display: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
+  - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
+  - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -15,3 +15,8 @@ export { default as DropdownClearSelection } from './_dropdown_clear_selection.j
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
 export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'
+export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
+export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
+export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
+export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("file_upload", props: {id: "error",  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import FileUpload from '../_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
+import Icon from '../../pb_icon/_icon'
+
+const AcceptedFilesList = ({ files }) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+
+const FileUploadError = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  const error = (<>
+    <Icon icon="warning" /> Please upload a valid file
+  </>)
+
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          error={error}
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FileUploadError

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
+  - file_upload_error: Error
 
   react:
   - file_upload_default: Default List of files to upload
@@ -10,3 +11,4 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
+  - file_upload_error: Error

data/app/pb_kits/playbook/pb_file_upload/docs/index.js

@@ -3,3 +3,4 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
 export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
+export { default as FileUploadError } from './_file_upload_error.jsx'

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

@@ -99,6 +99,7 @@
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
+  <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,