playbook_ui 15.0.0 → 15.1.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7cc4f7acda404e7f35ab391d2f1a70d00af44eedb04eac2553d58a68ebe769a8
-  data.tar.gz: b4e22974863a4d18c6d7d5ab891cba391d84a5ebf75220540afabbeb58315271
+  metadata.gz: 682a3bda500ee2b59c400a454a7cb5ac885e07ebbd4aeebd6e1fd36bc5bb50a1
+  data.tar.gz: 23ca823df3234ca7267bd176b55b7d372100ca4b3849ef3ca1ebea5e94da2c9b
 SHA512:
-  metadata.gz: a383abf40229774fc9b34594101d11b5848587cb4402c6fc26e73ae28ae63124348f59c7faf01e15b08f2cc55f281f510257ffb079bf7663661f0a388fc946b2
-  data.tar.gz: e02d74bc78997fe7d4f265ce72db7ac30125d62baca5f78481bc762f142a3427c139d0d2c29417137324245fd83d8295aecb93985c82aefe4784384e16b318c2
+  metadata.gz: 00740a11741e711b2da3397937bbd9849c9058654ca6f435b98e717d071f570d6939ac216074654115f6e4feb0507098f065367fa54327a2223a9a19a65980da
+  data.tar.gz: 240ddffb9b5c3f8db747db4f609c97be0f79304ab887bbe69179dfc187aab6272fe74ddffe35ab0d9086ffd1f82f7a721d16561d4a93d6569624ca28f84319a0

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -65,6 +65,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
         id={id}
     >
       <Button
+          aria={aria}
           dark={dark}
           disabled={disabled}
           htmlType={type}
@@ -78,6 +79,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
       >
         <Icon
             fixedWidth
