playbook_ui 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5341 → 14.11.1.pre.alpha.play1724darkmodeauditmap5409
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_button/button.html.erb +3 -2
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +6 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +6 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +12 -7
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +14 -9
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +11 -6
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +14 -8
- data/app/pb_kits/playbook/pb_map/_map.scss +3 -0
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +4 -4
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +7 -7
- data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +5 -5
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +6 -5
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e83117499bb2e6cbb6cea842eca16b0ccb5e6275695a2d26de0f256d23c04071
|
|
4
|
+
data.tar.gz: 9b69eec065deee4a74d8b98ae4042152ee5662ce230cdcd8d73772a77cb48c5c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ae9fb865c35f071e2a77222453f19650f0c7de2ddae2cdd3560d1404a17ea90bbbea8c57223d17ee5e87b86561ecf65b5041546433a9d105f10ce615ae110f4f
|
|
7
|
+
data.tar.gz: a9c422d27b2373459e97a812436a86c7c91b499afc91429ca445606187e4dd2a658573936a119178b5ca41c9d462f062ea97ab16aa8bbad3bdb212fdad303447
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
object.tag == "button" ? object.options : object.link_options
|
|
1
|
+
<%= content_tag(object.tag,
|
|
2
|
+
object.tag == "button" ? object.options : object.link_options,
|
|
3
|
+
**combined_html_options) do %>
|
|
3
4
|
<% if object.variant === "reaction" %>
|
|
4
5
|
<% if icon && object.valid_emoji(object.icon) %>
|
|
5
6
|
<%= pb_rails("flex", props:{ align: "center" }) do %>
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
<%=
|
|
1
|
+
<%= content_tag(:label, aria: object.aria,
|
|
2
|
+
id: object.id,
|
|
3
|
+
data: object.data,
|
|
4
|
+
class: object.classname,
|
|
5
|
+
**combined_html_options
|
|
6
|
+
) do %>
|
|
2
7
|
<%= content.presence || object.input %>
|
|
3
8
|
<% if object.indeterminate %>
|
|
4
9
|
<span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
<%=
|
|
2
|
-
|
|
1
|
+
<%= content_tag(:div,
|
|
2
|
+
aria: object.aria,
|
|
3
|
+
class: object.classname + object.error_class,
|
|
4
|
+
data: object.data,
|
|
5
|
+
id: object.id,
|
|
6
|
+
**combined_html_options) do %>
|
|
3
7
|
<div class="input_wrapper">
|
|
4
8
|
<% if content.present? %>
|
|
5
9
|
<%= content %>
|
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
<%=
|
|
1
|
+
<%= content_tag(:div,
|
|
2
|
+
aria: object.aria,
|
|
3
|
+
class: object.classname,
|
|
4
|
+
data: object.data,
|
|
5
|
+
id: object.id,
|
|
6
|
+
**combined_html_options) do %>
|
|
2
7
|
<% if object.label.present? %>
|
|
3
8
|
<%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
|
|
4
9
|
<% end %>
|
|
5
10
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
|
6
|
-
<input
|
|
7
|
-
data-default-value="<%= input_default_value %>"
|
|
8
|
-
id="dropdown-selected-option"
|
|
9
|
-
name="<%= object.name %>"
|
|
10
|
-
style="display: none"
|
|
11
|
-
<%= object.required ? "required" : ""%>
|
|
11
|
+
<input
|
|
12
|
+
data-default-value="<%= input_default_value %>"
|
|
13
|
+
id="dropdown-selected-option"
|
|
14
|
+
name="<%= object.name %>"
|
|
15
|
+
style="display: none"
|
|
16
|
+
<%= object.required ? "required" : ""%>
|
|
12
17
|
/>
|
|
13
18
|
<% if content.present? %>
|
|
14
19
|
<%= content.presence %>
|
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
<%=
|
|
1
|
+
<%= content_tag(:div,
|
|
2
|
+
aria: object.aria,
|
|
3
|
+
class: object.classname,
|
|
4
|
+
data: object.data,
|
|
5
|
+
id: object.id,
|
|
6
|
+
**combined_html_options) do %>
|
|
2
7
|
<%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
|
|
3
|
-
<% if content.present? %>
|
|
8
|
+
<% if content.present? %>
|
|
4
9
|
<%= content.presence %>
|
|
5
|
-
<% else %>
|
|
10
|
+
<% else %>
|
|
6
11
|
<%= pb_rails("list/item", props: {
|
|
7
|
-
display: "flex",
|
|
8
|
-
justify_content: "center",
|
|
9
|
-
padding:"xs",
|
|
10
|
-
}) do %>
|
|
12
|
+
display: "flex",
|
|
13
|
+
justify_content: "center",
|
|
14
|
+
padding:"xs",
|
|
15
|
+
}) do %>
|
|
11
16
|
<%= pb_rails("body", props: {text: "No option"}) %>
|
|
12
17
|
<% end %>
|
|
13
18
|
<% end %>
|
|
14
|
-
<% end %>
|
|
15
|
-
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
<%=
|
|
1
|
+
<%= content_tag(:div,
|
|
2
|
+
aria: object.aria,
|
|
3
|
+
class: object.classname,
|
|
4
|
+
data: object.data,
|
|
5
|
+
id: object.option[:id],
|
|
6
|
+
**combined_html_options) do %>
|
|
2
7
|
<%= pb_rails("list/item", props: {
|
|
3
|
-
display: "flex",
|
|
4
|
-
justify_content: "center",
|
|
5
|
-
padding:"none",
|
|
8
|
+
display: "flex",
|
|
9
|
+
justify_content: "center",
|
|
10
|
+
padding:"none",
|
|
6
11
|
cursor: "pointer"
|
|
7
|
-
}) do %>
|
|
12
|
+
}) do %>
|
|
8
13
|
<div class="dropdown_option_wrapper">
|
|
9
14
|
<% if content.present? %>
|
|
10
15
|
<%= content.presence %>
|
|
@@ -13,4 +18,4 @@
|
|
|
13
18
|
<% end %>
|
|
14
19
|
</div>
|
|
15
20
|
<% end %>
|
|
16
|
-
<% end %>
|
|
21
|
+
<% end %>
|
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
<%=
|
|
1
|
+
<%= content_tag(:div,
|
|
2
|
+
aria: object.aria,
|
|
3
|
+
class: object.classname,
|
|
4
|
+
data: object.data,
|
|
5
|
+
id: object.id,
|
|
6
|
+
**combined_html_options) do %>
|
|
2
7
|
<% if content.present? %>
|
|
3
8
|
<div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
|
|
4
9
|
<%= content.presence %>
|
|
5
10
|
</div>
|
|
6
11
|
<% else %>
|
|
7
12
|
<%= pb_rails("flex", props: {
|
|
8
|
-
align: "center",
|
|
9
|
-
border_radius:"lg",
|
|
10
|
-
classname: object.trigger_wrapper_classes,
|
|
11
|
-
cursor: "pointer",
|
|
12
|
-
justify: "between",
|
|
13
|
-
padding_x:"sm",
|
|
13
|
+
align: "center",
|
|
14
|
+
border_radius:"lg",
|
|
15
|
+
classname: object.trigger_wrapper_classes,
|
|
16
|
+
cursor: "pointer",
|
|
17
|
+
justify: "between",
|
|
18
|
+
padding_x:"sm",
|
|
14
19
|
padding_y:"xs",
|
|
15
20
|
html_options: {tabindex:"0"}
|
|
16
21
|
}) do %>
|
|
@@ -18,7 +23,7 @@
|
|
|
18
23
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
19
24
|
<% if object.custom_display.present? %>
|
|
20
25
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
21
|
-
<div id="dropdown_trigger_custom_display" style="display: none;">
|
|
26
|
+
<div id="dropdown_trigger_custom_display" style="display: none;">
|
|
22
27
|
<%= object.custom_display %>
|
|
23
28
|
</div>
|
|
24
29
|
<%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
|
|
@@ -35,3 +40,4 @@
|
|
|
35
40
|
<% end %>
|
|
36
41
|
<% end %>
|
|
37
42
|
<% end %>
|
|
43
|
+
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@import "../tokens/shadows";
|
|
4
4
|
@import "../tokens/border_radius";
|
|
5
5
|
@import "./_pb_map_button_mixin.scss";
|
|
6
|
+
@import "../tokens/titles";
|
|
6
7
|
|
|
7
8
|
[class*="pb_map"] {
|
|
8
9
|
.pb_map-custom-button {
|
|
@@ -159,6 +160,7 @@
|
|
|
159
160
|
}
|
|
160
161
|
|
|
161
162
|
.maplibregl-popup-content {
|
|
163
|
+
@include pb_title_4;
|
|
162
164
|
padding: $space_sm;
|
|
163
165
|
background-color: $card_light;
|
|
164
166
|
box-shadow: $shadow_deeper;
|
|
@@ -194,6 +196,7 @@
|
|
|
194
196
|
}
|
|
195
197
|
|
|
196
198
|
.maplibregl-popup-content {
|
|
199
|
+
@include pb_title_4;
|
|
197
200
|
background-color: $bg_dark;
|
|
198
201
|
color: $text_dk_default;
|
|
199
202
|
}
|
|
@@ -25,12 +25,12 @@ const MapDefault = (props) => {
|
|
|
25
25
|
new maplibregl.Marker({
|
|
26
26
|
color: mapTheme.marker,
|
|
27
27
|
}).setLngLat(defaultPosition)
|
|
28
|
-
.setPopup(new maplibregl.Popup({closeButton: false}).setHTML(
|
|
28
|
+
.setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
|
|
29
29
|
.addTo(map);
|
|
30
30
|
|
|
31
31
|
// disable map zoom when using scroll
|
|
32
32
|
map.scrollZoom.disable();
|
|
33
|
-
|
|
33
|
+
|
|
34
34
|
//add attributioncontrols
|
|
35
35
|
map.addControl(new maplibregl.AttributionControl({
|
|
36
36
|
compact: true
|
|
@@ -49,7 +49,7 @@ const MapDefault = (props) => {
|
|
|
49
49
|
|
|
50
50
|
}, [])
|
|
51
51
|
|
|
52
|
-
return (
|
|
52
|
+
return (
|
|
53
53
|
<Map flyTo
|
|
54
54
|
flyToClick={()=> {handleFlyTo(mapInstance)}}
|
|
55
55
|
zoomBtns
|
|
@@ -63,7 +63,7 @@ return (
|
|
|
63
63
|
position: 'absolute',
|
|
64
64
|
left: 0,
|
|
65
65
|
right: 0,
|
|
66
|
-
top: 0,
|
|
66
|
+
top: 0,
|
|
67
67
|
bottom: 0,
|
|
68
68
|
}}
|
|
69
69
|
/>
|
|
@@ -25,12 +25,12 @@ const MapWithCustomButton = (props) => {
|
|
|
25
25
|
new maplibregl.Marker({
|
|
26
26
|
color: mapTheme.marker,
|
|
27
27
|
}).setLngLat(defaultPosition)
|
|
28
|
-
.setPopup(new maplibregl.Popup({closeButton: false}).setHTML(
|
|
28
|
+
.setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
|
|
29
29
|
.addTo(map);
|
|
30
30
|
|
|
31
31
|
// disable map zoom when using scroll
|
|
32
32
|
map.scrollZoom.disable();
|
|
33
|
-
|
|
33
|
+
|
|
34
34
|
//add attributioncontrols
|
|
35
35
|
map.addControl(new maplibregl.AttributionControl({
|
|
36
36
|
compact: true
|
|
@@ -49,8 +49,8 @@ const MapWithCustomButton = (props) => {
|
|
|
49
49
|
|
|
50
50
|
}, [])
|
|
51
51
|
|
|
52
|
-
return (
|
|
53
|
-
<Map
|
|
52
|
+
return (
|
|
53
|
+
<Map
|
|
54
54
|
{...props}
|
|
55
55
|
>
|
|
56
56
|
<Map.Controls flyTo
|
|
@@ -59,10 +59,10 @@ return (
|
|
|
59
59
|
zoomInClick={() => {handleZoomIn(mapInstance)}}
|
|
60
60
|
zoomOutClick={()=> {handleZoomOut(mapInstance)}}
|
|
61
61
|
>
|
|
62
|
-
<MapCustomButton icon="home"
|
|
62
|
+
<MapCustomButton icon="home"
|
|
63
63
|
onClick={() => alert("button clicked!")}
|
|
64
64
|
/>
|
|
65
|
-
<MapCustomButton icon="search"
|
|
65
|
+
<MapCustomButton icon="search"
|
|
66
66
|
onClick={() => alert("button clicked!")}
|
|
67
67
|
/>
|
|
68
68
|
</Map.Controls>
|
|
@@ -72,7 +72,7 @@ return (
|
|
|
72
72
|
position: 'absolute',
|
|
73
73
|
left: 0,
|
|
74
74
|
right: 0,
|
|
75
|
-
top: 0,
|
|
75
|
+
top: 0,
|
|
76
76
|
bottom: 0,
|
|
77
77
|
}}
|
|
78
78
|
/>
|
|
@@ -25,7 +25,7 @@ const MapWithPlugin = (props) => {
|
|
|
25
25
|
new maplibregl.Marker({
|
|
26
26
|
color: mapTheme.marker,
|
|
27
27
|
}).setLngLat(defaultPosition)
|
|
28
|
-
.setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(
|
|
28
|
+
.setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML('Hello World!')) // add popup
|
|
29
29
|
.addTo(map);
|
|
30
30
|
|
|
31
31
|
//add maplibre default zoom controls
|
|
@@ -48,7 +48,7 @@ const MapWithPlugin = (props) => {
|
|
|
48
48
|
map.addControl(new maplibregl.AttributionControl({
|
|
49
49
|
compact: true
|
|
50
50
|
}));
|
|
51
|
-
|
|
51
|
+
|
|
52
52
|
//set map instance
|
|
53
53
|
setMapInstance(map)
|
|
54
54
|
}
|
|
@@ -62,8 +62,8 @@ const MapWithPlugin = (props) => {
|
|
|
62
62
|
}, [])
|
|
63
63
|
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
return (
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
67
|
<Map flyTo
|
|
68
68
|
flyToClick={()=> {handleFlyTo(mapInstance)}}
|
|
69
69
|
zoomBtns
|
|
@@ -77,7 +77,7 @@ return (
|
|
|
77
77
|
position: 'absolute',
|
|
78
78
|
left: 0,
|
|
79
79
|
right: 0,
|
|
80
|
-
top: 0,
|
|
80
|
+
top: 0,
|
|
81
81
|
bottom: 0,
|
|
82
82
|
}}
|
|
83
83
|
/>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import "../../tokens/screen_sizes";
|
|
2
|
+
@import "../../tokens/border_radius";
|
|
2
3
|
|
|
3
4
|
.table-responsive-scroll {
|
|
4
|
-
display: block;
|
|
5
5
|
overflow-x: scroll;
|
|
6
6
|
|
|
7
7
|
// hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
|
|
@@ -27,11 +27,12 @@
|
|
|
27
27
|
// Responsive Styles
|
|
28
28
|
@media (max-width: 1600px) {
|
|
29
29
|
&[class*="table-responsive-scroll"] {
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
&:has(> table.table-card) {
|
|
31
|
+
border-radius: $border_rad_light;
|
|
32
|
+
box-shadow: 1px 0 0 0px $border_light,
|
|
32
33
|
-1px 0 0 0px $border_light
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
}
|
|
35
|
+
}
|
|
35
36
|
&[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
|
36
37
|
&[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
|
37
38
|
border-left-width: 0px;
|