playbook_ui 8.2.0 → 8.2.1.pre.alpha1
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 +1 -0
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_badge/_badge.jsx +26 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +6 -0
- data/app/pb_kits/playbook/pb_inline/_inline.jsx +83 -0
- data/app/pb_kits/playbook/pb_inline/_inline.scss +58 -0
- data/app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx +36 -0
- data/app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx +58 -0
- data/app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx +99 -0
- data/app/pb_kits/playbook/pb_inline/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_inline/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_inline/inline.test.jsx +21 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +4 -3
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +3 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +3 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +9 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Input.jsx +24 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +25 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +8 -3
- data/lib/playbook/version.rb +1 -1
- metadata +38 -29
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8cbf51b2d7235622879cdc471204d3becf81ea6002ea3c7951c3d5ffd7edc09a
|
4
|
+
data.tar.gz: 515a63cbc2842c17b189a127e5efb8920c0ebd046e43a1c549fb85e1141bd3b5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5512cbf48886764a35bbef6252f89d6472ec869232f8ff628e015ee9f2c78884443bcd0fee4cda2d6063bd6ee714936b9b1d535d8e52e58d60a08246460843d9
|
7
|
+
data.tar.gz: 32e359b3596106cc2ee242cb4a7cf390f5a575b13713397351568ccc75d56bdb796b29e5e5cbc030ead10766a1893c4118f6d69eb4c6065ace18e12f092fff29
|
@@ -47,6 +47,7 @@ export IconCircle from './pb_icon_circle/_icon_circle.jsx'
|
|
47
47
|
export IconStatValue from './pb_icon_stat_value/_icon_stat_value.jsx'
|
48
48
|
export IconValue from './pb_icon_value/_icon_value.jsx'
|
49
49
|
export Image from './pb_image/_image.jsx'
|
50
|
+
export Inline from './pb_inline/_inline.jsx'
|
50
51
|
export LabelPill from './pb_label_pill/_label_pill.jsx'
|
51
52
|
export LabelValue from './pb_label_value/_label_value.jsx'
|
52
53
|
export Layout from './pb_layout/_layout.jsx'
|
@@ -3,6 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { globalProps } from '../utilities/globalProps.js'
|
6
|
+
import { Icon } from '../'
|
6
7
|
|
7
8
|
import {
|
8
9
|
buildAriaProps,
|
@@ -13,8 +14,15 @@ import {
|
|
13
14
|
type BadgeProps = {
|
14
15
|
aria?: object,
|
15
16
|
className?: string,
|
17
|
+
closeProps?: {
|
18
|
+
onClick?: EventHandler,
|
19
|
+
onMouseDown?: EventHandler,
|
20
|
+
onTouchEnd?: EventHandler,
|
21
|
+
},
|
16
22
|
data?: object,
|
17
23
|
id?: string,
|
24
|
+
removeIcon?: Boolean,
|
25
|
+
removeOnClick?: EventHandler,
|
18
26
|
rounded?: boolean,
|
19
27
|
text?: string,
|
20
28
|
variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
|
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
|
|
23
31
|
const {
|
24
32
|
aria = {},
|
25
33
|
className,
|
34
|
+
closeProps = {},
|
26
35
|
data = {},
|
27
36
|
id,
|
37
|
+
removeIcon = false,
|
38
|
+
removeOnClick = () => {},
|
28
39
|
rounded = false,
|
29
40
|
text,
|
30
41
|
variant = 'neutral',
|
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
|
|
44
55
|
className={css}
|
45
56
|
id={id}
|
46
57
|
>
|
47
|
-
<span>
|
58
|
+
<span>
|
59
|
+
<If condition={removeIcon}>
|
60
|
+
<span
|
61
|
+
onClick={removeOnClick}
|
62
|
+
style={{ cursor: 'pointer' }}
|
63
|
+
{...closeProps}
|
64
|
+
>
|
65
|
+
<Icon
|
66
|
+
fixedWidth
|
67
|
+
icon="times"
|
68
|
+
/>
|
69
|
+
</span>
|
70
|
+
</If>
|
71
|
+
{text}
|
72
|
+
</span>
|
48
73
|
</div>
|
49
74
|
)
|
50
75
|
}
|
@@ -25,6 +25,8 @@ type DatePickerProps = {
|
|
25
25
|
id?: String,
|
26
26
|
inputAria?: object,
|
27
27
|
inputData?: object,
|
28
|
+
inputOnChange?: (String) => void,
|
29
|
+
inputValue?: any,
|
28
30
|
label?: String,
|
29
31
|
maxDate: String,
|
30
32
|
minDate: String,
|
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
|
|
55
57
|
id,
|
56
58
|
inputAria,
|
57
59
|
inputData,
|
60
|
+
inputOnChange,
|
61
|
+
inputValue,
|
58
62
|
label = 'Date Picker',
|
59
63
|
maxDate,
|
60
64
|
minDate,
|
@@ -126,7 +130,9 @@ const DatePicker = (props: DatePickerProps) => {
|
|
126
130
|
id={pickerId}
|
127
131
|
label={hideLabel ? null : label}
|
128
132
|
name={name}
|
133
|
+
onChange={inputOnChange}
|
129
134
|
placeholder={placeholder}
|
135
|
+
value={inputValue}
|
130
136
|
/>
|
131
137
|
<If condition={!hideIcon}>
|
132
138
|
<div
|
@@ -0,0 +1,83 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { useEffect, useRef, useState } from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
+
import { globalProps } from '../utilities/globalProps.js'
|
7
|
+
import './_inline.scss'
|
8
|
+
|
9
|
+
type InlineProps = {
|
10
|
+
aria?: object,
|
11
|
+
className?: string,
|
12
|
+
data?: object,
|
13
|
+
displayKit?: React.Node,
|
14
|
+
formInput?: React.Node,
|
15
|
+
id?: string,
|
16
|
+
}
|
17
|
+
|
18
|
+
const Inline = (props: InlineProps) => {
|
19
|
+
const {
|
20
|
+
aria = {},
|
21
|
+
className,
|
22
|
+
data = {},
|
23
|
+
displayKit,
|
24
|
+
id,
|
25
|
+
formInput,
|
26
|
+
} = props
|
27
|
+
|
28
|
+
const ariaProps = buildAriaProps(aria)
|
29
|
+
const dataProps = buildDataProps(data)
|
30
|
+
const classes = classnames(buildCss('pb_inline'), globalProps(props), className)
|
31
|
+
|
32
|
+
const [editing, setEditing] = useState(false)
|
33
|
+
|
34
|
+
const ToggleClickHandler = () => {
|
35
|
+
setEditing(!editing)
|
36
|
+
}
|
37
|
+
|
38
|
+
useEffect(() => {
|
39
|
+
if (editing) {
|
40
|
+
modifiedInput.ref.current.focus()
|
41
|
+
|
42
|
+
modifiedInput.ref.current.addEventListener('keydown', (e) => {
|
43
|
+
if (e.key === 'Escape' || e.key === 'Enter') {
|
44
|
+
setEditing(!editing)
|
45
|
+
}
|
46
|
+
})
|
47
|
+
}
|
48
|
+
}, [editing])
|
49
|
+
|
50
|
+
const { kitType, size } = displayKit.props
|
51
|
+
const textInputClassName = kitType ? (kitType.toLowerCase() + (size ? `_${size}` : '')) : ''
|
52
|
+
|
53
|
+
const modifiedInput = React.cloneElement(formInput, {
|
54
|
+
className: textInputClassName,
|
55
|
+
onBlur: () => setEditing(!editing),
|
56
|
+
ref: useRef(null),
|
57
|
+
})
|
58
|
+
|
59
|
+
return (
|
60
|
+
<div
|
61
|
+
{...ariaProps}
|
62
|
+
{...dataProps}
|
63
|
+
className={classes}
|
64
|
+
id={id}
|
65
|
+
>
|
66
|
+
<If condition={editing}>
|
67
|
+
{modifiedInput}
|
68
|
+
</If>
|
69
|
+
<If condition={!editing}>
|
70
|
+
<div
|
71
|
+
onClick={() => ToggleClickHandler()}
|
72
|
+
onFocus={() => ToggleClickHandler()}
|
73
|
+
tabIndex="0"
|
74
|
+
>
|
75
|
+
{displayKit}
|
76
|
+
</div>
|
77
|
+
</If>
|
78
|
+
|
79
|
+
</div>
|
80
|
+
)
|
81
|
+
}
|
82
|
+
|
83
|
+
export default Inline
|
@@ -0,0 +1,58 @@
|
|
1
|
+
@import "../pb_title/title_mixin";
|
2
|
+
@import "../pb_body/body_mixins";
|
3
|
+
@import "../pb_caption/caption_mixin";
|
4
|
+
|
5
|
+
.pb_inline {
|
6
|
+
.pb_text_input_kit {
|
7
|
+
&.title_1 {
|
8
|
+
.text_input_wrapper input {
|
9
|
+
@include pb_title_1;
|
10
|
+
}
|
11
|
+
&.dark .text_input_wrapper input {
|
12
|
+
@include pb_title_1;
|
13
|
+
@include pb_title_dark;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
&.title_2 {
|
17
|
+
.text_input_wrapper input {
|
18
|
+
@include pb_title_2;
|
19
|
+
}
|
20
|
+
&.dark .text_input_wrapper input {
|
21
|
+
@include pb_title_2;
|
22
|
+
@include pb_title_dark;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
&.title_3 {
|
26
|
+
.text_input_wrapper input {
|
27
|
+
@include pb_title_3;
|
28
|
+
}
|
29
|
+
&.dark .text_input_wrapper input {
|
30
|
+
@include pb_title_3;
|
31
|
+
@include pb_title_dark;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
&.body {
|
35
|
+
.text_input_wrapper input {
|
36
|
+
@include pb_body;
|
37
|
+
}
|
38
|
+
&.dark .text_input_wrapper input {
|
39
|
+
@include pb_body_dark;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
&.caption {
|
43
|
+
.text_input_wrapper input {
|
44
|
+
@include caption;
|
45
|
+
}
|
46
|
+
&.dark .text_input_wrapper input {
|
47
|
+
@include caption;
|
48
|
+
@include caption_dark;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
.text_input_wrapper input {
|
52
|
+
padding: 8px 5px;
|
53
|
+
}
|
54
|
+
.text_input_wrapper, .pb_textarea_kit {
|
55
|
+
margin-bottom: 0;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Inline, TextInput, Title } from '../../'
|
3
|
+
|
4
|
+
const InlineDefault = (props) => {
|
5
|
+
const [formValue, setFormValue] = useState('Default Value')
|
6
|
+
|
7
|
+
const handleInputChange = (event) => {
|
8
|
+
setFormValue(event.target.value)
|
9
|
+
}
|
10
|
+
|
11
|
+
return (
|
12
|
+
<div>
|
13
|
+
<Inline
|
14
|
+
{...props}
|
15
|
+
displayKit={
|
16
|
+
<Title
|
17
|
+
{...props}
|
18
|
+
kitType="Title"
|
19
|
+
size={4}
|
20
|
+
tag="h4"
|
21
|
+
text={formValue}
|
22
|
+
/>
|
23
|
+
}
|
24
|
+
formInput={
|
25
|
+
<TextInput
|
26
|
+
{...props}
|
27
|
+
onChange={handleInputChange}
|
28
|
+
value={formValue}
|
29
|
+
/>
|
30
|
+
}
|
31
|
+
/>
|
32
|
+
</div>
|
33
|
+
)
|
34
|
+
}
|
35
|
+
|
36
|
+
export default InlineDefault
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Body, Inline, Textarea, TextInput } from '../../'
|
3
|
+
|
4
|
+
const InlineInputOptions = (props) => {
|
5
|
+
const [formFields, setFormFields] = useState({
|
6
|
+
inputOne: 'Input One',
|
7
|
+
inputTwo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
|
8
|
+
})
|
9
|
+
|
10
|
+
const handleChange = ({ target }) => {
|
11
|
+
const { name, value } = target
|
12
|
+
setFormFields({ ...formFields, [name]: value })
|
13
|
+
}
|
14
|
+
|
15
|
+
return (
|
16
|
+
<div>
|
17
|
+
<Inline
|
18
|
+
{...props}
|
19
|
+
displayKit={
|
20
|
+
<Body
|
21
|
+
{...props}
|
22
|
+
kitType="Body"
|
23
|
+
text={formFields.inputOne}
|
24
|
+
/>
|
25
|
+
}
|
26
|
+
formInput={
|
27
|
+
<TextInput
|
28
|
+
{...props}
|
29
|
+
name="inputOne"
|
30
|
+
onChange={handleChange}
|
31
|
+
value={formFields.inputOne}
|
32
|
+
/>
|
33
|
+
}
|
34
|
+
/>
|
35
|
+
<Inline
|
36
|
+
{...props}
|
37
|
+
displayKit={
|
38
|
+
<Body
|
39
|
+
{...props}
|
40
|
+
kitType="Body"
|
41
|
+
text={formFields.inputTwo}
|
42
|
+
/>
|
43
|
+
}
|
44
|
+
formInput={
|
45
|
+
<Textarea
|
46
|
+
{...props}
|
47
|
+
name="inputTwo"
|
48
|
+
onChange={handleChange}
|
49
|
+
resize="auto"
|
50
|
+
value={formFields.inputTwo}
|
51
|
+
/>
|
52
|
+
}
|
53
|
+
/>
|
54
|
+
</div>
|
55
|
+
)
|
56
|
+
}
|
57
|
+
|
58
|
+
export default InlineInputOptions
|
@@ -0,0 +1,99 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Body, Caption, Inline, TextInput, Title } from '../../'
|
3
|
+
|
4
|
+
const InlineTextOptions = (props) => {
|
5
|
+
const [formFields, setFormFields] = useState({
|
6
|
+
inputOne: 'Input One',
|
7
|
+
inputTwo: 'Input Two',
|
8
|
+
inputThree: 'Input Three',
|
9
|
+
inputFour: 'Input Four',
|
10
|
+
})
|
11
|
+
|
12
|
+
const handleChange = ({ target }) => {
|
13
|
+
const { name, value } = target
|
14
|
+
setFormFields({ ...formFields, [name]: value })
|
15
|
+
}
|
16
|
+
|
17
|
+
return (
|
18
|
+
<div>
|
19
|
+
<Inline
|
20
|
+
{...props}
|
21
|
+
displayKit={
|
22
|
+
<Title
|
23
|
+
{...props}
|
24
|
+
kitType="Title"
|
25
|
+
size={1}
|
26
|
+
tag="h1"
|
27
|
+
text={formFields.inputOne}
|
28
|
+
/>
|
29
|
+
}
|
30
|
+
formInput={
|
31
|
+
<TextInput
|
32
|
+
{...props}
|
33
|
+
name="inputOne"
|
34
|
+
onChange={handleChange}
|
35
|
+
value={formFields.inputOne}
|
36
|
+
/>
|
37
|
+
}
|
38
|
+
/>
|
39
|
+
<Inline
|
40
|
+
{...props}
|
41
|
+
displayKit={
|
42
|
+
<Title
|
43
|
+
{...props}
|
44
|
+
kitType="Title 4"
|
45
|
+
size={4}
|
46
|
+
tag="h4"
|
47
|
+
text={formFields.inputTwo}
|
48
|
+
/>
|
49
|
+
}
|
50
|
+
formInput={
|
51
|
+
<TextInput
|
52
|
+
{...props}
|
53
|
+
name="inputTwo"
|
54
|
+
onChange={handleChange}
|
55
|
+
value={formFields.inputTwo}
|
56
|
+
/>
|
57
|
+
}
|
58
|
+
/>
|
59
|
+
<Inline
|
60
|
+
{...props}
|
61
|
+
displayKit={
|
62
|
+
<Body
|
63
|
+
{...props}
|
64
|
+
kitType="Body"
|
65
|
+
text={formFields.inputThree}
|
66
|
+
/>
|
67
|
+
}
|
68
|
+
formInput={
|
69
|
+
<TextInput
|
70
|
+
{...props}
|
71
|
+
name="inputThree"
|
72
|
+
onChange={handleChange}
|
73
|
+
value={formFields.inputThree}
|
74
|
+
/>
|
75
|
+
}
|
76
|
+
/>
|
77
|
+
<Inline
|
78
|
+
{...props}
|
79
|
+
displayKit={
|
80
|
+
<Caption
|
81
|
+
{...props}
|
82
|
+
kitType="Caption"
|
83
|
+
text={formFields.inputFour}
|
84
|
+
/>
|
85
|
+
}
|
86
|
+
formInput={
|
87
|
+
<TextInput
|
88
|
+
{...props}
|
89
|
+
name="inputFour"
|
90
|
+
onChange={handleChange}
|
91
|
+
value={formFields.inputFour}
|
92
|
+
/>
|
93
|
+
}
|
94
|
+
/>
|
95
|
+
</div>
|
96
|
+
)
|
97
|
+
}
|
98
|
+
|
99
|
+
export default InlineTextOptions
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
import { Inline } from '../'
|
4
|
+
|
5
|
+
/* See these resources for more testing info:
|
6
|
+
- https://github.com/testing-library/jest-dom#usage for useage and examples
|
7
|
+
- https://jestjs.io/docs/en/using-matchers
|
8
|
+
*/
|
9
|
+
|
10
|
+
test('generated scaffold test - update me', () => {
|
11
|
+
const testId = "test1"
|
12
|
+
|
13
|
+
render(
|
14
|
+
<Inline
|
15
|
+
data={{ testid: testId }}
|
16
|
+
/>
|
17
|
+
)
|
18
|
+
|
19
|
+
const kit = screen.getByTestId(testId)
|
20
|
+
expect(kit).toBeInTheDocument()
|
21
|
+
})
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
import React, { useEffect, useRef } from 'react'
|
3
|
+
import React, { forwardRef, useEffect, useRef } from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import useFocus from './useFocus.js'
|
6
6
|
import Trix from 'trix'
|
@@ -22,7 +22,7 @@ type RichTextEditorProps = {
|
|
22
22
|
value?: string,
|
23
23
|
}
|
24
24
|
|
25
|
-
const RichTextEditor = (props: RichTextEditorProps) => {
|
25
|
+
const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input">) => {
|
26
26
|
const {
|
27
27
|
aria = {},
|
28
28
|
className,
|
@@ -120,6 +120,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
120
120
|
<input
|
121
121
|
id={id}
|
122
122
|
name={name}
|
123
|
+
ref={ref}
|
123
124
|
type="hidden"
|
124
125
|
value={value}
|
125
126
|
/>
|
@@ -133,4 +134,4 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
133
134
|
)
|
134
135
|
}
|
135
136
|
|
136
|
-
export default RichTextEditor
|
137
|
+
export default forwardRef(RichTextEditor)
|
@@ -19,6 +19,7 @@ type TextInputProps = {
|
|
19
19
|
id?: string,
|
20
20
|
name: string,
|
21
21
|
label: string,
|
22
|
+
onBlur: (String) => void,
|
22
23
|
onChange: (String) => void,
|
23
24
|
placeholder: string,
|
24
25
|
required?: boolean,
|
@@ -41,6 +42,7 @@ const TextInput = (
|
|
41
42
|
id,
|
42
43
|
name,
|
43
44
|
label,
|
45
|
+
onBlur = () => {},
|
44
46
|
onChange = () => {},
|
45
47
|
placeholder,
|
46
48
|
required,
|
@@ -79,6 +81,7 @@ const TextInput = (
|
|
79
81
|
disabled={disabled}
|
80
82
|
id={id}
|
81
83
|
name={name}
|
84
|
+
onBlur={onBlur}
|
82
85
|
onChange={onChange}
|
83
86
|
placeholder={placeholder}
|
84
87
|
ref={ref}
|
@@ -24,6 +24,7 @@ type TextareaProps = {
|
|
24
24
|
required?: boolean,
|
25
25
|
rows?: number,
|
26
26
|
resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
|
27
|
+
onBlur?: InputCallback<HTMLTextAreaElement>,
|
27
28
|
onChange?: InputCallback<HTMLTextAreaElement>,
|
28
29
|
}
|
29
30
|
|
@@ -37,6 +38,7 @@ const Textarea = ({
|
|
37
38
|
label,
|
38
39
|
maxCharacters,
|
39
40
|
name,
|
41
|
+
onBlur = () => {},
|
40
42
|
onChange = () => {},
|
41
43
|
placeholder,
|
42
44
|
required,
|
@@ -75,6 +77,7 @@ const Textarea = ({
|
|
75
77
|
className="pb_textarea_kit"
|
76
78
|
disabled={disabled}
|
77
79
|
name={name}
|
80
|
+
onBlur={onBlur}
|
78
81
|
onChange={onChange}
|
79
82
|
placeholder={placeholder}
|
80
83
|
ref={ref}
|
@@ -3,12 +3,14 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import Select from 'react-select'
|
5
5
|
import AsyncSelect from 'react-select/async'
|
6
|
+
import CreateableSelect from 'react-select/creatable'
|
6
7
|
import { get } from 'lodash'
|
7
8
|
import { globalProps } from '../utilities/globalProps.js'
|
8
9
|
|
9
10
|
import Control from './components/Control'
|
10
11
|
import ClearIndicator from './components/ClearIndicator'
|
11
12
|
import IndicatorsContainer from './components/IndicatorsContainer'
|
13
|
+
import Input from './components/Input'
|
12
14
|
import MenuList from './components/MenuList'
|
13
15
|
import MultiValue from './components/MultiValue'
|
14
16
|
import Option from './components/Option'
|
@@ -26,6 +28,7 @@ import { noop } from '../utilities/props'
|
|
26
28
|
|
27
29
|
type Props = {
|
28
30
|
async?: boolean,
|
31
|
+
createable?: boolean,
|
29
32
|
dark?: boolean,
|
30
33
|
label?: string,
|
31
34
|
loadOptions?: noop | string,
|
@@ -41,12 +44,14 @@ type Props = {
|
|
41
44
|
|
42
45
|
const Typeahead = (props: Props) => {
|
43
46
|
const selectProps = {
|
47
|
+
badges: false,
|
44
48
|
cacheOptions: true,
|
45
49
|
components: {
|
46
50
|
Control,
|
47
51
|
ClearIndicator,
|
48
52
|
IndicatorsContainer,
|
49
53
|
IndicatorSeparator: null,
|
54
|
+
Input,
|
50
55
|
MenuList,
|
51
56
|
MultiValue,
|
52
57
|
Option,
|
@@ -58,6 +63,8 @@ const Typeahead = (props: Props) => {
|
|
58
63
|
isClearable: true,
|
59
64
|
isSearchable: true,
|
60
65
|
name,
|
66
|
+
onCreate: () => {},
|
67
|
+
plusIcon: false,
|
61
68
|
...props,
|
62
69
|
}
|
63
70
|
|
@@ -65,7 +72,8 @@ const Typeahead = (props: Props) => {
|
|
65
72
|
if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
|
66
73
|
if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
|
67
74
|
|
68
|
-
|
75
|
+
let Tag = props.async ? AsyncSelect : Select
|
76
|
+
if (props.createable) Tag = CreateableSelect
|
69
77
|
|
70
78
|
const handleOnChange = (data, { action, option, removedValue }) => {
|
71
79
|
if (action === 'select-option') {
|
@@ -0,0 +1,24 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { components } from 'react-select'
|
5
|
+
import { Flex, Icon } from '../../'
|
6
|
+
|
7
|
+
const Input = (props: any) => (
|
8
|
+
<Flex
|
9
|
+
align="center"
|
10
|
+
>
|
11
|
+
<If condition={props.selectProps.plusIcon}>
|
12
|
+
<Icon
|
13
|
+
className="typeahead-plus-icon"
|
14
|
+
icon="plus"
|
15
|
+
/>
|
16
|
+
</If>
|
17
|
+
<components.Input
|
18
|
+
className="input"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
</Flex>
|
22
|
+
)
|
23
|
+
|
24
|
+
export default Input
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import { components } from 'react-select'
|
5
5
|
|
6
|
-
import { FormPill } from '../../'
|
6
|
+
import { FormPill, Badge } from '../../'
|
7
7
|
|
8
8
|
type Props = {
|
9
9
|
data: object,
|
@@ -28,7 +28,7 @@ const MultiValue = (props: Props) => {
|
|
28
28
|
className="text_input_multivalue_container"
|
29
29
|
{...props}
|
30
30
|
>
|
31
|
-
<If condition={imageUrl}>
|
31
|
+
{/* <If condition={imageUrl}>
|
32
32
|
<FormPill
|
33
33
|
avatarUrl={imageUrl}
|
34
34
|
closeProps={removeProps}
|
@@ -41,6 +41,29 @@ const MultiValue = (props: Props) => {
|
|
41
41
|
marginRight="xs"
|
42
42
|
text={label}
|
43
43
|
/>
|
44
|
+
</If> */}
|
45
|
+
<If condition={props.selectProps.badges}>
|
46
|
+
<Badge
|
47
|
+
closeProps={removeProps}
|
48
|
+
removeIcon
|
49
|
+
text={label}
|
50
|
+
variant="primary"
|
51
|
+
/>
|
52
|
+
<Else />
|
53
|
+
<If condition={imageUrl}>
|
54
|
+
<FormPill
|
55
|
+
avatarUrl={imageUrl}
|
56
|
+
closeProps={removeProps}
|
57
|
+
marginRight="xs"
|
58
|
+
name={label}
|
59
|
+
/>
|
60
|
+
<Else />
|
61
|
+
<FormPill
|
62
|
+
closeProps={removeProps}
|
63
|
+
marginRight="xs"
|
64
|
+
text={label}
|
65
|
+
/>
|
66
|
+
</If>
|
44
67
|
</If>
|
45
68
|
</components.MultiValueContainer>
|
46
69
|
)
|
@@ -1,9 +1,9 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
import React from 'react'
|
3
|
+
import React, { useState } from 'react'
|
4
4
|
import { Typeahead } from '../..'
|
5
5
|
|
6
|
-
const
|
6
|
+
const initOptions = [
|
7
7
|
{ label: 'Windows', value: '#FFA500' },
|
8
8
|
{ label: 'Siding', value: '#FF0000' },
|
9
9
|
{ label: 'Doors', value: '#00FF00' },
|
@@ -11,13 +11,18 @@ const options = [
|
|
11
11
|
]
|
12
12
|
|
13
13
|
const TypeaheadWithPills = (props) => {
|
14
|
+
const [values, setValues] = useState([])
|
14
15
|
return (
|
15
16
|
<>
|
16
17
|
<Typeahead
|
18
|
+
badges
|
19
|
+
createable
|
17
20
|
isMulti
|
18
21
|
label="Colors"
|
19
|
-
|
22
|
+
onChange={(value) => console.log(value)}
|
23
|
+
options={initOptions}
|
20
24
|
placeholder=""
|
25
|
+
plusIcon
|
21
26
|
{...props}
|
22
27
|
/>
|
23
28
|
</>
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 8.2.
|
4
|
+
version: 8.2.1.pre.alpha1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-03-
|
12
|
+
date: 2021-03-24 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -17,27 +17,27 @@ dependencies:
|
|
17
17
|
requirements:
|
18
18
|
- - ">="
|
19
19
|
- !ruby/object:Gem::Version
|
20
|
-
version: 5.2.4.
|
20
|
+
version: 5.2.4.4
|
21
21
|
- - "<"
|
22
22
|
- !ruby/object:Gem::Version
|
23
|
-
version: '
|
23
|
+
version: '7.0'
|
24
24
|
type: :runtime
|
25
25
|
prerelease: false
|
26
26
|
version_requirements: !ruby/object:Gem::Requirement
|
27
27
|
requirements:
|
28
28
|
- - ">="
|
29
29
|
- !ruby/object:Gem::Version
|
30
|
-
version: 5.2.4.
|
30
|
+
version: 5.2.4.4
|
31
31
|
- - "<"
|
32
32
|
- !ruby/object:Gem::Version
|
33
|
-
version: '
|
33
|
+
version: '7.0'
|
34
34
|
- !ruby/object:Gem::Dependency
|
35
35
|
name: actionview
|
36
36
|
requirement: !ruby/object:Gem::Requirement
|
37
37
|
requirements:
|
38
38
|
- - ">="
|
39
39
|
- !ruby/object:Gem::Version
|
40
|
-
version: 5.2.4.
|
40
|
+
version: 5.2.4.4
|
41
41
|
- - "<"
|
42
42
|
- !ruby/object:Gem::Version
|
43
43
|
version: '7.0'
|
@@ -47,7 +47,7 @@ dependencies:
|
|
47
47
|
requirements:
|
48
48
|
- - ">="
|
49
49
|
- !ruby/object:Gem::Version
|
50
|
-
version: 5.2.4.
|
50
|
+
version: 5.2.4.4
|
51
51
|
- - "<"
|
52
52
|
- !ruby/object:Gem::Version
|
53
53
|
version: '7.0'
|
@@ -57,7 +57,7 @@ dependencies:
|
|
57
57
|
requirements:
|
58
58
|
- - ">="
|
59
59
|
- !ruby/object:Gem::Version
|
60
|
-
version: 5.2.4.
|
60
|
+
version: 5.2.4.4
|
61
61
|
- - "<"
|
62
62
|
- !ruby/object:Gem::Version
|
63
63
|
version: '7.0'
|
@@ -67,24 +67,10 @@ dependencies:
|
|
67
67
|
requirements:
|
68
68
|
- - ">="
|
69
69
|
- !ruby/object:Gem::Version
|
70
|
-
version: 5.2.4.
|
70
|
+
version: 5.2.4.4
|
71
71
|
- - "<"
|
72
72
|
- !ruby/object:Gem::Version
|
73
73
|
version: '7.0'
|
74
|
-
- !ruby/object:Gem::Dependency
|
75
|
-
name: github_changelog_generator
|
76
|
-
requirement: !ruby/object:Gem::Requirement
|
77
|
-
requirements:
|
78
|
-
- - '='
|
79
|
-
- !ruby/object:Gem::Version
|
80
|
-
version: 1.15.2
|
81
|
-
type: :runtime
|
82
|
-
prerelease: false
|
83
|
-
version_requirements: !ruby/object:Gem::Requirement
|
84
|
-
requirements:
|
85
|
-
- - '='
|
86
|
-
- !ruby/object:Gem::Version
|
87
|
-
version: 1.15.2
|
88
74
|
- !ruby/object:Gem::Dependency
|
89
75
|
name: react-rails
|
90
76
|
requirement: !ruby/object:Gem::Requirement
|
@@ -253,6 +239,20 @@ dependencies:
|
|
253
239
|
- - '='
|
254
240
|
- !ruby/object:Gem::Version
|
255
241
|
version: 11.0.0
|
242
|
+
- !ruby/object:Gem::Dependency
|
243
|
+
name: github_changelog_generator
|
244
|
+
requirement: !ruby/object:Gem::Requirement
|
245
|
+
requirements:
|
246
|
+
- - '='
|
247
|
+
- !ruby/object:Gem::Version
|
248
|
+
version: 1.15.2
|
249
|
+
type: :development
|
250
|
+
prerelease: false
|
251
|
+
version_requirements: !ruby/object:Gem::Requirement
|
252
|
+
requirements:
|
253
|
+
- - '='
|
254
|
+
- !ruby/object:Gem::Version
|
255
|
+
version: 1.15.2
|
256
256
|
- !ruby/object:Gem::Dependency
|
257
257
|
name: overcommit
|
258
258
|
requirement: !ruby/object:Gem::Requirement
|
@@ -1187,6 +1187,14 @@ files:
|
|
1187
1187
|
- app/pb_kits/playbook/pb_image/image.html.erb
|
1188
1188
|
- app/pb_kits/playbook/pb_image/image.rb
|
1189
1189
|
- app/pb_kits/playbook/pb_image/image.test.js
|
1190
|
+
- app/pb_kits/playbook/pb_inline/_inline.jsx
|
1191
|
+
- app/pb_kits/playbook/pb_inline/_inline.scss
|
1192
|
+
- app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx
|
1193
|
+
- app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx
|
1194
|
+
- app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx
|
1195
|
+
- app/pb_kits/playbook/pb_inline/docs/example.yml
|
1196
|
+
- app/pb_kits/playbook/pb_inline/docs/index.js
|
1197
|
+
- app/pb_kits/playbook/pb_inline/inline.test.jsx
|
1190
1198
|
- app/pb_kits/playbook/pb_kit/dateTime.js
|
1191
1199
|
- app/pb_kits/playbook/pb_kit/pb_date_time.rb
|
1192
1200
|
- app/pb_kits/playbook/pb_label_pill/_label_pill.jsx
|
@@ -1961,6 +1969,7 @@ files:
|
|
1961
1969
|
- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
|
1962
1970
|
- app/pb_kits/playbook/pb_typeahead/components/Control.jsx
|
1963
1971
|
- app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
|
1972
|
+
- app/pb_kits/playbook/pb_typeahead/components/Input.jsx
|
1964
1973
|
- app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
|
1965
1974
|
- app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
|
1966
1975
|
- app/pb_kits/playbook/pb_typeahead/components/Option.jsx
|
@@ -2103,7 +2112,7 @@ homepage: http://playbook.powerapp.cloud
|
|
2103
2112
|
licenses:
|
2104
2113
|
- MIT
|
2105
2114
|
metadata: {}
|
2106
|
-
post_install_message:
|
2115
|
+
post_install_message:
|
2107
2116
|
rdoc_options: []
|
2108
2117
|
require_paths:
|
2109
2118
|
- lib
|
@@ -2114,12 +2123,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2114
2123
|
version: '0'
|
2115
2124
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2116
2125
|
requirements:
|
2117
|
-
- - "
|
2126
|
+
- - ">"
|
2118
2127
|
- !ruby/object:Gem::Version
|
2119
|
-
version:
|
2128
|
+
version: 1.3.1
|
2120
2129
|
requirements: []
|
2121
2130
|
rubygems_version: 3.1.4
|
2122
|
-
signing_key:
|
2131
|
+
signing_key:
|
2123
2132
|
specification_version: 4
|
2124
2133
|
summary: Playbook Design System
|
2125
2134
|
test_files: []
|