playbook_ui 14.19.0.pre.alpha.play1997dropdownenablepillsinselection7702 → 14.19.0.pre.alpha.play2125phonenumberinputcountrysearcherrorstylefix7698
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_dropdown/docs/_dropdown_with_custom_display.jsx +0 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +2 -33
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +1 -3
- data/app/pb_kits/playbook/pb_dropdown/index.js +1 -14
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +9 -9
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +4 -2
- data/dist/chunks/_weekday_stacked-CVwWr8B2.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +2 -2
- data/dist/chunks/_weekday_stacked-BdaYw6Ra.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: 1087cef4c8be18ff187168d62201d957f55e663176cf11a4ba16496a79d20044
|
|
4
|
+
data.tar.gz: e57d9d4c52674fefff6c0377e9edec29727731f1f4d48dc9427ec8dd3a7b5dc1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1a8f404939c101bdc6b972905f2a6717000d838d71266ab3047b9b02555abbd15de4bdd0202c3b1d08662110616d93ea603f66f55207efa5d37a7e1de651ae1b
|
|
7
|
+
data.tar.gz: e48a40d41c3b0fd0dba7ff67c29b163e87890a92831b9a1ad23aba0fd264ea17a0a70d4a699dcc2891e6d8cbcd78386237cee66e1e1f463c41a024f632f59276
|
|
@@ -6,7 +6,6 @@ import Flex from '../../pb_flex/_flex'
|
|
|
6
6
|
import FlexItem from '../../pb_flex/_flex_item'
|
|
7
7
|
import Avatar from '../../pb_avatar/_avatar'
|
|
8
8
|
import User from '../../pb_user/_user'
|
|
9
|
-
import Body from '../../pb_body/_body'
|
|
10
9
|
|
|
11
10
|
const DropdownWithCustomDisplay = (props) => {
|
|
12
11
|
const [selectedOption, setSelectedOption] = useState();
|
|
@@ -51,20 +50,10 @@ const DropdownWithCustomDisplay = (props) => {
|
|
|
51
50
|
<>
|
|
52
51
|
{
|
|
53
52
|
selectedOption && (
|
|
54
|
-
<Flex align="center">
|
|
55
53
|
<Avatar
|
|
56
54
|
name={selectedOption.label}
|
|
57
55
|
size="xs"
|
|
58
56
|
/>
|
|
59
|
-
<Body
|
|
60
|
-
marginX="xs"
|
|
61
|
-
text={selectedOption.label}
|
|
62
|
-
/>
|
|
63
|
-
<Badge
|
|
64
|
-
text={selectedOption.status}
|
|
65
|
-
variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
|
|
66
|
-
/>
|
|
67
|
-
</Flex>
|
|
68
57
|
)
|
|
69
58
|
}
|
|
70
59
|
</>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected.
|
|
1
|
+
Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
|
2
2
|
|
|
3
3
|
The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
|
|
4
4
|
|
|
@@ -38,11 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
<%
|
|
40
40
|
custom_display = capture do
|
|
41
|
-
pb_rails("
|
|
42
|
-
concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
|
|
43
|
-
concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
|
|
44
|
-
concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
|
|
45
|
-
end
|
|
41
|
+
pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
|
|
46
42
|
end
|
|
47
43
|
%>
|
|
48
44
|
|
|
@@ -66,31 +62,4 @@
|
|
|
66
62
|
<% end %>
|
|
67
63
|
<% end %>
|
|
68
64
|
<% end %>
|
|
69
|
-
<% end %>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<script>
|
|
73
|
-
document.addEventListener("pb:dropdown:selected", (e) => {
|
|
74
|
-
const option = e.detail;
|
|
75
|
-
const dropdown = e.target;
|
|
76
|
-
|
|
77
|
-
const display = dropdown.querySelector("#dropdown_trigger_custom_display");
|
|
78
|
-
if (!display) return;
|
|
79
|
-
|
|
80
|
-
const nameEl = display.querySelector("#dropdown-avatar-name");
|
|
81
|
-
if (nameEl) nameEl.textContent = option.label;
|
|
82
|
-
|
|
83
|
-
const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
|
|
84
|
-
const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
|
|
85
|
-
if (avatarEl) {
|
|
86
|
-
avatarEl.dataset.name = option.label;
|
|
87
|
-
avatarEl.setAttribute("data-initials", initials);
|
|
88
|
-
}
|
|
89
|
-
const badgeEl = display.querySelector("#dropdown-avatar-status");
|
|
90
|
-
const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
|
|
91
|
-
if (badgeEl) {
|
|
92
|
-
badgeEl.querySelector("span").textContent = option.status;
|
|
93
|
-
badgeEl.className = 'pb_badge_kit_' + variant;
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
</script>
|
|
65
|
+
<% end %>
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected.
|
|
2
|
-
|
|
3
|
-
Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
|
|
1
|
+
Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
|
4
2
|
|
|
5
3
|
The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.
|
|
6
4
|
|
|
@@ -142,22 +142,9 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
142
142
|
const customDisplayElement = this.element.querySelector(
|
|
143
143
|
"#dropdown_trigger_custom_display"
|
|
144
144
|
);
|
|
145
|
-
|
|
146
145
|
if (triggerElement) {
|
|
147
146
|
const selectedLabel = JSON.parse(value).label;
|
|
148
|
-
|
|
149
|
-
triggerElement.textContent = ""
|
|
150
|
-
this.element.setAttribute("data-option-selected", value);
|
|
151
|
-
const selectedObj = JSON.parse(value);
|
|
152
|
-
this.element.dispatchEvent(
|
|
153
|
-
new CustomEvent("pb:dropdown:selected", {
|
|
154
|
-
detail: selectedObj,
|
|
155
|
-
bubbles: true,
|
|
156
|
-
})
|
|
157
|
-
);
|
|
158
|
-
} else {
|
|
159
|
-
triggerElement.textContent = selectedLabel
|
|
160
|
-
}
|
|
147
|
+
triggerElement.textContent = selectedLabel;
|
|
161
148
|
if (customDisplayElement) {
|
|
162
149
|
customDisplayElement.style.display = "block";
|
|
163
150
|
customDisplayElement.style.paddingRight = "8px";
|
|
@@ -42,7 +42,7 @@ $flag-min-resolution: 192dpi;
|
|
|
42
42
|
.iti__country-list {
|
|
43
43
|
min-width: $dropdown-min-width;
|
|
44
44
|
}
|
|
45
|
-
// iti-spacer-horizontal's default is 8px, or $space_xs
|
|
45
|
+
// iti-spacer-horizontal's default is 8px, or $space_xs
|
|
46
46
|
.iti__country-list .iti__flag, .iti__country-name {
|
|
47
47
|
margin-right: $space_xs;
|
|
48
48
|
}
|
|
@@ -60,7 +60,7 @@ $flag-min-resolution: 192dpi;
|
|
|
60
60
|
color: $focus_input_light;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.dropdown_open {
|
|
63
|
+
.dropdown_open:not(.error) {
|
|
64
64
|
.text_input {
|
|
65
65
|
border-color: $primary !important;
|
|
66
66
|
}
|
|
@@ -76,7 +76,7 @@ $flag-min-resolution: 192dpi;
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
.iti__divider {
|
|
79
|
-
border-bottom: 1px solid $border_light !important;
|
|
79
|
+
border-bottom: 1px solid $border_light !important;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.iti__selected-country-primary {
|
|
@@ -96,7 +96,7 @@ $flag-min-resolution: 192dpi;
|
|
|
96
96
|
justify-content: center;
|
|
97
97
|
align-items: center;
|
|
98
98
|
border-width: 0;
|
|
99
|
-
border-radius: $space_xxs;
|
|
99
|
+
border-radius: $space_xxs;
|
|
100
100
|
|
|
101
101
|
&[aria-expanded="true"] {
|
|
102
102
|
color: $primary_action;
|
|
@@ -199,7 +199,7 @@ $flag-min-resolution: 192dpi;
|
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
.iti__dropdown-content {
|
|
202
|
-
border-radius: $space_xs;
|
|
202
|
+
border-radius: $space_xs;
|
|
203
203
|
border: 1px solid $border_light !important;
|
|
204
204
|
position: absolute;
|
|
205
205
|
top: 100%;
|
|
@@ -228,13 +228,13 @@ $flag-min-resolution: 192dpi;
|
|
|
228
228
|
}
|
|
229
229
|
|
|
230
230
|
.iti__dropdown-content {
|
|
231
|
-
border-radius: $space_xs;
|
|
231
|
+
border-radius: $space_xs;
|
|
232
232
|
border: 1px solid $border_dark !important;
|
|
233
233
|
.iti__search-input {
|
|
234
234
|
background-color: $bg_dark_card;
|
|
235
235
|
&:hover {
|
|
236
236
|
background-color: $bg_dark_card;
|
|
237
|
-
}
|
|
237
|
+
}
|
|
238
238
|
&:active,
|
|
239
239
|
&:focus {
|
|
240
240
|
background-color: $card_dark;
|
|
@@ -243,7 +243,7 @@ $flag-min-resolution: 192dpi;
|
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
.iti__divider {
|
|
246
|
-
border-bottom: 1px solid $border_dark !important;
|
|
246
|
+
border-bottom: 1px solid $border_dark !important;
|
|
247
247
|
}
|
|
248
248
|
|
|
249
249
|
.iti__country-list {
|
|
@@ -278,7 +278,7 @@ $flag-min-resolution: 192dpi;
|
|
|
278
278
|
color: $white;
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
|
-
|
|
281
|
+
|
|
282
282
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
|
|
283
283
|
.iti__flag {
|
|
284
284
|
background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
|
|
@@ -71,7 +71,8 @@
|
|
|
71
71
|
}
|
|
72
72
|
&.error {
|
|
73
73
|
.text_input_wrapper {
|
|
74
|
-
input
|
|
74
|
+
// The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
|
|
75
|
+
input:not(.iti__search-input),
|
|
75
76
|
.text_input {
|
|
76
77
|
border-color: $error_dark;
|
|
77
78
|
}
|
|
@@ -102,7 +103,8 @@
|
|
|
102
103
|
[class*="pb_body_kit"] {
|
|
103
104
|
margin-top: $space_xs / 2;
|
|
104
105
|
}
|
|
105
|
-
input
|
|
106
|
+
// The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
|
|
107
|
+
input:not(.iti__search-input),
|
|
106
108
|
.text_input {
|
|
107
109
|
border-color: $error;
|
|
108
110
|
}
|