playbook_ui 18.0.0.pre.alpha.play316819718 → 18.0.0.pre.alpha.play320919498

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ebef29a822dd3e6eb0e454d6afec3b2b907604218c919f19d121458ae9003185
-  data.tar.gz: 7f7afd7e578aaa05b0ae0785430c0d2d70f982330840e7308e72bac0bca89065
+  metadata.gz: 3af0b188f87053d463603829df3767654f8de44a60f29eac5461b101a9c151d5
+  data.tar.gz: d541b26c3db0e6318e9b16e40507a4258b428bf4a9e549211a5a9f3b64426594
 SHA512:
-  metadata.gz: 45c9ad187bc22ea466a8c1301cb0dafedfb0571bd251ba44a1c3b6cc3c6a968b06157229004195f5dfb1bc1fc07a7dd1ab750a27cfb2b3828b28b5f8ce2377c5
-  data.tar.gz: 1bcc20a346eead634ac46acf75b65da3d4cba3a4df31f674a3184b205ba5b00d3fd281c674fea766dd399c73e12f0a7a40c8f06faa6a23a939fdf37af9161742
+  metadata.gz: 775749829145497000f59badfacaaad4ba79a49e14833c893f42a6bb42bda54c839affd668e2664bdd27641b251919ffc7257272cb5107b432abef03d03cefe1
+  data.tar.gz: 31a4797e342999ca8dbd9cad3197b28e9864de04527aa0e52ee5c841e0152ddd11bdf98f4ed7eb35b895ff3b4f0dc7f2778b83d179d916cda062a6900a36ca51

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -98,7 +98,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     imageUrl: getResponsiveValue(imageUrl),
   });
 
-  // Keep responsive values in sync when props change, and on window resize.
+  // Update responsive values on window resize.
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
@@ -109,7 +109,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         imageUrl: getResponsiveValue(imageUrl),
       });
     };
-    updateResponsiveProps();
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
   }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
@@ -154,8 +153,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     ...dynamicInlineProps
   };
 
-  // Dynamic HTML tag from props; matches other kits (Title, Collapsible, etc.).
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -1,5 +1,4 @@
-import React from 'react'
-import { ensureAccessible, render, renderKit } from '../utilities/test-utils'
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
 
 import Background from './_background'
 
@@ -21,27 +20,6 @@ test('backgroundColor = category_1', () => {
   expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
 })
 
-test('updates backgroundColor class when the prop changes', () => {
-  const { getByTestId, rerender } = render(
-    <Background
-        backgroundColor="info_subtle"
-        data={{ testid: 'background' }}
-    />
-  )
-
-  expect(getByTestId('background')).toHaveClass('pb_background_color_info_subtle')
-
-  rerender(
-    <Background
-        backgroundColor="card_light"
-        data={{ testid: 'background' }}
-    />
-  )
-
-  expect(getByTestId('background')).toHaveClass('pb_background_color_card_light')
-  expect(getByTestId('background')).not.toHaveClass('pb_background_color_info_subtle')
-})
-
 test('customColor prop styles background color with a hex value', () => {
   const kit = renderKit(Background, props, { customColor: '#1d99a8' })
 

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
-import { globalEventProps, GlobalEventProps } from '../utilities/globalEventProps'
 
 import Highlight from '../pb_highlight/_highlight'
 
@@ -22,7 +21,7 @@ type BodyProps = {
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
   variant?: null | 'link',
-} & GlobalProps & GlobalEventProps
+} & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
   if (props.variant) deprecatedProps() //status prop is deprecated, use color instead please
@@ -57,7 +56,6 @@ const Body = (props: BodyProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
-        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_body/kit.schema.json

@@ -94,7 +94,6 @@
     }
   },
   "globalProps": true,
-  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Body } from 'playbook-ui'",

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

@@ -7,7 +7,6 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
-import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -35,7 +34,7 @@ type CardPropTypes = {
   padding?: string,
   selected?: boolean,
   tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
-} & GlobalProps & GlobalEventProps
+} & GlobalProps
 
 type CardHeaderProps = {
   headerColor?: BackgroundColors | ProductColors | CategoryColors | StatusColors | "none",
@@ -157,7 +156,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             className={classnames(cardCss, globalProps(props), className)}
             {...restHtmlProps}
-            {...globalEventProps(props)}
             style={mergedStyles}
         >
           {subComponentTags('Header')}
@@ -187,7 +185,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               className={classnames(cardCss, globalProps(props), className)}
               {...restHtmlProps}
-              {...globalEventProps(props)}
               style={mergedStyles}
             >
               {subComponentTags('Header')}

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -25,16 +25,6 @@ $additional_colors: (
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $additional_colors), $category_colors), $status_colors);
-// Prop sizes only — legacy $border_radius keys like "light" collide with background_light.
-$pb_card_border_radius_values: (
-  xs: $border_radius_xs,
-  sm: $border_radius_sm,
-  md: $border_radius_md,
-  lg: $border_radius_lg,
-  xl: $border_radius_xl,
-  none: $border_radius_none,
-  rounded: $border_radius_rounded,
-);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
@@ -73,8 +63,8 @@ $pb_card_border_radius_values: (
     }
   }
 
-  @each $name, $radius in $pb_card_border_radius_values {
-    &.pb_card_kit_border_radius_#{$name} {
+  @each $name, $radius in $border_radius {
+    &[class*=_#{$name}] {
       border-radius: $radius;
     }
   }

data/app/pb_kits/playbook/pb_card/kit.schema.json

@@ -186,7 +186,6 @@
     }
   },
   "globalProps": true,
-  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Card } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -13,7 +13,6 @@ type CopyButtonProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)}
   id?: string
   from?: string
   text?: string
@@ -30,7 +29,6 @@ const CopyButton = (props: CopyButtonProps) => {
     className,
     data = {},
     from = '',
-    htmlOptions = {},
     id,
     text = 'Copy',
     timeout = 1000,
@@ -44,14 +42,12 @@ const CopyButton = (props: CopyButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
     <div 
         {...ariaProps}
         {...dataProps}
-        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -86,15 +86,3 @@ test('passes text and tooltip props to button', () => {
   const tooltip = kit.querySelector('.pb_tooltip_kit')
   expect(tooltip).toBeInTheDocument()
 })
-
-test('applies htmlOptions to the root element', () => {
-  render(
-      <CopyButton
-          data={{ testid: 'html-options-test' }}
-          htmlOptions={{ title: 'copy title' }}
-          value="copy"
-      />
-  )
-
-  expect(screen.getByTestId('html-options-test')).toHaveAttribute('title', 'copy title')
-})

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -1,6 +1,5 @@
 
 import React from 'react'
-import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
@@ -12,7 +11,6 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
 import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
-  className?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   date: Date,
@@ -29,25 +27,20 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     date,
     datetime,
     dark,
-    className,
     htmlOptions = {},
     timeZone = 'America/New_York',
     showCurrentYear = false,
   } = props
 
-  const classes = classnames(
-    buildCss('pb_date_time_stacked_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <Flex
-        htmlOptions={htmlOptions}
         inline={false}
         vertical="stretch"
+        {...htmlProps}
         {...props}
-        className={classes}
     >
       <FlexItem>
         <DateStacked
@@ -65,6 +58,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
       />
       <FlexItem>
         <TimeStacked
+            className={classes}
             dark={dark}
             date={date || datetime}
             timeZone={timeZone}

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -74,15 +74,3 @@ test('hides current year by default', () => {
     expect(yearElement).toBeNull()
   }
 })
-
-test('applies kit class and global props to the root', () => {
-  const kit = renderKit(DateTimeStacked, {
-    data: { testid: 'datetimestacked-root' },
-    datetime,
-    dark: false,
-    margin: 'md',
-  })
-
-  expect(kit).toHaveClass('pb_date_time_stacked_kit')
-  expect(kit).toHaveClass('m_md')
-})

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx

@@ -1,27 +1,22 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss, buildHtmlProps } from '../../utilities/props'
+import { buildCss } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps'
 
 type DialogBodyProps = {
   children: React.ReactNode | React.ReactNode[] | string,
   padding?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
-  className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  className?: string
 } 
 
 // Body component
 const DialogBody = (props: DialogBodyProps): React.ReactElement => {
-  const { children, className, htmlOptions = {} } = props
+  const { children, className } = props
   const bodyCSS = buildCss("dialog_body")
   const bodySpacing = globalProps(props)
-  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div
-        {...htmlProps}
-        className={classnames(bodyCSS, bodySpacing, className)}
-    >
+    <div className={classnames(bodyCSS, bodySpacing, className)}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -268,13 +268,3 @@ describe('isNativeSelectMenuInteraction', () => {
     expect(isNativeSelectMenuInteraction(dialog, select)).toBe(false)
   })
 })
-
-test("applies htmlOptions to Dialog.Body", () => {
-  render(
-    <Dialog.Body htmlOptions={{ title: "body title" }}>
-      {"Body content"}
-    </Dialog.Body>
-  )
-
-  expect(document.querySelector(".dialog_body")).toHaveAttribute("title", "body title")
-})

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -106,22 +106,6 @@
         }
       }
 
-      // Let Rails autocomplete use the trigger space left by its action icons.
-      > :has([data-dropdown-autocomplete]) {
-        flex: 1;
-        min-width: 0;
-
-        .pb_flex_kit:has([data-dropdown-autocomplete]) {
-          min-width: 0;
-          width: 100%;
-        }
-
-        [data-dropdown-autocomplete] {
-          min-width: 0;
-          width: 100%;
-        }
-      }
-
       .dropdown_input:disabled {
         background-color: $input_background_disabled;
         color: $input_text_disabled;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -112,8 +112,6 @@ type DropdownProps = {
     isClosed?: boolean;
     label?: string;
     multiSelect?: boolean;
-    name?: string;
-    onChange?: (event: { target: { name?: string; value: any } }) => void;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
     placeholder?: string;
@@ -158,8 +156,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         label,
         multiSelect = false,
         formPillProps,
-        name,
-        onChange,
         onSelect,
         options,
         placeholder,
@@ -418,10 +414,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setIsDropDownClosed(false);
     };
 
-    const handleSelectionChange = (value: any) => {
-        onSelect && onSelect(value);
-        onChange && onChange({ target: { name, value } });
-    };
 
       const handleOptionClick = (clickedItem: GenericObject) => {
                 if (disabled) return;
@@ -434,7 +426,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        const next = exists
                        ? list.filter((option) => option.value !== clickedItem.value)
                            : [...list, clickedItem];
-                   handleSelectionChange(next);
+                   onSelect && onSelect(next);
                        return next;
                    });
                    setFilterItem("");
@@ -447,7 +439,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                    if (shouldCloseOnClick) {
                        setIsDropDownClosed(true);
                    }
-                   handleSelectionChange(clickedItem);
+                   onSelect && onSelect(clickedItem);
                    
                    // Sync with DatePickers if this is a quickpick variant
                    if (variant === "quickpick" && Array.isArray(clickedItem.value)) {
@@ -476,10 +468,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       if (disabled) return;
       if (multiSelect) {
         setSelected([]);
-        handleSelectionChange([]);
+        onSelect && onSelect([]);
       } else {
         setSelected({});
-        handleSelectionChange(null);
+        onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
         setFilterItem("");
         
@@ -513,10 +505,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       clearSelected: () => {
         if (multiSelect) {
           setSelected([]);
-          handleSelectionChange([]);
+          onSelect && onSelect([]);
         } else {
           setSelected({});
-          handleSelectionChange(null);
+          onSelect && onSelect(null);
         }
         setFilterItem("");
         setIsDropDownClosed(true);
@@ -530,16 +522,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         clearSelected: () => {
           if (multiSelect) {
             setSelected([]);
-            handleSelectionChange([]);
+            onSelect && onSelect([]);
           } else {
             setSelected({});
-            handleSelectionChange(null);
+            onSelect && onSelect(null);
           }
           setFilterItem("");
           setIsDropDownClosed(true);
         },
       };
-    }, [multiSelect, handleSelectionChange, setSelected, setFilterItem, setIsDropDownClosed]);
+    }, [multiSelect, onSelect, setSelected, setFilterItem, setIsDropDownClosed]);
 
     useImperativeHandle(ref, () => imperativeRef.current);
 
@@ -602,7 +594,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
-                    handleSelectionChange,
                     handleWrapperClick,
                     inputRef,
                     inputWrapperRef,

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.json

@@ -88,7 +88,6 @@
       "name": "Content",
       "props": [
         "label",
-        "name",
         "placeholder",
         "options",
         "defaultValue",
@@ -131,7 +130,6 @@
     {
       "name": "Events",
       "props": [
-        "onChange",
         "onSelect"
       ]
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.overrides.json

@@ -70,7 +70,6 @@
       "name": "Content",
       "props": [
         "label",
-        "name",
         "placeholder",
         "options",
         "defaultValue",
@@ -112,7 +111,7 @@
     },
     {
       "name": "Events",
-      "props": ["onChange", "onSelect"]
+      "props": ["onSelect"]
     }
   ],
   "presets": [

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

@@ -2,8 +2,6 @@ examples:
   rails:
   - dropdown_default_rails: Default
   - dropdown_with_autocomplete: Autocomplete
-  - dropdown_async_search: Async Search
-  - dropdown_async_custom_content: Async Search with Custom Content
   - dropdown_multi_select_rails: Multi Select
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
@@ -41,9 +39,6 @@ examples:
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
   - dropdown_custom_event_type: Custom Event Type
-  - dropdown_dynamic_options: Dynamic Options
-  - dropdown_dynamic_options_with_autocomplete: Dynamic Options with Autocomplete
-  - dropdown_dynamic_options_with_multi_select: Dynamic Options with Multi Select
 
   react:
   - dropdown_default: Default
@@ -86,6 +81,3 @@ examples:
   - dropdown_required_indicator: Required Indicator
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
-  - dropdown_react_hook: React Hook
-  - dropdown_multi_select_react_hook: React Hook Multi Select
-

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

@@ -1,6 +1,4 @@
 export { default as DropdownDefault } from './_dropdown_default.jsx'
-export { default as DropdownReactHook } from './_dropdown_react_hook.jsx'
-export { default as DropdownMultiSelectReactHook } from './_dropdown_multi_select_react_hook.jsx'
 export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -27,9 +27,6 @@ module Playbook
                         default: true
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: false
-      prop :async, type: Playbook::Props::Boolean, default: false
-      prop :search_term_minimum_length, default: 3
-      prop :search_debounce_timeout, default: 250
       prop :searchbar, type: Playbook::Props::Boolean,
                        default: false
       prop :multi_select, type: Playbook::Props::Boolean,
@@ -62,22 +59,10 @@ module Playbook
                                 default: false
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
-      prop :options_by_context, type: Playbook::Props::HashProp,
-                                default: {}
-      prop :context_selector, type: Playbook::Props::String,
-                              default: ""
-      prop :clear_on_context_change, type: Playbook::Props::Boolean,
-                                     default: true
-      prop :options_event_type, type: Playbook::Props::String,
-                                default: ""
 
       def data
         Hash(prop(:data)).merge(
           pb_dropdown: true,
-          pb_dropdown_async: async ? true : nil,
-          pb_dropdown_default_value: async && default_value.present? ? default_value.to_json : nil,
-          pb_dropdown_search_term_minimum_length: async ? search_term_minimum_length : nil,
-          pb_dropdown_search_debounce_timeout: async ? search_debounce_timeout : nil,
           pb_dropdown_multi_select: multi_select,
           pb_dropdown_disabled: disabled,
           pb_dropdown_variant: variant,
@@ -88,11 +73,7 @@ module Playbook
           end_date_id: variant == "quickpick" ? end_date_id : nil,
           controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
           controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil,
-          custom_event_type: custom_event_type.presence,
-          pb_dropdown_options_by_context: options_by_context.present? ? options_by_context.to_json : nil,
-          pb_dropdown_context_selector: context_selector.presence,
-          pb_dropdown_clear_on_context_change: clear_on_context_change,
-          options_event_type: options_event_type.presence
+          custom_event_type: custom_event_type.presence
         ).compact
       end