playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10658 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -0,0 +1,65 @@
+// Three places in Nitro depend on this function inside the window scope.
+// We will keep this file until we remove this dependency from Nitro.
+const dialogHelper = () => {
+  const openTrigger = document.querySelectorAll("[data-open-dialog]");
+  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+  const dialogs = document.querySelectorAll(".pb_dialog_rails")
+
+  const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+  if (loadingButton) {
+    loadingButton.addEventListener("click", function() {
+      const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+      const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+      let currentClass = okayLoadingButton.className;
+      let cancelClass = cancelButton ? cancelButton.className : "";
+
+      let newClass = currentClass.replace("_enabled", "_disabled_loading");
+      let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+      // Disable the buttons
+      okayLoadingButton.disabled = true;
+      if (cancelButton) cancelButton.disabled = true;
+
+      okayLoadingButton.className = newClass;
+      if (cancelButton) cancelButton.className = newCancelClass;
+    });
+  }
+
+
+  openTrigger.forEach((open) => {
+    open.addEventListener("click", () => {
+      var openTriggerData = open.dataset.openDialog;
+      var targetDialog = document.getElementById(openTriggerData)
+      if (targetDialog.open) return;
+      targetDialog.showModal();
+    });
+  });
+
+  closeTrigger.forEach((close) => {
+    close.addEventListener("click", () => {
+      var closeTriggerData = close.dataset.closeDialog;
+      document.getElementById(closeTriggerData).close();
+    });
+  });
+
+  // Close dialog box on outside click
+  dialogs.forEach((dialogElement) => {
+    dialogElement.addEventListener("mousedown", (event) => {
+      const dialogParentDataset = dialogElement.parentElement.dataset
+      if (dialogParentDataset.overlayClick === "overlay_close") return
+
+      const dialogModal = event.target.getBoundingClientRect()
+      const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+                                        event.clientX > dialogModal.right ||
+                                        event.clientY < dialogModal.top ||
+                                        event.clientY > dialogModal.bottom
+
+      if (clickedOutsideDialogModal) {
+        dialogElement.close()
+        event.stopPropagation()
+      }
+    })
+  })
+};
+
+export default dialogHelper;

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 %> aria-label="Close Dialog" >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
+            <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>
         <% end %>
         <%= pb_rails("section_separator") %>

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

@@ -91,7 +91,6 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

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

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

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

@@ -110,20 +110,12 @@ 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_button/_icon_button.tsx

@@ -51,7 +51,6 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          aria={aria}
           borderRadius="xs"
           htmlType={htmlType}
           link={link}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

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

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, aria: { "aria-label": "#{object.icon} icon" } }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

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

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

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

@@ -3,11 +3,9 @@ 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,3 +1,2 @@
 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: object.spinner_icon, pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

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

@@ -8,21 +8,10 @@ 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_nav/_item.tsx

