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

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

@@ -1,9 +0,0 @@
-<% 
-  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, placeholder: "Choose a country" }) %>

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

@@ -1,33 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownWithPlaceholder = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ];  
-
-  return (
-    <Dropdown
-        options={options}
-        placeholder="Choose a country"
-        {...props}
-    />
-  )
-}
-
-export default DropdownWithPlaceholder

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

@@ -1,3 +0,0 @@
-The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
-
-The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.

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_passphrase/docs/_passphrase_required_indicator.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("passphrase", props: {
-  id: "passphrase_required_indicator",
-  label: "Passphrase",
-  placeholder: "Enter passphrase",
-  required_indicator: true,
-  value: "passphrase",
-}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx

@@ -1,24 +0,0 @@
-import React, { useState } from 'react'
-
-import Passphrase from '../_passphrase'
-
-const PassphraseRequiredIndicator = (props) => {
-  const [passphrase, setPassphrase] = useState('')
-  const handleOnChangePassphrase = (e) => {
-    setPassphrase(e.target ? e.target.value : e)
-  }
-
-  return (
-      <Passphrase
-          id="passphrase_required_indicator"
-          label="Passphrase"
-          name="passphrase"
-          onChange={handleOnChangePassphrase}
-          requiredIndicator
-          value={passphrase}
-          {...props}
-      />
-  )
-}
-
-export default PassphraseRequiredIndicator

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_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_phone_number_input/docs/_phone_number_input_required_indicator.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-  id: "phone_number_input_required_indicator",
-  label: "Required Phone Number",
-  required_indicator: true,
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
-
-const PhoneNumberInputRequiredIndicator = (props) => (
-    <>
-        <PhoneNumberInput
-            id='phone_number_input_required_indicator'
-            label='Phone Number'
-            requiredIndicator
-            {...props} />
-    </>
-)
-
-export default PhoneNumberInputRequiredIndicator

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_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_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_default.md

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

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/pb_time_picker/docs/_time_picker_required_indicator.html.erb

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

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

@@ -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 }
-)