playbook_ui 15.0.0.pre.alpha.PLAY2419dialogaccessibility10324 → 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10439

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b736fdc29301940be86911be6313f4f83e0fb0835e760ef594fc254bd780ad17
-  data.tar.gz: bbe0f550b703262293f0b34a1d643f397261a201d230aa38a72ab5a2c472f6de
+  metadata.gz: 5c0850e82d5491835ef48bbdd5e1c28d4ef6948080093b74dc4aba06cfaf637e
+  data.tar.gz: b494a2a9849173a0e049360489d2b37418f50dd33d151eafc5f0c588de2dbcca
 SHA512:
-  metadata.gz: 59beea3d9c03038f41ad82820720e453544a33a7719640f49b681080f051a217acba6d22e780a05ea8c5bcc4fcec3afd7940824f1a0b6d80a7cedb881016abda
-  data.tar.gz: 72ec7ecf9d41e5bc4038271ee0444388af0122abbb264c169583dff6d2b334f1b0a7220e04324b6e520dee7d057fb6f5d274198787558fef74b2d6272cd9ef7f
+  metadata.gz: d1c327736134be2fb192d676143d5904179510c97a8fd6560d293efbcc90497c9c41bcb7d4d309bf82844286dd640811749ce7f9384982cbe9aedaa6f029230e
+  data.tar.gz: 2376428cb935232f12a97496c049bb652e9eef97e5ee39ec1b9aea1b7466f81c10b11f08f71ee36ba33de613fbb44ca22a1842114b2a2d841462f96ca5d8a040

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -1011,18 +1011,57 @@
 .pb-advanced-table-popover-option:hover {
   background-color: $bg_light;
 }
+
 // Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
+.pb_card_kit > .pb_advanced_table {
+  // Remove right border only from the actual last column
+  .pb_advanced_table_body tr td:last-child,
+  .pb_advanced_table_header tr th:last-child {
+    box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
     border-right: none !important;
+  }
+
+  // Without vertical border, remove all last-cell borders
+  .pb_table:not(.vertical-border) {
+    .pb_advanced_table_body .last-cell,
+    .pb_advanced_table_header .last-header-cell {
+      box-shadow: none !important;
+      border-right: none !important;
+    }
+  }
+
+  // For tables WITH vertical borders, only remove border from actual last column
+  .pb_table.vertical-border {
+    .pb_advanced_table_body .last-cell:not(:last-child),
+    .pb_advanced_table_header .last-header-cell:not(:last-child) {
+      box-shadow: none !important;
+      border-right: 1px solid $border_light !important;
+    }
+
+    // Dark mode
+    &.dark {
+      .pb_advanced_table_body .last-cell:not(:last-child),
+      .pb_advanced_table_header .last-header-cell:not(:last-child) {
+        box-shadow: none !important;
+        border-right: 1px solid $border_dark !important;
+      }
+    }
+
+    // Support border colors
+    &.pb_advanced_table[class*="column-group-border-"] {
+      .pb_advanced_table_body .last-cell:not(:last-child),
+      .pb_advanced_table_header .last-header-cell:not(:last-child) {
+        box-shadow: none !important;
+        border-right: 1px solid var(--column-border-color) !important;
+      }
+    }
+  }
 }
 
 //  Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table tr:last-child, 
+.pb_card_kit > .pb_advanced_table tr:last-child,
 .pb_card_kit > .pb_advanced_table .last-row-cell {
   td {
-    border-bottom: none !important; 
+    border-bottom: none !important;
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb

@@ -39,5 +39,7 @@
     ],
   },
 ] %>
-
-<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
+<%# Adjusting for test purposes. Will revert prior to commit. %>
+<%= pb_rails("card", props: {})  do %>
+  <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx

@@ -1,4 +1,5 @@
 import React from "react"
+import Card from "../../pb_card/_card"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
@@ -44,19 +45,22 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-  
+
   const tableProps = {
+    container: false,
     verticalBorder: true
   }
-
+// Adjusted for testing purposes. Will revert prior to commit.
   return (
     <>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
+      <Card>
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            tableProps={tableProps}
+            {...props}
+        />
+      </Card>
     </>
   )
 }

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_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/_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,11 +171,11 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={classes}
+          className={wrapperClasses}
       >
         <Modal
             ariaHideApp={false}
-            className={dialogClassNames}
+            className={classes}
             closeTimeoutMS={200}
             contentLabel="Dialog"
             id={id}

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")
+})