playbook_ui_docs 16.1.0.pre.alpha.play2772accesibilitylabelsforphonenumbers14339 → 16.1.0.pre.alpha.play264213817

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c968abcf489d3eb75677336e08fc1f75583e63843cd8a200872dd6c418b29731
-  data.tar.gz: 33d1b0ca349371322ca5a2714ca9314b694f4c3c95d433c1bc515b90ccd9ebea
+  metadata.gz: 81f0fec559472c2061a223677f8339ece322075c26253a72c86969c619dcea76
+  data.tar.gz: d77a023ee1d62ce896faace3f86bbc6277caa40f4bf5019cebf840c1b7b3386e
 SHA512:
-  metadata.gz: 8f7a10db0c5aa1865f9fb25261b6fedc5f2c2d96aaf2620fad3f599aa63315a20398bf673113b1aa9df31152e0ae1f8e0b9a5acb725effd8bedcd89351bcc12e
-  data.tar.gz: 72c5c5677aaf597c5e610e2e9517754edc9b1bb83d176cc01148838af7c31f0612b537623d55390e93d8aafc0341f3869f4207b2010e212e7cbecf8c0a4981b6
+  metadata.gz: 21c66ff7dc3bc5911c71e3dd81dd338a30390325a4641bbc9037920d83207eaf651c148a2e2b9396204ac420be2ad0744a8ad7ba43cc82fce8787cdcf21ad3c4
+  data.tar.gz: b23d4e6399598b3c983b5eeb957e2f01e234ee93ec4c01740aec610baaaf3921c5068e42026b3ec9f54bb6091f429687182b0356a965083f9b56c651b76a3bab

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_button/docs/example.yml

@@ -13,7 +13,6 @@ examples:
   - button_form: Button Form Attribute
   - button_managed_disabled: Button Toggle Disabled State
   - button_managed_disabled_helper: Button Toggle Disabled State Helper
-  - button_icon_variant: Icon Button Variant
   
   react:
   - button_default: Button Variants
@@ -28,7 +27,6 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
-  - button_icon_variant: Icon Button Variant
 
   swift:
   - button_default_swift: Button Variants

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

@@ -4,7 +4,6 @@ export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonIconOptions } from './_button_icon_options.jsx'
-export { default as ButtonIconVariant } from './_button_icon_variant.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb

@@ -1,4 +1,36 @@
-<%= pb_rails("card", props: {
-})  do %>
-  Card content
+<%= pb_rails("flex", props: {
+  gap: "md",
+  orientation: "column"
+}) do %>
+
+  <%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
+  <%= pb_rails("card", props: {
+    flex_direction: { default: "column", md: "row", xl:"row" }
+  })  do %>
+      <%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
+  <% end %>
+
+  <%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
+  <%= pb_rails("card", props: {
+    display: "flex",
+    flex_direction: "row",
+    align_items: { default: "start", md: "center", lg: "end" },
+  })  do %>
+    <%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
+    <%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
+    <%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
+  <% end %>
+
+<%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
+  <%= pb_rails("card", props: {
+    text_align: { default: "left", md: "center", lg: "right" },
+    width: "100%"
+  })  do %>
+    <%= pb_rails("body", props: { }) do %> text 1 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 2 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 3 <% end %>
+  <% end %>
 <% end %>
+

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_form_with.html.erb

@@ -92,8 +92,7 @@
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, hidden_inputs: true} %>
-  <%= form.intl_telephone :example_intl_telephone, props: { label: true, hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

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}