playbook_ui 14.23.0.pre.alpha.PLAY2329atstickypinnedborderbug9151 → 14.23.0.pre.alpha.PLAY2329atstickypinnedborderbug9290
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/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +70 -170
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +9 -44
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +17 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +6 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss +36 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx +90 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +24 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +11 -1
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +4 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +3 -1
- data/app/pb_kits/playbook/pb_select/select.rb +4 -2
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +49 -1
- data/dist/chunks/_weekday_stacked-9aguRqOv.js +37 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -7
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -14
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss +0 -0
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +0 -202
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +0 -69
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +0 -71
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +0 -110
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +0 -76
- data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +0 -10
- data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx +0 -34
- data/dist/chunks/_weekday_stacked-CoOhQc3y.js +0 -61
@@ -3,4 +3,6 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
|
|
3
3
|
|
4
4
|
Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
|
5
5
|
|
6
|
-
You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
|
6
|
+
You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
|
7
|
+
|
8
|
+
Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.
|
@@ -1 +1,3 @@
|
|
1
|
-
The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
|
1
|
+
The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
|
2
|
+
|
3
|
+
Note: If the `total` pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.
|
@@ -24,7 +24,9 @@ module Playbook
|
|
24
24
|
prop :validation_message, type: Playbook::Props::String, default: ""
|
25
25
|
|
26
26
|
def classnames
|
27
|
-
classname + inline_class
|
27
|
+
([classname] + [inline_class, compact_class, show_arrow_class])
|
28
|
+
.reject(&:empty?)
|
29
|
+
.join(" ")
|
28
30
|
end
|
29
31
|
|
30
32
|
def all_attributes
|
@@ -44,7 +46,7 @@ module Playbook
|
|
44
46
|
end
|
45
47
|
|
46
48
|
def inline_class
|
47
|
-
inline ? "
|
49
|
+
inline ? "inline" : ""
|
48
50
|
end
|
49
51
|
|
50
52
|
def compact_class
|
@@ -7,7 +7,7 @@
|
|
7
7
|
thead tr:not(:first-child) th {
|
8
8
|
border-right: 1px solid $border_light !important;
|
9
9
|
}
|
10
|
-
|
10
|
+
|
11
11
|
@media screen and (min-width: $screen-xs-min) {
|
12
12
|
tr:hover, .pb_table_tr:hover {
|
13
13
|
td:last-child, .pb_table_td:last-child {
|
@@ -15,5 +15,53 @@
|
|
15
15
|
}
|
16
16
|
}
|
17
17
|
}
|
18
|
+
|
19
|
+
// Firefox-specific fix for sticky elements
|
20
|
+
@-moz-document url-prefix() {
|
21
|
+
// Target sticky headers
|
22
|
+
&.sticky-header {
|
23
|
+
th:not(:last-child) {
|
24
|
+
border-right: none !important;
|
25
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
26
|
+
}
|
27
|
+
|
28
|
+
.pb_advanced_table_body {
|
29
|
+
.pinned-row {
|
30
|
+
td:not(:first-child):not(:last-child) {
|
31
|
+
border-right: none !important;
|
32
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Target sticky left columns
|
39
|
+
&.sticky-left-column {
|
40
|
+
td[style="left"], th[style="left"] {
|
41
|
+
border-right: none !important;
|
42
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
// Target sticky right columns
|
47
|
+
&.sticky-right-column {
|
48
|
+
td[style="right"], th[style="right"] {
|
49
|
+
border-right: none !important;
|
50
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
// Handle hover states in Firefox
|
55
|
+
@media screen and (min-width: $screen-xs-min) {
|
56
|
+
tr:hover, .pb_table_tr:hover {
|
57
|
+
td:last-child, .pb_table_td:last-child {
|
58
|
+
&[style="left"], &[style="right"] {
|
59
|
+
border-right: none !important;
|
60
|
+
box-shadow: 1px 0 0 0 darken($border_light, 10%) !important;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
18
66
|
}
|
19
67
|
}
|