playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593

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

@@ -27,6 +27,7 @@ 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"
@@ -37,6 +38,7 @@ type MultiLevelSelectProps = {
   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
 
@@ -45,6 +47,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     aria = {},
     className,
     data = {},
+    disabled = false,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
@@ -56,6 +59,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     selectedIds,
     variant = "multi",
     children,
+    wrapped,
     pillColor = "primary"
   } = props
 
@@ -292,7 +296,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;
     }
@@ -421,16 +426,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 +450,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 {returnAllSelected && returnedArray.length !== 0
                   ? returnedArray.map((item) => (
                       <input
+                          disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
                           type="hidden"
@@ -461,6 +468,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
+                          wrapped={wrapped}
                       />
                     ))
                   : null}
@@ -474,6 +482,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
+                          wrapped={wrapped}
                       />
                     ))
                   : null}
@@ -489,6 +498,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             )}
 
             <input
+                disabled={disabled}
                 id="multiselect_input"
                 onChange={(e) => {
                   variant === "single"

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
+}) %>

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

@@ -0,0 +1,91 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+    {
+        label: "Power Home Remodeling",
+        value: "Power Home Remodeling",
+        id: "powerhome1",
+        expanded: true,
+        children: [
+            {
+                label: "People",
+                value: "People",
+                id: "people1",
+                expanded: true,
+                children: [
+                    {
+                        label: "Talent Acquisition",
+                        value: "Talent Acquisition",
+                        id: "talent1",
+                    },
+                    {
+                        label: "Business Affairs",
+                        value: "Business Affairs",
+                        id: "business1",
+                        children: [
+                            {
+                                label: "Initiatives",
+                                value: "Initiatives",
+                                id: "initiative1",
+                            },
+                            {
+                                label: "Learning & Development",
+                                value: "Learning & Development",
+                                id: "development1",
+                            },
+                        ],
+                    },
+                    {
+                        label: "People Experience",
+                        value: "People Experience",
+                        id: "experience1",
+                    },
+                ],
+            },
+            {
+                label: "Contact Center",
+                value: "Contact Center",
+                id: "contact1",
+                children: [
+                    {
+                        label: "Appointment Management",
+                        value: "Appointment Management",
+                        id: "appointment1",
+                    },
+                    {
+                        label: "Customer Service",
+                        value: "Customer Service",
+                        id: "customer1",
+                    },
+                    {
+                        label: "Energy",
+                        value: "Energy",
+                        id: "energy1",
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+const MultiLevelSelectDisabled = (props) => {
+    return (
+        <>
+            <MultiLevelSelect
+                disabled
+                id='multiselect-default'
+                onSelect={(selectedNodes) =>
+                    console.log(
+                        "Selected Items",
+                        selectedNodes
+                    )
+                }
+                treeData={treeData}
+                {...props}
+            />
+        </>
+    )
+};
+
+export default MultiLevelSelectDisabled

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

@@ -8,6 +8,7 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
+  - multi_level_select_disabled: Disabled
 
   react:
   - multi_level_select_default: Default
@@ -18,4 +19,4 @@ examples:
   - 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_disabled: Disabled

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

@@ -6,3 +6,4 @@ export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_sele
 export { default as MultiLevelSelectColor } from './_multi_level_select_color.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'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -22,6 +22,10 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[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],
                         default: "primary"
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -29,6 +33,7 @@ module Playbook
 
       def multi_level_select_options
         {
+          disabled: disabled,
           id: id,
           inputDisplay: input_display,
           name: name,
@@ -38,6 +43,7 @@ module Playbook
           input_name: input_name,
           variant: variant,
           pillColor: pill_color,
+          wrapped: wrapped,
         }
       end
     end

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -69,4 +69,17 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
+  
+  &.overlay-hide-scrollbar {
+    & [class*="overflow_x_auto"],
+    & [class*="overflow_y_auto"],
+    & [class*="overflow_auto"] {
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+      
+      -ms-overflow-style: none !important;
+      scrollbar-width: none !important;
+    }
+  }
 }