playbook_ui_docs 16.1.0.pre.alpha.PLAY2777setupnewcolortokensfile14160 → 16.1.0.pre.alpha.PLAY2800textinputtextareaaccessiblebordercontrast14296

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f93ed591127902aa61434ae8800cdbd30e9f3414cf214269b1351ce7d89c9549
-  data.tar.gz: 7896f3fb9d3d544875fcf05d19ab8da872b1fcf3cf14a2e9524088ac560bef7b
+  metadata.gz: fe735c5a8eb36ec9fde01399f75b1e30fd63b56558ad2d7a4cebb9e5d3d77c77
+  data.tar.gz: d012ce9fe763c376f05f4fad4ad32f58044d7861ac998b02daf69dc68420f1d2
 SHA512:
-  metadata.gz: 349fe8f44f88286f9d075581a05dc475a3b5e7ba166b24f237f05d21d7d0db9a4043218cf9369994f6b05b74c1ca7d71b5b9b79294fa5ab92ac5b3d166729ce9
-  data.tar.gz: 15c52381b7ff4d08d1286db3b7ad20896532f6f5874867b61fcaa4d913add1e49164be98f865821dda6552cde3e9f35101b4df14e5ba19076cb561d8d4e08eb0
+  metadata.gz: b8354ca5aa5dc48f89ac25d85bcc71e449f64d64590043f519eebaf9bb99477caa1e8f989a04491544760e31e661ba4607323fe5d193fcc01942338f7d486dd5
+  data.tar.gz: 7f0e8b75b845b8c6957a098163097ec6156091d6ef94df38280223c38f8e5a20c8bc355f9c9d4a1c2d311167a9f290a69109b45ab0d7005077375094f9cf7292

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-short-wide", "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-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  picker_id: "date_picker_required_indicator",
+  label: "Required Date Picker",
+  required_indicator: true,
+}) %>

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

@@ -0,0 +1,13 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerRequiredIndicator = (props) => (
+  <DatePicker
+      label="Required Date Picker"
+      pickerId="date_picker_required_indicator"
+      requiredIndicator
+      {...props}
+  />
+)
+
+export default DatePickerRequiredIndicator

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.md

@@ -0,0 +1 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label to visually indicate that the field is required. This is purely visual and does not enforce validation—you can pair it with HTML `required`, client-side validation, or server-side validation as needed.

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

@@ -31,6 +31,7 @@ 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:
@@ -64,3 +65,4 @@ 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,4 +27,5 @@ 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 DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";

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

@@ -0,0 +1,14 @@
+<%
+  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: "dropdown_required_indicator",
+  label: "Select a Country",
+  options: options,
+  required_indicator: true
+}) %>

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

@@ -0,0 +1,42 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+
+const DropdownRequiredIndicator = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us",
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca",
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk",
+    },
+  ];
+
+  return (
+    <div>
+      <Dropdown
+          label="Select a Country"
+          options={options}
+          requiredIndicator
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option 
+              key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown>
+    </div>
+  );
+};
+
+export default DropdownRequiredIndicator;

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

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (\*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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("#dropdown_trigger_custom_display");
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
     if (!display) return;
 
     const nameEl = display.querySelector("#dropdown-avatar-name");

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

@@ -31,6 +31,7 @@ examples:
   - 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
@@ -66,5 +67,4 @@ 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

@@ -30,4 +30,5 @@ export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_
 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 DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";

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

@@ -1,3 +1,135 @@
+<% 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 } %>
@@ -10,8 +142,26 @@
   <%= 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.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" }) %>
+    <%= pb_rails("text_input", props: { label: "with label", placeholder: "Search", id: "search-with-label" }) %>
     <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
   <% end %>
   <br/>

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

@@ -9,6 +9,7 @@ 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" }) %>
+    <%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name", id: "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,6 +9,7 @@ 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" }) %>
-    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
-    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+    <%= 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" }) %>
   <% end %>
 </div>

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

@@ -7,16 +7,19 @@ const FormGroupDefault = (props) => (
   <div>
     <FormGroup>
       <TextInput
+          id="first-name"
           label="First Name"
           placeholder="Enter First Name"
           {...props}
       />
       <TextInput
-          label="Middle Intial"
+          id="middle-initial"
+          label="Middle Initial"
           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" }) %>
-    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
-    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+    <%= 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" }) %>
   <% 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,16 +9,19 @@ const FormGroupFullWidth = (props) => (
     <div>
       <FormGroup fullWidth>
         <TextInput
+            id="first-name-full-width"
             label="First Name"
             placeholder="Enter First Name"
             {...props}
         />
         <TextInput
-            label="Middle Intial"
+            id="middle-initial-full-width"
+            label="Middle Initial"
             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,6 +17,7 @@ const FormGroupTypeahead = (props) => {
     <div>
       <FormGroup>
         <Typeahead
+            id="products"
             label="Products"
             options={options}
             {...props}

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

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "select_a_department",
+  label: "Select a Department",
+  required_indicator: true,
+  tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx

@@ -0,0 +1,87 @@
+import React from "react"
+import MultiLevelSelect from "../_multi_level_select"
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1"
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1"
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1"
+              }
+            ]
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1"
+          }
+        ]
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1"
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1"
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1"
+          }
+        ]
+      }
+    ]
+  }
+]
+
+const MultiLevelSelectRequiredIndicator = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="select_a_department"
+          label="Select a Department"
+          onSelect={(selectedNodes) => console.log("Selected Items", selectedNodes)}
+          requiredIndicator
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultiLevelSelectRequiredIndicator

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -17,6 +17,7 @@ examples:
     - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
