playbook_ui 14.24.0.pre.alpha.PLAY2343maketiptapreactexternalvitedep9501 → 14.24.0.pre.alpha.PLAY2346reactpaginationexternalcontrol9346
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_advanced_table/Components/RegularTableView.tsx +1 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -34
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +1 -1
- data/app/pb_kits/playbook/pb_date/_date.tsx +3 -5
- data/app/pb_kits/playbook/pb_date/date.html.erb +6 -6
- data/app/pb_kits/playbook/pb_date/date.rb +0 -2
- data/app/pb_kits/playbook/pb_date/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +1 -49
- data/dist/chunks/{_weekday_stacked-CitcNYFp.js → _weekday_stacked-BavTnN0s.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -12
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +0 -43
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md +0 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx +0 -17
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8edce6a5514c3dbb1f02cbdd36cbfd71e8c76d4459fc1980feaa0a9012e93aa2
|
4
|
+
data.tar.gz: 737cefb1d8700dfda12e8c4c6b03d229c2795b92d1bd407c2ac9f460f1ac14db
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b7543b3fbbc89b7014c95200b8ecccd6802061cae1a8546b09c112e42d091e9e2e82094805ff086b186bfc11aeae3162546fbe6c8961ddcc160968e1fea72b9e
|
7
|
+
data.tar.gz: 548956a9452a94b4525ace4c5488558edeac006084671038cf07140bf636db8bea74768d0b3f7e57976c77b739b17634aba927f94df27a50b26d5d1bf0b78b8a
|
@@ -58,9 +58,7 @@ const TableCellRenderer = ({
|
|
58
58
|
// Find the “owning” colDefinition by accessor. Needed for multi column logic
|
59
59
|
const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
|
60
60
|
const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
|
61
|
-
|
62
|
-
const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
|
63
|
-
|
61
|
+
|
64
62
|
return (
|
65
63
|
<td
|
66
64
|
align={cellAlignment}
|
@@ -70,7 +68,6 @@ const TableCellRenderer = ({
|
|
70
68
|
isPinnedLeft && 'pinned-left',
|
71
69
|
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
|
72
70
|
isLastCell && 'last-cell',
|
73
|
-
paddingClass
|
74
71
|
)}
|
75
72
|
key={`${cell.id}-data`}
|
76
73
|
style={{
|
@@ -113,6 +113,7 @@ export const TableHeaderCell = ({
|
|
113
113
|
return visibleSiblings.at(-1) === header.column;
|
114
114
|
})();
|
115
115
|
|
116
|
+
|
116
117
|
const cellClassName = classnames(
|
117
118
|
"table-header-cells",
|
118
119
|
`${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
|
@@ -121,7 +122,7 @@ const cellClassName = classnames(
|
|
121
122
|
{ "pinned-left": responsive === "scroll" && isPinnedLeft },
|
122
123
|
isLastHeaderCell ? "last-header-cell" : "",
|
123
124
|
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
|
124
|
-
|
125
|
+
|
125
126
|
);
|
126
127
|
|
127
128
|
const cellId = `${loading ?
|
@@ -971,40 +971,6 @@
|
|
971
971
|
}
|
972
972
|
}
|
973
973
|
}
|
974
|
-
|
975
|
-
// Firefox-specific fix for last-header-cell and last-cell vertical borders
|
976
|
-
@-moz-document url-prefix() {
|
977
|
-
.pb_advanced_table_header {
|
978
|
-
.last-header-cell {
|
979
|
-
border-right: none !important;
|
980
|
-
box-shadow: 1px 0 0 0 $border_light !important;
|
981
|
-
}
|
982
|
-
}
|
983
|
-
|
984
|
-
.pb_advanced_table_body {
|
985
|
-
.last-cell {
|
986
|
-
border-right: none !important;
|
987
|
-
box-shadow: 1px 0 0 0 $border_light !important;
|
988
|
-
}
|
989
|
-
}
|
990
|
-
|
991
|
-
// Dark mode Firefox fixes
|
992
|
-
&.dark {
|
993
|
-
.pb_advanced_table_header {
|
994
|
-
.last-header-cell {
|
995
|
-
border-right: none !important;
|
996
|
-
box-shadow: 1px 0 0 0 $border_dark !important;
|
997
|
-
}
|
998
|
-
}
|
999
|
-
|
1000
|
-
.pb_advanced_table_body {
|
1001
|
-
.last-cell {
|
1002
|
-
border-right: none !important;
|
1003
|
-
box-shadow: 1px 0 0 0 $border_dark !important;
|
1004
|
-
}
|
1005
|
-
}
|
1006
|
-
}
|
1007
|
-
}
|
1008
974
|
}
|
1009
975
|
|
1010
976
|
// Outside of the pb_advanced_table class for popover
|
@@ -651,36 +651,6 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
|
|
651
651
|
expect(firstEnrollmentCell).toHaveAttribute("align", "left");
|
652
652
|
});
|
653
653
|
|
654
|
-
test("columnStyling.cellPadding sets cell padding", () => {
|
655
|
-
const styledColumnDefs = [
|
656
|
-
{
|
657
|
-
accessor: "year",
|
658
|
-
label: "Year",
|
659
|
-
cellAccessors: ["quarter", "month", "day"],
|
660
|
-
},
|
661
|
-
{
|
662
|
-
accessor: "newEnrollments",
|
663
|
-
label: "New Enrollments",
|
664
|
-
columnStyling: { cellPadding: "none" },
|
665
|
-
},
|
666
|
-
{
|
667
|
-
accessor: "scheduledMeetings",
|
668
|
-
label: "Scheduled Meetings",
|
669
|
-
},
|
670
|
-
];
|
671
|
-
|
672
|
-
render(
|
673
|
-
<AdvancedTable
|
674
|
-
columnDefinitions={styledColumnDefs}
|
675
|
-
data={{ testid: testId }}
|
676
|
-
tableData={MOCK_DATA}
|
677
|
-
/>
|
678
|
-
);
|
679
|
-
|
680
|
-
const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
|
681
|
-
expect(firstEnrollmentCell).toHaveClass('p_none')
|
682
|
-
});
|
683
|
-
|
684
654
|
test("renders virtualized table rows and header", () => {
|
685
655
|
render(
|
686
656
|
<AdvancedTable
|
@@ -724,32 +694,6 @@ test("rowStyling prop works as expected", () => {
|
|
724
694
|
expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
|
725
695
|
})
|
726
696
|
|
727
|
-
test("rowStyling prop to allow padding control", () => {
|
728
|
-
const rowStyling = [
|
729
|
-
{
|
730
|
-
rowId: "1",
|
731
|
-
cellPadding: "lg"
|
732
|
-
},
|
733
|
-
];
|
734
|
-
|
735
|
-
render(
|
736
|
-
<AdvancedTable
|
737
|
-
columnDefinitions={columnDefinitions}
|
738
|
-
data={{ testid: testId }}
|
739
|
-
rowStyling={rowStyling}
|
740
|
-
tableData={MOCK_DATA_WITH_ID}
|
741
|
-
/>
|
742
|
-
)
|
743
|
-
|
744
|
-
const kit = screen.getByTestId(testId)
|
745
|
-
const tableBody = kit.querySelector('tbody')
|
746
|
-
const row1 = tableBody.querySelector('tr:nth-child(1)')
|
747
|
-
const cells = row1.querySelectorAll("td");
|
748
|
-
cells.forEach((cell) => {
|
749
|
-
expect(cell.classList.contains("p_lg")).toBe(true);
|
750
|
-
});
|
751
|
-
})
|
752
|
-
|
753
697
|
test("Sort icon renders with enableSort on individual columns", () => {
|
754
698
|
render(
|
755
699
|
<AdvancedTable
|
@@ -13,7 +13,6 @@ examples:
|
|
13
13
|
- advanced_table_with_custom_header_rails: Custom Header Cell
|
14
14
|
- advanced_table_column_headers: Multi-Header Columns
|
15
15
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
16
|
-
- advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
|
17
16
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
18
17
|
- advanced_table_selectable_rows_rails: Selectable Rows
|
19
18
|
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
@@ -54,7 +53,6 @@ examples:
|
|
54
53
|
- advanced_table_column_headers: Multi-Header Columns
|
55
54
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
56
55
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
57
|
-
- advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
|
58
56
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
59
57
|
- advanced_table_pinned_rows: Pinned Rows
|
60
58
|
- advanced_table_selectable_rows: Selectable Rows
|
@@ -68,10 +66,8 @@ examples:
|
|
68
66
|
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
69
67
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
70
68
|
- advanced_table_row_styling: Row Styling
|
71
|
-
- advanced_table_padding_control_per_row: Padding Control using Row Styling
|
72
69
|
- advanced_table_column_styling: Column Styling
|
73
70
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
74
|
-
- advanced_table_padding_control: Padding Control using Column Styling
|
75
71
|
- advanced_table_column_border_color: Column Group Border Color
|
76
72
|
- advanced_table_fullscreen: Fullscreen
|
77
73
|
- advanced_table_infinite_scroll: Infinite Scroll
|
@@ -21,7 +21,6 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
|
|
21
21
|
export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
|
22
22
|
export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
|
23
23
|
export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
|
24
|
-
export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
|
25
24
|
export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
|
26
25
|
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
27
26
|
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
@@ -43,6 +42,4 @@ export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_c
|
|
43
42
|
export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
|
44
43
|
export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
|
45
44
|
export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
|
46
|
-
export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
|
47
|
-
export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
|
48
|
-
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
45
|
+
export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
|
@@ -43,7 +43,7 @@ module Playbook
|
|
43
43
|
end
|
44
44
|
|
45
45
|
def td_classname(column, index)
|
46
|
-
classes = %w[id-cell]
|
46
|
+
classes = %w[id-cell chrome-styles]
|
47
47
|
classes << "last-cell" if column[:is_last_in_group]
|
48
48
|
classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
|
49
49
|
classes.join(" ")
|
@@ -19,7 +19,6 @@ type PbDateProps = {
|
|
19
19
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
20
20
|
id?: string;
|
21
21
|
showDayOfWeek?: boolean;
|
22
|
-
showCurrentYear?: boolean;
|
23
22
|
showIcon?: boolean;
|
24
23
|
size?: "sm" | "md" | "lg";
|
25
24
|
unstyled?: boolean;
|
@@ -36,7 +35,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
36
35
|
htmlOptions = {},
|
37
36
|
id,
|
38
37
|
showDayOfWeek = false,
|
39
|
-
showCurrentYear = false,
|
40
38
|
showIcon = false,
|
41
39
|
size = "md",
|
42
40
|
unstyled = false,
|
@@ -92,7 +90,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
92
90
|
{month} {day}
|
93
91
|
</span>
|
94
92
|
|
95
|
-
{
|
93
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
96
94
|
</span>
|
97
95
|
</>
|
98
96
|
: size == "md" || size == "lg"
|
@@ -126,7 +124,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
126
124
|
<span>
|
127
125
|
{month} {day}
|
128
126
|
</span>
|
129
|
-
{
|
127
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
130
128
|
</Title>
|
131
129
|
)
|
132
130
|
: (
|
@@ -160,7 +158,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
160
158
|
<Caption dark={dark}
|
161
159
|
tag="span">
|
162
160
|
{month} {day}
|
163
|
-
{
|
161
|
+
{currentYear != year && <>{`, ${year}`}</>}
|
164
162
|
</Caption>
|
165
163
|
</>
|
166
164
|
)}
|
@@ -13,8 +13,8 @@
|
|
13
13
|
<% end %>
|
14
14
|
|
15
15
|
<!-- month day, year -->
|
16
|
-
<%# if not current year
|
17
|
-
<% if object.year.to_s == DateTime.now.year.to_s
|
16
|
+
<%# if not current year %>
|
17
|
+
<% if object.year.to_s == DateTime.now.year.to_s %>
|
18
18
|
<span><%= "#{object.month} #{object.day}" %></span>
|
19
19
|
<%# if is current year %>
|
20
20
|
<% else %>
|
@@ -44,8 +44,8 @@
|
|
44
44
|
|
45
45
|
<!-- month day, year -->
|
46
46
|
|
47
|
-
<%# if not current year
|
48
|
-
<% if object.year.to_s == DateTime.now.year.to_s
|
47
|
+
<%# if not current year %>
|
48
|
+
<% if object.year.to_s == DateTime.now.year.to_s %>
|
49
49
|
<%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
|
50
50
|
<%# if is current year %>
|
51
51
|
<% else %>
|
@@ -74,8 +74,8 @@
|
|
74
74
|
|
75
75
|
<!-- month day, year -->
|
76
76
|
|
77
|
-
<%# if not current year
|
78
|
-
<% if object.year.to_s == DateTime.now.year.to_s
|
77
|
+
<%# if not current year %>
|
78
|
+
<% if object.year.to_s == DateTime.now.year.to_s %>
|
79
79
|
<%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
|
80
80
|
<%# if is current year %>
|
81
81
|
<% else %>
|
@@ -11,8 +11,6 @@ module Playbook
|
|
11
11
|
default: false
|
12
12
|
prop :show_day_of_week, type: Playbook::Props::Boolean,
|
13
13
|
default: false
|
14
|
-
prop :show_current_year, type: Playbook::Props::Boolean,
|
15
|
-
default: false
|
16
14
|
prop :size, type: Playbook::Props::Enum,
|
17
15
|
values: %w[lg md sm xs],
|
18
16
|
default: "md"
|
@@ -5,14 +5,12 @@ examples:
|
|
5
5
|
- date_variants: Variants
|
6
6
|
- date_alignment: Alignment
|
7
7
|
- date_timezone: Timezones
|
8
|
-
- date_with_show_current_year: Show Current Year
|
9
8
|
- date_unstyled: Unstyled
|
10
9
|
|
11
10
|
react:
|
12
11
|
- date_default: Default
|
13
12
|
- date_variants: Variants
|
14
13
|
- date_alignment: Alignment
|
15
|
-
- date_with_show_current_year: Show Current Year
|
16
14
|
- date_unstyled: Unstyled
|
17
15
|
|
18
16
|
swift:
|
@@ -2,4 +2,3 @@ export { default as DateDefault } from './_date_default.jsx'
|
|
2
2
|
export { default as DateVariants } from './_date_variants.jsx'
|
3
3
|
export { default as DateAlignment } from './_date_alignment.jsx'
|
4
4
|
export { default as DateUnstyled } from './_date_unstyled.jsx'
|
5
|
-
export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'
|
@@ -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,53 +15,5 @@
|
|
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
|
-
}
|
66
18
|
}
|
67
19
|
}
|