playbook_ui_docs 16.0.0 → 16.1.0.pre.alpha.PLAY2744dropdownquickpickpt113851

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

@@ -0,0 +1,135 @@
+<% treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-single-disabled-rails",
+    name: "single_disabled",
+    tree_data: treeData,
+    input_name: "Power",
+    variant: "single"
+}) %>

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

@@ -0,0 +1,147 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+];
+
+const MultiLevelSelectSingleDisabled = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-single-disabled"
+          inputName="Power"
+          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          treeData={treeData}
+          variant="single"
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectSingleDisabled;

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

@@ -0,0 +1 @@
+Individual items can be disabled by including `disabled: true` within the object on the treeData for the `single` variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.

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

@@ -1,35 +1,39 @@
 examples:
   rails:
-  - multi_level_select_default: Default
-  - multi_level_select_single: Single Select
-  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
-  - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
-  - multi_level_select_with_form: With Form
-  - multi_level_select_color: With Pills (Custom Color)
-  - multi_level_select_reset: Reset Selection
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - 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_default: Default
+    - multi_level_select_single: Single Select
+    - multi_level_select_single_children_only: Single Select w/ Hidden Radios
+    - multi_level_select_return_all_selected: Return All Selected
+    - multi_level_select_input_display: With Input Display None
+    - multi_level_select_selected_ids: Selected Ids
+    - multi_level_select_with_form: With Form
+    - multi_level_select_color: With Pills (Custom Color)
+    - multi_level_select_reset: Reset Selection
+    - multi_level_select_label: With Label
+    - multi_level_select_error: Error
+    - multi_level_select_disabled: Disabled Input
+    - multi_level_select_disabled_options_default: Disabled Options (Default)
+    - multi_level_select_disabled_options: Disabled Options (Return All Selected)
+    - 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)
 
   react:
-  - multi_level_select_default: Default
-  - multi_level_select_react_hook: React Hook
-  - multi_level_select_single: Single Select
-  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
-  - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids_react: Selected Ids
-  - multi_level_select_color: With Pills (Custom Color)
-  - multi_level_select_with_children: Checkboxes With Children
-  - multi_level_select_with_children_with_radios: Single Select With Children
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - 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_default: Default
+    - multi_level_select_react_hook: React Hook
+    - multi_level_select_single: Single Select
+    - multi_level_select_single_children_only: Single Select w/ Hidden Radios
+    - multi_level_select_return_all_selected: Return All Selected
+    - multi_level_select_input_display: With Input Display None
+    - multi_level_select_selected_ids_react: Selected Ids
+    - multi_level_select_color: With Pills (Custom Color)
+    - multi_level_select_with_children: Checkboxes With Children
+    - multi_level_select_with_children_with_radios: Single Select With Children
+    - multi_level_select_label: With Label
+    - multi_level_select_error: Error
+    - multi_level_select_disabled: Disabled Input
+    - multi_level_select_disabled_options_default: Disabled Options (Default)
+    - multi_level_select_disabled_options: Disabled Options (Return All Selected)
+    - 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)

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

@@ -4,6 +4,7 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
 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'
