playbook_ui 12.22.0.pre.alpha.play698responsivespacingglobalprop690 → 12.23.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_filter/Filter/CurrentFilters.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +16 -15
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +87 -83
- data/app/pb_kits/playbook/utilities/_spacing.scss +1 -27
- data/app/pb_kits/playbook/utilities/globalProps.ts +15 -60
- data/lib/playbook/spacing.rb +5 -20
- data/lib/playbook/version.rb +1 -1
- metadata +7 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f67ec70c0d6e7b36d12c63070302b19e05fb73a0ff350fb0231322450415ed3b
|
4
|
+
data.tar.gz: 437239a1f1bc8fe1b59e9060bd619c7111b3ba70c9a74bcd4bd8535914488439
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: acd3344d113e1132c9ab0f9bb022cdf614ad90f7a71cd1d5b0cadfc8a2eb1e20bab49f34570c7c2574cac06977f542d12013213e1e92288d054d82b379a425c2
|
7
|
+
data.tar.gz: 7b914c68ab0c769a8e75e63600eaf46027ff3afbe8b5ceede26a13f82c2b81ab920b06a12f2d66d7ba426f3194f0f60b206afed133f6817511043ff3016c16e2
|
@@ -9,22 +9,23 @@
|
|
9
9
|
<div class="maskContainer">
|
10
10
|
<div class="filters">
|
11
11
|
<div class="left_gradient"></div>
|
12
|
-
<% object.filters
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
}) %>
|
22
|
-
</div>
|
23
|
-
<% else %>
|
24
|
-
<div class="filter">
|
25
|
-
<%= pb_rails("caption", props: { text: filter[:name]}) %>
|
26
|
-
<%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
|
12
|
+
<% if object.filters&.none? { |filter| filter[:name].present? } %>
|
13
|
+
<div>
|
14
|
+
<%= pb_rails("body", props: {
|
15
|
+
color: "light",
|
16
|
+
padding_left: "xs",
|
17
|
+
size: 4,
|
18
|
+
tag:"span",
|
19
|
+
text: "No Filter Selected"
|
20
|
+
}) %>
|
27
21
|
</div>
|
22
|
+
<% end %>
|
23
|
+
<% object.filters&.each do |filter| %>
|
24
|
+
<% if filter[:name].present? %>
|
25
|
+
<div class="filter">
|
26
|
+
<%= pb_rails("caption", props: { text: filter[:name]}) %>
|
27
|
+
<%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
|
28
|
+
</div>
|
28
29
|
<% end %>
|
29
30
|
<% end %>
|
30
31
|
<div class="right_gradient"></div>
|
@@ -2,8 +2,7 @@
|
|
2
2
|
@import "../tokens/titles";
|
3
3
|
@import "../tokens/colors";
|
4
4
|
|
5
|
-
|
6
|
-
[class^=pb_text_input_kit] {
|
5
|
+
[class^="pb_text_input_kit"] {
|
7
6
|
margin-bottom: $space_sm;
|
8
7
|
.pb_text_input_kit_label {
|
9
8
|
margin-bottom: $space_xs;
|
@@ -22,8 +21,8 @@
|
|
22
21
|
overflow: hidden;
|
23
22
|
}
|
24
23
|
input:hover,
|
25
|
-
.text_input:hover{
|
26
|
-
background-color: rgba($focus_input_light
|
24
|
+
.text_input:hover {
|
25
|
+
background-color: rgba($focus_input_light, $opacity_5);
|
27
26
|
}
|
28
27
|
input:focus,
|
29
28
|
.text_input:focus,
|
@@ -32,7 +31,7 @@
|
|
32
31
|
@include pb_textarea_focus;
|
33
32
|
@include transition_default;
|
34
33
|
border-color: $primary;
|
35
|
-
background-color: rgba($focus_input_light
|
34
|
+
background-color: rgba($focus_input_light, $opacity_5);
|
36
35
|
}
|
37
36
|
}
|
38
37
|
&.dark {
|
@@ -52,15 +51,16 @@
|
|
52
51
|
.text_input .placeholder {
|
53
52
|
@include pb_body_light_dark;
|
54
53
|
}
|
55
|
-
input,
|
54
|
+
input,
|
55
|
+
.text_input {
|
56
56
|
@include pb_textarea_dark;
|
57
57
|
@include pb_body_dark;
|
58
58
|
overflow: hidden;
|
59
|
-
background-color: rgba($white
|
59
|
+
background-color: rgba($white, $opacity_1);
|
60
60
|
border-color: rgba($white, 0.15);
|
61
61
|
}
|
62
62
|
input:hover,
|
63
|
-
.text_input:hover{
|
63
|
+
.text_input:hover {
|
64
64
|
background-color: rgba($white, 0.15);
|
65
65
|
}
|
66
66
|
input:focus,
|
@@ -73,7 +73,8 @@
|
|
73
73
|
}
|
74
74
|
&.error {
|
75
75
|
.text_input_wrapper {
|
76
|
-
input,
|
76
|
+
input,
|
77
|
+
.text_input {
|
77
78
|
border-color: $error_dark;
|
78
79
|
}
|
79
80
|
}
|
@@ -81,10 +82,11 @@
|
|
81
82
|
}
|
82
83
|
&.error {
|
83
84
|
.text_input_wrapper {
|
84
|
-
[class*=pb_body_kit] {
|
85
|
+
[class*="pb_body_kit"] {
|
85
86
|
margin-top: $space_xs / 2;
|
86
87
|
}
|
87
|
-
input,
|
88
|
+
input,
|
89
|
+
.text_input {
|
88
90
|
border-color: $error;
|
89
91
|
}
|
90
92
|
}
|
@@ -151,90 +153,92 @@
|
|
151
153
|
}
|
152
154
|
}
|
153
155
|
}
|
154
|
-
}
|
155
156
|
|
156
|
-
.text_input_wrapper_add_on {
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
157
|
+
.text_input_wrapper_add_on {
|
158
|
+
& > [class^="pb_text_input_kit"]:not(:last-child) {
|
159
|
+
.text_input_wrapper_add_on input,
|
160
|
+
[class^="pb_text_input_kit"] .text_input_wrapper_add_on .text_input {
|
161
|
+
border-bottom-right-radius: 0;
|
162
|
+
border-top-right-radius: 0;
|
163
|
+
border-right-width: 0;
|
164
|
+
}
|
165
|
+
}
|
166
|
+
.section-separator span {
|
167
|
+
padding: 0;
|
162
168
|
}
|
163
|
-
}
|
164
|
-
.section-separator span {
|
165
|
-
padding: 0;
|
166
|
-
}
|
167
169
|
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
170
|
+
.add-on {
|
171
|
+
&-card {
|
172
|
+
height: 45px;
|
173
|
+
margin: 0;
|
174
|
+
padding: 0 !important;
|
175
|
+
align-items: center;
|
176
|
+
justify-content: center;
|
177
|
+
width: 45px;
|
178
|
+
}
|
179
|
+
&-icon {
|
180
|
+
color: $text_lt_lighter;
|
181
|
+
}
|
182
|
+
&-card-dark {
|
183
|
+
background-color: rgba($white, $opacity_1);
|
184
|
+
border-color: rgba($white, 0.15);
|
185
|
+
}
|
186
|
+
&-left {
|
187
|
+
.text_input {
|
188
|
+
border-top-left-radius: 0;
|
189
|
+
border-bottom-left-radius: 0;
|
190
|
+
}
|
187
191
|
}
|
188
|
-
}
|
189
192
|
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
193
|
+
&-right {
|
194
|
+
.text_input {
|
195
|
+
border-top-right-radius: 0;
|
196
|
+
border-bottom-right-radius: 0;
|
197
|
+
}
|
194
198
|
}
|
195
199
|
}
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
}
|
205
|
-
|
206
|
-
.card-right-aligned {
|
207
|
-
border-top-left-radius: 0;
|
208
|
-
border-bottom-left-radius: 0;
|
209
|
-
}
|
200
|
+
.text_input:focus ~ .add-on-card-dark {
|
201
|
+
background-color: $focus_input_dark;
|
202
|
+
border-width: 0px;
|
203
|
+
}
|
204
|
+
.card-left-aligned {
|
205
|
+
border-top-right-radius: 0;
|
206
|
+
border-bottom-right-radius: 0;
|
207
|
+
}
|
210
208
|
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
border-right: 0;
|
215
|
-
}
|
216
|
-
.text_input {
|
217
|
-
border-left: 0;
|
218
|
-
padding-left: 16px;
|
219
|
-
}
|
209
|
+
.card-right-aligned {
|
210
|
+
border-top-left-radius: 0;
|
211
|
+
border-bottom-left-radius: 0;
|
220
212
|
}
|
221
|
-
|
222
|
-
|
223
|
-
|
213
|
+
|
214
|
+
.border {
|
215
|
+
&_right_off {
|
216
|
+
.card-left-aligned {
|
217
|
+
border-right: 0;
|
218
|
+
}
|
219
|
+
.text_input {
|
220
|
+
border-left: 0;
|
221
|
+
padding-left: 16px;
|
222
|
+
}
|
224
223
|
}
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
224
|
+
&_left_on {
|
225
|
+
.card-right-aligned {
|
226
|
+
border-left: 0;
|
227
|
+
}
|
229
228
|
}
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
229
|
+
&_right_on {
|
230
|
+
.card-left-aligned {
|
231
|
+
border-right: 0;
|
232
|
+
}
|
234
233
|
}
|
235
|
-
|
236
|
-
|
237
|
-
|
234
|
+
&_left_off {
|
235
|
+
.card-right-aligned {
|
236
|
+
border-left: 0;
|
237
|
+
}
|
238
|
+
.text_input {
|
239
|
+
border-right: 0;
|
240
|
+
padding-right: 0;
|
241
|
+
}
|
238
242
|
}
|
239
243
|
}
|
240
244
|
}
|
@@ -7,10 +7,7 @@ $space_classes: (
|
|
7
7
|
md: $space_md,
|
8
8
|
lg: $space_lg,
|
9
9
|
xl: $space_xl,
|
10
|
-
none: 0
|
11
|
-
auto: auto,
|
12
|
-
initial: initial,
|
13
|
-
inherit: inherit
|
10
|
+
none: 0
|
14
11
|
);
|
15
12
|
|
16
13
|
$positions: (
|
@@ -44,26 +41,3 @@ $positions: (
|
|
44
41
|
}
|
45
42
|
}
|
46
43
|
}
|
47
|
-
|
48
|
-
@each $size, $size_value in $breakpoints_grid {
|
49
|
-
@each $position_name, $position in $positions {
|
50
|
-
@each $space_name, $space in $space_classes {
|
51
|
-
$min_size: map-get($size_value, "min");
|
52
|
-
$max_size: map-get($size_value, "max");
|
53
|
-
.#{$position_name}_#{$size}_#{$space_name} {
|
54
|
-
@if type-of($position)=="list" {
|
55
|
-
@each $coordinate in $position {
|
56
|
-
@include break_on($min_size, $max_size) {
|
57
|
-
#{$coordinate}: #{$space} !important;
|
58
|
-
}
|
59
|
-
}
|
60
|
-
}
|
61
|
-
@else {
|
62
|
-
@include break_on($min_size, $max_size) {
|
63
|
-
#{$position}: #{$space} !important;
|
64
|
-
}
|
65
|
-
}
|
66
|
-
}
|
67
|
-
}
|
68
|
-
}
|
69
|
-
}
|
@@ -153,67 +153,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
153
153
|
padding,
|
154
154
|
}: Margin & Padding) => {
|
155
155
|
let css = ''
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
};
|
172
|
-
|
173
|
-
function handleObjectValue(properties: Margin | Padding, prefix: string) {
|
174
|
-
let classResult = '';
|
175
|
-
|
176
|
-
Object.entries(properties).forEach(([key, value]) => {
|
177
|
-
classResult += `${prefix}_${key}_${value} `;
|
178
|
-
});
|
179
|
-
|
180
|
-
return classResult;
|
181
|
-
}
|
182
|
-
|
183
|
-
function getPrefix(key: string) {
|
184
|
-
const prefixes: Record<string, string> = {
|
185
|
-
marginRight: 'mr',
|
186
|
-
marginLeft: 'ml',
|
187
|
-
marginTop: 'mt',
|
188
|
-
marginBottom: 'mb',
|
189
|
-
marginX: 'mx',
|
190
|
-
marginY: 'my',
|
191
|
-
margin: 'm',
|
192
|
-
paddingRight: 'pr',
|
193
|
-
paddingLeft: 'pl',
|
194
|
-
paddingTop: 'pt',
|
195
|
-
paddingBottom: 'pb',
|
196
|
-
paddingX: 'px',
|
197
|
-
paddingY: 'py',
|
198
|
-
padding: 'p',
|
199
|
-
};
|
200
|
-
|
201
|
-
return prefixes[key];
|
202
|
-
}
|
203
|
-
|
204
|
-
Object.entries(spacingProps).forEach(([key, value]) => {
|
205
|
-
if (value) {
|
206
|
-
if (typeof value === 'object') {
|
207
|
-
css += handleObjectValue(value, getPrefix(key));
|
208
|
-
} else {
|
209
|
-
const prefix = getPrefix(key);
|
210
|
-
css += `${prefix}_${value} `;
|
211
|
-
}
|
212
|
-
}
|
213
|
-
});
|
214
|
-
return css.trim();
|
156
|
+
css += marginRight ? `mr_${marginRight} ` : ''
|
157
|
+
css += marginLeft ? `ml_${marginLeft} ` : ''
|
158
|
+
css += marginTop ? `mt_${marginTop} ` : ''
|
159
|
+
css += marginBottom ? `mb_${marginBottom} ` : ''
|
160
|
+
css += marginX ? `mx_${marginX} ` : ''
|
161
|
+
css += marginY ? `my_${marginY} ` : ''
|
162
|
+
css += margin ? `m_${margin} ` : ''
|
163
|
+
css += paddingRight ? `pr_${paddingRight} ` : ''
|
164
|
+
css += paddingLeft ? `pl_${paddingLeft} ` : ''
|
165
|
+
css += paddingTop ? `pt_${paddingTop} ` : ''
|
166
|
+
css += paddingBottom ? `pb_${paddingBottom} ` : ''
|
167
|
+
css += paddingX ? `px_${paddingX} ` : ''
|
168
|
+
css += paddingY ? `py_${paddingY} ` : ''
|
169
|
+
css += padding ? `p_${padding} ` : ''
|
170
|
+
return css
|
215
171
|
},
|
216
|
-
|
217
172
|
darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
|
218
173
|
numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
|
219
174
|
let css = ''
|
data/lib/playbook/spacing.rb
CHANGED
@@ -50,32 +50,17 @@ module Playbook
|
|
50
50
|
end
|
51
51
|
|
52
52
|
def spacing_values
|
53
|
-
%w[none xxs xs sm md lg xl
|
54
|
-
end
|
55
|
-
|
56
|
-
def screen_size_values
|
57
|
-
%w[xs sm md lg xl]
|
53
|
+
%w[none xxs xs sm md lg xl]
|
58
54
|
end
|
59
55
|
|
60
56
|
def spacing_props
|
61
57
|
selected_props = spacing_options.keys.select { |sk| try(sk) }
|
62
58
|
return nil unless selected_props.present?
|
63
59
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
prefix = spacing_options[prop]
|
69
|
-
if responsive
|
70
|
-
spacing_value.each do |key, value|
|
71
|
-
css += "#{prefix}_#{key}_#{value} " if screen_size_values.include?(key.to_s) && spacing_values.include?(value.to_s)
|
72
|
-
end
|
73
|
-
elsif spacing_values.include?(spacing_value)
|
74
|
-
css += "#{prefix}_#{spacing_value} "
|
75
|
-
end
|
76
|
-
end
|
77
|
-
|
78
|
-
css.strip unless css.blank?
|
60
|
+
selected_props.map do |k|
|
61
|
+
spacing_value = send(k)
|
62
|
+
"#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
|
63
|
+
end.compact.join(" ")
|
79
64
|
end
|
80
65
|
|
81
66
|
def max_width_props
|
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: 12.
|
4
|
+
version: 12.23.0
|
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: 2023-05-
|
12
|
+
date: 2023-05-23 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -2491,7 +2491,7 @@ homepage: http://playbook.powerapp.cloud
|
|
2491
2491
|
licenses:
|
2492
2492
|
- ISC
|
2493
2493
|
metadata: {}
|
2494
|
-
post_install_message:
|
2494
|
+
post_install_message:
|
2495
2495
|
rdoc_options: []
|
2496
2496
|
require_paths:
|
2497
2497
|
- lib
|
@@ -2502,12 +2502,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2502
2502
|
version: '0'
|
2503
2503
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2504
2504
|
requirements:
|
2505
|
-
- - "
|
2505
|
+
- - ">="
|
2506
2506
|
- !ruby/object:Gem::Version
|
2507
|
-
version:
|
2507
|
+
version: '0'
|
2508
2508
|
requirements: []
|
2509
2509
|
rubygems_version: 3.3.7
|
2510
|
-
signing_key:
|
2510
|
+
signing_key:
|
2511
2511
|
specification_version: 4
|
2512
2512
|
summary: Playbook Design System
|
2513
2513
|
test_files: []
|