playbook_ui 10.3.0 → 10.6.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/pb_bar_graph/barGraphSettings.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.js +2 -2
- data/app/pb_kits/playbook/pb_date/docs/_description.md +8 -0
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +12 -2
- data/app/pb_kits/playbook/pb_icon/_icon.scss +7 -2
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +16 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +10 -2
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +13 -7
- data/app/pb_kits/playbook/pb_icon/icon.rb +33 -1
- data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js +1 -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/app/pb_kits/playbook/pb_text_input/text_input.rb +7 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +12 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -0
- data/dist/reset.css +60 -1
- data/lib/playbook/version.rb +2 -2
- metadata +17 -12
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 34f2215246b7aa5e323ef34760aa7e79114a9cbfebeb38c9cf80b8b8ad41b9db
|
4
|
+
data.tar.gz: 60da4e3188a1a35d9be3fc4c88b0a4c4f0dbca4e2cebe4abfc55dbd8cf82334f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6fb1b57113df2f9175b8230a7cc55f446958e682abda76469696b3578523e7a77509f5cb22df38b44e3398b33c0d3db213878d630592fac46c0b67843fe6071c
|
7
|
+
data.tar.gz: a8882b4954631274a8e8f7889acd3603cb616426eb6e4ef3ebb80bbb0bd780f0187c879494ce31d6a82c22a0a1bb9c13b4d6c71087926f585c8c8f0c70d76210
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { commonSettings } from '../pb_dashboard/commonSettings.js'
|
2
|
-
import typography from '../tokens/_typography.scss'
|
2
|
+
import typography from '../tokens/exports/_typography.scss'
|
3
3
|
|
4
4
|
const sizeColumns = function(highchart) {
|
5
5
|
const column = highchart.plotOptions.column
|
@@ -1,3 +1,11 @@
|
|
1
1
|
Use to display the date. Year will not display if it is the current year.
|
2
2
|
|
3
3
|
`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.
|
4
|
+
|
5
|
+
**Please note**: this kit could potentially change the dates on you!
|
6
|
+
|
7
|
+
This is because the Javascript `Date` class does not have the concept of a date without time. If you pass a Ruby `Date` string to JavaScript, you will receive a date *and* a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.
|
8
|
+
|
9
|
+
For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".
|
10
|
+
|
11
|
+
Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.
|
@@ -14,12 +14,14 @@ import Card from '../pb_card/_card'
|
|
14
14
|
type FileUploadProps = {
|
15
15
|
accept?: array<string>,
|
16
16
|
className?: string,
|
17
|
+
acceptedFilesDescription?: string,
|
17
18
|
onFilesAccepted: Callback,
|
18
19
|
}
|
19
20
|
|
20
21
|
const FileUpload = (props: FileUploadProps) => {
|
21
22
|
const {
|
22
|
-
accept = ['
|
23
|
+
accept = ['*'],
|
24
|
+
acceptedFilesDescription = '',
|
23
25
|
className,
|
24
26
|
onFilesAccepted = noop,
|
25
27
|
} = props
|
@@ -32,6 +34,14 @@ const FileUpload = (props: FileUploadProps) => {
|
|
32
34
|
onDrop,
|
33
35
|
})
|
34
36
|
|
37
|
+
const acceptedFileTypes = accept.map((fileType) => {
|
38
|
+
if (fileType.startsWith('image/')) {
|
39
|
+
return fileType.replace('image/', ' ')
|
40
|
+
} else {
|
41
|
+
return fileType
|
42
|
+
}
|
43
|
+
})
|
44
|
+
|
35
45
|
return (
|
36
46
|
<div
|
37
47
|
className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
|
@@ -43,7 +53,7 @@ const FileUpload = (props: FileUploadProps) => {
|
|
43
53
|
<If condition={isDragActive}>
|
44
54
|
<p>{'Drop the files here ...'}</p>
|
45
55
|
<Else />
|
46
|
-
<p>{
|
56
|
+
<p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
|
47
57
|
</If>
|
48
58
|
</Body>
|
49
59
|
</Card>
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<%# SVG fill color inherited from css color property %>
|
2
|
+
<div class="icon-wrapper">
|
3
|
+
|
4
|
+
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
5
|
+
<p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
|
6
|
+
<p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
|
7
|
+
<p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
|
8
|
+
<p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
|
9
|
+
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
|
10
|
+
|
11
|
+
<%= pb_rails("body", props: {
|
12
|
+
text: "Custom icons are compatible with other icon props (size, rotation,
|
13
|
+
spin, flip, etc). Their SVG fill colors will be inherited from
|
14
|
+
parent element's css color properties."
|
15
|
+
} ) %>
|
16
|
+
</div>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
# Tips for Custom Icons
|
2
2
|
|
3
3
|
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
|
4
4
|
|
@@ -8,4 +8,12 @@ Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <cod
|
|
8
8
|
|
9
9
|
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
10
10
|
|
11
|
-
You must source *your own SVG into
|
11
|
+
You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
12
|
+
|
13
|
+
### React
|
14
|
+
|
15
|
+
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
16
|
+
|
17
|
+
### Rails
|
18
|
+
|
19
|
+
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|
@@ -1,7 +1,13 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
<% if object.custom_icon %>
|
2
|
+
<%= object.render_svg(object.custom_icon) %>
|
3
|
+
<% else %>
|
4
|
+
<%= content_tag(:i, nil,
|
5
|
+
id: object.id,
|
6
|
+
data: object.data,
|
7
|
+
class: object.classname
|
8
|
+
) %>
|
9
|
+
<%= content_tag(:span, nil,
|
10
|
+
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
11
|
+
hidden: true
|
12
|
+
) %>
|
13
|
+
<% end %>
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
require "open-uri"
|
4
|
+
|
3
5
|
module Playbook
|
4
6
|
module PbIcon
|
5
7
|
class Icon < Playbook::KitBase
|
@@ -10,7 +12,9 @@ module Playbook
|
|
10
12
|
prop :flip, type: Playbook::Props::Enum,
|
11
13
|
values: ["horizontal", "vertical", "both", nil],
|
12
14
|
default: nil
|
13
|
-
prop :icon
|
15
|
+
prop :icon
|
16
|
+
prop :custom_icon, type: Playbook::Props::String,
|
17
|
+
default: nil
|
14
18
|
prop :inverse, type: Playbook::Props::Boolean,
|
15
19
|
default: false
|
16
20
|
prop :list_item, type: Playbook::Props::Boolean,
|
@@ -48,6 +52,34 @@ module Playbook
|
|
48
52
|
)
|
49
53
|
end
|
50
54
|
|
55
|
+
def custom_icon_classname
|
56
|
+
generate_classname(
|
57
|
+
"pb_icon_kit",
|
58
|
+
border_class,
|
59
|
+
fixed_width_class,
|
60
|
+
flip_class,
|
61
|
+
inverse_class,
|
62
|
+
list_item_class,
|
63
|
+
pull_class,
|
64
|
+
pulse_class,
|
65
|
+
rotation_class,
|
66
|
+
size_class,
|
67
|
+
spin_class,
|
68
|
+
separator: " "
|
69
|
+
)
|
70
|
+
end
|
71
|
+
|
72
|
+
def render_svg(path)
|
73
|
+
if File.extname(path) == ".svg"
|
74
|
+
doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
|
75
|
+
svg = doc.at_css "svg"
|
76
|
+
svg["class"] = "pb_custom_icon " + object.custom_icon_classname
|
77
|
+
raw doc
|
78
|
+
else
|
79
|
+
raise("Custom icon must be an svg. Please check your path and file type.")
|
80
|
+
end
|
81
|
+
end
|
82
|
+
|
51
83
|
private
|
52
84
|
|
53
85
|
def border_class
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { commonSettings } from '../pb_dashboard/commonSettings.js'
|
2
|
-
import typography from '../tokens/_typography.scss'
|
2
|
+
import typography from '../tokens/exports/_typography.scss'
|
3
3
|
|
4
4
|
const markerStyles = (highchart) => {
|
5
5
|
highchart.plotOptions.line.marker.enabled = true
|
@@ -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
|
@@ -10,6 +10,8 @@ module Playbook
|
|
10
10
|
prop :error
|
11
11
|
prop :inline, type: Playbook::Props::Boolean,
|
12
12
|
default: false
|
13
|
+
prop :input_options, type: Playbook::Props::Hash,
|
14
|
+
default: {}
|
13
15
|
prop :label
|
14
16
|
prop :name
|
15
17
|
prop :placeholder
|
@@ -27,7 +29,7 @@ module Playbook
|
|
27
29
|
end
|
28
30
|
|
29
31
|
def input_tag
|
30
|
-
tag(:input,
|
32
|
+
tag(:input, all_input_options)
|
31
33
|
end
|
32
34
|
|
33
35
|
def has_add_on?
|
@@ -44,13 +46,13 @@ module Playbook
|
|
44
46
|
|
45
47
|
private
|
46
48
|
|
47
|
-
def
|
49
|
+
def all_input_options
|
48
50
|
{
|
49
51
|
autocomplete: autocomplete ? nil : "off",
|
50
|
-
class: "text_input",
|
52
|
+
class: "text_input #{input_options.dig(:classname) || ''}",
|
51
53
|
data: validation_data,
|
52
54
|
disabled: disabled,
|
53
|
-
id: id,
|
55
|
+
id: input_options.dig(:id) || id,
|
54
56
|
name: name,
|
55
57
|
pattern: validation_pattern,
|
56
58
|
placeholder: placeholder,
|
@@ -69,7 +71,7 @@ module Playbook
|
|
69
71
|
end
|
70
72
|
|
71
73
|
def validation_data
|
72
|
-
fields = {}
|
74
|
+
fields = input_options.dig(:data) || {}
|
73
75
|
fields[:message] = validation_message unless validation_message.blank?
|
74
76
|
fields
|
75
77
|
end
|
@@ -1,4 +1,15 @@
|
|
1
|
-
<%= pb_rails("typeahead", props: {
|
1
|
+
<%= pb_rails("typeahead", props: {
|
2
|
+
label: "user",
|
3
|
+
name: :foo,
|
4
|
+
data: { typeahead_example: true },
|
5
|
+
input_options: {
|
6
|
+
classname: "my-typeahead-class",
|
7
|
+
data: {
|
8
|
+
typeahead_testing: "data field test"
|
9
|
+
},
|
10
|
+
id: "typeahead-input-id-test",
|
11
|
+
},
|
12
|
+
})%>
|
2
13
|
|
3
14
|
<br><br><br>
|
4
15
|
|
data/dist/reset.css
CHANGED
@@ -1,2 +1,61 @@
|
|
1
|
-
|
1
|
+
/* CLEAN UP AND REMOVE */
|
2
|
+
/* Headings */
|
3
|
+
/* Standard Font Weights */
|
4
|
+
/* Non_Standard Font Weights */
|
5
|
+
/*=====================================
|
6
|
+
Base colors should not be documented.
|
7
|
+
Only document color use.
|
8
|
+
|
9
|
+
Colors -----------------------------*/
|
10
|
+
/* Specialty Gradient -----------------*/
|
11
|
+
/* Interface colors -------------------*/
|
12
|
+
/* Main colors ------------------------*/
|
13
|
+
/*=====================================
|
14
|
+
|
15
|
+
Background colors ------------------*/
|
16
|
+
/* Card colors ------------------*/
|
17
|
+
/* Active colors ----------------------*/
|
18
|
+
/* Hover colors -----------------------*/
|
19
|
+
/* Focus colors -----------------------*/
|
20
|
+
/* Border colors ----------------------*/
|
21
|
+
/* Shadow colors ----------------------*/
|
22
|
+
/* Text colors ------------------------*/
|
23
|
+
/* Data colors ------------------------*/
|
24
|
+
/* Status colors ----------------------*/
|
25
|
+
/* Link colors ------------------------*/
|
26
|
+
/* Product colors ---------------------*/
|
27
|
+
/* Category colors ---------------------*/
|
28
|
+
* {
|
29
|
+
box-sizing: border-box;
|
30
|
+
margin: 0;
|
31
|
+
padding: 0; }
|
32
|
+
*:before, *:after {
|
33
|
+
box-sizing: border-box; }
|
34
|
+
|
35
|
+
html {
|
36
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
37
|
+
height: 100vh;
|
38
|
+
overflow-x: hidden; }
|
39
|
+
|
40
|
+
body {
|
41
|
+
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
|
42
|
+
font-size: 16px;
|
43
|
+
line-height: 1.5;
|
44
|
+
background-color: #F3F7FB;
|
45
|
+
height: 100%;
|
46
|
+
letter-spacing: 0;
|
47
|
+
font-weight: 400;
|
48
|
+
font-style: normal;
|
49
|
+
text-rendering: optimizeLegibility;
|
50
|
+
-moz-font-feature-settings: "liga" on;
|
51
|
+
color: #242B42;
|
52
|
+
margin: 0 !important;
|
53
|
+
padding: 0 !important;
|
54
|
+
box-sizing: border-box;
|
55
|
+
min-height: 100vh;
|
56
|
+
padding: 50px; }
|
57
|
+
|
58
|
+
a {
|
59
|
+
text-decoration: none;
|
60
|
+
color: #0056CF; }
|
2
61
|
|
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.6.1.pre.alpha1
|
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-18 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -20,7 +20,7 @@ dependencies:
|
|
20
20
|
version: 5.2.4.5
|
21
21
|
- - "<"
|
22
22
|
- !ruby/object:Gem::Version
|
23
|
-
version: '
|
23
|
+
version: '6.0'
|
24
24
|
type: :runtime
|
25
25
|
prerelease: false
|
26
26
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -30,7 +30,7 @@ dependencies:
|
|
30
30
|
version: 5.2.4.5
|
31
31
|
- - "<"
|
32
32
|
- !ruby/object:Gem::Version
|
33
|
-
version: '
|
33
|
+
version: '6.0'
|
34
34
|
- !ruby/object:Gem::Dependency
|
35
35
|
name: actionview
|
36
36
|
requirement: !ruby/object:Gem::Requirement
|
@@ -40,7 +40,7 @@ dependencies:
|
|
40
40
|
version: 5.2.4.5
|
41
41
|
- - "<"
|
42
42
|
- !ruby/object:Gem::Version
|
43
|
-
version: '
|
43
|
+
version: '6.0'
|
44
44
|
type: :runtime
|
45
45
|
prerelease: false
|
46
46
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -50,7 +50,7 @@ dependencies:
|
|
50
50
|
version: 5.2.4.5
|
51
51
|
- - "<"
|
52
52
|
- !ruby/object:Gem::Version
|
53
|
-
version: '
|
53
|
+
version: '6.0'
|
54
54
|
- !ruby/object:Gem::Dependency
|
55
55
|
name: activesupport
|
56
56
|
requirement: !ruby/object:Gem::Requirement
|
@@ -60,7 +60,7 @@ dependencies:
|
|
60
60
|
version: 5.2.4.5
|
61
61
|
- - "<"
|
62
62
|
- !ruby/object:Gem::Version
|
63
|
-
version: '
|
63
|
+
version: '6.0'
|
64
64
|
type: :runtime
|
65
65
|
prerelease: false
|
66
66
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -70,7 +70,7 @@ dependencies:
|
|
70
70
|
version: 5.2.4.5
|
71
71
|
- - "<"
|
72
72
|
- !ruby/object:Gem::Version
|
73
|
-
version: '
|
73
|
+
version: '6.0'
|
74
74
|
- !ruby/object:Gem::Dependency
|
75
75
|
name: react-rails
|
76
76
|
requirement: !ruby/object:Gem::Requirement
|
@@ -192,7 +192,7 @@ dependencies:
|
|
192
192
|
version: 5.2.4.5
|
193
193
|
- - "<"
|
194
194
|
- !ruby/object:Gem::Version
|
195
|
-
version: '
|
195
|
+
version: '6.0'
|
196
196
|
type: :development
|
197
197
|
prerelease: false
|
198
198
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -202,7 +202,7 @@ dependencies:
|
|
202
202
|
version: 5.2.4.5
|
203
203
|
- - "<"
|
204
204
|
- !ruby/object:Gem::Version
|
205
|
-
version: '
|
205
|
+
version: '6.0'
|
206
206
|
- !ruby/object:Gem::Dependency
|
207
207
|
name: rspec-html-matchers
|
208
208
|
requirement: !ruby/object:Gem::Requirement
|
@@ -1004,6 +1004,7 @@ files:
|
|
1004
1004
|
- app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
|
1005
1005
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
|
1006
1006
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
|
1007
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
|
1007
1008
|
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
|
1008
1009
|
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
|
1009
1010
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
|
@@ -1505,6 +1506,10 @@ files:
|
|
1505
1506
|
- app/pb_kits/playbook/pb_select/docs/_select_error.html.erb
|
1506
1507
|
- app/pb_kits/playbook/pb_select/docs/_select_error.jsx
|
1507
1508
|
- app/pb_kits/playbook/pb_select/docs/_select_error.md
|
1509
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb
|
1510
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline.jsx
|
1511
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb
|
1512
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
|
1508
1513
|
- app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
|
1509
1514
|
- app/pb_kits/playbook/pb_select/docs/_select_required.jsx
|
1510
1515
|
- app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
|
@@ -2076,9 +2081,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2076
2081
|
version: '0'
|
2077
2082
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2078
2083
|
requirements:
|
2079
|
-
- - "
|
2084
|
+
- - ">"
|
2080
2085
|
- !ruby/object:Gem::Version
|
2081
|
-
version:
|
2086
|
+
version: 1.3.1
|
2082
2087
|
requirements: []
|
2083
2088
|
rubygems_version: 3.0.3
|
2084
2089
|
signing_key:
|