+            htmlOptions={{'aria-hidden': true}}
             icon={icon}
         />
       </Button>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,5 +1,6 @@
 <%= pb_content_tag do %>
   <%= pb_rails("button", props: {
+    aria: object.aria,
     type: object.type, 
     loading: object.loading, 
     link: object.link, 

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,6 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <svg
+                aria-label="chevron-down icon"
                 class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"

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

@@ -89,6 +89,48 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
+  // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
+  const getMinMaxYears = () => {
+    const [minYear, maxYear] = yearRange;
+
+    const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
+      if (!dateOption) return null;
+
+      // If it's already a number, assume it's a year
+      if (typeof dateOption === 'number') {
+        return dateOption;
+      }
+
+      // If it's a string, extract year with regex
+      if (typeof dateOption === 'string') {
+        const match = dateOption.match(/\b(19|20)\d{2}\b/);
+        return match ? parseInt(match[0], 10) : null;
+      }
+
+      // If it's a Date object, get the year directly
+      if (dateOption instanceof Date) {
+        return dateOption.getFullYear();
+      }
+
+      return null;
+    };
+
+    const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
+    const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
+
+    return { setMinYear, setMaxYear };
+  };
+
+  const { setMinYear, setMaxYear } = getMinMaxYears()
+
+  // Helper function to get min/max dates based on yearRange
+  const getMinMaxDates = () => {
+    const setMinDate = minDate || `01/01/${setMinYear}`
+    const setMaxDate = maxDate || `12/31/${setMaxYear}`
+
+    return { setMinDate, setMaxDate }
+  }
+
   const disabledWeekDays = () => {
     return (
       [
@@ -201,6 +243,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
 
+  const { setMinDate, setMaxDate } = getMinMaxDates()
+
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -212,8 +256,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate,
-    minDate,
+    maxDate: setMaxDate,
+    minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
@@ -250,7 +294,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // create html option tags for desired years
   let years = ''
-  for (let year = yearRange[1]; year >= yearRange[0]; year--) {
+  for (let year = setMaxYear; year >= setMinYear; year--) {
     years += `<option value="${year}">${year}</option>`
   }
 
@@ -323,7 +367,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 // === End of Automatic Sync Logic ===
 
-    
+
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx

@@ -12,10 +12,14 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
   const timesIcon = getAllIcons()["times"]
   return (
     <div
+        aria-label="Close Dialog"
         className="pb_dialog_close_icon"
-        onClick={onClose}
+        onClick={onClose}          
+        role="button"    
+        tabIndex={0}
     >
       <Icon
+          aria={{ "hidden": true }} 
           className="svg-inline--fa"
           customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
    const dataProps = buildDataProps(data)
    const htmlProps = buildHtmlProps(htmlOptions);
-  const dialogClassNames = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
+  const classes = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };
@@ -93,10 +93,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
-  const classes = classnames(
+  const wrapperClasses = classnames(
     buildCss("pb_dialog_wrapper"),
-    globalProps(props),
-    className
   );
 
   const [triggerOpened, setTriggerOpened] = useState(false),
@@ -173,13 +171,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={classes}
+          className={wrapperClasses}
       >
         <Modal
             ariaHideApp={false}
-            className={dialogClassNames}
+            className={classes}
             closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
+            contentLabel="Dialog"
             id={id}
             isOpen={modalIsOpened}
             onRequestClose={onClose}

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -12,7 +12,7 @@
         data-cancel-button-id="<%= object.cancel_button_id %>"
     <% end %>
 >
-    <%= pb_content_tag(:dialog) do %>
+    <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,8 +2,8 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
+                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -20,7 +20,7 @@ export type IconSizes = "lg"
 | ""
 
 type IconProps = {
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string | boolean }
   border?: string,
   className?: string,
   color?: string,
@@ -211,7 +211,15 @@ const Icon = (props: IconProps) => {
   )
 
   aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+
+  const normalizedAria: { [key: string]: string } = Object.fromEntries(
+    Object.entries(aria).map(([key, value]) => [
+      key,
+      typeof value === "boolean" ? String(value) : value,
+    ])
+  )
+  
+  const ariaProps = buildAriaProps(normalizedAria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -222,6 +230,7 @@ const Icon = (props: IconProps) => {
         <>
           {
             React.cloneElement(iconElement || customIcon, {
+              ...ariaProps,
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -237,6 +246,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <span
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classesEmoji}
@@ -250,6 +260,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <i
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classes}

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -110,12 +110,20 @@ module Playbook
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
-        svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
+
+        if object.aria.present?
+          object.aria.each do |key, value|
+            k = key.to_s
+            attr = k.start_with?("aria-") ? k : "aria-#{k.tr('_', '-')}"
+            svg[attr] = value
+          end
+        end
+
         raw doc
       rescue OpenURI::HTTPError, StandardError
         # Handle any exceptions and return an empty string

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true, aria: { "aria-label": "#{object.icon} icon" } }) %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -16,6 +16,7 @@ type LoadingInlineProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
+  variant?: "dotted" | "solid" ,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -28,6 +29,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     htmlOptions = {},
     id,
     text = ' Loading',
+    variant = 'dotted',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -54,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon="spinner"
+            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
             pulse
         />
         {text}

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

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

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -8,10 +8,21 @@ module Playbook
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :text, type: Playbook::Props::String, default: "Loading"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[dotted solid],
+                     default: "dotted"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)
       end
+
+      def spinner_icon
+        if variant == "dotted"
+          "spinner"
+        elsif variant == "solid"
+          "spinner-solid"
+        end
+      end
     end
   end
 end

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

@@ -36,6 +36,7 @@ type TextInputProps = {
     alignment?: "right" | "left",
     border?: boolean,
   },
+  autoComplete?: boolean | string,
 } & GlobalProps
 
 const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>) => {
@@ -59,6 +60,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     type = 'text',
     value = '',
     children = null,
+    autoComplete = true,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -142,6 +144,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
+        autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
         id={id}

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

@@ -0,0 +1,41 @@
+<%= pb_rails("text_input", props: {
+  autocomplete: false,
+  label: "autocomplete='off'",
+  name: "firstName",
+  placeholder: "Enter first name",
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "no autocomplete attribute (let browser decide- basically 'on')",
+  name: "lastName",
+  placeholder: "Enter last name"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: true,
+    label: "autocomplete='on'",
+    name: "phone",
+    type: "phone",
+    placeholder: "Enter phone number"
+}) %>
+
+<%= pb_rails("body", props: { margin_bottom: "sm" }) do %>
+  The following have the same autocomplete attributes (email), but have
+  different name attributes (email and emailAlt). Many browsers will
+  open autocomplete based on name attributes instead of autocomplete:
+<% end %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='email'",
+    name: "email",
+    placeholder: "Enter email address"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='emailAlt'",
+    name: "emailAlt",
+    type: "email",
+    placeholder: "Enter email address"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
+
+
+const TextInputAutocomplete = (props) => {
+  const [formFields, setFormFields] = useState({
+    firstName: "",
+    lastName: "",
+    phone: "",
+    emailTest: "",
+    email: "",
+  });
+
+  const handleOnChangeFormField = ({ target }) => {
+    const { name, value } = target;
+    setFormFields({ ...formFields, [name]: value });
+  };
+
+  return (
+    <div>
+      <TextInput
+          autoComplete={false}
+          label="autocomplete='off'"
+          name="firstName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter first name"
+          value={formFields.firstName}
+          {...props}
+      />
+      <TextInput
+          label="no autocomplete attribute (let browser decide- basically 'on')"
+          name="lastName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter last name"
+          value={formFields.lastName}
+          {...props}
+      />
+      <TextInput
+          autoComplete
+          label="autocomplete='on'"
+          name="phone"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter phone number"
+          type="phone"
+          value={formFields.phone}
+          {...props}
+      />
+      <Body marginBottom="sm">
+        The following have the same autocomplete attributes (email), but have
+        different name attributes (email and emailAlt). Many browsers will
+        open autocomplete based on name attributes instead of autocomplete:
+      </Body>
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='email'"
+          name="email"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.email}
+          {...props}
+      />
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='emailAlt'"
+          marginTop="sm"
+          name="emailTest"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.emailTest}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default TextInputAutocomplete;

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md

@@ -0,0 +1 @@
+Set this prop to `false` or `"off"` to remove autocomplete from text inputs. You can also set it to a string, but browsers will often defer to other attributes like `name`. 

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

@@ -9,6 +9,8 @@ examples:
   - text_input_no_label: No Label
   - text_input_options: Input Options
   - text_input_mask: Mask
+  - text_input_autocomplete: Autocomplete
+  
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -19,6 +21,7 @@ examples:
   - text_input_no_label: No Label
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
+  - text_input_autocomplete: Autocomplete
 
 
   swift:

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

@@ -7,3 +7,4 @@ export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
+export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -15,8 +15,7 @@ module Playbook
         "cvv" => '\d{3,4}',
       }.freeze
 
-      prop :autocomplete, type: Playbook::Props::Boolean,
-                          default: true
+      prop :autocomplete, default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
@@ -69,7 +68,7 @@ module Playbook
 
       def all_input_options
         {
-          autocomplete: autocomplete ? nil : "off",
+          autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,
           disabled: disabled,

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -306,3 +306,41 @@ test('returns masked CVV value', () => {
 
   expect(input.value).toBe('')
 })
+
+test('adds autocomplete string attribute', () => {
+  render(
+    <TextInput
+        autoComplete="family-name"
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+  expect(input).toHaveAttribute("autocomplete", "family-name")
+})
+
+test('adds autocomplete "off" attribute', () => {
+  render(
+    <TextInput
+        autoComplete={false}
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+  expect(input).toHaveAttribute("autocomplete", "off")
+})
+
+test('does not add autocomplete attribute otherwise', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+  expect(input).not.toHaveAttribute("autocomplete")
+})