playbook_ui 9.13.0 → 9.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/data/menu.yml +25 -22
- data/app/pb_kits/playbook/pb_badge/_badge.scss +1 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +6 -2
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +1 -0
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +1 -0
- data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +3 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +10 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +36 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.rb +7 -1
- data/app/pb_kits/playbook/pb_select/_select.jsx +5 -5
- data/lib/playbook/version.rb +2 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4f73f96d383b621029f03705eda9526b792525c8aea168dcaf9e5ec3170c7f50
|
|
4
|
+
data.tar.gz: 6546b6a6bcd6aa85f201911ec9b9172ec80fc074bf3ac08a5c56b7eba7e6b74f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 114f54c49b9f01c16dc7391d592adb19b879ff941761948cfde8ec7e1b84ac04af269f785f26f4ac767d758a66d4fc10b2a5d85806d0ac22d79ffbacde83c0a3
|
|
7
|
+
data.tar.gz: 29ad7779088f7d8c3bb0f85accc2f136b3da76aeee2c634c9ad94bbd0be6b0256c2ab7eb9def98b5dd3df7a10d27a8d78181463f7721e5690404e54fe2a2d90a
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
kits:
|
|
2
|
-
-
|
|
3
|
-
|
|
2
|
+
- avatars:
|
|
3
|
+
- avatar
|
|
4
|
+
- avatar_action_button
|
|
5
|
+
- multiple_users
|
|
6
|
+
- multiple_users_stacked
|
|
7
|
+
- user
|
|
4
8
|
- background
|
|
5
9
|
- bread_crumbs
|
|
6
10
|
- buttons:
|
|
@@ -19,7 +23,6 @@ kits:
|
|
|
19
23
|
- dialog
|
|
20
24
|
- filter
|
|
21
25
|
- fixed_confirmation_toast
|
|
22
|
-
- flex
|
|
23
26
|
- forms:
|
|
24
27
|
- checkbox
|
|
25
28
|
- date_picker
|
|
@@ -37,19 +40,19 @@ kits:
|
|
|
37
40
|
- selectable_list
|
|
38
41
|
- text_input
|
|
39
42
|
- textarea
|
|
40
|
-
- typeahead
|
|
41
43
|
- toggle
|
|
44
|
+
- typeahead
|
|
42
45
|
- highlight
|
|
43
46
|
- icon
|
|
44
47
|
- icon_circle
|
|
45
48
|
- icon_stat_value
|
|
46
49
|
- icon_value
|
|
47
50
|
- image
|
|
48
|
-
-
|
|
51
|
+
- layouts:
|
|
52
|
+
- flex
|
|
53
|
+
- layout
|
|
49
54
|
- list
|
|
50
55
|
- loading_inline
|
|
51
|
-
- multiple_users
|
|
52
|
-
- multiple_users_stacked
|
|
53
56
|
- nav
|
|
54
57
|
- tags:
|
|
55
58
|
- badge
|
|
@@ -61,11 +64,22 @@ kits:
|
|
|
61
64
|
- progress_simple
|
|
62
65
|
- progress_step
|
|
63
66
|
- section_separator
|
|
64
|
-
- source
|
|
65
67
|
- star_rating
|
|
66
|
-
- stat_change
|
|
67
68
|
- table
|
|
68
69
|
- timeline
|
|
70
|
+
- time_and_date:
|
|
71
|
+
- date
|
|
72
|
+
- date_range_inline
|
|
73
|
+
- date_range_stacked
|
|
74
|
+
- date_stacked
|
|
75
|
+
- date_time
|
|
76
|
+
- date_time_stacked
|
|
77
|
+
- date_year_stacked
|
|
78
|
+
- time
|
|
79
|
+
- time_range_inline
|
|
80
|
+
- time_stacked
|
|
81
|
+
- timestamp
|
|
82
|
+
- weekday_stacked
|
|
69
83
|
- tooltip
|
|
70
84
|
- typography:
|
|
71
85
|
- body
|
|
@@ -75,26 +89,15 @@ kits:
|
|
|
75
89
|
- contact
|
|
76
90
|
- currency
|
|
77
91
|
- dashboard_value
|
|
78
|
-
- date
|
|
79
|
-
- date_range_inline
|
|
80
|
-
- date_range_stacked
|
|
81
|
-
- date_stacked
|
|
82
|
-
- date_time
|
|
83
|
-
- date_time_stacked
|
|
84
|
-
- date_year_stacked
|
|
85
92
|
- home_address_street
|
|
86
93
|
- label_pill
|
|
87
94
|
- label_value
|
|
88
95
|
- message
|
|
89
96
|
- person
|
|
90
97
|
- person_contact
|
|
98
|
+
- source
|
|
99
|
+
- stat_change
|
|
91
100
|
- stat_value
|
|
92
|
-
- time
|
|
93
|
-
- time_stacked
|
|
94
|
-
- timestamp
|
|
95
|
-
- time_range_inline
|
|
96
101
|
- title_count
|
|
97
102
|
- title_detail
|
|
98
|
-
- weekday_stacked
|
|
99
|
-
- user
|
|
100
103
|
- user_badge
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
position: relative;
|
|
17
17
|
flex-shrink: 0;
|
|
18
18
|
flex-grow: 0;
|
|
19
|
-
.pb_multiple_users_stacked_item {
|
|
19
|
+
[class^=pb_avatar_kit].pb_multiple_users_stacked_item {
|
|
20
20
|
height: $stacked_size;
|
|
21
21
|
width: $stacked_size;
|
|
22
22
|
&.dark {
|
|
@@ -41,13 +41,17 @@
|
|
|
41
41
|
height: $container_size;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
.second_item {
|
|
44
|
+
[class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
|
|
45
45
|
position: absolute;
|
|
46
46
|
bottom: 0;
|
|
47
47
|
right: 0;
|
|
48
48
|
z-index: 2;
|
|
49
49
|
background: tint($primary, 90%);
|
|
50
50
|
border-radius: $border_rad_mega;
|
|
51
|
+
padding: 0;
|
|
52
|
+
span {
|
|
53
|
+
transform: translateY(0);
|
|
54
|
+
}
|
|
51
55
|
.avatar_wrapper {
|
|
52
56
|
border: $border_size solid $white;
|
|
53
57
|
height: $stacked_size;
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
class: object.classname,
|
|
4
4
|
data: object.data,
|
|
5
5
|
id: object.id) do %>
|
|
6
|
-
<%= pb_rails("title", props: { text: object.display_text, size: 4, classname: "pb_pill_text" }) %>
|
|
6
|
+
<%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
|
|
7
7
|
<% end %>
|
|
@@ -9,6 +9,7 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
|
9
9
|
|
|
10
10
|
type RadioProps = {
|
|
11
11
|
aria?: object,
|
|
12
|
+
alignment?: String,
|
|
12
13
|
checked?: Boolean,
|
|
13
14
|
children?: Node,
|
|
14
15
|
className?: String,
|
|
@@ -25,6 +26,7 @@ type RadioProps = {
|
|
|
25
26
|
|
|
26
27
|
const Radio = ({
|
|
27
28
|
aria = {},
|
|
29
|
+
alignment = '',
|
|
28
30
|
children,
|
|
29
31
|
className,
|
|
30
32
|
dark = false,
|
|
@@ -40,7 +42,7 @@ const Radio = ({
|
|
|
40
42
|
}: RadioProps, ref) => {
|
|
41
43
|
const ariaProps = buildAriaProps(aria)
|
|
42
44
|
const dataProps = buildDataProps(data)
|
|
43
|
-
const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
|
|
45
|
+
const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), alignment, className)
|
|
44
46
|
|
|
45
47
|
return (
|
|
46
48
|
<label
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("radio", props: {
|
|
3
|
+
alignment: "vertical",
|
|
4
|
+
text: "Power",
|
|
5
|
+
input_options: {
|
|
6
|
+
tabindex: 0
|
|
7
|
+
},
|
|
8
|
+
margin_right: "sm",
|
|
9
|
+
name: "group 1",
|
|
10
|
+
value: "Power"
|
|
11
|
+
}) %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("radio", props: {
|
|
14
|
+
alignment: "vertical",
|
|
15
|
+
text: "Nitro",
|
|
16
|
+
margin_right: "sm",
|
|
17
|
+
name: "group 1",
|
|
18
|
+
value: "Nitro"
|
|
19
|
+
}) %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("radio", props: {
|
|
22
|
+
alignment: "vertical",
|
|
23
|
+
text: "Google",
|
|
24
|
+
name: "group 1",
|
|
25
|
+
value: "Google"
|
|
26
|
+
}) %>
|
|
27
|
+
<% end %>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Flex, Radio } from '../../'
|
|
3
|
+
|
|
4
|
+
const RadioAlignment = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Flex>
|
|
7
|
+
<Radio
|
|
8
|
+
alignment="vertical"
|
|
9
|
+
label="Power"
|
|
10
|
+
marginRight="sm"
|
|
11
|
+
name="Group2"
|
|
12
|
+
tabIndex={0}
|
|
13
|
+
value="Power"
|
|
14
|
+
/>
|
|
15
|
+
<br />
|
|
16
|
+
<Radio
|
|
17
|
+
alignment="vertical"
|
|
18
|
+
defaultChecked={false}
|
|
19
|
+
label="Nitro"
|
|
20
|
+
marginRight="sm"
|
|
21
|
+
name="Group2"
|
|
22
|
+
value="Nitro"
|
|
23
|
+
/>
|
|
24
|
+
<br />
|
|
25
|
+
<Radio
|
|
26
|
+
alignment="vertical"
|
|
27
|
+
defaultChecked={false}
|
|
28
|
+
label="Google"
|
|
29
|
+
name="Group2"
|
|
30
|
+
value="Google"
|
|
31
|
+
/>
|
|
32
|
+
</Flex>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export default RadioAlignment
|
|
@@ -5,6 +5,8 @@ require "action_view"
|
|
|
5
5
|
module Playbook
|
|
6
6
|
module PbRadio
|
|
7
7
|
class Radio < Playbook::KitBase
|
|
8
|
+
prop :alignment, type: Playbook::Props::String,
|
|
9
|
+
default: ""
|
|
8
10
|
prop :checked, type: Playbook::Props::Boolean,
|
|
9
11
|
default: false
|
|
10
12
|
prop :error, type: Playbook::Props::Boolean,
|
|
@@ -19,7 +21,7 @@ module Playbook
|
|
|
19
21
|
default: "radio_text"
|
|
20
22
|
|
|
21
23
|
def classname
|
|
22
|
-
generate_classname("pb_radio_kit") + error_class
|
|
24
|
+
generate_classname("pb_radio_kit") + error_class + alignment_class
|
|
23
25
|
end
|
|
24
26
|
|
|
25
27
|
def selected
|
|
@@ -35,6 +37,10 @@ module Playbook
|
|
|
35
37
|
def error_class
|
|
36
38
|
error ? " error" : ""
|
|
37
39
|
end
|
|
40
|
+
|
|
41
|
+
def alignment_class
|
|
42
|
+
alignment == "vertical" ? " vertical" : ""
|
|
43
|
+
end
|
|
38
44
|
end
|
|
39
45
|
end
|
|
40
46
|
end
|
|
@@ -126,17 +126,17 @@ const Select = ({
|
|
|
126
126
|
{optionsList}
|
|
127
127
|
</select>
|
|
128
128
|
</If>
|
|
129
|
+
<Icon
|
|
130
|
+
className="pb_select_kit_caret"
|
|
131
|
+
fixedWidth
|
|
132
|
+
icon="angle-down"
|
|
133
|
+
/>
|
|
129
134
|
<If condition={error}>
|
|
130
135
|
<Body
|
|
131
136
|
status="negative"
|
|
132
137
|
text={error}
|
|
133
138
|
/>
|
|
134
139
|
</If>
|
|
135
|
-
<Icon
|
|
136
|
-
className="pb_select_kit_caret"
|
|
137
|
-
fixedWidth
|
|
138
|
-
icon="angle-down"
|
|
139
|
-
/>
|
|
140
140
|
</label>
|
|
141
141
|
</div>
|
|
142
142
|
)
|
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: 9.
|
|
4
|
+
version: 9.15.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-05-
|
|
12
|
+
date: 2021-05-19 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -1536,6 +1536,8 @@ files:
|
|
|
1536
1536
|
- app/pb_kits/playbook/pb_radio/_radio.scss
|
|
1537
1537
|
- app/pb_kits/playbook/pb_radio/docs/_description.md
|
|
1538
1538
|
- app/pb_kits/playbook/pb_radio/docs/_footer.md
|
|
1539
|
+
- app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb
|
|
1540
|
+
- app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx
|
|
1539
1541
|
- app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb
|
|
1540
1542
|
- app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx
|
|
1541
1543
|
- app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb
|