@@ -140,8 +140,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const isLink = !!link
-  const Tag = isLink ? "a" : "div"
+  const Tag = link ? "a" : "div";
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
@@ -201,13 +200,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isLink && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault()
-      onClick?.()
-    }
-  }
-
   return (
     <>
       {collapsible ? (
@@ -230,18 +222,15 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
                   {...dataProps}
                   {...htmlProps}
                   className={classes}
-                  href={isLink ? link : undefined}
+                  href={link}
                   id={id}
-                  role={!isLink ? "button" : undefined}
-                  tabIndex={!isLink ? 0 : undefined}
-                  target={isLink ? target : undefined}
+                  target={target}
               >
                 {imageUrl && (
                   <div
                       className="pb_nav_list_item_icon_section_collapsible"
                       key={imageUrl}
                       onClick={(e) => handleIconClick(e)}
-                      onKeyDown={!isLink ? handleKeyDown : undefined}
                   >
                     <Image className="pb_nav_img_wrapper"
                         url={imageUrl}
@@ -276,13 +265,10 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...dataProps}
             {...htmlProps}
             className={classes}
-            href={isLink ? link : undefined}
+            href={link}
             id={id}
             onClick={onClick}
-            onKeyDown={!isLink ? handleKeyDown : undefined}
-            role={!isLink ? "button" : undefined}
-            tabIndex={!isLink ? 0 : undefined}
-            target={isLink ? target : undefined}
+            target={target}
         >
           {imageUrl && (
             <div className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,9 +3,7 @@
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= pb_content_tag( object.tag,
             href: object.link && object.link,
-            target: object.link && object.target,
-            onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
-            tabindex: object.link ? nil : 0,
+            target: object.link && object.target
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -25,9 +23,7 @@
   <% else %>
     <%= pb_content_tag( object.tag,
         href: object.link && object.link,
-        target: object.link && object.target,
-        onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
-        tabindex: object.link ? nil : 0,
+        target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

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

@@ -36,7 +36,6 @@ type TextInputProps = {
     alignment?: "right" | "left",
     border?: boolean,
   },
-  autoComplete?: boolean | string,
 } & GlobalProps
 
 const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>) => {
@@ -60,7 +59,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     type = 'text',
     value = '',
     children = null,
-    autoComplete = true,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -144,7 +142,6 @@ 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/example.yml

@@ -9,8 +9,6 @@ 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
@@ -21,7 +19,6 @@ 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,4 +7,3 @@ 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,7 +15,8 @@ module Playbook
         "cvv" => '\d{3,4}',
       }.freeze
 
-      prop :autocomplete, default: true
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
@@ -68,7 +69,7 @@ module Playbook
 
       def all_input_options
         {
-          autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
+          autocomplete: autocomplete ? nil : "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,41 +306,3 @@ 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")
-})

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -18,11 +18,9 @@ type TimestampProps = {
   timezone: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  showCurrentYear?: boolean,
   showDate?: boolean,
   showUser?: boolean,
   hideUpdated?: boolean,
-  showTime?: boolean,
   showTimezone?: boolean,
   unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
@@ -39,11 +37,9 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     text,
     timezone,
     timestamp,
-    showCurrentYear = false,
     showDate = true,
     showUser = false,
     hideUpdated = false,
-    showTime = true,
     showTimezone = false,
     unstyled = false,
     variant = 'default',
@@ -59,6 +55,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   )
 
   const currentYear = new Date().getFullYear().toString()
+  const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
   const updatedText = hideUpdated ? "" : "Last updated"
@@ -73,26 +70,16 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return timeDisplay
   }
 
-  const baseDateDisplay = () => {
-  let display = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
-  if (DateTime.toYear(timestamp, timezone).toString() !== currentYear || showCurrentYear) {
-    display = `${display}, ${DateTime.toYear(timestamp, timezone)}`
-  }
-  return display
-}
-
   const fullDateDisplay = () => {
-    const fullDisplay = baseDateDisplay()
-    return showTime ? `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}` : fullDisplay
+    let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
+    if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
+      fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
+    }
+    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
   }
 
   const formatUpdatedString = () => {
-    const finalUpdatedString = []
-    if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
-    if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
-    if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
-    if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
-    return `Last updated ${finalUpdatedString.join(' ')}`
+    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
   }
 
   const formatElapsedString = () => {
@@ -106,10 +93,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     case 'elapsed':
       return formatElapsedString()
     default:
-      if (showDate && showTime) return timestamp ? fullDateDisplay() : text
-      if (showDate && !showTime) return baseDateDisplay()
-      if (!showDate && showTime) return fullTimeDisplay()
-      return text
+      return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
     }
   }
 

data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md

@@ -0,0 +1 @@
+Use these only to display status updates in areas that has a lot of data.

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb

@@ -8,6 +8,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "left"
 }) %>
 
@@ -15,6 +16,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "left"
 }) %>
 
@@ -22,6 +24,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "left"
 }) %>
 
@@ -37,6 +40,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "center"
 }) %>
 
@@ -44,6 +48,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "center"
 }) %>
 
@@ -51,6 +56,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "center"
 }) %>
 
@@ -58,6 +64,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: false,
   align: "right"
 }) %>
 
@@ -65,6 +72,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "right"
 }) %>
 
@@ -72,6 +80,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "right"
 }) %>
 
@@ -79,5 +88,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "right"
 }) %>