playbook_ui 15.3.0.pre.alpha.PLAY2407daterangeinlineshowcurrentyear12138 → 15.3.0.pre.alpha.PLAY2532flexboxdefaultresponsive12209

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef68e1457fd0fa0e1efec6094b2fb113462f44917cdb9f4885be0f7cdbc81a1c
-  data.tar.gz: ee84912b9294118d8ed7f639c5f1784f483acfb8e05c47ce410be1cdb4857c59
+  metadata.gz: ecaeedfc3646abb5883eb891aecf36eb72cf8ad4a68ec156157f528a911e86f5
+  data.tar.gz: b881dd8c740a311285a3e14319641433522541e540bd6aca45c785bb606bf1dd
 SHA512:
-  metadata.gz: b267bf7fff116ec91ebb65b970a62c0f995666bded6f1de8b3639066741f5045f3d626e49a79deda1ef4079e8b61f1205c9bec011ab3de7af42cb5084ad1467b
-  data.tar.gz: 5eb6308138222e39157c82ed3ccdb3c392bddd03008f82f8f3d97fcfd91fb7cd4737075c7c9c4afad0ee802b487f79db4bb4d5479b20e63d9598493a76f27e9d
+  metadata.gz: e5727fa5998bd2b4252189412c52361e75404db9b332b7607a5b399562a967f4c4728a06160cf8beb7a59625bd5e5fcdb88e5cfe6dde1aefc1a026c3d9821dc7
+  data.tar.gz: 1366e8eccd9c380487d851fcedff3c58dda1c60a780b473a358994b24c55ba60c98ffe6db893c7bc26b2b2ffb623438fd8f15072fdd6fcfe987a41ce0784c9e9

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -17,7 +17,7 @@ export const getRowColorClass = (
     (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
   );
 
-  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
+  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "pb-bg-row-white";
 }
 
 /**

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

@@ -51,7 +51,7 @@
     background-color: lighten($silver, $opacity_7);
   }
 
-  .bg-white {
+  .pb-bg-row-white {
     background-color: $white;
   }
 
@@ -278,7 +278,7 @@
         }
       }
 
-      &.bg-white {
+      &.pb-bg-row-white {
         td:first-child {
           background-color: $white;
         }
@@ -756,7 +756,7 @@
       border-bottom-color: $border_dark !important;
     }
 
-    .bg-white {
+    .pb-bg-row-white {
       background: $bg_dark_card;
     }
 
@@ -766,7 +766,7 @@
 
     // Dark mode virtualized rows
     .virtualized-table-row {
-      &.bg-white {
+      &.pb-bg-row-white {
         background: $bg_dark_card !important;
 
         td:first-child {

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -308,10 +308,10 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
+  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
   expect(subRow1).not.toBeInTheDocument()
   rowButton.click()
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 
@@ -328,13 +328,13 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
   const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
   expect(toggleButton).toBeInTheDocument();
 
-  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1");
+  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
   expect(subRow1).not.toBeInTheDocument();
 
   toggleButton.click();
 
   await waitFor(() => {
-    const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
+    const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
     expect(subRow).toBeInTheDocument();
   })
 })
@@ -385,7 +385,7 @@ test("expandControl prop works as expected", () => {
   render (<AdvancedTableExpandControl/>)
 
   const kit = screen.getByTestId(testId)
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js

@@ -51,7 +51,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
 
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
-        tr?.classList.toggle("bg-white", !rowCb.checked);
+        tr?.classList.toggle("pb-bg-row-white", !rowCb.checked);
       }
 
       if (allCb) {
@@ -62,7 +62,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
           cb.checked = checked;
           const tr = cb.closest("tr");
           tr?.classList.toggle("bg-row-selection", checked);
-          tr?.classList.toggle("bg-white", !checked);
+          tr?.classList.toggle("pb-bg-row-white", !checked);
           const id = cb.id;
           if (checked) this.selectedRows.add(id);
           else this.selectedRows.delete(id);

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -76,7 +76,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         // Only apply styling if the checkbox is inside a table row
         if (rowEl) {
           rowEl.classList.add("bg-row-selection");
-          rowEl.classList.remove("bg-white", "bg-silver");
+          rowEl.classList.remove("pb-bg-row-white", "bg-silver");
         }
       } else {
         // Only apply styling if the checkbox is inside a table row
@@ -85,9 +85,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
           
           if (this.isRowExpanded(rowEl)) {
             rowEl.classList.remove("bg-silver");
-            rowEl.classList.add("bg-white");
+            rowEl.classList.add("pb-bg-row-white");
           } else {
-            rowEl.classList.remove("bg-white");
+            rowEl.classList.remove("pb-bg-row-white");
             rowEl.classList.add("bg-silver");
           }
         }
@@ -120,7 +120,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (isChecked) {
       PbAdvancedTable.selectedRows.add(rowId);
       rowEl.classList.add("bg-row-selection");
-      rowEl.classList.remove("bg-white", "bg-silver");
+      rowEl.classList.remove("pb-bg-row-white", "bg-silver");
     } else {
       PbAdvancedTable.selectedRows.delete(rowId);
     }
@@ -130,9 +130,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
       if (this.isRowExpanded(rowEl)) {
         rowEl.classList.remove("bg-silver");
-        rowEl.classList.add("bg-white");
+        rowEl.classList.add("pb-bg-row-white");
       } else {
-        rowEl.classList.remove("bg-white");
+        rowEl.classList.remove("pb-bg-row-white");
         rowEl.classList.add("bg-silver");
       }
     }
@@ -407,7 +407,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     const row = this.element.closest("tr");
     if (row) {
       row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("bg-white", isVisible);
+      row.classList.toggle("pb-bg-row-white", isVisible);
     }
 
     this.addBorderRadiusOnLastVisibleRow();

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -52,7 +52,7 @@
     }
   }
 
-  .bg-white {
+  .pb-bg-row-white {
     td:first-child,
     .sticky-left {
       background-color: $bg-main;
@@ -63,7 +63,7 @@
     &.bg-silver td:first-child {
       background-color: $bg-secondary;
     }
-    &.bg-white td:first-child {
+    &.pb-bg-row-white td:first-child {
       background-color: $bg-main;
     }
     &.bg-row-selection td:first-child {

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -39,7 +39,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
+        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
       end
 
       def td_classname(column, index)

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -19,7 +19,6 @@ type DateRangeInlineProps = {
   icon?: boolean;
   id?: string;
   size?: "sm" | "xs";
-  showCurrentYear?: boolean;
   startDate?: Date;
 };
 
@@ -46,7 +45,6 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
     icon = false,
     size = "sm",
     startDate,
-    showCurrentYear = false,
   } = props;
 
   const dateInCurrentYear = () => {
@@ -62,10 +60,13 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   
   const renderTime = (date: Date) => {
-    const includeYear = showCurrentYear || !dateInCurrentYear();
     return (
       <time dateTime={dateTimeIso(date)}>
-        {` ${dateTimestamp(date, includeYear)} `}
+        {dateInCurrentYear() ? (
+          ` ${dateTimestamp(date, false)} `
+        ) : (
+          ` ${dateTimestamp(date, true)} `
+        )}
       </time>
     );
   };
@@ -82,8 +83,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             {icon && (
               <Caption 
                   dark={dark} 
-                  tag="span"
-              >
+                  tag="span">
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -96,14 +96,12 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Caption 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(startDate)}
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -114,8 +112,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(endDate)}
             </Caption>
           </>
@@ -127,8 +124,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
               <Body 
                   color={"light"} 
                   dark={dark}
-                  tag="span"
-              >
+                  tag="span">
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -141,15 +137,13 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Body 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(startDate)}
             </Body>
             <Body 
                 color={"light"} 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -160,8 +154,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Body>
             <Body 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -14,8 +14,7 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
+
       def classname
         generate_classname("pb_date_range_inline_kit", dark_class, align)
       end
@@ -39,12 +38,11 @@ module Playbook
       end
 
       def time_display(time)
-        include_year = show_current_year || !dates_in_current_year?
         content_tag(:time, datetime: time.to_iso) do
-          if include_year
-            "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
-          else
+          if dates_in_current_year?
             "#{time.to_month_downcase} #{time.to_day}"
+          else
+            "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
           end
         end
       end

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -111,23 +111,6 @@ describe("DateRangeInline Kit", () => {
         const text = kit.querySelector('.pb_caption_kit_md:first-child')
         expect(text.textContent).toEqual(" Jan 15 ")
     })
-
-    test("renders DateRangeInline with year when showCurrentYear is true", () => {
-        const currentYear = new Date().getFullYear()
-        render(
-            <DateRangeInline
-                data={{ testid: testId }}
-                endDate={new Date((`15 Aug ${currentYear}`))}
-                showCurrentYear
-                size="xs"
-                startDate={new Date(`15 Jan ${currentYear}`)}
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        const text = kit.querySelector('.pb_caption_kit_md:first-child')
-        expect(text.textContent).toEqual(` Jan 15, ${currentYear} `)
-    })
     
 
 })

data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md

@@ -1 +1 @@
-Use to display a date range.
+Use to display a date range. Year will not show if it is the current year.

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

@@ -2,12 +2,11 @@ examples:
   
   rails:
   - date_range_inline_default: Default
-  - date_range_inline_show_current_year: Show Current Year
+  
   
   react:
   - date_range_inline_default: Default
-  - date_range_inline_show_current_year: Show Current Year
-  
+
   swift:
   - date_range_inline_default_swift: Default
   - date_range_inline_props_swift: ""

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

@@ -1,2 +1 @@
 export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'
-export { default as DateRangeInlineShowCurrentYear } from './_date_range_inline_show_current_year.jsx'

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -8,13 +8,13 @@ const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
 // Validation selectors
 const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
 const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
+const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
 
 const FIELD_EVENTS = [
   'change',
   'valid',
   'invalid',
 ]
-
 class PbFormValidation extends PbEnhancedElement {
   static get selector() {
     return FORM_SELECTOR
@@ -22,12 +22,27 @@ class PbFormValidation extends PbEnhancedElement {
 
   connect() {
     this.formValidationFields.forEach((field) => {
+      // Skip phone number inputs - they handle their own validation
+      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
+      if (isPhoneNumberInput) return
+
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
         }, 250), false)
       })
     })
+
+    // Add event listener to check for phone number validation errors
+    this.element.addEventListener('submit', (event) => {
+      // Use setTimeout to ensure React state updates have completed
+      setTimeout(() => {
+        if (this.hasPhoneNumberValidationErrors()) {
+          event.preventDefault()
+          return false
+        }
+      }, 0)
+    })
   }
 
   validateFormField(event) {
@@ -45,40 +60,58 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+
+    // FIX: Add null check for kitElement
+    if (!kitElement) return
+
+    // Check if this is a phone number input
+    const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
 
     // ensure clean error message state
     this.clearError(target)
-    parentElement.closest(KIT_SELECTOR).classList.add('error')
+    kitElement.classList.add('error')
 
-    // set the error message element
-    const errorMessageContainer = this.errorMessageContainer
+    // Only add error message if it's NOT a phone number input
+    if (!isPhoneNumberInput) {
+      // set the error message element
+      const errorMessageContainer = this.errorMessageContainer
 
-    if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
 
-    errorMessageContainer.innerHTML = target.validationMessage
+      errorMessageContainer.innerHTML = target.validationMessage
 
-    // add the error message element to the dom tree
-    parentElement.appendChild(errorMessageContainer)
+      // add the error message element to the dom tree
+      parentElement.appendChild(errorMessageContainer)
+    }
   }
 
   clearError(target) {
     const { parentElement } = target
-    parentElement.closest(KIT_SELECTOR).classList.remove('error')
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+    // Remove error class from kit element
+    if (kitElement) kitElement.classList.remove('error')
+    // Remove error message from parent element
     const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
+  // Check if there are phone number input errors
+  hasPhoneNumberValidationErrors() {
+    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
+    return phoneNumberErrors.length > 0
+  }
+
   get errorMessageContainer() {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')
     errorContainer.classList.add(kitClassName)
     return errorContainer
   }
-
   get formValidationFields() {
     return this._formValidationFields =
       this._formValidationFields || this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
   }
 }
 
-window.PbFormValidation = PbFormValidation
+window.PbFormValidation = PbFormValidation