+    - multi_level_select_required_indicator: Required Indicator
 
   react:
     - multi_level_select_default: Default
@@ -37,3 +38,4 @@ examples:
     - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
+    - multi_level_select_required_indicator: Required Indicator

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

@@ -1,18 +1,19 @@
-export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
-export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectDefault } from "./_multi_level_select_default.jsx"
+export { default as MultiLevelSelectSingle } from "./_multi_level_select_single.jsx"
+export { default as MultiLevelSelectSingleChildrenOnly } from "./_multi_level_select_single_children_only.jsx"
+export { default as MultiLevelSelectReturnAllSelected } from "./_multi_level_select_return_all_selected.jsx"
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
-export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
-export { default as MultiLevelSelectInputDisplay } from './_multi_level_select_input_display.jsx'
-export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
-export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
-export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
-export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'
-export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
-export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
-export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
-export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
-export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
-export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'
+export { default as MultiLevelSelectColor } from "./_multi_level_select_color.jsx"
+export { default as MultiLevelSelectInputDisplay } from "./_multi_level_select_input_display.jsx"
+export { default as MultiLevelSelectWithChildren } from "./_multi_level_select_with_children.jsx"
+export { default as MultiLevelSelectWithChildrenWithRadios } from "./_multi_level_select_with_children_with_radios.jsx"
+export { default as MultiLevelSelectDisabled } from "./_multi_level_select_disabled.jsx"
+export { default as MultiLevelSelectReactHook } from "./_multi_level_select_react_hook.jsx"
+export { default as MultiLevelSelectError } from "./_multi_level_select_error.jsx"
+export { default as MultiLevelSelectDisabledOptions } from "./_multi_level_select_disabled_options.jsx"
+export { default as MultiLevelSelectDisabledOptionsParent } from "./_multi_level_select_disabled_options_parent.jsx"
+export { default as MultiLevelSelectDisabledOptionsParentDefault } from "./_multi_level_select_disabled_options_parent_default.jsx"
+export { default as MultiLevelSelectDisabledOptionsDefault } from "./_multi_level_select_disabled_options_default.jsx"
+export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.jsx"
+export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
+export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb

@@ -0,0 +1,24 @@
+ <%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", disabled: true }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", disabled: true }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+  

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+const CollapsibleNavDisabledItem = (props) => {
+  return (
+    <Nav 
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          collapsed={false}
+          collapsible
+          disabled
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            disabled
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default  CollapsibleNavDisabledItem

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

@@ -14,6 +14,7 @@ examples:
   - collapsible_nav: Collapsible Nav
   - collapsible_nav_with_all_options: Collapsible Nav With Options
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -42,6 +43,7 @@ examples:
   - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
   - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - collapsible_nav_no_icon: Collapsible Nav No Icon
+  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -62,9 +64,3 @@ examples:
   - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
   - nav_horizontal_bold_swift: Horizontal Bold
   - nav_props_swift: ""
-
-
-
-  
-
-  

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

@@ -22,4 +22,5 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
 export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
 export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'

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

@@ -2,19 +2,17 @@ import React from 'react'
 
 import TextInput from '../_text_input'
 
-class TextInputDisabled extends React.Component {
-  render(props) {
-    return (
-      <div>
-        <TextInput
-            disabled
-            label="Last Name"
-            placeholder="Enter last name"
-            {...props}
-        />
-      </div>
-    )
-  }
+const TextInputDisabled = (props) => {
+  return (
+    <div>
+      <TextInput
+          disabled
+          label="Last Name"
+          placeholder="Enter last name"
+          {...props}
+      />
+    </div>
+  )
 }
 
 export default TextInputDisabled

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.PLAY2777setupnewcolortokensfile14160
+  version: 16.1.0.pre.alpha.PLAY2800textinputtextareaaccessiblebordercontrast14296
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-04 00:00:00.000000000 Z
+date: 2026-02-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -648,6 +648,9 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md
@@ -894,6 +897,9 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
@@ -1437,6 +1443,9 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_required_indicator.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
@@ -1510,6 +1519,8 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md
 - app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.html.erb