playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.rc.0

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

@@ -1,74 +0,0 @@
-<% 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: "multi-level-select-input-display-none",
-    name: :foo,
-    tree_data: treeData,
-    input_display: "none",
-    return_all_selected: true,
-    })
-%>

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

@@ -1,87 +0,0 @@
-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 MultiLevelSelectInputDisplay = (props) => {
-  return (
-    <MultiLevelSelect
-        id="multi-level-select-input-display-none"
-        inputDisplay="none"
-        onSelect={(selectedNodes) =>
-          console.log("Selected Items", selectedNodes)
-        }
-        returnAllSelected
-        treeData={treeData}
-        {...props}
-    />
-  );
-};
-
-export default MultiLevelSelectInputDisplay;

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

@@ -1,3 +0,0 @@
-Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default.
-
-**NOTE**: `inputDisplay`/`input_display` is particularly useful for larger trees that may return many pill selections, helping to keep the input field clean and compact. This prop should not be used with the Single Select variant.

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

@@ -1,30 +0,0 @@
-<%= 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_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx

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

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

@@ -1,10 +0,0 @@
-<%= 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

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

@@ -1,3 +0,0 @@
-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_table/docs/_sections.yml

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

@@ -1,39 +0,0 @@
-<%= 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

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

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

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

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

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

@@ -1,3 +0,0 @@
-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/utilities/test/globalProps/borderRadius.test.js

@@ -1,33 +0,0 @@
-import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
-import Body from '../../../pb_body/_body'
-import Button from '../../../pb_button/_button'
-import Card from '../../../pb_card/_card'
-import Title from '../../../pb_title/_title'
-import Flex from '../../../pb_flex/_flex'
-import Link from '../../../pb_link/_link'
-import Badge from '../../../pb_badge/_badge'
-
-// NOTE: TextInput excluded - borderRadius is not a valid prop for input elements
-testGlobalProp(
-  'borderRadius',
-  ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'rounded'],
-  (v) => `border_radius_${v}`,
-  null,
-  [Body, Button, Card, Title, Flex, Link, Badge]
-)
-
-testGlobalPropAbsence(
-  'borderRadius',
-  ['border_radius_none', 'border_radius_xs', 'border_radius_sm', 'border_radius_md', 'border_radius_lg', 'border_radius_xl', 'border_radius_rounded'],
-  undefined,
-  { skipNull: true }
-)
-
-// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
-testGlobalPropInvalidValues(
-  'borderRadius',
-  ['invalid', 'bad_value', 'not_a_radius', 'special-chars!@#'],
-  ['border_radius_invalid', 'border_radius_bad_value', 'border_radius_not_a_radius', 'border_radius_special-chars!@#'],
-  undefined,
-  { skipKnownIssues: true }
-)

data/app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js

