playbook_ui 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15233 → 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15237

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a988bf8c7d3f7dc24128ab71ff825edfaf0425e2c82854ee02b12f5876789207
-  data.tar.gz: 0627220e056eb624154ac9f6e2dd151d4009f35189bf25be5cc3ab7678e7fdc0
+  metadata.gz: 4fdf310b5d41f5febe313a89aee1640f92a2cba62520f40b70cf32633f4afbab
+  data.tar.gz: f1353fd541ac9ca745a651e048fa48561d66d7f070803a56de669727d657f096
 SHA512:
-  metadata.gz: fcd7d378e0be4204abdd7a5e5bc4842425c4cff7aa451109b802c254cf32de63b3972f5302af62142b62fe8b43711edb4fe0882fccac8313febe31ed23d662aa
-  data.tar.gz: b1df4f6521de4682521e52468a4a891f4e64fdb64abb09e7d495869c24dc64d946c9ff46732eddabe4decf9946c3707327e1be46c3bb6d5082203fb1a8a73815
+  metadata.gz: 33aec662586e2c66cb52ff826c245ad99993412ace4fef583bf10f9b028ec482737b345969d29a7148f9dc49f0ac29b6b7f39b0eb67e254b349d72da85caedc6
+  data.tar.gz: '09a023c64e2ea3cc00611965cc29382e6d27647ee96a26b7a743831f36f6cdc6d04204f4cc13ca1fb331951172691c361964aae54961a02000ffb0f298f89b71'

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

@@ -1,181 +1,25 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from '../utilities/object'
 
