playbook_ui 15.0.0.pre.alpha.popovertesting10431 → 15.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 398d9191b26e4a1b8c37cb33c8bcc4160b67d491d201cc673febca3d63605f3d
-  data.tar.gz: 5a11da78bf0fd085628b518dd711f986507a55201c19c485335a2eb4963f8bae
+  metadata.gz: 7cc4f7acda404e7f35ab391d2f1a70d00af44eedb04eac2553d58a68ebe769a8
+  data.tar.gz: b4e22974863a4d18c6d7d5ab891cba391d84a5ebf75220540afabbeb58315271
 SHA512:
-  metadata.gz: 8bf47081e50cf5cc23d6efd14b45f5607ea2246c53ed73573d594bc701e78b545ab32b8de9d84f8bdd08394eb14ecc5c1b7e94e56e66249b0ff9a189fd361032
-  data.tar.gz: 1de125b1bae63f31a42590240c2edf95309e23d3497d733ec11294e9b71949ea146eaa1a19cd61cdc47c471aa96a184f191322cc630fb9197b0ac4b4a39b4afd
+  metadata.gz: a383abf40229774fc9b34594101d11b5848587cb4402c6fc26e73ae28ae63124348f59c7faf01e15b08f2cc55f281f510257ffb079bf7663661f0a388fc946b2
+  data.tar.gz: e02d74bc78997fe7d4f265ce72db7ac30125d62baca5f78481bc762f142a3427c139d0d2c29417137324245fd83d8295aecb93985c82aefe4784384e16b318c2

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

@@ -65,7 +65,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
         id={id}
     >
       <Button
-          aria={aria}
           dark={dark}
           disabled={disabled}
           htmlType={type}
@@ -79,7 +78,6 @@ 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,6 +1,5 @@
 <%= 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,7 +28,6 @@ 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,48 +89,6 @@ 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 (
       [
@@ -243,8 +201,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
 
-  const { setMinDate, setMaxDate } = getMinMaxDates()
-
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -256,8 +212,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: setMaxDate,
-    minDate: setMinDate,
+    maxDate,
+    minDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
@@ -294,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // create html option tags for desired years
   let years = ''
-  for (let year = setMaxYear; year >= setMinYear; year--) {
+  for (let year = yearRange[1]; year >= yearRange[0]; year--) {
     years += `<option value="${year}">${year}</option>`
   }
 
@@ -367,7 +323,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_date_picker/docs/_date_picker_default.html.erb

@@ -1,24 +1 @@
-<%= pb_rails("flex") do %>
-  <%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>
-
-  <!-- see how it behaves for raw html date picker -->
-
-<form style="margin-top:100px;" action="/action_page.php">
-  <label for="birthday" style="padding-top:100px;">Birthday:</label>
-  <input type="date" id="birthday" name="birthday">
-  <input type="submit" value="Submit">
-</form>
-
-<form style="margin-top:100px;" action="/action_page.php">
-  <label for="birthday" style="margin-top:100px;">Birthday:</label>
-  <input type="date" id="birthday" name="birthday">
-  <input type="submit" value="Submit">
-</form>
-<form style="margin-top:100px;" action="/action_page.php">
-  <label for="birthday" style="padding-top:100px;">Birthday:</label>
-  <input type="date" id="birthday" name="birthday">
-  <input type="submit" value="Submit">
-</form>
-<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11.</p>
-
-<% end %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>

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

@@ -12,14 +12,10 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
   const timesIcon = getAllIcons()["times"]
   return (
     <div
-        aria-label="Close Dialog"
         className="pb_dialog_close_icon"
-        onClick={onClose}          
-        role="button"    
-        tabIndex={0}
+        onClick={onClose}
     >
       <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 classes = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
+  const dialogClassNames = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };
@@ -93,8 +93,10 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
-  const wrapperClasses = classnames(
+  const classes = classnames(
     buildCss("pb_dialog_wrapper"),
+    globalProps(props),
+    className
   );
 
   const [triggerOpened, setTriggerOpened] = useState(false),
@@ -171,13 +173,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={wrapperClasses}
+          className={classes}
       >
         <Modal
             ariaHideApp={false}
-            className={classes}
+            className={dialogClassNames}
             closeTimeoutMS={200}
-            contentLabel="Dialog"
+            contentLabel="Minimal Modal Example"
             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, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
+    <%= pb_content_tag(: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/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_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_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