playbook_ui 14.15.0.pre.rc.3 → 14.15.0

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react'
-import { get } from 'lodash'
+import { get } from '../utilities/object'
+
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,5 +1,8 @@
 <%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+    class: object.classname + object.error_class,
+    'data-pb-date-picker' => true,
+    'data-validation-message' => object.validation_message,
+      ) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -75,6 +75,8 @@ module Playbook
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
+      prop :validation_message, type: Playbook::Props::String,
+                                default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_date_picker/index.ts

@@ -0,0 +1,38 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const DATE_PICKER_WRAPPER_SELECTOR = '[data-pb-date-picker]';
+const SELECT_VALIDATION_MESSAGE_CLASS = '.pb_body_kit_negative';
+
+export default class PbDatePicker extends PbEnhancedElement {
+  static get selector() {
+    return DATE_PICKER_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    this.setValidationMessage();
+  }
+
+  setValidationMessage() {
+    const validationMessage = this.element.dataset?.validationMessage;
+    const inputElement = this.element.querySelector("input");
+
+    if (validationMessage) {
+      const setErrorTextContent = (text, timeout) => {
+        setTimeout(() => {
+          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
+          if (errorMessageElement) {
+            errorMessageElement.textContent = text;
+          } else {
+            setErrorTextContent(text, 100);
+          }
+        }, timeout);
+      };
+
+      inputElement.addEventListener("change", (e) => {
+        if (!e.target.checkValidity()) {
+          setErrorTextContent(validationMessage, 300);
+        }
+      });
+    }
+  }
+}

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -134,6 +134,14 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
+.pb_drawer_lg_left .pb_drawer {
+  transform: translateX(-100%);
+}
+
+.pb_drawer_lg_right .pb_drawer {
+  transform: translateX(100%);
+}
+
 .pb_drawer.pb_drawer_after_open {
   pointer-events: auto;
   transform: translate3d(0, 0, 0);
@@ -317,7 +325,6 @@ body.PBDrawer__Body--close {
     display: flex;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
-    opacity: 0;
     animation: overlayFade $animation-duration ease-in-out forwards;
     
     &[class*="_left"]{
@@ -345,12 +352,21 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
+    display: flex;
     z-index: $z-index;
     opacity: 1;
     pointer-events: none;
 
-    & .pb_drawer {
-      pointer-events: auto;
+    &[class*="_right"]{
+      justify-content: flex-end;
+    }
+
+    &[class*="_left"]{
+      justify-content: flex-start;
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
     }
 
     &_before_close {

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -41,7 +41,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border right  
@@ -52,7 +52,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -63,7 +63,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border full

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,42 +1,25 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+import React from "react"
+import { Button, Body } from "playbook-ui"
 
+const DrawerMenu = () => {
   return (
     <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
-        >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
+      <Body>
+        The breakpoint prop determines when the Drawer is always visible. Above
+        the specified breakpoint, the Drawer remains open on the page. Below it,
+        only the trigger element is shown, allowing you to toggle the drawer
+        open and closed. To see this in action, click the button below and
+        resize your window.
+      </Body>
+      <Button
+          link='https://8njdkc.csb.app/'
+          marginTop='md' 
+          newWindow 
+      >
+        Open Doc Example in New Tab
+      </Button>
     </>
-  );
-};
+  )
+}
 
-export default DrawerBreakpoints;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener('change', handler)
-    return () => mediaQuery.removeEventListener('change', handler)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
 
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav 
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -31,6 +31,7 @@ const DrawerSizes = () => {
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
+          placement='right'
           size='lg'
       >
         This is a Drawer with no overlay

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

@@ -15,4 +15,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
+import { map } from 'lodash'
+import { isEmpty, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -40,13 +41,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                   className="filter"
                   key={`filter-${name}`}
               >
-                { value === true ? 
+                { value === true ?
                 <Title
                     dark={dark}
                     size={4}
                     tag="h4"
                     text={name}
-                /> : 
+                /> :
                 <div>
                   <Caption
                       dark={dark}
@@ -58,7 +59,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                       tag="h4"
                       text={value}
                   />
-                </div>    
+                </div>
                 }
               </div>
             ))}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty } from 'lodash'
+import { isEmpty } from '../../utilities/object'
 
 import Flex from '../../pb_flex/_flex'
 
@@ -46,7 +46,7 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        { children && 
+        { children &&
           <>
             <FiltersPopover
                 dark={dark}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -35,7 +35,7 @@
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
 

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -23,6 +23,13 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
     font-size: $font_small !important;
   }
+
+  &[class*=wrapped] {
+    height: max-content;
+    padding-top: $space-xxs;
+    padding-bottom: $space-xxs;
+  }
+
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: mix($color_value, $card_light, 10%);
@@ -142,7 +149,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag, 
+    + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -171,7 +178,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag, 
+      + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -22,6 +22,7 @@ type FormPillProps = {
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,
+  wrapped?: boolean,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -38,6 +39,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     onClick = () => undefined,
     avatarUrl,
     closeProps = {},
+    wrapped,
     size = '',
     textTransform = 'none',
     color = "primary",
@@ -48,6 +50,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
+  const wrappedClass = wrapped ? "wrapped" : ""
 
   const filteredProps: FormPillProps = {...props}
   delete filteredProps.truncate
@@ -55,6 +58,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(filteredProps),
+    wrappedClass,
     className,
     size === 'small' ? 'small' : null,
     textTransform,

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