playbook_ui_docs 16.1.0.pre.alpha.PLAY2800textinputtextareaaccessiblebordercontrast14296 → 16.1.0.pre.alpha.PLAY272013809

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe735c5a8eb36ec9fde01399f75b1e30fd63b56558ad2d7a4cebb9e5d3d77c77
-  data.tar.gz: d012ce9fe763c376f05f4fad4ad32f58044d7861ac998b02daf69dc68420f1d2
+  metadata.gz: fd7d3e665b120ab4cca835e09d1f6f80671b7ead1ae88343669f067462ccb81f
+  data.tar.gz: bdf0512a285aff8fa341a19cd6d51170d31c77c2995acfdaeabbdac534e2bdd7
 SHA512:
-  metadata.gz: b8354ca5aa5dc48f89ac25d85bcc71e449f64d64590043f519eebaf9bb99477caa1e8f989a04491544760e31e661ba4607323fe5d193fcc01942338f7d486dd5
-  data.tar.gz: 7f0e8b75b845b8c6957a098163097ec6156091d6ef94df38280223c38f8e5a20c8bc355f9c9d4a1c2d311167a9f290a69109b45ab0d7005077375094f9cf7292
+  metadata.gz: d33ed49e4c1e3883f00db066f7922408f5d80557d93375c39f1d0f596cb0859abbd025d880ec173b0ff25ca1be347c299d72a550586fb869cb59282b9aa86451
+  data.tar.gz: fe17457ab801ae807b2c6bda81af6aaa0592e2e4cd595237baa71b3e61ba12563a87c3af7109a0a8e6c5ce9c1a115bb7399bb5c2a4ea46c334d3a1222cb8ac42

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

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 
 ### sortIcon
 
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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

@@ -78,7 +78,6 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,5 +47,4 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

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

@@ -8,7 +8,6 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
-    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -18,7 +17,6 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
-  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
-export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

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

@@ -31,7 +31,6 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
-  - date_picker_required_indicator: Required Indicator
   - date_picker_turbo_frames: Within Turbo Frames
 
   react:
@@ -65,4 +64,3 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
-  - date_picker_required_indicator: Required Indicator

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

@@ -27,5 +27,4 @@ export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
 export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
-export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
-export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
+export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'

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

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
 
-    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
     if (!display) return;
 
     const nameEl = display.querySelector("#dropdown-avatar-name");

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

@@ -1,13 +1,10 @@
-<%
+<% 
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
+
 %>
 
-<%= pb_rails("dropdown", props: {
-  id: "select_a_country",
-  label: "Select a Country",
-  options: options
-}) %>
+<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

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

@@ -25,7 +25,6 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
-        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

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

@@ -1,3 +1 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element. 
-
-Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

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

@@ -21,17 +21,13 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
-  - dropdown_with_clearable: Clearable
-  - dropdown_with_constrain_height_rails: Constrain Height
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
   - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
-  - dropdown_required_indicator: Required Indicator
 
   react:
   - dropdown_default: Default
@@ -56,10 +52,7 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection
-  - dropdown_with_clearable: Clearable
-  - dropdown_with_constrain_height: Constrain Height
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
   - dropdown_quickpick: Quick Pick Variant
@@ -67,4 +60,5 @@ examples:
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
-  - dropdown_required_indicator: Required Indicator
+
+

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

@@ -11,7 +11,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
-export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
@@ -28,7 +27,4 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
 export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
-export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
-export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
-export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,7 +1,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-1",
+    id: "1",
     margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
