playbook_ui 14.14.0 → 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb

@@ -0,0 +1,40 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Wrapped Within Typeahead",
+    pills: true,
+    wrapped: true,
+}) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Wrapped Text" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const FormPillWrapped = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" } }}
+          isMulti
+          label="Wrapped Within Typeahead"
+          options={names}
+          wrapped
+          {...props}
+      />
+      <Caption text="Form Pill Wrapped Text"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            wrapped
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show wrapped text"
+            wrapped
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show wrapped text"
+            wrapped
+        />
+      </Card>
+    </>
+  )
+}
+
+export default FormPillWrapped

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the `wrapped` prop can be used to wrap the label within each Form Pill.
+
+**Note**: Avoid using the `wrapped` and `small` props together, as their styles conflict and may cause functionality issues.

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

@@ -4,6 +4,7 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
+  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -13,6 +14,7 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
+  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -5,3 +5,4 @@ export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
 export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
+export { default as FormPillWrapped } from './_form_pill_wrapped.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -16,9 +16,11 @@ module Playbook
                    default: "primary"
       prop :tabindex
       prop :icon
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
 
       def classname
-        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform, wrapped_class)
       end
 
       def display_text
@@ -36,6 +38,10 @@ module Playbook
       def close_icon_size
         size == "small" ? "xs" : "sm"
       end
+
+      def wrapped_class
+        wrapped ? "wrapped" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -0,0 +1,71 @@
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Button from '../pb_button/_button'
+import Icon from '../pb_icon/_icon'
+import { IconSizes } from "../pb_icon/_icon"
+
+type IconButtonProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  htmlType?: 'submit' | 'reset' | 'button' | undefined,
+  icon?: string,
+  id?: string,
+  link?: string,
+  newWindow?: boolean,
+  size?: IconSizes,
+  target?: string,
+  variant?: 'default' | 'link',
+}
+
+const IconButton = (props: IconButtonProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    htmlType = 'button',
+    icon = 'bars',
+    id,
+    link,
+    newWindow = false,
+    size = "2x",
+    target,
+    variant = "default",
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Button
+          borderRadius="lg"
+          htmlType={htmlType}
+          link={link}
+          newWindow={newWindow}
+          target={target}
+      >
+        <Icon
+            className="icon_button_icon"
+            fixedWidth
+            icon={icon}
+            paddingX="xxs"
+            paddingY="xs"
+            size={size}
+        />
+      </Button>
+    </div>
+  )
+}
+
+export default IconButton

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { IconButton } from 'playbook-ui'
+
+const IconButtonDefault = (props) => (
+  <div>
+    <IconButton
+        {...props}
+    />
+    <IconButton
+        {...props}
+        marginTop="md"
+        variant="link"
+    />
+  </div>
+)
+
+export default IconButtonDefault

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { IconButton, Flex } from 'playbook-ui'
+
+const IconButtonSizes = (props) => (
+  <div>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="lg"
+      />
+      <span>Large</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="sm"
+      />
+      <span>Small</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="xs"
+      />
+      <span>XSmall</span>
+    </Flex>
+    <Flex
+        align="center"
+        marginTop="md"
+    >
+      <IconButton
+          {...props}
+          size="1x"
+      />
+      <span>1x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="2x"
+      />
+      <span>2x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="3x"
+      />
+      <span>3x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="4x"
+      />
+      <span>4x</span>
+    </Flex>
+  </div>
+)
+
+export default IconButtonSizes

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

@@ -3,3 +3,7 @@ examples:
   rails:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
+
+  react:
+  - icon_button_default: Default
+  - icon_button_sizes: Sizes

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

@@ -0,0 +1,2 @@
+export { default as IconButtonDefault } from './_icon_button_default.jsx'
+export { default as IconButtonSizes } from './_icon_button_sizes.jsx'

data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx

@@ -0,0 +1,39 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import { IconButton } from 'playbook-ui'
+
+const props = {
+  data: { testid: 'default', icon: 'plus' }
+}
+
+test('default test', () => {
+  const kit = renderKit(IconButton, props)
+
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_default')
+
+  const iconElement = kit.querySelector('.icon_button_icon')
+  expect(iconElement).toBeInTheDocument()
+})
+
+it("should be accessible", async () => {
+  ensureAccessible(IconButton, props)
+})
+
+test('passes link variant prop', () => {
+  const kit = renderKit(IconButton, { ...props, variant: "link" })
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_link')
+})
+
+test('should set button type to "submit" when htmlType prop is passed', () => {
+  const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
+  const buttonElement = kit.querySelector('button')
+  expect(buttonElement).toHaveAttribute('type', 'submit')
+})
+
+test('passes custom classname', () => {
+  const kit = renderKit(IconButton, { ...props, className: "extra_class" })
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
+})

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -42,6 +42,13 @@
           outline: none;
         }
       }
+
+      &:has(input:disabled) {
+        background-color: shade($white, 5%);
+        box-shadow: none;
+        cursor: default;
+        opacity: 0.5;
+      }
     }
   }
   .dropdown_menu {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, forwardRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -23,10 +23,18 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
+interface MultiLevelSelectComponent
+  extends React.ForwardRefExoticComponent<
+    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
+  > {
+  Options: typeof MultiLevelSelectOptions;
+}
+
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
+  disabled?: boolean
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
@@ -34,17 +42,20 @@ type MultiLevelSelectProps = {
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
+  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
+  wrapped?: boolean
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
-const MultiLevelSelect = (props: MultiLevelSelectProps) => {
+const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
   const {
     aria = {},
     className,
     data = {},
+    disabled = false,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
@@ -52,10 +63,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     name,
     returnAllSelected = false,
     treeData,
+    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
     children,
+    wrapped,
     pillColor = "primary"
   } = props
 
@@ -283,8 +296,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -292,7 +307,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const handleInputWrapperClick = (e: any) => {
     if (
       e.target.id === "multiselect_input" ||
-      e.target.classList.contains("pb_form_pill_tag")
+      e.target.classList.contains("pb_form_pill_tag") ||
+      disabled
     ) {
       return;
     }
@@ -309,8 +325,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -343,6 +361,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     setIsDropdownClosed(true);
 
     onSelect(selectedItem);
+    onChange({ target: { name, value: selectedItem } });
   };
 
   // Single select: reset the tree state upon typing
@@ -384,12 +403,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child: any) => child.type === MultiLevelSelect.Options
+      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (child.type === MultiLevelSelect.Options) {
+        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -421,16 +440,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           handledropdownItemClick,
           filterItem,
       }}>
-      <div className="wrapper" 
+      <div className="wrapper"
           ref={dropdownRef}
       >
-        <div className="input_wrapper" 
+        <div className="input_wrapper"
             onClick={handleInputWrapperClick}
         >
           <div className="input_inner_container">
             {variant === "single" && defaultReturn.length !== 0
               ? defaultReturn.map((selectedItem) => (
                   <input
+                      disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
                       type="hidden"
@@ -444,6 +464,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 {returnAllSelected && returnedArray.length !== 0
                   ? returnedArray.map((item) => (
                       <input
+                          disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
                           type="hidden"
@@ -461,6 +482,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
+                          wrapped={wrapped}
                       />
                     ))
                   : null}
@@ -474,6 +496,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
+                          wrapped={wrapped}
                       />
                     ))
                   : null}
@@ -489,6 +512,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             )}
 
             <input
+                disabled={disabled}
                 id="multiselect_input"
                 onChange={(e) => {
                   variant === "single"
@@ -537,8 +561,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       </MultiLevelSelectContext.Provider>
     </div>
   );
-};
+}) as MultiLevelSelectComponent;
 
+MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 
 export default MultiLevelSelect;

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

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    disabled: true,
+    id: "multi-level-select-default-rails",
+    name: "my_array",
+    tree_data: treeData
+}) %>