-const SELECTORS = {
-  kit: '[class^="pb_"][class*="_kit"]',
-  errorMessage: '.pb_body_kit_negative',
-
-  form: 'form[data-pb-form-validation="true"]',
-  requiredFields: 'input[required],textarea[required],select[required]',
-  phoneValidationError: '[data-pb-phone-validation-error="true"]',
-
-  errorParents: [
-    '.text_input_wrapper',
-    '.pb_select_kit_wrapper',
-    '.dropdown_wrapper',
-    '.input_wrapper',
-    '.pb_typeahead_wrapper',
-  ],
-  controlWrappers: [
-    '.dropdown_wrapper',
-    '.pb_select_kit_wrapper',
-    '.text_input_wrapper',
-  ],
-  kitFallbacks: [
-    '[data-pb-select]',
-    '[data-pb-date-picker]',
-    '[data-pb-typeahead-kit]',
-  ],
-  messageWrappers: [
-    '[data-validation-message]',
-    '[data-pb-select]',
-    '.dropdown_wrapper',
-    '.pb_select_kit_wrapper',
-  ],
-  reactTypeaheadRoots: [
-    '[data-pb-react-component="Typeahead"]',
-    '.pb_typeahead_kit.react-select',
-  ],
-}
-
-const ATTRS = {
-  message: 'data-pb-form-validation-message',
-  reused: 'data-pb-form-validation-message-reused',
-}
-
-const FIELD_EVENTS = ['change', 'valid', 'invalid']
-
-const closestAny = (el, selectors) => {
-  if (!el || !selectors) return null
-  for (const selector of selectors) {
-    const found = el.closest?.(selector)
-    if (found) return found
-  }
-  return null
-}
-
-const isReactTypeaheadField = (el) => {
-  return !!closestAny(el, SELECTORS.reactTypeaheadRoots)
-}
-
-const shouldSkipField = (field) => {
-  return (
-    isReactTypeaheadField(field) ||
-    !!field?.closest?.('.pb_phone_number_input, .pb_time_picker')
-  )
-}
-
-const getKitElement = (target) => {
-  return (
-    target.closest?.(SELECTORS.kit) ||
-    target.parentElement?.closest?.(SELECTORS.kit) ||
-    closestAny(target, SELECTORS.kitFallbacks) ||
-    null
-  )
-}
-
-const getControlWrapper = (target, kitElement) => {
-  const fromTarget = closestAny(target, SELECTORS.controlWrappers)
-  if (fromTarget) return fromTarget
-
-  if (!kitElement) return null
-  for (const selector of SELECTORS.controlWrappers) {
-    const found = kitElement.querySelector?.(selector)
-    if (found) return found
-  }
-
-  return null
-}
-
-const getErrorParent = (target, kitElement, parentElement) => {
-  const candidate =
-    closestAny(target, SELECTORS.errorParents) ||
-    kitElement ||
-    parentElement
-
-  if (!candidate) return null
-
-  if (
-    kitElement &&
-    candidate &&
-    candidate !== kitElement &&
-    !kitElement.contains(candidate)
-  ) {
-    return kitElement
-  }
-
-  return candidate
-}
-
-const getValidationMessage = (target, kitElement) => {
-  const fromTarget = target.dataset?.message || target.dataset?.validationMessage
-
-  const wrapperWithMessage = closestAny(target, SELECTORS.messageWrappers)
-  const fromWrapper = wrapperWithMessage?.dataset?.validationMessage
-
-  const fromKit = kitElement?.dataset?.validationMessage
-
-  return fromTarget || fromWrapper || fromKit || ''
-}
-
-const hasNewRequiredFields = (mutations) => {
-  return mutations.some((mutation) => {
-    return Array.from(mutation.addedNodes || []).some((node) => {
-      if (!(node instanceof Element)) return false
-      if (node.matches && node.matches(SELECTORS.requiredFields)) return true
-      return !!node.querySelector?.(SELECTORS.requiredFields)
-    })
-  })
-}
-
-const createErrorMessageContainer = (doc = document) => {
-  const errorContainer = doc.createElement('div')
-  const kitClassName = SELECTORS.errorMessage.replace(/\./, '')
-  errorContainer.classList.add(kitClassName)
-  errorContainer.setAttribute(ATTRS.message, 'true')
-  errorContainer.setAttribute('role', 'alert')
-  errorContainer.setAttribute('aria-live', 'polite')
-  return errorContainer
-}
-
-const findOrCreateErrorMessageElement = (errorParent) => {
-  if (!errorParent) return null
-  let errorMessageElement = errorParent.querySelector(`[${ATTRS.message}="true"]`)
-  if (errorMessageElement) return errorMessageElement
-
-  const existingEmpty = Array.from(errorParent.querySelectorAll(SELECTORS.errorMessage)).find((el) => {
-    return (el.textContent || '').trim() === ''
-  })
-
-  if (existingEmpty) {
-    existingEmpty.setAttribute(ATTRS.message, 'true')
-    existingEmpty.setAttribute(ATTRS.reused, 'true')
-    return existingEmpty
-  }
-
-  errorMessageElement = createErrorMessageContainer(errorParent.ownerDocument || document)
-  errorParent.appendChild(errorMessageElement)
-  return errorMessageElement
-}
-
-const clearOurErrorMessage = (errorParent) => {
-  if (!errorParent) return
-  const messageEl = errorParent.querySelector(`[${ATTRS.message}="true"]`)
-  if (!messageEl) return
-
-  const reused = messageEl.getAttribute(ATTRS.reused) === 'true'
-  if (reused) {
-    messageEl.textContent = ''
-    messageEl.removeAttribute(ATTRS.message)
-    messageEl.removeAttribute(ATTRS.reused)
-  } else {
-    messageEl.remove()
-  }
-}
-
+// Kit selectors
+const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'
+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 FORM_VALIDATION_MESSAGE_ATTR = 'data-pb-form-validation-message'
+const FORM_VALIDATION_MESSAGE_REUSED_ATTR = 'data-pb-form-validation-message-reused'
+
+const FIELD_EVENTS = [
+  'change',
+  'valid',
+  'invalid',
+]
 class PbFormValidation extends PbEnhancedElement {
   static get selector() {
-    return SELECTORS.form
+    return FORM_SELECTOR
   }
 
   static start() {
@@ -193,7 +37,7 @@ class PbFormValidation extends PbEnhancedElement {
     }, 100)
 
     this.mutationObserver = new MutationObserver((mutations) => {
-      if (!hasNewRequiredFields(mutations)) return
+      if (!this.hasNewRequiredFields(mutations)) return
       this.debouncedBindValidationListeners()
     })
     this.mutationObserver.observe(this.element, { childList: true, subtree: true })
@@ -218,10 +62,27 @@ class PbFormValidation extends PbEnhancedElement {
     let foundInvalid = false
 
     this.formValidationFields.forEach((field) => {
-      if (shouldSkipField(field)) return
+      if (this.isReactTypeaheadField(field)) return
+
+      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
+      if (isPhoneNumberInput) return
+
+      const isTimePickerInput = field.closest('.pb_time_picker')
+      if (isTimePickerInput) return
+
+      field.setCustomValidity('')
+      const kitElement = this.getKitElement(field)
+
+      if (field.validity.valid) {
+        this.clearError(field)
+        return
+      }
 
-      const isValid = this.validateField(field)
-      if (!isValid) foundInvalid = true
+      const message = this.getValidationMessage(field, kitElement)
+      if (message) field.setCustomValidity(message)
+
+      foundInvalid = true
+      this.showValidationMessage(field)
     })
 
     return foundInvalid
@@ -235,7 +96,13 @@ class PbFormValidation extends PbEnhancedElement {
     this.formValidationFields.forEach((field) => {
       if (this.boundFields?.has(field)) return
 
-      if (shouldSkipField(field)) return
+      if (this.isReactTypeaheadField(field)) return
+
+      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
+      if (isPhoneNumberInput) return
+
+      const isTimePickerInput = field.closest('.pb_time_picker')
+      if (isTimePickerInput) return
 
       const debouncedHandler = debounce((event) => {
         this.validateFormField(event)
@@ -262,65 +129,172 @@ class PbFormValidation extends PbEnhancedElement {
 
     const { target } = event
 
-    this.validateField(target)
-  }
+    if (this.isReactTypeaheadField(target)) return
 
-  validateField(target) {
-    if (shouldSkipField(target)) return true
+    const kitElement = this.getKitElement(target)
 
-    const kitElement = getKitElement(target)
     target.setCustomValidity('')
 
-    if (target.validity.valid) {
+    const isValid = target.validity.valid
+
+    if (isValid) {
       this.clearError(target)
-      return true
+    } else {
+      const message = this.getValidationMessage(target, kitElement)
+      if (message) target.setCustomValidity(message)
+      this.showValidationMessage(target)
     }
-
-    const message = getValidationMessage(target, kitElement)
-    if (message) target.setCustomValidity(message)
-    this.showValidationMessage(target)
-    return false
   }
 
   showValidationMessage(target) {
     const { parentElement } = target
-    const kitElement = getKitElement(target)
+    const kitElement = this.getKitElement(target)
+
+    const isPhoneNumberInput = kitElement?.classList?.contains('pb_phone_number_input') || false
+    const isTimePickerInput = kitElement?.classList?.contains('pb_time_picker') || false
 
     // ensure clean error message state
     this.clearError(target)
     if (kitElement) kitElement.classList.add('error')
 
-    const controlWrapper = getControlWrapper(target, kitElement)
+    const controlWrapper = this.getControlWrapper(target, kitElement)
     if (controlWrapper) controlWrapper.classList.add('error')
 
-    const errorParent = getErrorParent(target, kitElement, parentElement)
-    if (!errorParent) return
+    if (!isPhoneNumberInput && !isTimePickerInput) {
+      const errorParent = this.getErrorParent(target, kitElement, parentElement)
+      const message = this.getValidationMessage(target, kitElement) || target.validationMessage
+
+      let errorMessageElement = errorParent.querySelector(`[${FORM_VALIDATION_MESSAGE_ATTR}="true"]`)
+      if (!errorMessageElement) {
+        const existingEmpty = Array.from(errorParent.querySelectorAll(ERROR_MESSAGE_SELECTOR)).find((el) => {
+          return (el.textContent || '').trim() === ''
+        })
+        if (existingEmpty) {
+          errorMessageElement = existingEmpty
+          errorMessageElement.setAttribute(FORM_VALIDATION_MESSAGE_ATTR, 'true')
+          errorMessageElement.setAttribute(FORM_VALIDATION_MESSAGE_REUSED_ATTR, 'true')
+        }
+      }
+
+      if (!errorMessageElement) {
+        errorMessageElement = this.errorMessageContainer
+        errorParent.appendChild(errorMessageElement)
+      }
 
-    const message = getValidationMessage(target, kitElement) || target.validationMessage
-    const errorMessageElement = findOrCreateErrorMessageElement(errorParent)
-    if (!errorMessageElement) return
-    errorMessageElement.textContent = message
+      errorMessageElement.textContent = message
+    }
   }
 
   clearError(target) {
     const { parentElement } = target
-    const kitElement = getKitElement(target)
+    const kitElement = this.getKitElement(target)
     if (kitElement) kitElement.classList.remove('error')
 
-    const controlWrapper = getControlWrapper(target, kitElement)
+    const controlWrapper = this.getControlWrapper(target, kitElement)
     if (controlWrapper) controlWrapper.classList.remove('error')
 
-    const errorParent = getErrorParent(target, kitElement, parentElement)
-    if (!errorParent) return
-    clearOurErrorMessage(errorParent)
+    const errorParent = this.getErrorParent(target, kitElement, parentElement)
+    const messageEl = errorParent.querySelector(`[${FORM_VALIDATION_MESSAGE_ATTR}="true"]`)
+    if (messageEl) {
+      const reused = messageEl.getAttribute(FORM_VALIDATION_MESSAGE_REUSED_ATTR) === 'true'
+      if (reused) {
+        messageEl.textContent = ''
+        messageEl.removeAttribute(FORM_VALIDATION_MESSAGE_ATTR)
+        messageEl.removeAttribute(FORM_VALIDATION_MESSAGE_REUSED_ATTR)
+      } else {
+        messageEl.remove()
+      }
+    }
+  }
+
+  getErrorParent(target, kitElement, parentElement) {
+    const candidate =
+      target.closest('.text_input_wrapper') ||
+      target.closest('.pb_select_kit_wrapper') ||
+      target.closest('.dropdown_wrapper') ||
+      target.closest('.input_wrapper') ||
+      target.closest('.pb_typeahead_wrapper') ||
+      kitElement ||
+      parentElement
+
+    if (kitElement && candidate && candidate !== kitElement && !kitElement.contains(candidate)) {
+      return kitElement
+    }
+
+    return candidate
+  }
+
+  getControlWrapper(target, kitElement) {
+    return (
+      target.closest('.dropdown_wrapper') ||
+      target.closest('.pb_select_kit_wrapper') ||
+      target.closest('.text_input_wrapper') ||
+      kitElement?.querySelector?.('.dropdown_wrapper') ||
+      kitElement?.querySelector?.('.pb_select_kit_wrapper') ||
+      null
+    )
+  }
+
+  isReactTypeaheadField(el) {
+    return !!(
+      el?.closest?.('[data-pb-react-component="Typeahead"]') ||
+      el?.closest?.('.pb_typeahead_kit.react-select')
+    )
+  }
+
+  hasNewRequiredFields(mutations) {
+    return mutations.some((mutation) => {
+      return Array.from(mutation.addedNodes || []).some((node) => {
+        if (!(node instanceof Element)) return false
+        if (node.matches && node.matches(REQUIRED_FIELDS_SELECTOR)) return true
+        return !!node.querySelector?.(REQUIRED_FIELDS_SELECTOR)
+      })
+    })
+  }
+
+  getKitElement(target) {
+    return (
+      target.closest(KIT_SELECTOR) ||
+      target.parentElement?.closest(KIT_SELECTOR) ||
+      // Some kits don't expose a *_kit class but do expose data hooks.
+      target.closest('[data-pb-select]') ||
+      target.closest('[data-pb-date-picker]') ||
+      target.closest('[data-pb-typeahead-kit]') ||
+      null
+    )
+  }
+
+  getValidationMessage(target, kitElement) {
+    const fromTarget = target.dataset?.message || target.dataset?.validationMessage
+
+    const wrapperWithMessage =
+      target.closest?.('[data-validation-message]') ||
+      target.closest?.('[data-pb-select]') ||
+      target.closest?.('.dropdown_wrapper') ||
+      target.closest?.('.pb_select_kit_wrapper')
+    const fromWrapper = wrapperWithMessage?.dataset?.validationMessage
+
+    const fromKit = kitElement?.dataset?.validationMessage
+
+    return fromTarget || fromWrapper || fromKit || ''
   }
 
   hasPhoneNumberValidationErrors() {
-    const phoneNumberErrors = this.element.querySelectorAll(SELECTORS.phoneValidationError)
+    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)
+    errorContainer.setAttribute(FORM_VALIDATION_MESSAGE_ATTR, 'true')
+    errorContainer.setAttribute('role', 'alert')
+    errorContainer.setAttribute('aria-live', 'polite')
+    return errorContainer
+  }
   get formValidationFields() {
-    return this.element.querySelectorAll(SELECTORS.requiredFields)
+    return this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
   }
 }
 

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -55,6 +55,7 @@ sections:
       - table_with_clickable_rows
       - table_with_selectable_rows
       - table_with_filter_variant
+      - table_with_filter_variant_external_filter_rails
       - table_with_filter_variant_with_pagination
       - table_disable_hover
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.html.erb

@@ -0,0 +1,45 @@
+<%# External filter: capture any filter markup and pass it via the filter prop.
+    Use your own helper (e.g. a search/filter form) or pb_rails("filter") as shown here. %>
+<% users = [
+  { name: "Alex", role: "Engineer" },
+  { name: "Sam", role: "Designer" },
+  { name: "Jordan", role: "Manager" },
+] %>
+
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: {
+    id: "external-filter-demo",
+    template: "single",
+    results: 3,
+    background: false,
+    sort_menu: [
+      { item: "Name", link: "#", active: true, direction: "asc" },
+      { item: "Role", link: "#", active: false },
+    ],
+  }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("text_input", props: { label: "Role", placeholder: "e.g. Engineer, Designer" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "Table with External Filter",
+  filter: filter_output,
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Role" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell") { user[:name] } %>
+        <%= pb_rails("table/table_cell") { user[:role] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md

@@ -0,0 +1,39 @@
+Use the **"with_filter"** variant with an **external filter** (Option B): pass pre-rendered filter markup via the `filter` prop. Same layout as Variant with Filter (card, title, separator, flex); only the filter slot is supplied by you. Use this when you need:
+
+- **Manual filter submission** – Apply / Filter button instead of automatic application
+- **Full control** – Over filter props, template, sort menu, and submission
+- **Custom or app-specific filter helpers** – Any helper that returns filter markup (e.g. search/filter forms)
+
+#### Required props
+
+- `variant: "with_filter"`
+- `filter` – Pre-rendered filter HTML (e.g. from `capture { ... }`)
+
+When `filter` is present, `filter_content` and `filter_props` are ignored.
+
+#### How to do it
+
+1. **Render your filter** (e.g. `pb_rails("filter", ...)` or any helper that returns filter markup).
+2. **Capture the output** with `capture do ... end`.
+3. **Pass it to the Table** as the `filter` prop.
+
+**Example (generic pattern):**
+
+```erb
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: { template: "single", results: 10, background: false }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "My Table",
+  filter: filter_output,
+}) do %>
+  <%# table_head / table_body ... %>
+<% end %>
+```
+
+For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md

@@ -26,8 +26,9 @@ The Table kit automatically sets these Filter defaults (which you can override v
 - `min_width: "xs"`
 - `popover_props: { width: "350px" }`
 
+Alternatively, you can pass pre-rendered filter markup via the `filter` prop (e.g. for manual submission or custom filter helpers)—scroll down for that approach.
 
 **IMPORTANT NOTE**: 
 The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
 
-If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrating in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).
+If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrated in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).

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

@@ -41,6 +41,7 @@ examples:
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant_rails: Variant with Filter
+    - table_with_filter_variant_external_filter_rails: Variant with Filter (External Filter)
     - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
     - table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
 

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -16,7 +16,10 @@
       flex_direction: "column",
       gap: "none"
     }) do %>
-      <% if object.filter_content.present? %>
+      <% has_filter = object.filter.present? || object.filter_content.present? %>
+      <% if object.filter.present? %>
+        <%= object.filter %>
+      <% elsif object.filter_content.present? %>
         <%
           default_filter_props = {
             background: false,
@@ -31,7 +34,7 @@
           <%= object.filter_content %>
         <% end %>
       <% end %>
-      <%= pb_rails("section_separator") if object.filter_content.present? %>
+      <%= pb_rails("section_separator") if has_filter %>
       <% if object.pagination.present? %>
         <%= object.pagination %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_table/table.rb

@@ -46,6 +46,10 @@ module Playbook
       prop :filter_props, type: Playbook::Props::HashProp,
                           default: {}
       prop :filter_content
+      # Pre-rendered filter slot (e.g. output of capture { your_filter_helper }).
+      # When present, this is rendered as-is; filter_content and filter_props are ignored.
+      # Use this for manual filter submission or app-specific filter helpers.
+      prop :filter
       prop :pagination
       prop :title, type: Playbook::Props::String,
                    default: nil

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -21,7 +21,8 @@
 }
 
 @mixin hover-underline {
-  .hover_underline:hover {
+  .hover_underline:hover,
+  .group_hover:hover .group_hover.hover_underline {
     text-decoration: underline;
     transition: text-decoration $transition-speed ease;
   }
@@ -29,11 +30,13 @@
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .hover_background-#{"" + $name}:hover {
+      .hover_background-#{"" + $name}:hover,
+      .group_hover:hover .group_hover.hover_background-#{"" + $name} {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
-      .hover_color-#{"" + $name}:hover {
+      .hover_color-#{"" + $name}:hover,
+      .group_hover:hover .group_hover.hover_color-#{"" + $name} {
         color: $color !important;
         transition: color $transition-speed ease;
       }