playbook_ui 14.8.0.pre.alpha.PLAY1649rolloutheightglobalprops4635 → 14.8.0.pre.alpha.PLAY16254545

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -4,12 +4,11 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: () => void
+  _debouncedSearch: Function
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
-  _validSelection: boolean
 
   static get selector() {
     return '[data-pb-typeahead-kit]'
@@ -87,9 +86,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
-    this._validSelection = true
-    this.removeValidationError()
-
     this.resultsCacheClear()
     this.searchInputClear()
     this.clearResults()
@@ -97,28 +93,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
   }
 
-  removeValidationError() {
-    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
-    if (inputWrapper) {
-      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
-      if (errorMessage) {
-        errorMessage.style.display = 'none'
-      }
-      this.searchInput.classList.remove('error')
-    }
-  }
-
-  showValidationError() {
-    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
-    if (inputWrapper) {
-      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
-      if (errorMessage) {
-        errorMessage.style.display = 'block'
-      }
-      this.searchInput.classList.add('error')
-    }
-  }
-
   clearResults() {
     this.resultsElement.innerHTML = ''
   }
@@ -227,8 +201,8 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   toggleResultsLoadingIndicator(visible: boolean) {
-    let visibilityProperty = '0'
+    var visibilityProperty = '0'
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -17,14 +17,11 @@
       <%= pb_rails("text_input", props: {
         type: "search",
         input_options: object.input_options,
+        label: object.label,
         name: object.name,
         value: object.value,
         placeholder: object.placeholder,
         margin_bottom: "none",
-        required: object.required,
-        validation: object.validation,
-        label: object.label,
-        id: object.input_options[:id],
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
@@ -36,4 +33,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -40,10 +40,6 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
                         default: "primary"
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :validation, type: Playbook::Props::HashProp,
-                        default: {}
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

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

@@ -27,7 +27,3 @@
 .max_width_xxl {
   max-width: 1320px;
 }
-
-.width-resize {
-  resize: horizontal;
-}

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

@@ -40,6 +40,6 @@
   min-width: $container_100;
 }
 
-.width-resize {
+.minwidth-resize {
   resize: horizontal;
 }

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -7,6 +7,7 @@ export default [
   "right",
   "top",
   "hover",
+  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -361,30 +361,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
-  minHeightProps: ({ minHeight }: MinHeight) => {
-    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
-    if (heightValues.includes(minHeight)) {
-      let css = ''
-      css += minHeight ? `min_height_${filterClassName(minHeight)} ` : ''
-      return css.trimEnd()
-    }
-  },
-  maxHeightProps: ({ maxHeight }: MaxHeight) => {
-    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
-    if (heightValues.includes(maxHeight)) {
-      let css = ''
-      css += maxHeight ? `max_height_${filterClassName(maxHeight)} ` : ''
-      return css.trimEnd()
-    }
-  },
-  heightProps: ({ height }: Height) => {
-    const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
-    if (heightValues.includes(height)) {
-      let css = ''
-      css += height ? `height_${filterClassName(height)} ` : ''
-      return css.trimEnd()
-    }
-  },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''
     Object.entries(zIndex).forEach((zIndexEntry) => {