RubyGems - playbook_ui_docs - Versions diffs - 16.1.0.pre.alpha.play2724typeaheadindicator13970 → 16.1.0.pre.alpha.play2725datepickermlsrequiredindicator14215 - Mend

playbook_ui_docs 16.1.0.pre.alpha.play2724typeaheadindicator13970 → 16.1.0.pre.alpha.play2725datepickermlsrequiredindicator14215

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2244321e6df53f534ad1394dcaa7de6fe6852fed34b8ac66828789edfa3eea8
-  data.tar.gz: bde52fc6f901cab38d117de1cf6acb4511ce5842c7b601a316b759cffdc029cf
+  metadata.gz: 82db3f5cc8f36ebfae9617b56a568257dd6c6928dfb057f97282ca5346775b50
+  data.tar.gz: 56d540cc063c5283cffb7cc3ce6bbc786af95d2ff0942bb7968e32b3b5014d11
 SHA512:
-  metadata.gz: 18ed1b23c502a71de038ffd826f99f0f997d20c742c3edfcf2e2d7d00e5c24a48bed6c585da38a72cb32a1bb050864e9bfbff188fe4be90e49010e2b47705aee
-  data.tar.gz: 12c47bdabe77b9be9ae0c068c23c095e8bea3d4058923840978ed561c0ef0927d76c2ce0b72600d6ec58704c0046aba787fd435610d2758577113ed837bcf10f
+  metadata.gz: dd8b10d316ad351fc6b3032143a8190a605ff193eb7a0e3e0990c7a3980cbe0f9eaec345eb700294276bd6d8438cbbf2c6801538f31912b197b42adbe5df81ff
+  data.tar.gz: 1dc072ac7defc63add35888cd93f0fc36e4eb61aa39b4977621dab35793d85bf61be3723e899998779e45cf004cc3fc25385b811bf5a4d8bf631fa4ea1a0347c

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx ADDED Viewed

