playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4305 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316
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/pb_card/_card_mixin.scss +1 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +8 -9
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +67 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
- 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 +5 -1
- data/dist/chunks/_weekday_stacked-DCgkKIQf.js +45 -0
- 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 +2 -2
- data/dist/chunks/_weekday_stacked-BCRN4gY0.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 845eb3cdd33a7fef9c5af145bcf680907b6c74d5126bba69805acf33f3ff6a48
|
4
|
+
data.tar.gz: 18d01e30a45050069d838577a03df29a892c7ebe042ca8a252ed68b665fd7c56
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 06afa342868f031819a728684e905aaeb09445e855ac28938e3b746deb93e37bc0b0ff22f6d133d9b80f005c420cb3e500b3081f12e688844238658ba8ded457
|
7
|
+
data.tar.gz: '08f62a0749684bc633d09aed01b768aae32d2569fa0ee13224647bce0152ccce9016931104990822e12218c46e955cee0b81baafec0897c710407a979b7007b1'
|
@@ -28,8 +28,7 @@ $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;
|
32
|
-
outline: 1px solid $border_color;
|
31
|
+
border-width: $pb_card_border_width * 2;
|
33
32
|
}
|
34
33
|
|
35
34
|
@mixin pb_card_selected_dark {
|
@@ -47,7 +47,7 @@ interface DropdownComponent
|
|
47
47
|
Container: typeof DropdownContainer;
|
48
48
|
}
|
49
49
|
|
50
|
-
|
50
|
+
let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
51
51
|
const {
|
52
52
|
aria = {},
|
53
53
|
autocomplete = false,
|
@@ -260,8 +260,7 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
|
|
260
260
|
<DropdownContainer>
|
261
261
|
{optionsWithBlankSelection &&
|
262
262
|
optionsWithBlankSelection?.map((option: GenericObject) => (
|
263
|
-
|
264
|
-
<ForwardedDropdown.Option key={option.id}
|
263
|
+
<DropdownOption key={option.id}
|
265
264
|
option={option}
|
266
265
|
/>
|
267
266
|
))}
|
@@ -281,10 +280,10 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
|
|
281
280
|
)
|
282
281
|
}
|
283
282
|
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
283
|
+
Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
|
284
|
+
(Dropdown as DropdownComponent).displayName = "Dropdown";
|
285
|
+
(Dropdown as DropdownComponent).Option = DropdownOption;
|
286
|
+
(Dropdown as DropdownComponent).Trigger = DropdownTrigger;
|
287
|
+
(Dropdown as DropdownComponent).Container = DropdownContainer;
|
289
288
|
|
290
|
-
export default
|
289
|
+
export default Dropdown;
|
@@ -10,6 +10,24 @@
|
|
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
|
+
|
13
31
|
[class^=pb_selectable_card_kit] {
|
14
32
|
display: block;
|
15
33
|
margin-bottom: 0;
|
@@ -28,7 +46,6 @@ $pb_selectable_card_border: 2px;
|
|
28
46
|
padding: $space_sm;
|
29
47
|
margin-bottom: $space_sm;
|
30
48
|
cursor: pointer;
|
31
|
-
outline: 1px solid transparent;
|
32
49
|
|
33
50
|
@media (hover:hover) {
|
34
51
|
&:hover {
|
@@ -74,6 +91,7 @@ $pb_selectable_card_border: 2px;
|
|
74
91
|
|
75
92
|
position: relative;
|
76
93
|
@include pb_card_selected;
|
94
|
+
padding: calc(#{$space_sm} - 1px);
|
77
95
|
transition-property: none;
|
78
96
|
transition-duration: 0s;
|
79
97
|
|
@@ -88,6 +106,54 @@ $pb_selectable_card_border: 2px;
|
|
88
106
|
background-color: $royal;
|
89
107
|
}
|
90
108
|
}
|
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
|
+
&.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
|
+
}
|
91
157
|
}
|
92
158
|
}
|
93
159
|
|
@@ -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 }) do %>
|
28
|
+
<%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) 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) + display_input_class,
|
29
29
|
error_class,
|
30
30
|
dark_props,
|
31
31
|
].compact.join(" ")
|
@@ -79,6 +79,10 @@ 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" : ""
|
85
|
+
end
|
82
86
|
end
|
83
87
|
end
|
84
88
|
end
|