playbook_ui 14.19.0.pre.rc.2 → 14.19.0

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -53,7 +53,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     selected,
     setIsInputFocused,
     toggleDropdown,
-    triggerRef,
   } = useContext(DropdownContext);
 
   const handleKeyDown = useHandleOnKeyDown();
@@ -99,7 +98,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
         id={id}
     >
       {
-        !triggerRef && (
           children ? (
             <div
                 onClick={() => toggleDropdown()}
@@ -147,7 +145,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={() => toggleDropdown()}
+                          onClick={(e) => {
+                            e.stopPropagation();// keep the wrapper’s handler from firing
+                            toggleDropdown();
+                          }}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -181,7 +182,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
               </Flex>
             </>
           )
-        )
       }
     </div>
   );

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -1,4 +1,5 @@
 .pb_empty_state_kit {
+  max-width: 100%;
 
   .sm-state-vertical {
     width: 150px;
@@ -35,4 +36,10 @@
     }
   }
 
-}
+  &.dark {
+    [class*="pb_title_kit"],
+    [class*="pb_body_kit"],
+    [class*="pb_detail_kit"],
+    [class*="pb_button_kit_link"]:hover { color: $white; }
+  }
+}

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    alignment: "left",
+  }) %>
+
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+  }) %>
+
+    <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    alignment: "right",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    orientation:"horizontal",
+    alignment: "left",
+    size: "lg",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    link_button: "Alt Action",
+    link_button_url: "#link_button_url",
+    size: "sm",
+  }) %>
+
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    link_button: "Alt Action",
+    link_button_url: "#link_button_url",
+    size: "lg",
+  }) %>
+<% end %>

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

@@ -1,5 +1,9 @@
 examples:
-
+  rails:
+  - empty_state_default: Default
+  - empty_state_size: Size
+  - empty_state_orientation: Orientation
+  - empty_state_alignment: Alignment
 
   react:
   - empty_state_default: Default

data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb

@@ -0,0 +1,19 @@
+<%= pb_content_tag do %>
+  <%= pb_rails("flex", props: { align: flex_align, orientation: config[:flex_direction], padding_left: padding_size, padding_right: padding_size, vertical: "center", classname: config[:scss_class], max_width: "100%" }) do %>
+    <%= pb_rails("image", props: { url: image == "default" ? default_image_data_uri : image, alt: "Empty State Image", html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { text: object.header, size: config[:title_size], padding_bottom: config[:title_padding], text_align: alignment }) %>
+      <% if size == "sm" %>
+        <%= pb_rails("detail", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
+      <% else %>
+        <%= pb_rails("body", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
+      <% end %>
+      <% if primary_button.present? %>
+        <%= pb_rails("button", props: { text: primary_button, variant: "primary", width: "100%", size: config[:button_size], link: primary_button_url,  margin_bottom: config[:button_margin] }) %>
+      <% end %>
+      <% if link_button.present? %>
+        <%= pb_rails("button", props: { text: link_button, variant: "link", size: config[:button_size], link: link_button_url, width: "100%" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/empty_state.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbEmptyState
+    class EmptyState < Playbook::KitBase
+      prop :alignment, type: Playbook::Props::Enum,
+                       values: %w[center left right],
+                       default: "center"
+      prop :description
+      prop :header
+      prop :image
+      prop :link_button
+      prop :link_button_url
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[horizontal vertical],
+                         default: "vertical"
+      prop :primary_button
+      prop :primary_button_url
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg],
+                  default: "md"
+
+      SIZE_CONFIGS = {
+        sm: {
+          vertical: {
+            image_width: "100px",
+            title_size: 4,
+            title_padding: "xxs",
+            description_pad: "sm",
+            button_size: "sm",
+            button_margin: "xs",
+            scss_class: "sm-state-vertical",
+            flex_direction: "column",
+          },
+          horizontal: {
+            image_width: "100px",
+            title_size: 4,
+            title_padding: "xxs",
+            description_pad: "sm",
+            button_size: "sm",
+            button_margin: "xs",
+            scss_class: "sm-state-horizontal",
+            flex_direction: "row",
+          },
+        },
+        md: {
+          vertical: {
+            image_width: "140px",
+            title_size: 3,
+            title_padding: "xs",
+            description_pad: "md",
+            button_size: "md",
+            button_margin: "sm",
+            scss_class: "md-state-vertical",
+            flex_direction: "column",
+          },
+          horizontal: {
+            image_width: "140px",
+            title_size: 3,
+            title_padding: "xs",
+            description_pad: "md",
+            button_size: "md",
+            button_margin: "sm",
+            scss_class: "md-state-horizontal",
+            flex_direction: "row",
+          },
+        },
+        lg: {
+          vertical: {
+            image_width: "100%",
+            title_size: 1,
+            title_padding: "sm",
+            description_pad: "lg",
+            button_size: "md",
+            button_margin: "md",
+            scss_class: "lg-state-vertical",
+            flex_direction: "column",
+          },
+          horizontal: {
+            image_width: "100%",
+            title_size: 2,
+            title_padding: "sm",
+            description_pad: "lg",
+            button_size: "md",
+            button_margin: "md",
+            scss_class: "lg-state-horizontal",
+            flex_direction: "row",
+          },
+        },
+      }.freeze
+
+      def classname
+        generate_classname("pb_empty_state_kit")
+      end
+
+      def config
+        SIZE_CONFIGS[size.to_sym][orientation.to_sym]
+      end
+
+      def default_image_data_uri
+        svg_path = __dir__.then { |d| File.join(d, "docs", "default_image", "computer_fly_no_branding.svg") }
+        svg      = File.read(svg_path)
+        encoded  = ERB::Util.url_encode(svg)
+        "data:image/svg+xml,#{encoded}"
+      end
+
+      def padding_size
+        size == "sm" ? "xs" : "xl"
+      end
+
+      def flex_align
+        case alignment
+        when "left"
+          "start"
+        when "right"
+          "end"
+        else
+          "center"
+        end
+      end
+    end
+  end
+end

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_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/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