playbook_ui 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222 → 14.6.0.pre.alpha.dropdownclassfix4224
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_card/_card_mixin.scss +2 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +4 -4
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +2 -2
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -67
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +0 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +1 -5
- data/dist/chunks/{_weekday_stacked-DdxTfWNt.js → _weekday_stacked-Dh3OU4s8.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2e7c742a82f9119f7c8e916e4388b5a87f0e7431177be7231df60646ce5a59bf
|
4
|
+
data.tar.gz: 81bcbb4679a6e6a9ed7c208c21675b13843c41a7b054e30bd33cbcd6b45b2f17
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a7bb3a7149a85030b1b7539917f1044127f68b928d008a8f1701bcfb7ddfd64ad01ea43498a10e90d758932adeb94c79751113cd6b2af7bc20d924a5200a43bf
|
7
|
+
data.tar.gz: dd64a6e5791947eb1f3965be88fc881646bd4bf3569e153ab8b2d226ebb374d653401667ad8650fe5146c8f5bd31e70001b3e68b6c74de2e59c33135137dc986
|
@@ -28,7 +28,8 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
|
|
28
28
|
|
29
29
|
@mixin pb_card_selected($border_color: $primary) {
|
30
30
|
border-color: $border_color;
|
31
|
-
border-width: $pb_card_border_width
|
31
|
+
border-width: $pb_card_border_width;
|
32
|
+
outline: 1px solid $border_color;
|
32
33
|
}
|
33
34
|
|
34
35
|
@mixin pb_card_selected_dark {
|
@@ -9,7 +9,7 @@
|
|
9
9
|
|
10
10
|
@import "./scss_partials/dropdown_animation";
|
11
11
|
|
12
|
-
|
12
|
+
[class*="pb_dropdown"] {
|
13
13
|
.dropdown_wrapper {
|
14
14
|
[class*="dropdown_trigger_wrapper"] {
|
15
15
|
@include pb_body;
|
@@ -131,7 +131,7 @@
|
|
131
131
|
}
|
132
132
|
}
|
133
133
|
|
134
|
-
|
134
|
+
&[class*="separators_hidden"] {
|
135
135
|
.dropdown_wrapper {
|
136
136
|
.pb_dropdown_container {
|
137
137
|
|
@@ -142,7 +142,7 @@
|
|
142
142
|
}
|
143
143
|
}
|
144
144
|
|
145
|
-
|
145
|
+
&[class*="subtle"] {
|
146
146
|
.dropdown_wrapper {
|
147
147
|
.pb_dropdown_container {
|
148
148
|
|
@@ -178,7 +178,7 @@
|
|
178
178
|
}
|
179
179
|
}
|
180
180
|
|
181
|
-
|
181
|
+
&[class*="separators_hidden"] {
|
182
182
|
.dropdown_wrapper {
|
183
183
|
.pb_dropdown_container {
|
184
184
|
[class*="pb_dropdown_option"]:first-child {
|
@@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
|
74
74
|
const htmlProps = buildHtmlProps(htmlOptions);
|
75
75
|
const separatorsClass = separators ? '' : 'separators_hidden'
|
76
76
|
const classes = classnames(
|
77
|
-
buildCss("pb_dropdown"),
|
77
|
+
buildCss("pb_dropdown", variant, separatorsClass),
|
78
78
|
globalProps(props),
|
79
|
-
variant,
|
80
|
-
separatorsClass,
|
81
79
|
className
|
82
80
|
);
|
83
81
|
|
@@ -24,7 +24,7 @@ module Playbook
|
|
24
24
|
end
|
25
25
|
|
26
26
|
def classname
|
27
|
-
generate_classname("pb_dropdown", variant, separators_class
|
27
|
+
generate_classname("pb_dropdown", variant, separators_class)
|
28
28
|
end
|
29
29
|
|
30
30
|
private
|
@@ -38,7 +38,7 @@ module Playbook
|
|
38
38
|
end
|
39
39
|
|
40
40
|
def separators_class
|
41
|
-
separators ?
|
41
|
+
separators ? nil : "separators_hidden"
|
42
42
|
end
|
43
43
|
|
44
44
|
def options_with_blank
|
@@ -10,24 +10,6 @@
|
|
10
10
|
$pb_selectable_card_indicator_size: 22px;
|
11
11
|
$pb_selectable_card_border: 2px;
|
12
12
|
|
13
|
-
$pb_selectable_space_classes: (
|
14
|
-
xxs: $space_xxs,
|
15
|
-
xs: $space_xs,
|
16
|
-
sm: $space_sm,
|
17
|
-
md: $space_md,
|
18
|
-
lg: $space_lg,
|
19
|
-
xl: $space_xl,
|
20
|
-
);
|
21
|
-
$pb_selectable_paddings: (
|
22
|
-
p: "padding",
|
23
|
-
pr: "padding-right",
|
24
|
-
pl: "padding-left",
|
25
|
-
pt: "padding-top",
|
26
|
-
pb: "padding-bottom",
|
27
|
-
px: ("padding-left", "padding-right"),
|
28
|
-
py: ("padding-top", "padding-bottom")
|
29
|
-
);
|
30
|
-
|
31
13
|
[class^=pb_selectable_card_kit] {
|
32
14
|
display: block;
|
33
15
|
margin-bottom: 0;
|
@@ -46,6 +28,7 @@ $pb_selectable_paddings: (
|
|
46
28
|
padding: $space_sm;
|
47
29
|
margin-bottom: $space_sm;
|
48
30
|
cursor: pointer;
|
31
|
+
outline: 1px solid transparent;
|
49
32
|
|
50
33
|
@media (hover:hover) {
|
51
34
|
&:hover {
|
@@ -91,7 +74,6 @@ $pb_selectable_paddings: (
|
|
91
74
|
|
92
75
|
position: relative;
|
93
76
|
@include pb_card_selected;
|
94
|
-
padding: calc(#{$space_sm} - 1px);
|
95
77
|
transition-property: none;
|
96
78
|
transition-duration: 0s;
|
97
79
|
|
@@ -106,54 +88,6 @@ $pb_selectable_paddings: (
|
|
106
88
|
background-color: $royal;
|
107
89
|
}
|
108
90
|
}
|
109
|
-
|
110
|
-
// Selected card has 1px more border
|
111
|
-
// Remove 1px so content does not "jump"
|
112
|
-
@each $position_name,
|
113
|
-
$position in $pb_selectable_paddings {
|
114
|
-
@each $space_name,
|
115
|
-
$space in $pb_selectable_space_classes {
|
116
|
-
~ label.#{$position_name}_#{$space_name} {
|
117
|
-
@if type-of($position)=="list" {
|
118
|
-
@each $coordinate in $position {
|
119
|
-
#{$coordinate}: calc(#{$space} - 1px) !important;
|
120
|
-
}
|
121
|
-
}
|
122
|
-
|
123
|
-
@else {
|
124
|
-
#{$position}: calc(#{$space} - 1px) !important;
|
125
|
-
}
|
126
|
-
}
|
127
|
-
}
|
128
|
-
}
|
129
|
-
}
|
130
|
-
}
|
131
|
-
|
132
|
-
&[class*=_display_input] {
|
133
|
-
input[type="checkbox"],
|
134
|
-
input[type="radio"] {
|
135
|
-
&:checked {
|
136
|
-
~label {
|
137
|
-
border-width: $pb_card_border_width;
|
138
|
-
outline: 1px solid $primary;
|
139
|
-
}
|
140
|
-
|
141
|
-
}
|
142
|
-
}
|
143
|
-
|
144
|
-
> label {
|
145
|
-
outline: 1px solid transparent;
|
146
|
-
padding: $space_sm;
|
147
|
-
}
|
148
|
-
|
149
|
-
&.dark {
|
150
|
-
input[type="checkbox"],
|
151
|
-
input[type="radio"] {
|
152
|
-
&:checked ~ label {
|
153
|
-
border-width: $pb_card_border_width;
|
154
|
-
outline: 1px solid $primary;
|
155
|
-
}
|
156
|
-
}
|
157
91
|
}
|
158
92
|
}
|
159
93
|
|
@@ -25,7 +25,7 @@
|
|
25
25
|
<% end %>
|
26
26
|
<div class="separator"></div>
|
27
27
|
<div class="psuedo_separator"></div>
|
28
|
-
<%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true
|
28
|
+
<%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
|
29
29
|
<% if content.nil? %>
|
30
30
|
<%= pb_rails("body", props: { text: object.text }) %>
|
31
31
|
<% else %>
|
@@ -25,7 +25,7 @@ module Playbook
|
|
25
25
|
|
26
26
|
def classname
|
27
27
|
[
|
28
|
-
generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class
|
28
|
+
generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
|
29
29
|
error_class,
|
30
30
|
dark_props,
|
31
31
|
].compact.join(" ")
|
@@ -79,10 +79,6 @@ module Playbook
|
|
79
79
|
def error_class
|
80
80
|
error ? "error" : nil
|
81
81
|
end
|
82
|
-
|
83
|
-
def display_input_class
|
84
|
-
variant == "display_input" ? "display_input" : nil
|
85
|
-
end
|
86
82
|
end
|
87
83
|
end
|
88
84
|
end
|