@@ -0,0 +1,71 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import  Flex  from '../../pb_flex/_flex'
+import  Title  from '../../pb_title/_title'
+import  Body  from '../../pb_body/_body'
+const AdvancedTableColumnStylingBackgroundCustom = (props) => {
+  const columnDefinitions = [
+{
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      customRenderer: (row, value) => (
+        <Flex flexDirection="column">
+          <Title size={4}
+              text={value}
+          />
+          <Body text="lorem ipsum" />
+          <Body text="lorem ipsum" />
+        </Flex>
+      ),
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
+        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
+      },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+export default AdvancedTableColumnStylingBackgroundCustom

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md ADDED Viewed

@@ -0,0 +1,4 @@
+`cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
+See the code snippet below for more details.

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

@@ -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_advanced_table/docs/example.yml CHANGED Viewed

@@ -78,6 +78,7 @@ 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 CHANGED Viewed

@@ -47,4 +47,5 @@ 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 AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `pickerId`/`picker_id` is a required prop to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_with_custom_display_rails.html.erb CHANGED Viewed

@@ -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/_dropdown_with_label.html.erb CHANGED Viewed

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

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

@@ -25,6 +25,7 @@ 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 CHANGED Viewed

@@ -1 +1,3 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+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.

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

@@ -1,3 +1,128 @@
+<% 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",
+      },
+    ]
+  },
+]; %>
 <%= 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,7 +135,24 @@
   <%= 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.actions do |action| %>
     <%= action.submit %>

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

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

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx CHANGED Viewed

@@ -73,14 +73,11 @@ const MultiLevelSelectDefault = (props) => {
   return (
     <div>
       <MultiLevelSelect
-          id='multiselect-label'
+          id="select_a_department"
           label="Select a Department"
           onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
+            console.log("Selected Items", selectedNodes)
+          }
           treeData={treeData}
           {...props}
       />
@@ -88,4 +85,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md ADDED Viewed

@@ -0,0 +1,3 @@
+The MultiLevelSelect component optionally accepts a `label` prop to produce a label above the input.
+Add an `id` to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+const RichTextEditorAdvancedLabel = (props) => {
+    const editor = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+    const editorNoLabel = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+    if (!editor || !editorNoLabel) return null
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id={"advanced-example"}
+          label="Advanced Example Label"
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      <br/>
+      <RichTextEditor
+          advancedEditor={editorNoLabel}
+          label="Advanced Example Label No ID"
+          {...props}
+      >
+        <EditorContent editor={editorNoLabel}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+export default RichTextEditorAdvancedLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx CHANGED Viewed

@@ -22,6 +22,7 @@ const RichTextEditorAdvancedRequiredIndicator = (props) => {
     <div>
       <RichTextEditor
           advancedEditor={editor}
+          id={"required-advanced"}
           label="Label"
           requiredIndicator
           {...props}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+const RichTextEditorLabel = (props) => {
+  const [value, setValue] = useState(''),
+  handleOnChange = (html) => setValue(html)
+  return (
+    <div>
+      <RichTextEditor
+          id="example"
+          label="Example Label"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+      <br/>
+      <RichTextEditor
+          label="Example Label No ID"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+export default RichTextEditorLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx CHANGED Viewed

@@ -8,6 +8,7 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
+          inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}
           requiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml CHANGED Viewed

@@ -32,6 +32,8 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
+  - rich_text_editor_label: Label
+  - rich_text_editor_advanced_label: Advanced (Label)
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js CHANGED Viewed

@@ -21,3 +21,5 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
 export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
+export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
+export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb CHANGED Viewed

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
 <br/>
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
 <br/>
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx CHANGED Viewed

@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
+          id="default-example-1"
       />
       <br />
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
+          id="default-example-2"
       />
       <br />
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
+          id="default-example-3"
       />
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md ADDED Viewed

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

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import TimePicker from '../../pb_time_picker/_time_picker'
 import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
 const TimePickerOnHandler = (props) => {
   const [selectedTime, setSelectedTime] = useState('')
@@ -17,7 +18,9 @@ const TimePickerOnHandler = (props) => {
   return (
     <div>
       {(selectedTime || closedTime) && (
-        <div style={{ marginBottom: '16px' }}>
+        <Flex marginBottom="sm"
+            orientation="column"
+        >
           {selectedTime && (
             <Body
                 text={`onChange: ${selectedTime}`}
@@ -29,7 +32,7 @@ const TimePickerOnHandler = (props) => {
                 text={`onClose: ${closedTime}`}
             />
           )}
-        </div>
+        </Flex>
       )}
       <TimePicker
           id="time-picker-on-handler"

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= pb_rails("time_picker", props: {
+  id: "time-picker-required-indicator",
+  label: "Select Time",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react'
+import TimePicker from '../_time_picker'
+const TimePickerRequiredIndicator = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-required-indicator"
+        label="Select Time"
+        requiredIndicator
+        {...props}
+    />
+  </div>
+)
+export default TimePickerRequiredIndicator

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md ADDED Viewed

@@ -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_time_picker/docs/example.yml CHANGED Viewed

@@ -9,6 +9,7 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
+  - time_picker_required_indicator: Required Indicator
   - time_picker_input_options: Input Options
@@ -21,4 +22,5 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
+  - time_picker_required_indicator: Required Indicator
   - time_picker_on_handler: onChange & onClose Handlers

data/app/pb_kits/playbook/pb_time_picker/docs/index.js CHANGED Viewed

@@ -7,3 +7,4 @@ export { default as TimePickerOnHandler } from './_time_picker_on_handler.jsx'
 export { default as TimePickerMinMaxTime } from './_time_picker_min_max_time.jsx'
 export { default as TimePickerError } from './_time_picker_error.jsx'
 export { default as TimePickerDisabled } from './_time_picker_disabled.jsx'
+export { default as TimePickerRequiredIndicator } from './_time_picker_required_indicator.jsx'

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.play2724typeaheadindicator13970
+  version: 16.1.0.pre.alpha.play2725datepickermlsrequiredindicator14215
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-29 00:00:00.000000000 Z
+date: 2026-02-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -64,6 +64,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -579,6 +581,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
@@ -645,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
@@ -1431,8 +1437,12 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
+- 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
@@ -1506,6 +1516,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
@@ -1932,6 +1944,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
@@ -1950,6 +1964,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
@@ -2346,6 +2362,7 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
@@ -2406,6 +2423,9 @@ files:
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md