@@ -44,7 +44,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-2",
+    id: "def2",
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
       { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import Button from '../../pb_button/_button'
 import Filter from '../../pb_filter/_filter'
@@ -6,18 +6,11 @@ import Flex from '../../pb_flex/_flex'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FilterDefault = (props) => {
-  const [sortValue, setSortValue] = useState([{ name: 'popularity', dir: 'desc' }])
-  const [sortValue2, setSortValue2] = useState([{ name: 'popularity', dir: 'desc' }])
-
-  const handleSortChange = (sortOptions) => {
-    setSortValue(sortOptions)
-    alert(JSON.stringify(sortOptions[0]))
-  }
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
 
-  const handleSortChange2 = (sortOptions) => {
-    setSortValue2(sortOptions)
-  }
+const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -36,7 +29,7 @@ const FilterDefault = (props) => {
           }}
           marginBottom="xl"
           minWidth="375px"
-          onSortChange={handleSortChange}
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -45,7 +38,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (
@@ -89,7 +82,7 @@ const FilterDefault = (props) => {
       <Filter
           double
           minWidth="375px"
-          onSortChange={handleSortChange2}
+          onSortChange={SortingChangeCallback}
           results={0}
           sortOptions={{
             popularity: 'Popularity',
@@ -98,7 +91,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue2}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (

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

@@ -1,167 +1,13 @@
-<% tree_data = [
-  {
-    label: "HQ",
-    value: "hQ",
-    id: "hq",
-  },
-  {
-    label: "Philadelphia",
-    value: "philadelphia",
-    id: "phl",
-    children: [
-      {
-        label: "Marketing & Sales PHL",
-        value: "marketingAndSalesPhl",
-        id: "marketingPHL",
-      },
-      {
-        label: "Installation Office PHL",
-        value: "installationOfficePhl",
-        id: "installationPHL",
-      },
-      {
-        label: "Warehouse PHL",
-        value: "warehousePhl",
-        id: "warehousePHL",
-      },
-    ]
-  },
-  {
-    label: "New Jersey",
-    value: "newJersey",
-    id: "nj",
-    children: [
-      {
-        label: "New Jersey",
-        value: "newJersey",
-        id: "nj1",
-        children: [
-          {
-            label: "Marketing & Sales NJ",
-            value: "marketingAndSalesNj",
-            id: "marketingNJ",
-          },
-          {
-            label: "Installation Office NJ",
-            value: "installationOfficeNj",
-            id: "installationNJ",
-          },
-          {
-            label: "Warehouse NJ",
-            value: "warehouseNj",
-            id: "warehouseNJ",
-          },
-        ],
-      },
-      {
-        label: "Princeton",
-        value: "princeton",
-        id: "princeton",
-        children: [
-          {
-            label: "Marketing & Sales Princeton",
-            value: "marketingAndSalesPrinceton",
-            id: "marketingPR",
-          },
-          {
-            label: "Installation Office Princeton",
-            value: "installationOfficePrinceton",
-            id: "installationPR",
-          },
-          {
-            label: "Warehouse Princeton",
-            value: "warehousePrinceton",
-            id: "warehousePR",
-          },
-        ]
-      },
-    ]
-  },
-  {
-    label: "Maryland",
-    value: "maryland",
-    id: "MD",
-    children: [
-      {
-        label: "Marketing & Sales MD",
-        value: "marketingAndSalesMd",
-        id: "marketingMD",
-      },
-      {
-        label: "Installation Office MD",
-        value: "installationOfficeMd",
-        id: "installationMD",
-      },
-      {
-        label: "Warehouse MD",
-        value: "warehouseMd",
-        id: "warehouseMD",
-      },
-    ]
-  },
-  {
-    label: "Connecticut",
-    value: "connecticut",
-    id: "CT",
-    children: [
-      {
-        label: "Marketing & Sales CT",
-        value: "marketingAndSalesCt",
-        id: "marketingCT",
-      },
-      {
-        label: "Installation Office CT",
-        value: "installationOfficeCt",
-        id: "installationCT",
-      },
-      {
-        label: "Warehouse CT",
-        value: "warehouseCt",
-        id: "warehouseCT",
-      },
-    ]
-  },
-]; %>
-<%
-  example_dropdown_options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' }
-  ]
-%>
-
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
-  <%# form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
-  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
-  <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
-    label: true,
-    margin_y: 'sm',
-    required: true,
-    required_indicator: true,
-    tree_data: tree_data
-  } %>
-  <%= form.multi_level_select :example_multi_level_select_required_indicator_custom, props: {
-    label: "Custom Multi Level Select Label",
-    margin_y: 'sm',
-    required: true,
-    required_indicator: true,
-    tree_data: tree_data
-  } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
-  <%= form.dropdown_field :example_dropdown_2, props: { label: "Dropdown Custom Label", options: example_dropdown_options, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb

@@ -1,6 +1,6 @@
 <div>
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { label: "with label", placeholder: "Search", id: "search-with-label" }) %>
+    <%= pb_rails("text_input", props: { label: "with label", placeholder: "Search" }) %>
     <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
   <% end %>
   <br/>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx

@@ -9,7 +9,6 @@ const FormGroupButton = (props) => (
     <div>
       <FormGroup>
         <TextInput
-            id="search-with-label"
             label="With Label"
             placeholder="Search"
             {...props}

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.html.erb

@@ -1,6 +1,6 @@
 <div>
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name", id: "event-name" }) %>
+    <%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name" }) %>
     <%= pb_rails("date_picker", props: { label: "Event Date", picker_id: "date-picker-default" }) %>
   <% end %>
 </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx

@@ -9,7 +9,6 @@ const FormGroupDatePicker = (props) => (
   <div>
     <FormGroup>
       <TextInput
-          id="event-name"
           label="Event"
           placeholder="Event Name"
           {...props}

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb

@@ -1,7 +1,7 @@
 <div>
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name", id: "first-name" }) %>
-    <%= pb_rails("text_input", props: { label: "Middle Initial", placeholder: "Enter Middle Initial", id: "middle-initial" }) %>
-    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name", id: "last-name" }) %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
   <% end %>
 </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx

@@ -7,19 +7,16 @@ const FormGroupDefault = (props) => (
   <div>
     <FormGroup>
       <TextInput
-          id="first-name"
           label="First Name"
           placeholder="Enter First Name"
           {...props}
       />
       <TextInput
-          id="middle-initial"
-          label="Middle Initial"
+          label="Middle Intial"
           placeholder="Enter Middle Initial"
           {...props}
       />
       <TextInput
-          id="last-name"
           label="Last Name"
           placeholder="Enter Last Name"
           {...props}

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb

@@ -1,8 +1,8 @@
 <div>
   <%= pb_rails("form_group", props: { full_width: true }) do %>
-    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name", id: "first-name-full-width" }) %>
-    <%= pb_rails("text_input", props: { label: "Middle Initial", placeholder: "Enter Middle Initial", id: "middle-initial-full-width" }) %>
-    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name", id: "last-name-full-width" }) %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
   <% end %>
   <br/>
   <br/>
@@ -10,4 +10,4 @@
     <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
     <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
   <% end %>
-</div>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx

@@ -9,19 +9,16 @@ const FormGroupFullWidth = (props) => (
     <div>
       <FormGroup fullWidth>
         <TextInput
-            id="first-name-full-width"
             label="First Name"
             placeholder="Enter First Name"
             {...props}
         />
         <TextInput
-            id="middle-initial-full-width"
-            label="Middle Initial"
+            label="Middle Intial"
             placeholder="Enter Middle Initial"
             {...props}
         />
         <TextInput
-            id="last-name-full-width"
             label="Last Name"
             placeholder="Enter Last Name"
             {...props}

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx

@@ -17,7 +17,6 @@ const FormGroupTypeahead = (props) => {
     <div>
       <FormGroup>
         <Typeahead
-            id="products"
             label="Products"
             options={options}
             {...props}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -15,7 +15,7 @@
     options: names,
     label: "Truncation Within Typeahead",
     pills: true,
-    truncate: "1",
+    truncate: 1,
 }) %>
 
 <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
@@ -24,19 +24,19 @@
       name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
       id: "truncation-1"
   }) %>
   <%= pb_rails("form_pill", props: {
       icon: "badge-check",
       text: "icon and a very long tag to show truncation",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
       id: "truncation-2"
   }) %>
   <%= pb_rails("form_pill", props: {
       text: "form pill long tag no tooltip show truncation",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
   }) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -21,7 +21,7 @@ const FormPillTruncatedText = (props) => {
           isMulti
           label="Truncation Within Typeahead"
           options={names}
-          truncate={"1"}
+          truncate={1}
           {...props}
       />
       <Caption text="Form Pill Truncation"/>
@@ -31,20 +31,20 @@ const FormPillTruncatedText = (props) => {
             name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
             onClick={() => alert('Click!')}
             tabIndex={0}
-            truncate={"1"}
+            truncate={1}
         />
         <FormPill
             icon="badge-check"
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="icon and a very long tag to show truncation"
-            truncate={"1"}
+            truncate={1}
         />
         <FormPill
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="form pill with a very long tag to show truncation"
-            truncate={"1"}
+            truncate={1}
         />
       </Card>
     </>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb

@@ -65,7 +65,7 @@
 }] %>
 
 <%= pb_rails("multi_level_select", props: {
-  id: "select_a_department",
-  label: "Select a Department",
-  tree_data: treeData
+    id: "multi-level-select-label-rails",
+    label: "Select a department",
+    tree_data: treeData
 }) %>