@@ -14,3 +15,4 @@ export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level
 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'

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("multiple_users", props: {
+  with_tooltip: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+      tooltip: "Patrick Welch - Online"
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+      tooltip: "Lucille Sanchez - Offline"
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+      tooltip: "Beverly Reyes - Online"
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+      tooltip: "Keith Craig - Away"
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+      tooltip: "Alicia Cooper - Busy"
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx

@@ -38,5 +38,5 @@ const MultipleUsersWithTooltip = (props) => {
         </div>
     )
 }
-``
+
 export default MultipleUsersWithTooltip

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md

@@ -1 +1 @@
-Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
+Use the `withTooltip` / `with_tooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.

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

@@ -4,6 +4,7 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+  - multiple_users_with_tooltip: With Tooltip
 
 
   react:

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

@@ -0,0 +1,35 @@
+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 RichTextEditorAdvancedRequiredIndicator = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      }
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          label="Label"
+          requiredIndicator
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedRequiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_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_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "required-indicator",
+  input_options: {
+    id: 'hidden_input_id',
+    name: "hidden_input_name"
+  },
+  label: "Label",
+  required_indicator: true,
+  value: "Add your text here. You can format your text, add links, quotes, and bullets."
+}) %>

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

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+
+const RichTextEditorRequiredIndicator = (props) => {
+  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
+  handleOnChange = (html) => setValue(html)
+
+  return (
+    <div>
+      <RichTextEditor
+          label="Label"
+          onChange={handleOnChange}
+          requiredIndicator
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorRequiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_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_rich_text_editor/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
+  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
 
   react:
@@ -31,5 +32,7 @@ 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_required_indicator: Required Indicator
+  - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -19,3 +19,5 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
 export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
 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'

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -0,0 +1,68 @@
+sections:
+  - title: "Size & Density"
+    examples:
+      - table_sm
+      - table_md
+      - table_lg
+      - table_multiline
+      - table_single_line
+      - table_outer_padding
+
+  - title: "Layout & Structure"
+    examples:
+      - table_responsive_table
+      - table_with_subcomponents
+      - table_with_subcomponents_as_divs
+      - table_with_background_kit
+
+
+  - title: "Sticky & Positional Behaviors"
+    examples:
+      - table_sticky
+      - table_sticky_left_columns
+      - table_sticky_right_columns
+      - table_sticky_columns
+      - table_alignment_row
+      - table_alignment_column
+      - table_alignment_shift_row
+      - table_alignment_shift_data
+      - table_side_highlight
+      - table_container
+
+  - title: "Collapsible & Nested Behaviors"
+    examples:
+      - table_with_collapsible
+      - table_with_dynamic_collapsible
+      - table_with_collapsible_with_custom_click
+      - table_with_collapsible_with_custom_content
+      - table_with_collapsible_with_nested_rows
+      - table_with_collapsible_with_nested_table
+
+  - title: "Data Presentation"
+    examples:
+      - table_data_table
+      - table_vertical_border
+      - table_striped
+
+  - title: "Header Variants"
+    examples:
+      - table_header
+      - table_with_header_style_borderless
+      - table_with_header_style_floating
+
+  - title: "Interactive Tables"
+    examples:
+      - table_with_clickable_rows
+      - table_with_selectable_rows
+      - table_with_filter_variant
+      - table_with_filter_variant_with_pagination
+      - table_disable_hover
+
+  - title: "Table Actions"
+    examples:
+      - table_one_action
+      - table_two_actions
+      - table_two_plus_actions
+      - table_action_middle
+      - table_icon_buttons
+      

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("textarea", props: { 
+  label: "ID on Container", 
+  id: "container-id",
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "ID on Textarea via input_options", 
+  input_options: { id: "textarea-id" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Both Container and Textarea IDs", 
+  id: "container-id-2",
+  input_options: { id: "textarea-id-2" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Data and ARIA Attributes", 
+  name: "description",
+  rows: 4,
+  input_options: {
+    'aria-label': "Enter description",
+    'aria-describedby': "help-text",
+    data: { controller: "textarea", action: "focus->handleFocus" },
+    id: "description-textarea"
+  }
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md

@@ -0,0 +1,3 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<textarea>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, ARIA attributes, or other HTML attributes that need to be on the textarea element itself.
+
+Additional HTML attributes (e.g. data or ARIA attributes) can also be passed directly to the `<textarea>` via `input_options`.

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("textarea", props: {
+  label: "Label",
+  placeholder: "Placeholder text",
+  required_indicator: true
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx

@@ -0,0 +1,25 @@
+import React, {useState} from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaRequiredIndicator = (props) => {
+  const [value, setValue] = useState('Default value text')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          label="Label"
+          name="comment"
+          onChange={(e) => handleChange(e)}
+          placeholder="Placeholder text"
+          requiredIndicator
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaRequiredIndicator