playbook_ui 14.14.0.pre.alpha.PBNTR907reactfilterpopoverpropswidthbug6557 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275

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

@@ -22,10 +22,6 @@ 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")
@@ -33,7 +29,6 @@ module Playbook
 
       def multi_level_select_options
         {
-          disabled: disabled,
           id: id,
           inputDisplay: input_display,
           name: name,
@@ -43,7 +38,6 @@ 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,17 +69,4 @@ $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;
-    }
-  }
 }

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

@@ -11,7 +11,6 @@ export type OverlayChildrenProps = {
     dynamic?: boolean,
     position: string,
     size: string,
-    scrollBarNone?: boolean,
 }
 
 type OverlayProps = {
@@ -24,8 +23,6 @@ type OverlayProps = {
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
-    scrollBarNone?: boolean,
-    
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -39,12 +36,11 @@ const Overlay = (props: OverlayProps) => {
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
-        scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -72,14 +68,12 @@ const Overlay = (props: OverlayProps) => {
                     children,
                     color,
                     position: getPosition(),
-                    scrollBarNone,
                     size: getSize()
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
                     position: getPosition(),
-                    scrollBarNone,
                     size: getSize()
                 })
             }

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

@@ -4,11 +4,8 @@ examples:
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar
 
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar

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

@@ -2,4 +2,3 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
-export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -16,14 +16,12 @@ id: object.id,
         <% end %>
 
     <% else %>
-        <div class="<%= previous_overlay_class_name %>" data-previous-overlay-classname="<%= previous_overlay_class_name %>"></div>
+        <div class="<%= previous_overlay_class_name %>"></div>
 
-        <div data-overlay-scroll-element="true">
-            <%= content.presence %>
-        </div>
+        <%= content.presence %>
 
         <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>" data-subsequent-overlay-classname="<%= subsequent_overlay_class_name %>"></div>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
         <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -8,13 +8,9 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
-      prop :dynamic, type: Playbook::Props::Boolean,
-                     default: false
-      prop :scroll_bar_none, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
-        generate_classname("pb_overlay", hide_scroll_bar_class)
+        generate_classname("pb_overlay")
       end
 
       def position
@@ -109,17 +105,6 @@ module Playbook
           "bg_dark": "#0a0527",
         }
       end
-
-      def data_attributes
-        data ||= {}
-        data.merge!("data-pb-overlay" => true)
-        data.merge!("data-overlay-dynamic" => true) if dynamic
-        data
-      end
-
-      def hide_scroll_bar_class
-        scroll_bar_none ? " overlay-hide-scrollbar" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -64,15 +64,3 @@ test('should render children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveTextContent(props.children)
 })
-
-test('should add overlay-hide-scrollbar class when scrollBarNone is true', () => {
-    const props = {
-      children,
-      data: { testid: testId },
-      scrollBarNone: true
-    }
-  
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('overlay-hide-scrollbar')
-})

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -19,7 +19,7 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
-import { uniqueId } from '../utilities/object';
+import { uniqueId } from 'lodash';
 
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
@@ -84,7 +84,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props;
 
   const items = globalProps(props).split(' ')
-  const filteredItems = items.filter(item => !item.includes('min-width') && !item.includes('width'))
+  const filteredItems = items.filter(item => !item.includes('min_width'))
   const filteredGlobalProps = filteredItems.join(' ')
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -181,7 +181,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body p_sm overflow_handling");
+    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
   });
 
   test("closes Popover on click anywhere", async () => {

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:li) do %>
-  <div class="box" style="max-width: min-content;">
-    <div class="circle" id="<%= object.tooltip_trigger_class %>" >
+  <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
+    <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
     </div>
     <% if object.tooltip.present? %>

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -1,4 +1,6 @@
-import React, { useRef, forwardRef } from 'react'
+/*eslint-disable react/no-multi-comp */
+
+import React, { forwardRef, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -8,7 +10,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type RadioProps = {
   aria?: { [key: string]: string },
   alignment?: string,
-  checked?: boolean, // removed default assignment here
+  checked?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   customChildren?: boolean,
   className?: string,
@@ -22,10 +24,10 @@ type RadioProps = {
   name?: string,
   value?: string,
   text?: string,
-  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 
-const Radio = forwardRef<HTMLInputElement, RadioProps>(({
+const Radio = ({
   aria = {},
   alignment,
   children,
@@ -41,123 +43,110 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
-  checked,
   onChange = () => { void 0 },
   ...props
-}, ref) => {
-  const internalRef = useRef<HTMLInputElement>(null)
-  const setRefs = (el: HTMLInputElement) => {
-    internalRef.current = el
-    if (typeof ref === 'function') {
-      ref(el)
-    } else if (ref) {
-      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
-    }
-  }
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+}: RadioProps, ref: any) => {
+  const radioRef = useRef(null);
 
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_radio_kit', alignment),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
+  );
 
   const classesCustom = classnames(
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
-
-  const checkedProps = checked !== undefined ? { checked } : {}
+  );
 
-  const displayRadio = (inputProps: any) => {
-    if (children && customChildren === false)
-      return children
+  const displayRadio = (props: RadioProps & any) => {
+    if (children && customChildren == false)
+      return (children)
     else
-      return (
-        <input
-            {...checkedProps}
-            disabled={disabled}
-            id={id}
-            name={name}
-            onChange={onChange}
-            ref={setRefs}
-            type="radio"
-            value={value}
-            {...inputProps}
-        />
-      )
-  }
+    return (
+    <input
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        text={text}
+        type="radio"
+        value={value}
+        {...props}
+    />
+  )}
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
     if (event) {
-      const target = event.target as HTMLElement
+      const target = event.target as HTMLElement;
       if (
         target.id === 'pb-radio-children-wrapper' ||
         target.closest('#pb-radio-children-wrapper')
       ) {
-        internalRef.current?.click()
+        radioRef.current?.click();
       }
     }
-  }
+  };
 
-  return customChildren ? (
-    <Flex
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        align="center"
-        className={classesCustom}
-        cursor="pointer"
-        htmlFor={id}
-        htmlOptions={{
-          onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            handleContainerClick(event)
-          }) as unknown as () => void
-        }}
-        id="radio-container"
-    >
-      <label className={buildCss('pb_radio_kit', alignment)}>
+  return (
+    customChildren ? (
+      <Flex 
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          align='center'
+          className={classesCustom}
+          cursor='pointer'
+          htmlFor={id}
+          htmlOptions={{
+            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              handleContainerClick(event);
+            }) as unknown as () => void
+          }}
+          id="radio-container"
+      >
+        <label className={buildCss('pb_radio_kit', alignment)}>
         <input
-            {...checkedProps}
             disabled={disabled}
             id={id}
             name={name}
             onChange={onChange}
-            ref={setRefs}
+            ref={radioRef}
             type="radio"
             value={value}
             {...props}
         />
+          <span className="pb_radio_button" />
+        </label>
+        <div id="pb-radio-children-wrapper"> {children} </div>
+      </Flex>
+    ) : (
+        <label
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            htmlFor={id}
+        >
+        <>{displayRadio(props)}</>
         <span className="pb_radio_button" />
+        <Body
+            dark={dark}
+            status={error ? 'negative' : null}
+            text={label}
+            variant={null}
+        />
       </label>
-      <div id="pb-radio-children-wrapper"> {children} </div>
-    </Flex>
-  ) : (
-    <label
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        htmlFor={id}
-    >
-      {displayRadio(props)}
-      <span className="pb_radio_button" />
-      <Body
-          dark={dark}
-          status={error ? 'negative' : null}
-          text={label}
-          variant={null}
-      />
-    </label>
-  )
-})
+    )
+  );
+};
 
-Radio.displayName = "Radio"
-export default Radio
+export default forwardRef(Radio);

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