@@ -1,60 +0,0 @@
-import React from 'react'
-import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
-import { render, screen } from '../../test-utils'
-import Body from '../../../pb_body/_body'
-import Button from '../../../pb_button/_button'
-import Card from '../../../pb_card/_card'
-import Title from '../../../pb_title/_title'
-import Flex from '../../../pb_flex/_flex'
-import Link from '../../../pb_link/_link'
-import Badge from '../../../pb_badge/_badge'
-
-const validSizes = ['xs', 'sm', 'md', 'lg', 'xl']
-
-// NOTE: TextInput excluded - positioning props are not valid for input elements
-// Test bottom prop with string values
-testGlobalProp(
-  'bottom',
-  validSizes,
-  (v) => `bottom_${v}`,
-  null,
-  [Body, Button, Card, Title, Flex, Link, Badge]
-)
-
-// Test bottom prop with object values (inset) - tested separately due to object value complexity
-test('Global Props: bottom returns proper class name with object values (inset)', () => {
-  const testCases = [
-    { value: { value: 'md', inset: true }, expected: 'bottom_md_inset' },
-    { value: { value: 'lg', inset: false }, expected: 'bottom_lg' },
-    { value: { value: 'sm', inset: true }, expected: 'bottom_sm_inset' }
-  ]
-  
-  testCases.forEach(({ value, expected }) => {
-    const testId = `body-bottom-object-${value.value}-${value.inset}`
-    render(
-      <Body
-          bottom={value}
-          data={{ testid: testId }}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(expected)
-  })
-})
-
-testGlobalPropAbsence(
-  'bottom',
-  ['bottom_xs', 'bottom_sm', 'bottom_md', 'bottom_lg', 'bottom_xl'],
-  undefined,
-  { skipNull: true }
-)
-
-// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
-testGlobalPropInvalidValues(
-  'bottom',
-  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
-  ['bottom_invalid', 'bottom_bad_value', 'bottom_not_a_size', 'bottom_special-chars!@#'],
-  undefined,
-  { skipKnownIssues: true }
-)

data/app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js

@@ -1,42 +0,0 @@
-import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
-import { camelToSnakeCase } from '../../../utilities/text'
-import Body from '../../../pb_body/_body'
-import Button from '../../../pb_button/_button'
-import Card from '../../../pb_card/_card'
-import Title from '../../../pb_title/_title'
-import TextInput from '../../../pb_text_input/_text_input'
-import Flex from '../../../pb_flex/_flex'
-import Link from '../../../pb_link/_link'
-import Badge from '../../../pb_badge/_badge'
-
-const validValues = [
-  'auto', 'default', 'none', 'contextMenu', 'help', 'pointer', 'progress', 'wait', 'cell',
-  'crosshair', 'text', 'verticalText', 'alias', 'copy', 'move', 'noDrop', 'notAllowed', 'grab',
-  'grabbing', 'eResize', 'nResize', 'neResize', 'nwResize', 'sResize', 'seResize', 'swResize', 'wResize',
-  'ewResize', 'nsResize', 'neswResize', 'nwseResize', 'colResize', 'rowResize', 'allScroll', 'zoomIn', 'zoomOut'
-]
-
-testGlobalProp(
-  'cursor',
-  validValues,
-  (v) => `cursor_${camelToSnakeCase(v)}`,
-  null,
-  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
-)
-
-testGlobalPropAbsence(
-  'cursor',
-  ['cursor_auto', 'cursor_pointer', 'cursor_default', 'cursor_none'],
-  undefined,
-  { skipNull: true }
-)
-
-// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
-// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
-testGlobalPropInvalidValues(
-  'cursor',
-  ['invalid', 'bad_value', 'not_a_cursor', 'special-chars!@#'],
-  ['cursor_invalid', 'cursor_bad_value', 'cursor_not_a_cursor', 'cursor_special-chars!@#'],
-  undefined,
-  { skipKnownIssues: true, allowRenderingErrors: true }
-)

data/app/pb_kits/playbook/utilities/test/globalProps/dark.test.js

@@ -1,33 +0,0 @@
-import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
-import Body from '../../../pb_body/_body'
-import Button from '../../../pb_button/_button'
-import Card from '../../../pb_card/_card'
-import Title from '../../../pb_title/_title'
-import TextInput from '../../../pb_text_input/_text_input'
-import Flex from '../../../pb_flex/_flex'
-import Link from '../../../pb_link/_link'
-import Badge from '../../../pb_badge/_badge'
-
-testGlobalProp(
-  'dark',
-  [true],
-  () => 'dark',
-  null,
-  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
-)
-
-testGlobalPropAbsence(
-  'dark',
-  ['dark'],
-  undefined,
-  { skipNull: true }
-)
-
-// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
-testGlobalPropInvalidValues(
-  'dark',
-  ['invalid', 'bad_value', 123, 'true', 'false'],
-  ['dark_invalid', 'dark_bad_value', 'dark_123', 'dark_true', 'dark_false'],
-  undefined,
-  { skipKnownIssues: true }
-)