playbook_ui 10.2.1.alpha.sisensefix → 10.5.0
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/pb_file_upload/_file_upload.jsx +9 -1
- data/app/pb_kits/playbook/pb_message/_message.jsx +4 -0
- data/app/pb_kits/playbook/pb_message/message.html.erb +2 -0
- data/app/pb_kits/playbook/pb_message/message.rb +1 -0
- data/app/pb_kits/playbook/pb_select/_select.jsx +10 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +64 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb +23 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx +37 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb +24 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx +38 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/select.rb +14 -0
- data/lib/playbook/version.rb +2 -2
- metadata +8 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 31e7e0a26b7b9819517d52aaa9359224528df45c92fbba2cef45a75523d7b52b
|
4
|
+
data.tar.gz: c9f444527d413d7a874a6cbb24be7898a43747d55b5c461bdfe90cee14c2d8b3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bddd1fd46ae05dbff5b5f2d87d96c96d323bb0e0a612cb4234c7a9dce751469dfc68b7745df14876616fb08aaed593d449f4da94cec3d1df77c91d09e68a272b
|
7
|
+
data.tar.gz: 9019f94b33aa5caaa9ee99872df9e6a951d4a9f1c6ffd482dfc24b05e03f773d3f05633a2179addb706d885ed86bdf4918dffd90cd551d5c2d92ce3b5e237db0
|
@@ -32,6 +32,14 @@ const FileUpload = (props: FileUploadProps) => {
|
|
32
32
|
onDrop,
|
33
33
|
})
|
34
34
|
|
35
|
+
const acceptedFileTypes = accept.map((fileType) => {
|
36
|
+
if (fileType.startsWith('image/')) {
|
37
|
+
return fileType.replace('image/', ' ')
|
38
|
+
} else {
|
39
|
+
return fileType
|
40
|
+
}
|
41
|
+
})
|
42
|
+
|
35
43
|
return (
|
36
44
|
<div
|
37
45
|
className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
|
@@ -43,7 +51,7 @@ const FileUpload = (props: FileUploadProps) => {
|
|
43
51
|
<If condition={isDragActive}>
|
44
52
|
<p>{'Drop the files here ...'}</p>
|
45
53
|
<Else />
|
46
|
-
<p>{
|
54
|
+
<p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFileTypes}`}</p>
|
47
55
|
</If>
|
48
56
|
</Body>
|
49
57
|
</Card>
|
@@ -25,6 +25,7 @@ type MessageProps = {
|
|
25
25
|
message: string,
|
26
26
|
timestamp?: string,
|
27
27
|
timestampObject?: string,
|
28
|
+
timezone?: string,
|
28
29
|
alignTimestamp?: string,
|
29
30
|
}
|
30
31
|
|
@@ -42,6 +43,7 @@ const Message = (props: MessageProps) => {
|
|
42
43
|
message,
|
43
44
|
timestamp,
|
44
45
|
timestampObject,
|
46
|
+
timezone,
|
45
47
|
alignTimestamp = 'right',
|
46
48
|
} = props
|
47
49
|
const ariaProps = buildAriaProps(aria)
|
@@ -87,11 +89,13 @@ const Message = (props: MessageProps) => {
|
|
87
89
|
<Timestamp
|
88
90
|
className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
|
89
91
|
text={timestamp}
|
92
|
+
timezone={timezone}
|
90
93
|
/>
|
91
94
|
<If condition={timestampObject}>
|
92
95
|
<Timestamp
|
93
96
|
className={`pull-${alignTimestamp} message_timestamp`}
|
94
97
|
timestamp={timestampObject}
|
98
|
+
timezone={timezone}
|
95
99
|
/>
|
96
100
|
</If>
|
97
101
|
</Flex>
|
@@ -23,11 +23,13 @@
|
|
23
23
|
|
24
24
|
<%= pb_rails("timestamp", props: {
|
25
25
|
text: object.timestamp,
|
26
|
+
timezone: object.timezone,
|
26
27
|
classname: "pull-#{object.align_timestamp} #{object.timestamp_object.present? ? 'message_humanized_time' : nil}"
|
27
28
|
}) %>
|
28
29
|
<% if object.timestamp_object.present? %>
|
29
30
|
<%= pb_rails("timestamp", props: {
|
30
31
|
timestamp: object.timestamp_object,
|
32
|
+
timezone: object.timezone,
|
31
33
|
classname: "pull-#{object.align_timestamp} message_timestamp"
|
32
34
|
}) %>
|
33
35
|
<% end %>
|
@@ -21,6 +21,7 @@ type SelectProps = {
|
|
21
21
|
aria?: object,
|
22
22
|
blankSelection?: string,
|
23
23
|
children?: React.Node,
|
24
|
+
compact?: boolean,
|
24
25
|
className?: string,
|
25
26
|
data?: object,
|
26
27
|
disabled?: boolean,
|
@@ -29,6 +30,7 @@ type SelectProps = {
|
|
29
30
|
options: SelectOption[],
|
30
31
|
id?: string,
|
31
32
|
includeBlank?: string,
|
33
|
+
inline?: boolean,
|
32
34
|
label?: string,
|
33
35
|
margin: string,
|
34
36
|
marginBottom: string,
|
@@ -53,10 +55,12 @@ const Select = ({
|
|
53
55
|
blankSelection,
|
54
56
|
children,
|
55
57
|
className,
|
58
|
+
compact = false,
|
56
59
|
data = {},
|
57
60
|
disabled = false,
|
58
61
|
error,
|
59
62
|
label,
|
63
|
+
inline = false,
|
60
64
|
multiple = false,
|
61
65
|
name,
|
62
66
|
onChange = () => {},
|
@@ -69,13 +73,18 @@ const Select = ({
|
|
69
73
|
const dataProps = buildDataProps(data)
|
70
74
|
const optionsList = createOptions(options)
|
71
75
|
|
76
|
+
const inlineClass = inline ? 'inline' : null
|
77
|
+
const compactClass = compact ? 'compact' : null
|
72
78
|
const classes = classnames(
|
73
79
|
buildCss('pb_select'),
|
74
80
|
globalProps({
|
75
81
|
...props,
|
76
82
|
marginBottom: props.marginBottom || props.margin || 'sm',
|
77
83
|
}),
|
78
|
-
className
|
84
|
+
className,
|
85
|
+
inlineClass,
|
86
|
+
compactClass
|
87
|
+
)
|
79
88
|
|
80
89
|
const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
|
81
90
|
|
@@ -64,6 +64,37 @@
|
|
64
64
|
transform: translateY(-50%);
|
65
65
|
pointer-events: none;
|
66
66
|
}
|
67
|
+
&.inline {
|
68
|
+
&:not(:hover) {
|
69
|
+
svg {
|
70
|
+
display: none;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
&:hover {
|
74
|
+
select {
|
75
|
+
color: $primary !important;
|
76
|
+
background: rgba(0,130,255,0.1);
|
77
|
+
}
|
78
|
+
svg {
|
79
|
+
color: $primary !important;
|
80
|
+
font-size: 16px;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
select {
|
84
|
+
box-shadow: none;
|
85
|
+
border-color: transparent;
|
86
|
+
padding: 4px 8px;
|
87
|
+
border-radius: 4px;
|
88
|
+
option {
|
89
|
+
background-color: $white;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
&.compact {
|
93
|
+
select {
|
94
|
+
font-size: 12px;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
67
98
|
}
|
68
99
|
|
69
100
|
[class^=pb_select].dark {
|
@@ -96,4 +127,36 @@
|
|
96
127
|
}
|
97
128
|
}
|
98
129
|
}
|
99
|
-
|
130
|
+
&.inline {
|
131
|
+
&:not(:hover) {
|
132
|
+
svg {
|
133
|
+
display: none;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
&:hover {
|
137
|
+
select {
|
138
|
+
color: $white !important;
|
139
|
+
background: rgba(0,130,255,0.1);
|
140
|
+
}
|
141
|
+
svg {
|
142
|
+
color: $primary !important;
|
143
|
+
font-size: 16px;
|
144
|
+
}
|
145
|
+
}
|
146
|
+
select {
|
147
|
+
box-shadow: none;
|
148
|
+
border-color: transparent;
|
149
|
+
background: transparent;
|
150
|
+
padding: 4px 8px;
|
151
|
+
border-radius: 4px;
|
152
|
+
option {
|
153
|
+
background-color: $white;
|
154
|
+
}
|
155
|
+
}
|
156
|
+
&.compact {
|
157
|
+
select {
|
158
|
+
font-size: 12px;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("select", props: {
|
2
|
+
label: "Favorite Food",
|
3
|
+
name: "food",
|
4
|
+
inline: true,
|
5
|
+
options: [
|
6
|
+
{
|
7
|
+
value: "1",
|
8
|
+
value_text: "Burgers",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
value: "2",
|
12
|
+
value_text: "Pizza",
|
13
|
+
},
|
14
|
+
{
|
15
|
+
value: "3",
|
16
|
+
value_text: "Tacos",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
value: "4",
|
20
|
+
value_text: "BBQ",
|
21
|
+
},
|
22
|
+
]
|
23
|
+
}) %>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Body, Select } from '../..'
|
3
|
+
|
4
|
+
const SelectInline = (props) => {
|
5
|
+
const options = [
|
6
|
+
{
|
7
|
+
value: '1',
|
8
|
+
text: 'Burgers',
|
9
|
+
},
|
10
|
+
{
|
11
|
+
value: '2',
|
12
|
+
text: 'Pizza',
|
13
|
+
},
|
14
|
+
{
|
15
|
+
value: '3',
|
16
|
+
text: 'Tacos',
|
17
|
+
},
|
18
|
+
]
|
19
|
+
|
20
|
+
return (
|
21
|
+
<div>
|
22
|
+
<Select
|
23
|
+
inline
|
24
|
+
label="Favorite Food"
|
25
|
+
name="food"
|
26
|
+
options={options}
|
27
|
+
{...props}
|
28
|
+
/>
|
29
|
+
<Body
|
30
|
+
status="negative"
|
31
|
+
{...props}
|
32
|
+
/>
|
33
|
+
</div>
|
34
|
+
)
|
35
|
+
}
|
36
|
+
|
37
|
+
export default SelectInline
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= pb_rails("select", props: {
|
2
|
+
label: "Favorite Food",
|
3
|
+
name: "food",
|
4
|
+
inline: true,
|
5
|
+
compact: true,
|
6
|
+
options: [
|
7
|
+
{
|
8
|
+
value: "1",
|
9
|
+
value_text: "Burgers",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
value: "2",
|
13
|
+
value_text: "Pizza",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
value: "3",
|
17
|
+
value_text: "Tacos",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
value: "4",
|
21
|
+
value_text: "BBQ",
|
22
|
+
},
|
23
|
+
]
|
24
|
+
}) %>
|
@@ -0,0 +1,38 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Body, Select } from '../..'
|
3
|
+
|
4
|
+
const SelectInlineCompact = (props) => {
|
5
|
+
const options = [
|
6
|
+
{
|
7
|
+
value: '1',
|
8
|
+
text: 'Burgers',
|
9
|
+
},
|
10
|
+
{
|
11
|
+
value: '2',
|
12
|
+
text: 'Pizza',
|
13
|
+
},
|
14
|
+
{
|
15
|
+
value: '3',
|
16
|
+
text: 'Tacos',
|
17
|
+
},
|
18
|
+
]
|
19
|
+
|
20
|
+
return (
|
21
|
+
<div>
|
22
|
+
<Select
|
23
|
+
compact
|
24
|
+
inline
|
25
|
+
label="Favorite Food"
|
26
|
+
name="food"
|
27
|
+
options={options}
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<Body
|
31
|
+
status="negative"
|
32
|
+
{...props}
|
33
|
+
/>
|
34
|
+
</div>
|
35
|
+
)
|
36
|
+
}
|
37
|
+
|
38
|
+
export default SelectInlineCompact
|
@@ -9,6 +9,8 @@ examples:
|
|
9
9
|
- select_value_text_same: Equal option value and value text
|
10
10
|
- select_custom_select: Custom Select
|
11
11
|
- select_error: Select w/ Error
|
12
|
+
- select_inline: Select Inline
|
13
|
+
- select_inline_compact: Select Inline Compact
|
12
14
|
|
13
15
|
|
14
16
|
|
@@ -21,3 +23,5 @@ examples:
|
|
21
23
|
- select_value_text_same: Equal option value and value text
|
22
24
|
- select_custom_select: Custom Select
|
23
25
|
- select_error: Select w/ Error
|
26
|
+
- select_inline: Select Inline
|
27
|
+
- select_inline_compact: Select Inline Compact
|
@@ -6,3 +6,5 @@ export { default as SelectRequired } from './_select_required.jsx'
|
|
6
6
|
export { default as SelectCustomSelect } from './_select_custom_select.jsx'
|
7
7
|
export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
|
8
8
|
export { default as SelectError } from './_select_error.jsx'
|
9
|
+
export { default as SelectInline } from './_select_inline.jsx'
|
10
|
+
export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
2
|
data: object.data,
|
3
3
|
aria: object.aria,
|
4
|
-
class: object.
|
4
|
+
class: object.classnames) do %>
|
5
5
|
<% if object.label %>
|
6
6
|
<label class="pb_select_kit_label" for="<%= object.name %>">
|
7
7
|
<%= pb_rails("caption", props: { text: object.label }) %>
|
@@ -6,9 +6,11 @@ module Playbook
|
|
6
6
|
module PbSelect
|
7
7
|
class Select < Playbook::KitBase
|
8
8
|
prop :blank_selection
|
9
|
+
prop :compact, type: Playbook::Props::Boolean, default: false
|
9
10
|
prop :disabled, type: Playbook::Props::Boolean, default: false
|
10
11
|
prop :error
|
11
12
|
prop :include_blank
|
13
|
+
prop :inline, type: Playbook::Props::Boolean, default: false
|
12
14
|
prop :label
|
13
15
|
prop :multiple, type: Playbook::Props::Boolean, default: false
|
14
16
|
prop :name
|
@@ -16,10 +18,22 @@ module Playbook
|
|
16
18
|
prop :options, type: Playbook::Props::HashArray, required: false, default: []
|
17
19
|
prop :required, type: Playbook::Props::Boolean, default: false
|
18
20
|
|
21
|
+
def classnames
|
22
|
+
classname + inline_class + compact_class
|
23
|
+
end
|
24
|
+
|
19
25
|
def classname
|
20
26
|
generate_classname("pb_select", select_margin_bottom, separator: " ")
|
21
27
|
end
|
22
28
|
|
29
|
+
def inline_class
|
30
|
+
inline ? " inline " : " "
|
31
|
+
end
|
32
|
+
|
33
|
+
def compact_class
|
34
|
+
compact ? "compact" : ""
|
35
|
+
end
|
36
|
+
|
23
37
|
def select_wrapper_class
|
24
38
|
"pb_select_kit_wrapper" + error_class
|
25
39
|
end
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 10.
|
4
|
+
version: 10.5.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-
|
12
|
+
date: 2021-08-04 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1505,6 +1505,10 @@ files:
|
|
1505
1505
|
- app/pb_kits/playbook/pb_select/docs/_select_error.html.erb
|
1506
1506
|
- app/pb_kits/playbook/pb_select/docs/_select_error.jsx
|
1507
1507
|
- app/pb_kits/playbook/pb_select/docs/_select_error.md
|
1508
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb
|
1509
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline.jsx
|
1510
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb
|
1511
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
|
1508
1512
|
- app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
|
1509
1513
|
- app/pb_kits/playbook/pb_select/docs/_select_required.jsx
|
1510
1514
|
- app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
|
@@ -2076,9 +2080,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2076
2080
|
version: '0'
|
2077
2081
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2078
2082
|
requirements:
|
2079
|
-
- - "
|
2083
|
+
- - ">="
|
2080
2084
|
- !ruby/object:Gem::Version
|
2081
|
-
version:
|
2085
|
+
version: '0'
|
2082
2086
|
requirements: []
|
2083
2087
|
rubygems_version: 3.0.3
|
2084
2088
|
signing_key:
|