playbook_ui 14.2.0 → 14.2.1.pre.alpha.PBNTR479removeextraspacingfromradiochildren3671
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +7 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +13 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +8 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +23 -16
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
- data/dist/chunks/{_typeahead-Cq7RLPBA.js → _typeahead-DfMKlsoq.js} +1 -1
- data/dist/chunks/{_weekday_stacked-Cykj5kLZ.js → _weekday_stacked-DWwxor7z.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/version.rb +2 -2
- metadata +9 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a098ecd4904a9a1556b4ca07981470f95fe8e8fab7cc23a1233757a2e464eeec
|
|
4
|
+
data.tar.gz: 32bff33341da40b5eb9fbb9181e186dd599b0462ead7718006e8321dc4b4d8d7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 703269f687eaa900e408827c04ac3ac320c4336ca27fb4d2994d89ff2bba1743d9aa106ebf1e462f9b0946371dce790b9b239ccc67dd1068330358c467ba4726
|
|
7
|
+
data.tar.gz: 9a76788c8ad4f8d7a57af8704847ccfc01a3141ad7e92eb8547f6e10269355cad762e4c54804249217b2c165ebf9d567db91f23635141cd837639dae8275262c
|
|
@@ -60,6 +60,7 @@ $flag-min-resolution: 192dpi;
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.iti__flag {
|
|
63
|
+
background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
|
|
63
64
|
border-radius: 1px;
|
|
64
65
|
}
|
|
65
66
|
|
|
@@ -196,4 +197,10 @@ $flag-min-resolution: 192dpi;
|
|
|
196
197
|
}
|
|
197
198
|
}
|
|
198
199
|
}
|
|
200
|
+
|
|
201
|
+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
|
|
202
|
+
.iti__flag {
|
|
203
|
+
background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
|
|
204
|
+
}
|
|
205
|
+
}
|
|
199
206
|
}
|
|
@@ -107,4 +107,17 @@ test('should pass className prop', () => {
|
|
|
107
107
|
|
|
108
108
|
const kit = screen.getByTestId('typeahead-test')
|
|
109
109
|
expect(kit).toHaveClass(className)
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
test('typeahead textinput has mb_sm class by default', () => {
|
|
113
|
+
render(
|
|
114
|
+
<Typeahead
|
|
115
|
+
data={{ testid: 'default-mb-test' }}
|
|
116
|
+
options={options}
|
|
117
|
+
/>
|
|
118
|
+
)
|
|
119
|
+
|
|
120
|
+
const kit = screen.getByTestId('default-mb-test')
|
|
121
|
+
const textInput = kit.querySelector(".pb_text_input_kit")
|
|
122
|
+
expect(textInput).toHaveClass("mb_sm")
|
|
110
123
|
})
|
|
@@ -45,6 +45,7 @@ type TypeaheadProps = {
|
|
|
45
45
|
getOptionLabel?: string | (() => any),
|
|
46
46
|
getOptionValue?: string | (() => any),
|
|
47
47
|
name?: string,
|
|
48
|
+
marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
|
|
48
49
|
} & GlobalProps
|
|
49
50
|
|
|
50
51
|
export type SelectValueType = {
|
|
@@ -76,12 +77,18 @@ const Typeahead = ({
|
|
|
76
77
|
htmlOptions = {},
|
|
77
78
|
id,
|
|
78
79
|
loadOptions = noop,
|
|
80
|
+
marginBottom = "sm",
|
|
79
81
|
...props
|
|
80
82
|
}: TypeaheadProps) => {
|
|
81
83
|
const selectProps = {
|
|
82
84
|
cacheOptions: true,
|
|
83
85
|
components: {
|
|
84
|
-
Control
|
|
86
|
+
Control: (controlProps: any) => (
|
|
87
|
+
<Control
|
|
88
|
+
{...controlProps}
|
|
89
|
+
marginBottom={marginBottom}
|
|
90
|
+
/>
|
|
91
|
+
),
|
|
85
92
|
ClearIndicator,
|
|
86
93
|
IndicatorsContainer,
|
|
87
94
|
IndicatorSeparator: null as null,
|
|
@@ -6,23 +6,30 @@ import TextInput from '../../pb_text_input/_text_input'
|
|
|
6
6
|
|
|
7
7
|
type Props = {
|
|
8
8
|
selectProps: any,
|
|
9
|
+
marginBottom?: string,
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
const TypeaheadControl = (props: Props) =>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
12
|
+
const TypeaheadControl = (props: Props) => {
|
|
13
|
+
const { selectProps, marginBottom } = props
|
|
14
|
+
const { dark, error, label } = selectProps
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<div className="pb_typeahead_wrapper">
|
|
18
|
+
<TextInput
|
|
19
|
+
dark={dark}
|
|
20
|
+
error={error}
|
|
21
|
+
label={label}
|
|
22
|
+
marginBottom={marginBottom}
|
|
23
|
+
>
|
|
24
|
+
<Flex>
|
|
25
|
+
<components.Control
|
|
26
|
+
className="text_input"
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
</Flex>
|
|
30
|
+
</TextInput>
|
|
31
|
+
</div>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
27
34
|
|
|
28
35
|
export default TypeaheadControl
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
+
{ label: 'Red', value: '#FF0000' },
|
|
5
|
+
{ label: 'Green', value: '#00FF00' },
|
|
6
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
+
]
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("typeahead", props: {
|
|
11
|
+
id: "typeahead-default",
|
|
12
|
+
placeholder: "All Colors",
|
|
13
|
+
options: options,
|
|
14
|
+
label: "None",
|
|
15
|
+
name: :foo,
|
|
16
|
+
is_multi: false,
|
|
17
|
+
margin_bottom: "none",
|
|
18
|
+
})
|
|
19
|
+
%>
|
|
20
|
+
<%= pb_rails("typeahead", props: {
|
|
21
|
+
id: "typeahead-default",
|
|
22
|
+
placeholder: "All Colors",
|
|
23
|
+
options: options,
|
|
24
|
+
label: "XXS",
|
|
25
|
+
name: :foo,
|
|
26
|
+
is_multi: false,
|
|
27
|
+
margin_bottom: "xxs",
|
|
28
|
+
})
|
|
29
|
+
%>
|
|
30
|
+
<%= pb_rails("typeahead", props: {
|
|
31
|
+
id: "typeahead-default",
|
|
32
|
+
placeholder: "All Colors",
|
|
33
|
+
options: options,
|
|
34
|
+
label: "XS",
|
|
35
|
+
name: :foo,
|
|
36
|
+
is_multi: false,
|
|
37
|
+
margin_bottom: "xs",
|
|
38
|
+
})
|
|
39
|
+
%>
|
|
40
|
+
<%= pb_rails("typeahead", props: {
|
|
41
|
+
id: "typeahead-default",
|
|
42
|
+
placeholder: "All Colors",
|
|
43
|
+
options: options,
|
|
44
|
+
label: "Default - SM",
|
|
45
|
+
name: :foo,
|
|
46
|
+
is_multi: false,
|
|
47
|
+
})
|
|
48
|
+
%>
|
|
49
|
+
<%= pb_rails("typeahead", props: {
|
|
50
|
+
id: "typeahead-default",
|
|
51
|
+
placeholder: "All Colors",
|
|
52
|
+
options: options,
|
|
53
|
+
label: "MD",
|
|
54
|
+
name: :foo,
|
|
55
|
+
is_multi: false,
|
|
56
|
+
margin_bottom: "md",
|
|
57
|
+
})
|
|
58
|
+
%>
|
|
59
|
+
<%= pb_rails("typeahead", props: {
|
|
60
|
+
id: "typeahead-default",
|
|
61
|
+
placeholder: "All Colors",
|
|
62
|
+
options: options,
|
|
63
|
+
label: "LG",
|
|
64
|
+
name: :foo,
|
|
65
|
+
is_multi: false,
|
|
66
|
+
margin_bottom: "lg",
|
|
67
|
+
})
|
|
68
|
+
%>
|
|
69
|
+
<%= pb_rails("typeahead", props: {
|
|
70
|
+
id: "typeahead-default",
|
|
71
|
+
placeholder: "All Colors",
|
|
72
|
+
options: options,
|
|
73
|
+
label: "XL",
|
|
74
|
+
name: :foo,
|
|
75
|
+
is_multi: false,
|
|
76
|
+
margin_bottom: "xl",
|
|
77
|
+
})
|
|
78
|
+
%>
|
|
79
|
+
|
|
80
|
+
<%= javascript_tag defer: "defer" do %>
|
|
81
|
+
document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
|
|
82
|
+
console.log('Single Option selected')
|
|
83
|
+
console.dir(event.detail)
|
|
84
|
+
})
|
|
85
|
+
document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
|
|
86
|
+
console.log('All options cleared')
|
|
87
|
+
})
|
|
88
|
+
<% end %>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Typeahead from '../_typeahead'
|
|
4
|
+
|
|
5
|
+
const options = [
|
|
6
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
7
|
+
{ label: 'Red', value: '#FF0000' },
|
|
8
|
+
{ label: 'Green', value: '#00FF00' },
|
|
9
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
10
|
+
]
|
|
11
|
+
|
|
12
|
+
const TypeaheadMarginBottom = (props) => {
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<Typeahead
|
|
16
|
+
label="None"
|
|
17
|
+
marginBottom="none"
|
|
18
|
+
options={options}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
<Typeahead
|
|
22
|
+
label="XXS"
|
|
23
|
+
marginBottom="xxs"
|
|
24
|
+
options={options}
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
<Typeahead
|
|
28
|
+
label="XS"
|
|
29
|
+
marginBottom="xs"
|
|
30
|
+
options={options}
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
<Typeahead
|
|
34
|
+
label="Default - SM"
|
|
35
|
+
options={options}
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
<Typeahead
|
|
39
|
+
label="MD"
|
|
40
|
+
marginBottom="md"
|
|
41
|
+
options={options}
|
|
42
|
+
{...props}
|
|
43
|
+
/>
|
|
44
|
+
<Typeahead
|
|
45
|
+
label="LG"
|
|
46
|
+
marginBottom="lg"
|
|
47
|
+
options={options}
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
<Typeahead
|
|
51
|
+
label="XL"
|
|
52
|
+
marginBottom="xl"
|
|
53
|
+
options={options}
|
|
54
|
+
{...props}
|
|
55
|
+
/>
|
|
56
|
+
</>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default TypeaheadMarginBottom
|
|
@@ -9,6 +9,7 @@ examples:
|
|
|
9
9
|
- typeahead_inline: Inline
|
|
10
10
|
- typeahead_multi_kit: Multi Kit Options
|
|
11
11
|
- typeahead_error_state: Error State
|
|
12
|
+
- typeahead_margin_bottom: Margin Bottom
|
|
12
13
|
|
|
13
14
|
react:
|
|
14
15
|
- typeahead_default: Default
|
|
@@ -23,3 +24,4 @@ examples:
|
|
|
23
24
|
- typeahead_async_createable: Createable (+ Async Data)
|
|
24
25
|
- typeahead_error_state: Error State
|
|
25
26
|
- typeahead_custom_menu_list: Custom MenuList
|
|
27
|
+
- typeahead_margin_bottom: Margin Bottom
|
|
@@ -10,3 +10,4 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
|
|
|
10
10
|
export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
|
|
11
11
|
export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
|
|
12
12
|
export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
|
|
13
|
+
export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
label: object.label,
|
|
21
21
|
name: object.name,
|
|
22
22
|
value: object.value,
|
|
23
|
-
placeholder: object.placeholder
|
|
23
|
+
placeholder: object.placeholder,
|
|
24
|
+
margin_bottom: "none",
|
|
24
25
|
}) %>
|
|
25
26
|
<%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
|
|
26
27
|
<% end %>
|
|
@@ -14,6 +14,9 @@ module Playbook
|
|
|
14
14
|
default: false
|
|
15
15
|
prop :label
|
|
16
16
|
prop :load_options
|
|
17
|
+
prop :margin_bottom, type: Playbook::Props::Enum,
|
|
18
|
+
values: %w[none xxs xs sm md lg xl],
|
|
19
|
+
default: "sm"
|
|
17
20
|
prop :multi_kit, type: Playbook::Props::String,
|
|
18
21
|
default: ""
|
|
19
22
|
prop :name
|
|
@@ -36,7 +39,8 @@ module Playbook
|
|
|
36
39
|
prop :value
|
|
37
40
|
|
|
38
41
|
def classname
|
|
39
|
-
|
|
42
|
+
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
|
43
|
+
generate_classname("pb_typeahead_kit") + default_margin_bottom
|
|
40
44
|
end
|
|
41
45
|
|
|
42
46
|
def inline_class
|
|
@@ -65,6 +69,7 @@ module Playbook
|
|
|
65
69
|
inline: inline,
|
|
66
70
|
isMulti: is_multi,
|
|
67
71
|
label: label,
|
|
72
|
+
marginBottom: margin_bottom,
|
|
68
73
|
multiKit: multi_kit,
|
|
69
74
|
name: name,
|
|
70
75
|
options: options,
|