playbook_ui 14.8.0.pre.alpha.PBNTR713dropdowncustomtriggerbug4696 → 14.8.0.pre.alpha.PLAY1598floatinguiupgrade4563
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +2 -2
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +4 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +7 -84
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +0 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +1 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +4 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +2 -13
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -63
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +24 -103
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -2
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -47
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -59
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -3
- data/app/pb_kits/playbook/pb_typeahead/index.ts +3 -29
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -4
- data/app/pb_kits/playbook/utilities/_max_width.scss +0 -4
- data/app/pb_kits/playbook/utilities/_min_width.scss +1 -1
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +0 -24
- data/dist/chunks/_typeahead-DUfnbpvK.js +22 -0
- data/dist/chunks/_weekday_stacked-CFiZk2PV.js +45 -0
- data/dist/chunks/{lib-SyD3buPZ.js → lib-BC6ESsxG.js} +1 -1
- data/dist/chunks/{pb_form_validation-Dt8UJgrJ.js → pb_form_validation-B_Z9rEbg.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/classnames.rb +0 -3
- data/lib/playbook/forms/builder/typeahead_field.rb +0 -13
- data/lib/playbook/kit_base.rb +1 -16
- data/lib/playbook/version.rb +1 -1
- metadata +6 -16
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +0 -87
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +0 -2
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +0 -4
- data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +0 -18
- data/app/pb_kits/playbook/tokens/_height.scss +0 -19
- data/app/pb_kits/playbook/tokens/exports/_height.module.scss +0 -37
- data/app/pb_kits/playbook/utilities/_height.scss +0 -33
- data/dist/chunks/_typeahead-C8Q_fFYF.js +0 -22
- data/dist/chunks/_weekday_stacked-CUJfwh5E.js +0 -45
- data/lib/playbook/height.rb +0 -29
- data/lib/playbook/max_height.rb +0 -29
- data/lib/playbook/min_height.rb +0 -29
@@ -4,12 +4,11 @@ import { debounce } from 'lodash'
|
|
4
4
|
export default class PbTypeahead extends PbEnhancedElement {
|
5
5
|
_searchInput: HTMLInputElement
|
6
6
|
_resultsElement: HTMLElement
|
7
|
-
_debouncedSearch:
|
7
|
+
_debouncedSearch: Function
|
8
8
|
_resultsLoadingIndicator: HTMLElement
|
9
9
|
_resultOptionTemplate: HTMLElement
|
10
10
|
_resultsOptionCache: Map<string, Array<DocumentFragment>>
|
11
11
|
_searchContext: string
|
12
|
-
_validSelection: boolean
|
13
12
|
|
14
13
|
static get selector() {
|
15
14
|
return '[data-pb-typeahead-kit]'
|
@@ -87,9 +86,6 @@ export default class PbTypeahead extends PbEnhancedElement {
|
|
87
86
|
const resultOption = (event.target as Element).closest('[data-result-option-item]')
|
88
87
|
if (!resultOption) return
|
89
88
|
|
90
|
-
this._validSelection = true
|
91
|
-
this.removeValidationError()
|
92
|
-
|
93
89
|
this.resultsCacheClear()
|
94
90
|
this.searchInputClear()
|
95
91
|
this.clearResults()
|
@@ -97,28 +93,6 @@ export default class PbTypeahead extends PbEnhancedElement {
|
|
97
93
|
this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
|
98
94
|
}
|
99
95
|
|
100
|
-
removeValidationError() {
|
101
|
-
const inputWrapper = this.searchInput.closest('.text_input_wrapper')
|
102
|
-
if (inputWrapper) {
|
103
|
-
const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
|
104
|
-
if (errorMessage) {
|
105
|
-
errorMessage.style.display = 'none'
|
106
|
-
}
|
107
|
-
this.searchInput.classList.remove('error')
|
108
|
-
}
|
109
|
-
}
|
110
|
-
|
111
|
-
showValidationError() {
|
112
|
-
const inputWrapper = this.searchInput.closest('.text_input_wrapper')
|
113
|
-
if (inputWrapper) {
|
114
|
-
const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
|
115
|
-
if (errorMessage) {
|
116
|
-
errorMessage.style.display = 'block'
|
117
|
-
}
|
118
|
-
this.searchInput.classList.add('error')
|
119
|
-
}
|
120
|
-
}
|
121
|
-
|
122
96
|
clearResults() {
|
123
97
|
this.resultsElement.innerHTML = ''
|
124
98
|
}
|
@@ -227,8 +201,8 @@ export default class PbTypeahead extends PbEnhancedElement {
|
|
227
201
|
}
|
228
202
|
|
229
203
|
toggleResultsLoadingIndicator(visible: boolean) {
|
230
|
-
|
204
|
+
var visibilityProperty = '0'
|
231
205
|
if (visible) visibilityProperty = '1'
|
232
206
|
this.resultsLoadingIndicator.style.opacity = visibilityProperty
|
233
207
|
}
|
234
|
-
}
|
208
|
+
}
|
@@ -17,14 +17,11 @@
|
|
17
17
|
<%= pb_rails("text_input", props: {
|
18
18
|
type: "search",
|
19
19
|
input_options: object.input_options,
|
20
|
+
label: object.label,
|
20
21
|
name: object.name,
|
21
22
|
value: object.value,
|
22
23
|
placeholder: object.placeholder,
|
23
24
|
margin_bottom: "none",
|
24
|
-
required: object.required,
|
25
|
-
validation: object.validation,
|
26
|
-
label: object.label,
|
27
|
-
id: object.input_options[:id],
|
28
25
|
}) %>
|
29
26
|
<%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
|
30
27
|
<% end %>
|
@@ -36,4 +33,4 @@
|
|
36
33
|
<% end %>
|
37
34
|
</template>
|
38
35
|
<% end %>
|
39
|
-
<% end %>
|
36
|
+
<% end %>
|
@@ -40,10 +40,6 @@ module Playbook
|
|
40
40
|
prop :pill_color, type: Playbook::Props::Enum,
|
41
41
|
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],
|
42
42
|
default: "primary"
|
43
|
-
prop :required, type: Playbook::Props::Boolean,
|
44
|
-
default: false
|
45
|
-
prop :validation, type: Playbook::Props::HashProp,
|
46
|
-
default: {}
|
47
43
|
|
48
44
|
def classname
|
49
45
|
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
@@ -361,30 +361,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
361
361
|
css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
|
362
362
|
return css.trimEnd()
|
363
363
|
},
|
364
|
-
minHeightProps: ({ minHeight }: MinHeight) => {
|
365
|
-
const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
|
366
|
-
if (heightValues.includes(minHeight)) {
|
367
|
-
let css = ''
|
368
|
-
css += minHeight ? `min_height_${filterClassName(minHeight)} ` : ''
|
369
|
-
return css.trimEnd()
|
370
|
-
}
|
371
|
-
},
|
372
|
-
maxHeightProps: ({ maxHeight }: MaxHeight) => {
|
373
|
-
const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
|
374
|
-
if (heightValues.includes(maxHeight)) {
|
375
|
-
let css = ''
|
376
|
-
css += maxHeight ? `max_height_${filterClassName(maxHeight)} ` : ''
|
377
|
-
return css.trimEnd()
|
378
|
-
}
|
379
|
-
},
|
380
|
-
heightProps: ({ height }: Height) => {
|
381
|
-
const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
|
382
|
-
if (heightValues.includes(height)) {
|
383
|
-
let css = ''
|
384
|
-
css += height ? `height_${filterClassName(height)} ` : ''
|
385
|
-
return css.trimEnd()
|
386
|
-
}
|
387
|
-
},
|
388
364
|
zIndexProps: (zIndex: ZIndex) => {
|
389
365
|
let css = ''
|
390
366
|
Object.entries(zIndex).forEach((zIndexEntry) => {
|