@@ -16,7 +16,6 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
-  - radio_react_hook: React Hook Form
 
   swift:
   - radio_default_swift: Default
@@ -27,4 +26,4 @@ examples:
   - radio_spacing_swift: Spacing
   - radio_padding_swift: Padding
   - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""
+  - radio_props_swift: ""

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

@@ -4,4 +4,3 @@ export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
 export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
-export { default as RadioReactHook } from './_radio_react_hook.jsx'

data/app/pb_kits/playbook/pb_radio/radio.test.js

@@ -86,19 +86,3 @@ test('has disabled attribute', () => {
   expect(input).toHaveAttribute('disabled')
 })
 
-
-test('has ref in the input element', () => {
-  const ref = React.createRef()
-    render(
-      <Radio
-          data={{ testid: testId }}
-          name="Radio-name"
-          ref={ref}
-          text="Radio"
-          value="radio value"
-      />
-  )
-
-  expect(ref.current).not.toBeNull()
-  expect(ref.current?.tagName).toBe('INPUT')
-})

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

@@ -30,7 +30,6 @@ examples:
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
-  - select_react_hook: React Hook
 
   swift:
   - select_default_swift: Default

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

@@ -10,4 +10,3 @@ export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
-export { default as SelectReactHook } from './_select_react_hook.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,6 +1,8 @@
-<%= pb_content_tag(:div,
-  id: nil,
-  class: object.classnames ) do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  data: object.data,
+  class: object.classnames,
+  **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -21,7 +21,6 @@ module Playbook
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
       prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
-      prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
         classname + inline_class + compact_class + show_arrow_class
@@ -89,13 +88,6 @@ module Playbook
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
 
-      def data_attributes
-        data = attributes[:data] || {}
-        data.merge!("data-pb-select" => true)
-        data.merge!("data-validation-message" => validation_message) if validation_message.present?
-        data
-      end
-
     private
 
       def error_class

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.multi %>
     <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -1,4 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <% if object.inputs == "disabled" %>
 

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -243,7 +243,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        min-width: $space_lg;
+                        width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);
@@ -263,7 +263,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        min-width: $space_lg;
+                        width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -31,38 +31,6 @@
     @include pb_title_thin;
   }
 
-  &[class*=_display] {
-    font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
-  }
-
-  &[class*=_dynamic] {
-    &[class*=_xs] {
-      font-size: min(2vw, 80vw / 16); 
-    }
-  
-    &[class*=_sm] {
-      font-size: min(2.5vw, 96vw / 16); 
-    }
-  
-    &[class*=_md] {
-      font-size: min(4vw, 160vw / 16);
-    }
-  
-    &[class*=_lg] {
-      font-size: min(5vw, 192vw / 16);
-    }
-  
-    &[class*=_xl] {
-      font-size: min(6vw, 224vw / 16);
-    }
-  
-    &[class*=_xxl] {
-      font-size: min(8vw, 256vw / 16);
-    }
-  }
-  
-
-
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4" | "display"
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
 type SizeResponsiveType = {[key: string]: SizeType}
 
 type TitleProps = {
@@ -16,7 +16,6 @@ type TitleProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: SizeType | SizeResponsiveType,
-  displaySize?: null | "xs" | "sm" | "md" | "lg" | "xl" | "xxl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -33,7 +32,6 @@ const Title = (props: TitleProps): React.ReactElement => {
     htmlOptions = {},
     id,
     size = 3,
-    displaySize = null,
     bold = true,
     tag = 'h3',
     text,
@@ -58,16 +56,9 @@ const Title = (props: TitleProps): React.ReactElement => {
     return css.trim()
   }
 
-  const buildDisplaySize = () => {
-    if (displaySize) {
-      return `pb_title_kit_dynamic_${displaySize}`
-    }
-  }
-
   const classes = classnames(
     buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
-    buildDisplaySize(),
     buildResponsiveSizeCss(),
     className
   )