playbook_ui 14.18.1.pre.rc.0 → 14.19.0.pre.alpha.PLAY2033atactionbarrails7730

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -50,3 +50,21 @@ test('displays custom message', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Hello world!')
 })
+
+test('handles error state with error prop', () => {
+  const errorText = "Test error message"
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+        error={errorText}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  
+  expect(kit).toHaveClass('pb_file_upload_kit')
+  expect(kit).toHaveClass('error')
+  
+  const errorElement = screen.getByText(errorText)
+  expect(errorElement).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -13,6 +13,7 @@ import MessageMention from './_message_mention'
 
 type MessageProps = {
   aria: { [key: string]: string },
+  avatarGrayscale?: boolean,
   avatarName?: string,
   avatarStatus?: "away" | "offline" | "online",
   avatarUrl?: string,
@@ -32,6 +33,7 @@ type MessageProps = {
 const Message = (props: MessageProps) => {
   const {
     aria = {},
+    avatarGrayscale = false,
     avatarName,
     avatarStatus = null,
     avatarUrl,
@@ -71,6 +73,7 @@ const Message = (props: MessageProps) => {
     >
       {shouldDisplayAvatar &&
         <Avatar
+            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={avatarName}
             size="xs"

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("message", props: {
+  label: "Mike Bishop",
+  message: "So long, and thanks for all the fish!",
+  timestamp: "3 months ago",
+  avatar_name: "Mike Bishop",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  avatar_status: "offline",
+  avatar_grayscale: true,
+}) %>

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+import Message from "../_message"
+
+const MessageGrayscale = (props) => {
+  return (
+    <Message
+        avatarGrayscale
+        avatarName='Mike Bishop'
+        avatarStatus='offline'
+        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+        borderRadius='rounded'
+        label='Mike Bishop'
+        message='So long, and thanks for all the fish!'
+        timestamp='3 months ago'
+        {...props}
+    />
+  )
+}
+
+export default MessageGrayscale

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

@@ -5,12 +5,14 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   swift:
    - message_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
 export { default as MessageHover } from './_message_hover.jsx'
 export { default as MessageMentions } from './_message_mentions.jsx'
+export { default as MessageGrayscale } from './_message_grayscale.jsx'

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -4,7 +4,8 @@
         name: object.avatar_name,
         size: "xs",
         image_url: object.avatar_url,
-        status: object.avatar_status
+        status: object.avatar_status,
+        grayscale: object.avatar_grayscale
       }) %>
     <% end %>
     <div class="content_wrapper">

data/app/pb_kits/playbook/pb_message/message.rb

@@ -6,6 +6,7 @@ module Playbook
       prop :avatar_name
       prop :avatar_status
       prop :avatar_url
+      prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
       prop :label
       prop :message
       prop :timestamp

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

@@ -78,7 +78,8 @@ $overlay_colors: (
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"] {
+    & [class*="overflow_auto"],
+    .overlay_token_container {
       &::-webkit-scrollbar {
         display: none !important;
       }

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
         <Flex
             columnGap="lg"
             orientation="row"
-            ref={ref} 
+            ref={ref}
         >
             {Array.from({ length: 15 }, (_, index) => (
                 <FlexItem key={index}>

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -30,7 +30,7 @@ const OverlayToken = (props: OverlayChildrenProps) => {
         if (container) {
             const { scrollLeft, scrollWidth, clientWidth } = container;
             const atStart = scrollLeft === 0;
-            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
 
             setIsAtStart(atStart);
             setIsAtEnd(atEnd);
@@ -64,16 +64,17 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     return (
         <>
             <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
-            {dynamic ? 
+            {dynamic ?
                 <div
+                    className="overlay_token_container"
                     ref={scrollContainerRef}
                     style={{
-                        overflowX: 'auto',     
+                        overflowX: 'auto',
                     }}
                 >
                     {children}
                 </div>
-                : 
+                :
                     children
                 }
             {hasSubsequentOverlay &&

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -42,7 +42,7 @@ $flag-min-resolution: 192dpi;
   .iti__country-list {
     min-width: $dropdown-min-width;
   }
-  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  // iti-spacer-horizontal's default is 8px, or $space_xs
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -60,7 +60,7 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .dropdown_open {
+  .dropdown_open:not(.error) {
     .text_input {
       border-color: $primary !important;
     }
@@ -76,7 +76,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;  
+    border-bottom: 1px solid $border_light !important;
   }
 
   .iti__selected-country-primary {
@@ -96,7 +96,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs; 
+    border-radius: $space_xxs;
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -199,7 +199,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs; 
+    border-radius: $space_xs;
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -228,13 +228,13 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs; 
+      border-radius: $space_xs;
       border: 1px solid $border_dark !important;
       .iti__search-input {
         background-color: $bg_dark_card;
         &:hover {
           background-color: $bg_dark_card;
-        }      
+        }
         &:active,
         &:focus {
           background-color: $card_dark;
@@ -243,7 +243,7 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;  
+      border-bottom: 1px solid $border_dark !important;
     }
 
     .iti__country-list {
@@ -278,7 +278,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
-}
+} & GlobalProps
 
 const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -143,6 +143,16 @@
       select {
         font-size: 12px;
       }
+      .pb_select_kit_wrapper.error {
+        .pb_select_kit_caret {
+          top: 13.7px;
+        }
+      }
+    }
+    .pb_select_kit_wrapper.error {
+      .pb_select_kit_caret {
+        top: 16.2px;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: "Please make a valid selection",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
 
   const Content = () => {
     return (
-      <Card 
+      <Card
           borderNone
           borderRadius="none"
           padding="md"
@@ -37,7 +37,7 @@ return (
 
         </Table.Head>
         <Table.Body>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-1"
               {...props}
@@ -47,7 +47,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-1"
                 textAlign="right"
             >
@@ -59,7 +59,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-2"
               {...props}
@@ -69,7 +69,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-2"
                 textAlign="right"
             >
@@ -81,7 +81,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-3"
               {...props}
@@ -91,7 +91,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-3"
                 textAlign="right"
             >

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -55,7 +55,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-  
+
   const [isCollapsed, setIsCollapsed] = useCollapsible(true);
 
   const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
@@ -83,14 +83,14 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
       target instanceof SVGElement &&
       (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
 
-        if (clickedCell || isIconClick) { 
+        if (clickedCell || (clickedCell && isIconClick)) {
       setIsCollapsed(!isCollapsed);
       }
     } else {
       setIsCollapsed(!isCollapsed);
     }
   };
-    
+
   return (
     <>
       {collapsible ? (
@@ -116,7 +116,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content 
+                <Collapsible.Content
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"
@@ -149,7 +149,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content 
+                <Collapsible.Content
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -71,7 +71,8 @@
     }
     &.error {
       .text_input_wrapper {
-        input,
+        // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+        input:not(.iti__search-input),
         .text_input {
           border-color: $error_dark;
         }
@@ -102,7 +103,8 @@
       [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      input,
+      // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+      input:not(.iti__search-input),
       .text_input {
         border-color: $error;
       }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: "Please enter a valid email address",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

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

@@ -1 +1,5 @@
-<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
+  label: "Label",
+  rows: 4
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb

@@ -8,7 +8,14 @@
 
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-error-example",
+  options: options,
+  error: "Please make a valid selection",
+  label: "Products",
+  name: :foo,
+  is_multi: false
+}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -19,6 +19,7 @@ type UserProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  avatarGrayscale?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
@@ -41,6 +42,7 @@ const User = (props: UserProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    avatarGrayscale = false,
     htmlOptions = {},
     id,
     name,
@@ -145,6 +147,7 @@ const User = (props: UserProps): React.ReactElement => {
     >
       { avatarPresent &&
         <Avatar
+            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={name}
             size={size}

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+  avatar_grayscale: true,
+}) %>

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import User from '../../pb_user/_user'
+
+const UserGrayscale = (props) => {
+  return (
+    <User
+        avatarGrayscale
+        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        name="Anna Black"
+        title="Remodeling Consultant"
+        {...props}
+    />
+  )
+}
+
+export default UserGrayscale

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

@@ -10,6 +10,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   react:
   - user_default: Default
@@ -21,6 +22,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -7,3 +7,4 @@ export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
 export { default as UserFontOptions } from './_user_font_options.jsx'
+export { default as UserGrayscale } from './_user_grayscale.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -3,7 +3,8 @@
     <%= pb_rails("avatar", props: {
       name: object.name,
       size: object.avatar_size,
-      image_url: object.avatar_url
+      image_url: object.avatar_url,
+      grayscale: object.avatar_grayscale,
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -8,6 +8,7 @@ module Playbook
                    default: "left"
       prop :avatar, type: Playbook::Props::Boolean,
                     default: false
+      prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
       prop :avatar_url
       prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name