playbook_ui 14.4.0 → 14.5.0.pre.alpha.PBNTR374multilevelselectPOC3946
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 +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +23 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_button/_button.tsx +6 -2
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +17 -5
- data/app/pb_kits/playbook/pb_contact/contact.html.erb +14 -6
- data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
- data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -6
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +2 -7
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -3
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +6 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +6 -2
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +25 -0
- data/app/pb_kits/playbook/pb_drawer/_drawer.scss +465 -0
- data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +195 -0
- data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +3 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.rb +8 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +77 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +10 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -1
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +210 -232
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +107 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +108 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +10 -2
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +92 -33
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +62 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -5
- data/app/pb_kits/playbook/pb_select/_select.tsx +5 -2
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/select.rb +4 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +17 -13
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +14 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +6 -5
- 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/app/pb_kits/playbook/utilities/icons/allicons.tsx +136 -13
- data/app/pb_kits/playbook/utilities/icons/angle-down.svg +3 -0
- data/app/pb_kits/playbook/utilities/icons/envelope.svg +3 -0
- data/dist/chunks/_typeahead-DMIBeCYd.js +22 -0
- data/dist/chunks/_weekday_stacked-CviGlw2m.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/lib-CEpcaI8y.js +29 -0
- data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-D9zkwt2b.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +3 -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/pagination_renderer.rb +10 -2
- data/lib/playbook/pb_doc_helper.rb +5 -5
- data/lib/playbook/version.rb +2 -2
- metadata +34 -10
- data/dist/chunks/_typeahead-B2zRxReA.js +0 -22
- data/dist/chunks/_weekday_stacked-BIfZDNDm.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- data/dist/chunks/lib-D2U4I1U6.js +0 -16
@@ -1,28 +1,30 @@
|
|
1
|
-
/*eslint-disable react/no-multi-comp
|
1
|
+
/*eslint-disable react/no-multi-comp */
|
2
2
|
|
3
|
-
import React, { forwardRef } from 'react'
|
3
|
+
import React, { forwardRef, useRef } from 'react'
|
4
4
|
import Body from '../pb_body/_body'
|
5
|
+
import Flex from '../pb_flex/_flex'
|
5
6
|
import classnames from 'classnames'
|
6
7
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
7
8
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
8
9
|
|
9
10
|
type RadioProps = {
|
10
|
-
aria?: {[key: string]: string},
|
11
|
+
aria?: { [key: string]: string },
|
11
12
|
alignment?: string,
|
12
13
|
checked?: boolean,
|
13
14
|
children?: React.ReactChild[] | React.ReactChild,
|
15
|
+
customChildren?: boolean,
|
14
16
|
className?: string,
|
15
17
|
dark?: boolean,
|
16
|
-
data?: {[key: string]: string},
|
18
|
+
data?: { [key: string]: string },
|
17
19
|
disabled?: boolean,
|
18
20
|
error?: boolean,
|
19
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
21
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
|
20
22
|
id?: string,
|
21
23
|
label: string,
|
22
24
|
name?: string,
|
23
25
|
value?: string,
|
24
26
|
text?: string,
|
25
|
-
onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
|
27
|
+
onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
|
26
28
|
} & GlobalProps
|
27
29
|
|
28
30
|
const Radio = ({
|
@@ -30,10 +32,11 @@ const Radio = ({
|
|
30
32
|
alignment,
|
31
33
|
children,
|
32
34
|
className,
|
35
|
+
customChildren = false,
|
33
36
|
dark = false,
|
34
|
-
data = {},
|
35
37
|
disabled = false,
|
36
38
|
error = false,
|
39
|
+
data = {},
|
37
40
|
htmlOptions = {},
|
38
41
|
id,
|
39
42
|
label,
|
@@ -43,17 +46,28 @@ const Radio = ({
|
|
43
46
|
onChange = () => { void 0 },
|
44
47
|
...props
|
45
48
|
}: RadioProps, ref: any) => {
|
46
|
-
const
|
47
|
-
|
48
|
-
const
|
49
|
+
const radioRef = useRef(null);
|
50
|
+
|
51
|
+
const ariaProps = buildAriaProps(aria);
|
52
|
+
const dataProps = buildDataProps(data);
|
53
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
49
54
|
const classes = classnames(
|
50
|
-
buildCss('pb_radio_kit', alignment
|
51
|
-
dark ? 'dark'
|
55
|
+
buildCss('pb_radio_kit', alignment),
|
56
|
+
dark ? 'dark' : null,
|
57
|
+
error ? 'error' : null,
|
52
58
|
globalProps(props),
|
53
|
-
className
|
59
|
+
className
|
60
|
+
);
|
61
|
+
|
62
|
+
const classesCustom = classnames(
|
63
|
+
dark ? 'dark' : null,
|
64
|
+
error ? 'error' : null,
|
65
|
+
globalProps(props),
|
66
|
+
className
|
67
|
+
);
|
54
68
|
|
55
69
|
const displayRadio = (props: RadioProps & any) => {
|
56
|
-
if (children)
|
70
|
+
if (children && customChildren == false)
|
57
71
|
return (children)
|
58
72
|
else
|
59
73
|
return (
|
@@ -70,24 +84,69 @@ const Radio = ({
|
|
70
84
|
/>
|
71
85
|
)}
|
72
86
|
|
87
|
+
const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
|
88
|
+
if (event) {
|
89
|
+
const target = event.target as HTMLElement;
|
90
|
+
if (
|
91
|
+
target.id === 'pb-radio-children-wrapper' ||
|
92
|
+
target.closest('#pb-radio-children-wrapper')
|
93
|
+
) {
|
94
|
+
radioRef.current?.click();
|
95
|
+
}
|
96
|
+
}
|
97
|
+
};
|
98
|
+
|
73
99
|
return (
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
100
|
+
customChildren ? (
|
101
|
+
<Flex
|
102
|
+
{...ariaProps}
|
103
|
+
{...dataProps}
|
104
|
+
{...htmlProps}
|
105
|
+
align='center'
|
106
|
+
className={classesCustom}
|
107
|
+
cursor='pointer'
|
108
|
+
htmlFor={id}
|
109
|
+
htmlOptions={{
|
110
|
+
onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
|
111
|
+
handleContainerClick(event);
|
112
|
+
}) as unknown as () => void
|
113
|
+
}}
|
114
|
+
id="radio-container"
|
115
|
+
>
|
116
|
+
<label className={buildCss('pb_radio_kit', alignment)}>
|
117
|
+
<input
|
118
|
+
disabled={disabled}
|
119
|
+
id={id}
|
120
|
+
name={name}
|
121
|
+
onChange={onChange}
|
122
|
+
ref={radioRef}
|
123
|
+
type="radio"
|
124
|
+
value={value}
|
125
|
+
{...props}
|
126
|
+
/>
|
127
|
+
<span className="pb_radio_button" />
|
128
|
+
</label>
|
129
|
+
<div id="pb-radio-children-wrapper"> {children} </div>
|
130
|
+
</Flex>
|
131
|
+
) : (
|
132
|
+
<label
|
133
|
+
{...ariaProps}
|
134
|
+
{...dataProps}
|
135
|
+
{...htmlProps}
|
136
|
+
className={classes}
|
137
|
+
htmlFor={id}
|
138
|
+
>
|
139
|
+
<>{displayRadio(props)}</>
|
140
|
+
<span className="pb_radio_button" />
|
141
|
+
<Body
|
142
|
+
dark={dark}
|
143
|
+
status={error ? 'negative' : null}
|
144
|
+
text={label}
|
145
|
+
variant={null}
|
146
|
+
/>
|
147
|
+
</label>
|
148
|
+
)
|
149
|
+
);
|
150
|
+
};
|
92
151
|
|
93
|
-
export default forwardRef(Radio)
|
152
|
+
export default forwardRef(Radio);
|
@@ -10,6 +10,7 @@
|
|
10
10
|
<%= pb_rails("radio", props: {
|
11
11
|
custom_children: true,
|
12
12
|
label: "Select",
|
13
|
+
margin_bottom: "sm",
|
13
14
|
name: "Group1",
|
14
15
|
value: "Select",
|
15
16
|
}) do %>
|
@@ -22,6 +23,7 @@
|
|
22
23
|
<%= pb_rails("radio", props: {
|
23
24
|
custom_children: true,
|
24
25
|
label: "Typeahead",
|
26
|
+
margin_bottom: "sm",
|
25
27
|
name: "Group1",
|
26
28
|
value: "Typeahead",
|
27
29
|
}) do %>
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Radio from '../_radio'
|
3
|
+
import Select from '../../pb_select/_select'
|
4
|
+
import Typeahead from '../../pb_typeahead/_typeahead'
|
5
|
+
import Title from '../../pb_title/_title'
|
6
|
+
|
7
|
+
const RadioChildren = (props) => {
|
8
|
+
|
9
|
+
|
10
|
+
const options = [
|
11
|
+
{ label: 'Orange', value: 'Orange' },
|
12
|
+
{ label: 'Red', value: 'Red' },
|
13
|
+
{ label: 'Green', value: 'Green' },
|
14
|
+
{ label: 'Blue', value: 'Blue' },
|
15
|
+
]
|
16
|
+
|
17
|
+
return (
|
18
|
+
<div>
|
19
|
+
<Radio
|
20
|
+
customChildren
|
21
|
+
label="Select"
|
22
|
+
marginBottom="sm"
|
23
|
+
name="Group1"
|
24
|
+
tabIndex={0}
|
25
|
+
value="Select"
|
26
|
+
{...props}
|
27
|
+
>
|
28
|
+
<Select
|
29
|
+
marginBottom="none"
|
30
|
+
minWidth="xs"
|
31
|
+
options={options}
|
32
|
+
/>
|
33
|
+
</Radio>
|
34
|
+
<Radio
|
35
|
+
customChildren
|
36
|
+
label="Typeahead"
|
37
|
+
marginBottom="sm"
|
38
|
+
name="Group1"
|
39
|
+
tabIndex={0}
|
40
|
+
value="Typeahead"
|
41
|
+
{...props}
|
42
|
+
>
|
43
|
+
<Typeahead
|
44
|
+
marginBottom="none"
|
45
|
+
minWidth="xs"
|
46
|
+
options={options}
|
47
|
+
/>
|
48
|
+
</Radio>
|
49
|
+
<Radio
|
50
|
+
customChildren
|
51
|
+
defaultChecked={false}
|
52
|
+
label="Typography"
|
53
|
+
name="Group1"
|
54
|
+
value="Typography"
|
55
|
+
{...props}
|
56
|
+
>
|
57
|
+
<Title text="Custom Typography" />
|
58
|
+
</Radio>
|
59
|
+
</div>
|
60
|
+
)
|
61
|
+
}
|
62
|
+
export default RadioChildren
|
@@ -3,3 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
|
|
3
3
|
export { default as RadioError } from './_radio_error.jsx'
|
4
4
|
export { default as RadioAlignment } from './_radio_alignment.jsx'
|
5
5
|
export { default as RadioDisabled } from './_radio_disabled.jsx'
|
6
|
+
export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
|
3
|
+
import { getAllIcons } from "../../utilities/icons/allicons"
|
4
|
+
|
3
5
|
import Flex from '../../pb_flex/_flex'
|
4
6
|
import PbReactPopover from '../../pb_popover/_popover'
|
5
7
|
import Button from '../../pb_button/_button'
|
@@ -65,6 +67,7 @@ const toolbarDropdownItems = [
|
|
65
67
|
},
|
66
68
|
]
|
67
69
|
|
70
|
+
const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
|
68
71
|
|
69
72
|
const handleTogglePopover = () => {
|
70
73
|
setShowPopover(!showPopover)
|
@@ -92,8 +95,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
|
|
92
95
|
<Flex className={showPopover ? "fa-flip-vertical" : ""}
|
93
96
|
display="inline_flex"
|
94
97
|
>
|
95
|
-
<Icon
|
96
|
-
|
98
|
+
<Icon
|
99
|
+
className="svg-inline--fa"
|
100
|
+
customIcon={angleDown}
|
101
|
+
fixedWidth
|
97
102
|
margin-left="xs"
|
98
103
|
/>
|
99
104
|
</Flex>
|
@@ -125,8 +130,10 @@ const popoverReference = (
|
|
125
130
|
<Flex className={showPopover ? "fa-flip-vertical" : ""}
|
126
131
|
display="inline_flex"
|
127
132
|
>
|
128
|
-
<Icon
|
129
|
-
|
133
|
+
<Icon
|
134
|
+
className="svg-inline--fa"
|
135
|
+
customIcon={angleDown}
|
136
|
+
fixedWidth
|
130
137
|
margin-left="xs"
|
131
138
|
/>
|
132
139
|
</Flex>
|
@@ -169,4 +176,4 @@ const popoverReference = (
|
|
169
176
|
)
|
170
177
|
}
|
171
178
|
|
172
|
-
export default ToolbarDropdown
|
179
|
+
export default ToolbarDropdown
|
@@ -4,6 +4,7 @@ import classnames from 'classnames'
|
|
4
4
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
5
|
import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
|
6
6
|
import type { InputCallback } from '../types'
|
7
|
+
import { getAllIcons } from "../utilities/icons/allicons"
|
7
8
|
|
8
9
|
import Body from '../pb_body/_body'
|
9
10
|
import Caption from '../pb_caption/_caption'
|
@@ -90,6 +91,8 @@ const Select = ({
|
|
90
91
|
compactClass
|
91
92
|
);
|
92
93
|
|
94
|
+
const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
|
95
|
+
|
93
96
|
const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
|
94
97
|
const selectBody =(() =>{
|
95
98
|
if (children) return children
|
@@ -134,9 +137,9 @@ const Select = ({
|
|
134
137
|
{selectBody}
|
135
138
|
{ multiple !== true ?
|
136
139
|
<Icon
|
137
|
-
className="pb_select_kit_caret"
|
140
|
+
className="pb_select_kit_caret svg-inline--fa"
|
141
|
+
customIcon={angleDown}
|
138
142
|
fixedWidth
|
139
|
-
icon="angle-down"
|
140
143
|
/>
|
141
144
|
:
|
142
145
|
null
|
@@ -26,7 +26,7 @@
|
|
26
26
|
<%= pb_rails("body", props: { status: "negative", text: object.error }) %>
|
27
27
|
<% end %>
|
28
28
|
<% if object.multiple != true %>
|
29
|
-
<%= pb_rails("icon", props: {
|
29
|
+
<%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
|
30
30
|
<% end %>
|
31
31
|
</label>
|
32
32
|
<% end %>
|
@@ -1,14 +1,14 @@
|
|
1
1
|
import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
|
2
2
|
|
3
3
|
import {
|
4
|
-
arrow,
|
5
|
-
flip,
|
6
|
-
offset,
|
7
|
-
Placement,
|
8
|
-
safePolygon,
|
4
|
+
arrow,
|
5
|
+
flip,
|
6
|
+
offset,
|
7
|
+
Placement,
|
8
|
+
safePolygon,
|
9
9
|
shift,
|
10
|
-
useFloating,
|
11
|
-
useHover,
|
10
|
+
useFloating,
|
11
|
+
useHover,
|
12
12
|
useInteractions,
|
13
13
|
} from "@floating-ui/react"
|
14
14
|
|
@@ -16,6 +16,8 @@ import classnames from "classnames"
|
|
16
16
|
import { GlobalProps, globalProps } from "../utilities/globalProps"
|
17
17
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
|
18
18
|
import Flex from "../pb_flex/_flex"
|
19
|
+
import { getAllIcons } from "../utilities/icons/allicons"
|
20
|
+
import Icon from '../pb_icon/_icon'
|
19
21
|
|
20
22
|
type TooltipProps = {
|
21
23
|
aria?: { [key: string]: string },
|
@@ -53,7 +55,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
53
55
|
const dataProps: { [key: string]: string } = buildDataProps(data)
|
54
56
|
const ariaProps: { [key: string]: string } = buildAriaProps(aria)
|
55
57
|
const htmlProps = buildHtmlProps(htmlOptions)
|
56
|
-
|
58
|
+
|
57
59
|
const css = classnames(
|
58
60
|
globalProps({...rest}),
|
59
61
|
className,
|
@@ -61,7 +63,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
61
63
|
const [open, setOpen] = useState(false)
|
62
64
|
const arrowRef = useRef(null)
|
63
65
|
|
64
|
-
|
65
66
|
const {
|
66
67
|
context,
|
67
68
|
middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, },
|
@@ -95,7 +96,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
95
96
|
placement: preferredPlacement
|
96
97
|
})
|
97
98
|
|
98
|
-
|
99
|
+
|
99
100
|
const { getFloatingProps } = useInteractions([
|
100
101
|
useHover(context, {
|
101
102
|
delay,
|
@@ -148,13 +149,16 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
148
149
|
},
|
149
150
|
})}
|
150
151
|
>
|
151
|
-
<Flex
|
152
|
+
<Flex
|
152
153
|
align="center"
|
153
154
|
gap="xs"
|
154
155
|
>
|
155
156
|
{icon && (
|
156
|
-
<i className={`pb_icon_kit
|
157
|
-
|
157
|
+
<i className={`pb_icon_kit`}>
|
158
|
+
<Icon
|
159
|
+
icon={icon}
|
160
|
+
/>
|
161
|
+
</i>)}
|
158
162
|
{text}
|
159
163
|
</Flex>
|
160
164
|
<div
|
@@ -109,6 +109,20 @@ test('should pass className prop', () => {
|
|
109
109
|
expect(kit).toHaveClass(className)
|
110
110
|
})
|
111
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
|
+
expect(kit).toHaveClass("pb_typeahead_kit mb_sm")
|
122
|
+
const textInput = kit.querySelector(".pb_text_input_kit")
|
123
|
+
expect(textInput).toHaveClass("mb_none")
|
124
|
+
})
|
125
|
+
|
112
126
|
test('typeahead with colored pills', () => {
|
113
127
|
render(
|
114
128
|
<Typeahead
|
@@ -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
|
pillColor?: "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",
|
49
50
|
} & GlobalProps
|
50
51
|
|
@@ -78,6 +79,7 @@ const Typeahead = ({
|
|
78
79
|
htmlOptions = {},
|
79
80
|
id,
|
80
81
|
loadOptions = noop,
|
82
|
+
marginBottom = "sm",
|
81
83
|
pillColor,
|
82
84
|
...props
|
83
85
|
}: TypeaheadProps) => {
|
@@ -138,6 +140,7 @@ const Typeahead = ({
|
|
138
140
|
const htmlProps = buildHtmlProps(htmlOptions)
|
139
141
|
const classes = classnames(
|
140
142
|
'pb_typeahead_kit react-select',
|
143
|
+
`mb_${marginBottom}`,
|
141
144
|
globalProps(props),
|
142
145
|
className
|
143
146
|
)
|
@@ -11,14 +11,15 @@ type Props = {
|
|
11
11
|
const TypeaheadControl = (props: Props) => (
|
12
12
|
<div className="pb_typeahead_wrapper">
|
13
13
|
<TextInput
|
14
|
-
|
15
|
-
|
16
|
-
|
14
|
+
dark={props.selectProps.dark}
|
15
|
+
error={props.selectProps.error}
|
16
|
+
label={props.selectProps.label}
|
17
|
+
marginBottom="none"
|
17
18
|
>
|
18
19
|
<Flex>
|
19
20
|
<components.Control
|
20
|
-
|
21
|
-
|
21
|
+
className="text_input"
|
22
|
+
{...props}
|
22
23
|
/>
|
23
24
|
</Flex>
|
24
25
|
</TextInput>
|
@@ -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
|