playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10658 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327
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 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -12
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +2 -7
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +7 -51
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +2 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +9 -12
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_card/_card.scss +4 -12
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -10
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +0 -3
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +0 -8
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +0 -1
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +0 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -6
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -48
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +8 -6
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +65 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +2 -13
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -9
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +0 -1
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -3
- data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +0 -11
- data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -19
- data/app/pb_kits/playbook/pb_nav/item.html.erb +2 -6
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +3 -2
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +0 -38
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +8 -24
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +10 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +9 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +17 -3
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +15 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +2 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +2 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +6 -18
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +7 -29
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +4 -69
- data/dist/chunks/{_line_graph-CUfJ7E4h.js → _line_graph-CApw7aQD.js} +1 -1
- data/dist/chunks/_typeahead-J1_avqdO.js +6 -0
- data/dist/chunks/_weekday_stacked-DMSGdE48.js +37 -0
- data/dist/chunks/{lib-BTs5acfO.js → lib-CY5ZPzic.js} +1 -1
- data/dist/chunks/{pb_form_validation-CKkaQFX3.js → pb_form_validation-D3b0JKHH.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -15
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +2 -37
- data/lib/playbook/version.rb +1 -1
- metadata +9 -100
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +0 -5
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +0 -24
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +0 -106
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +0 -28
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +0 -31
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +0 -3
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +0 -62
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +0 -88
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +0 -28
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +0 -51
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +0 -5
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +0 -12
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +0 -25
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +0 -17
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +0 -18
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +0 -44
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +0 -5
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +0 -16
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +0 -30
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +0 -16
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +0 -30
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +0 -26
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +0 -41
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +0 -1
- data/dist/chunks/_typeahead-DCp1lVJx.js +0 -6
- data/dist/chunks/_weekday_stacked-DlGphUxE.js +0 -37
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: be71db65aaae3d05ad5a05e9c505672f4d5157b3a43c21324e5123b064fea3e1
|
4
|
+
data.tar.gz: 9a591a8849f6905e08519883fcd212b0ecc7348b537e6348961c0daf6dede396
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7e48c32c68eaa11b6ff4ace1b9a92eeca35e9174ecb230ba372ba4358e462c02ff8986921f0748bd16fb68edf0594cefa906d581beff1f5b7c2a813409b3afa4
|
7
|
+
data.tar.gz: bd223268365e712962a7fa62c419ac6c522a995ab4d738bd0ad9d43dea585189b229bf4ac9041b15de82f7a586801eddc6d529735bb472486e6838c971b3ceda
|
@@ -1,6 +1,5 @@
|
|
1
1
|
|
2
2
|
|
3
|
-
|
4
3
|
@import 'pb_advanced_table/advanced_table';
|
5
4
|
@import 'pb_avatar/avatar';
|
6
5
|
@import 'pb_background/background';
|
@@ -109,8 +108,6 @@
|
|
109
108
|
@import 'pb_user_badge/user_badge';
|
110
109
|
@import 'pb_weekday_stacked/weekday_stacked';
|
111
110
|
@import 'pb_empty_state/empty_state';
|
112
|
-
@import 'pb_pb_bar_graph/pb_bar_graph';
|
113
|
-
@import 'pb_pb_circle_chart/pb_circle_chart';
|
114
111
|
@import 'utilities/mixins';
|
115
112
|
@import 'utilities/spacing';
|
116
113
|
@import 'utilities/cursor';
|
@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
|
|
5
5
|
import { GenericObject } from "../../types"
|
6
6
|
import { isChrome } from "../Utilities/BrowserCheck"
|
7
7
|
import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
|
8
|
-
import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
|
9
8
|
|
10
9
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
11
10
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -61,7 +60,7 @@ const TableCellRenderer = ({
|
|
61
60
|
const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
|
62
61
|
const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
|
63
62
|
const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
|
64
|
-
|
63
|
+
|
65
64
|
return (
|
66
65
|
<td
|
67
66
|
align={cellAlignment}
|
@@ -133,7 +132,6 @@ export const RegularTableView = ({
|
|
133
132
|
|
134
133
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
135
134
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
136
|
-
|
137
135
|
// Row pinning
|
138
136
|
function PinnedRow({ row }: { row: Row<any> }) {
|
139
137
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
@@ -146,7 +144,7 @@ export const RegularTableView = ({
|
|
146
144
|
backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
|
147
145
|
color: customRowStyle?.fontColor,
|
148
146
|
position: 'sticky',
|
149
|
-
top:
|
147
|
+
top:
|
150
148
|
row.getIsPinned() === 'top'
|
151
149
|
? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
|
152
150
|
: undefined,
|
@@ -171,20 +169,21 @@ export const RegularTableView = ({
|
|
171
169
|
return (
|
172
170
|
<>
|
173
171
|
{pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
|
174
|
-
<PinnedRow key={row.id}
|
175
|
-
row={row}
|
172
|
+
<PinnedRow key={row.id}
|
173
|
+
row={row}
|
176
174
|
/>
|
177
175
|
))}
|
178
176
|
{totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
|
177
|
+
const isExpandable = row.getIsExpanded();
|
179
178
|
const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
|
179
|
+
const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
|
180
180
|
const numberOfColumns = table.getAllFlatColumns().length;
|
181
|
+
const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
|
182
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
183
|
+
const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
181
184
|
const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
|
182
185
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
183
186
|
|
184
|
-
// Use functions from RowUtils for consistent cell coloring
|
185
|
-
const rowColor = getRowColorClass(row, inlineRowLoading || false);
|
186
|
-
const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
|
187
|
-
|
188
187
|
return (
|
189
188
|
<React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
|
190
189
|
{isFirstChildofSubrow && subRowHeaders && (
|
@@ -229,7 +228,7 @@ export const RegularTableView = ({
|
|
229
228
|
|
230
229
|
{/* Display LoadingInline if Row Data is querying and there are no children already */}
|
231
230
|
{isDataLoading && (
|
232
|
-
<tr key={`${row.id}-
|
231
|
+
<tr key={`${row.id}-row`}>
|
233
232
|
<td colSpan={numberOfColumns}
|
234
233
|
style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
|
235
234
|
>
|
@@ -244,4 +243,4 @@ export const RegularTableView = ({
|
|
244
243
|
);
|
245
244
|
}
|
246
245
|
|
247
|
-
export default RegularTableView;
|
246
|
+
export default RegularTableView;
|
@@ -7,7 +7,6 @@ import { GenericObject } from "../../types"
|
|
7
7
|
|
8
8
|
import { isChrome } from "../Utilities/BrowserCheck"
|
9
9
|
import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
|
10
|
-
import { getRowColorClass } from "../Utilities/RowUtils"
|
11
10
|
|
12
11
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
13
12
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -46,10 +45,10 @@ export const VirtualizedTableView = ({
|
|
46
45
|
|
47
46
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
48
47
|
const sortingState = JSON.stringify(table.getState().sorting || []);
|
49
|
-
|
48
|
+
|
50
49
|
// Store column widths extracted from header
|
51
50
|
const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
|
52
|
-
|
51
|
+
|
53
52
|
// Function to get header cell widths
|
54
53
|
const getHeaderCellWidths = () => {
|
55
54
|
const widths: {[key: string]: string} = {};
|
@@ -137,7 +136,7 @@ export const VirtualizedTableView = ({
|
|
137
136
|
</tr>
|
138
137
|
);
|
139
138
|
}
|
140
|
-
|
139
|
+
|
141
140
|
// Establish # of Parent Rows (so that Footer count does not include every single row)
|
142
141
|
const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
|
143
142
|
|
@@ -173,9 +172,10 @@ export const VirtualizedTableView = ({
|
|
173
172
|
|
174
173
|
if (item.type === 'row') {
|
175
174
|
const row = item.row;
|
176
|
-
|
177
|
-
|
178
|
-
const
|
175
|
+
const isExpandable = row.getIsExpanded();
|
176
|
+
const rowHasNoChildren = row.original?.children && !row.original.children.length;
|
177
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
178
|
+
const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
179
179
|
|
180
180
|
return (
|
181
181
|
<tr
|
@@ -10,14 +10,9 @@ export const getRowColorClass = (
|
|
10
10
|
): string => {
|
11
11
|
const isExpandable = row.getIsExpanded();
|
12
12
|
const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
|
13
|
+
const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
|
13
14
|
|
14
|
-
|
15
|
-
const shouldShowExpandedBackground = isExpandable && (
|
16
|
-
(!inlineRowLoading && row.getCanExpand()) ||
|
17
|
-
(inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
|
18
|
-
);
|
19
|
-
|
20
|
-
return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
|
15
|
+
return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
21
16
|
}
|
22
17
|
|
23
18
|
/**
|
@@ -1011,62 +1011,18 @@
|
|
1011
1011
|
.pb-advanced-table-popover-option:hover {
|
1012
1012
|
background-color: $bg_light;
|
1013
1013
|
}
|
1014
|
-
|
1015
1014
|
// Removes borders when Wrapped inside the Card Kit
|
1016
|
-
.pb_card_kit > .pb_advanced_table
|
1017
|
-
|
1018
|
-
|
1019
|
-
|
1020
|
-
box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
|
1015
|
+
.pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
|
1016
|
+
.pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
|
1017
|
+
.pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
|
1018
|
+
.pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
|
1021
1019
|
border-right: none !important;
|
1022
|
-
}
|
1023
|
-
|
1024
|
-
// Without vertical border, remove all last-cell borders
|
1025
|
-
// Specifically for header to prevent thicker borders in firefox.
|
1026
|
-
.pb_table:not(.vertical-border) {
|
1027
|
-
.pb_advanced_table_header .last-header-cell {
|
1028
|
-
box-shadow: none !important;
|
1029
|
-
}
|
1030
|
-
}
|
1031
|
-
// Firefox fix
|
1032
|
-
@-moz-document url-prefix() {
|
1033
|
-
.pb_advanced_table_header {
|
1034
|
-
.last-header-cell {
|
1035
|
-
box-shadow: 1px 0 0 0 $border_light !important;
|
1036
|
-
}
|
1037
|
-
}
|
1038
|
-
}
|
1039
|
-
|
1040
|
-
// For tables WITH vertical borders, only remove border from actual last column
|
1041
|
-
.pb_table.vertical-border {
|
1042
|
-
.pb_advanced_table_body .last-cell:not(:last-child),
|
1043
|
-
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1044
|
-
box-shadow: none !important;
|
1045
|
-
border-right: 1px solid $border_light !important;
|
1046
|
-
}
|
1047
|
-
|
1048
|
-
// Dark mode
|
1049
|
-
&.dark {
|
1050
|
-
.pb_advanced_table_body .last-cell:not(:last-child),
|
1051
|
-
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1052
|
-
border-right: 1px solid $border_dark !important;
|
1053
|
-
}
|
1054
|
-
}
|
1055
|
-
}
|
1056
|
-
|
1057
|
-
// Support column group border colors
|
1058
|
-
&.pb_advanced_table[class*="column-group-border-"] {
|
1059
|
-
.pb_advanced_table_body .last-cell:not(:last-child),
|
1060
|
-
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1061
|
-
border-right: 1px solid var(--column-border-color) !important;
|
1062
|
-
}
|
1063
|
-
}
|
1064
1020
|
}
|
1065
1021
|
|
1066
|
-
//
|
1067
|
-
.pb_card_kit > .pb_advanced_table tr:last-child,
|
1022
|
+
// Removes borders when Wrapped inside the Card Kit
|
1023
|
+
.pb_card_kit > .pb_advanced_table tr:last-child,
|
1068
1024
|
.pb_card_kit > .pb_advanced_table .last-row-cell {
|
1069
1025
|
td {
|
1070
|
-
border-bottom: none !important;
|
1026
|
+
border-bottom: none !important;
|
1071
1027
|
}
|
1072
1028
|
}
|
@@ -39,7 +39,5 @@
|
|
39
39
|
],
|
40
40
|
},
|
41
41
|
] %>
|
42
|
-
|
43
|
-
<%= pb_rails("
|
44
|
-
<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
|
45
|
-
<% end %>
|
42
|
+
|
43
|
+
<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
import React from "react"
|
2
|
-
import Card from "../../pb_card/_card"
|
3
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
4
3
|
import MOCK_DATA from "./advanced_table_mock_data.json"
|
5
4
|
|
@@ -45,21 +44,19 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
|
|
45
44
|
],
|
46
45
|
},
|
47
46
|
];
|
48
|
-
|
47
|
+
|
49
48
|
const tableProps = {
|
50
|
-
|
49
|
+
verticalBorder: true
|
51
50
|
}
|
52
|
-
|
51
|
+
|
53
52
|
return (
|
54
53
|
<>
|
55
|
-
<
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
/>
|
62
|
-
</Card>
|
54
|
+
<AdvancedTable
|
55
|
+
columnDefinitions={columnDefinitions}
|
56
|
+
tableData={MOCK_DATA}
|
57
|
+
tableProps={tableProps}
|
58
|
+
{...props}
|
59
|
+
/>
|
63
60
|
</>
|
64
61
|
)
|
65
62
|
}
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- bar_graph_default: Default
|
5
5
|
- bar_graph_legend: Legend
|
6
6
|
- bar_graph_legend_position: Legend Position
|
7
|
+
- bar_graph_legend_non_clickable: Legend Non Clickable
|
7
8
|
- bar_graph_height: Height
|
8
9
|
- bar_graph_spline: Spline
|
9
10
|
- bar_graph_colors: Color Overrides
|
@@ -20,7 +20,7 @@
|
|
20
20
|
// Dark mode
|
21
21
|
.pb_card_kit.dark {
|
22
22
|
@include pb_card_dark;
|
23
|
-
|
23
|
+
|
24
24
|
&.pb_card_kit_selected {
|
25
25
|
@include pb_card_selected_dark;
|
26
26
|
}
|
@@ -33,8 +33,7 @@
|
|
33
33
|
|
34
34
|
// Highlight styles
|
35
35
|
.pb_card_kit_highlight_top,
|
36
|
-
.pb_card_kit_highlight_side
|
37
|
-
.pb_card_kit_highlight_right_side {
|
36
|
+
.pb_card_kit_highlight_side {
|
38
37
|
overflow: hidden;
|
39
38
|
}
|
40
39
|
|
@@ -53,20 +52,13 @@
|
|
53
52
|
}
|
54
53
|
}
|
55
54
|
|
56
|
-
// Highlight side variants
|
55
|
+
// Highlight side variants
|
57
56
|
@each $color_name, $color_value in $pb_card_highlight_colors {
|
58
57
|
.pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
|
59
58
|
@include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
|
60
59
|
}
|
61
60
|
}
|
62
61
|
|
63
|
-
// Highlight side right variants
|
64
|
-
@each $color_name, $color_value in $pb_card_highlight_colors {
|
65
|
-
.pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
|
66
|
-
@include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
|
67
|
-
}
|
68
|
-
}
|
69
|
-
|
70
62
|
// Card Header
|
71
63
|
.pb_card_header_kit {
|
72
64
|
flex-grow: 0;
|
@@ -76,7 +68,7 @@
|
|
76
68
|
padding: $space_sm;
|
77
69
|
border: 0;
|
78
70
|
border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
|
79
|
-
|
71
|
+
|
80
72
|
// Inherit border radius from parent card
|
81
73
|
.pb_card_kit_border_radius_xs & {
|
82
74
|
border-radius: $border_radius_xs $border_radius_xs 0px 0px;
|
@@ -26,7 +26,7 @@ type CardPropTypes = {
|
|
26
26
|
dragHandle?: boolean,
|
27
27
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
28
28
|
highlight?: {
|
29
|
-
position?: "side" | "
|
29
|
+
position?: "side" | "top",
|
30
30
|
color?: string,
|
31
31
|
},
|
32
32
|
id?: string,
|
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
|
|
56
56
|
const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
|
57
57
|
const headerColorCSS = `pb_card_header_kit_${headerColor}`
|
58
58
|
const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
|
59
|
-
|
59
|
+
|
60
60
|
const headerCSS = classnames(
|
61
61
|
'pb_card_header_kit',
|
62
62
|
headerColorCSS,
|
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
108
108
|
const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
|
109
109
|
const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
|
110
110
|
const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
|
111
|
-
|
111
|
+
|
112
112
|
const cardCss = classnames(
|
113
113
|
'pb_card_kit', // Base class
|
114
114
|
selectedCSS,
|
@@ -87,16 +87,6 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
|
|
87
87
|
background: $background;
|
88
88
|
}
|
89
89
|
|
90
|
-
@mixin pb_card_right_highlight($width, $height, $background){
|
91
|
-
content: "";
|
92
|
-
position: absolute;
|
93
|
-
top: 0;
|
94
|
-
right: 0;
|
95
|
-
width: $width;
|
96
|
-
height: $height;
|
97
|
-
background: $background;
|
98
|
-
}
|
99
|
-
|
100
90
|
@mixin pb_card_header_color($header_color) {
|
101
91
|
background: $header_color;
|
102
92
|
}
|
@@ -4,9 +4,6 @@
|
|
4
4
|
<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
|
5
5
|
Top Position & Warning Color
|
6
6
|
<% end %>
|
7
|
-
<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
|
8
|
-
Right Side Position & Product 5 Highlight Color
|
9
|
-
<% end %>
|
10
7
|
<%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
|
11
8
|
Side Position & Category 2 Color
|
12
9
|
<% end %>
|
@@ -21,14 +21,6 @@ const CardHighlight = (props) => {
|
|
21
21
|
{'Top Position & Warning Color'}
|
22
22
|
</Card>
|
23
23
|
|
24
|
-
<Card
|
25
|
-
{...props}
|
26
|
-
highlight={{ position: 'right_side', color: 'product_5_highlight' }}
|
27
|
-
marginBottom="sm"
|
28
|
-
>
|
29
|
-
{'Right Side Position & Product 5 Highlight Color'}
|
30
|
-
</Card>
|
31
|
-
|
32
24
|
<Card
|
33
25
|
{...props}
|
34
26
|
highlight={{ position: 'side', color: 'category_2' }}
|
@@ -65,7 +65,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
|
65
65
|
id={id}
|
66
66
|
>
|
67
67
|
<Button
|
68
|
-
aria={aria}
|
69
68
|
dark={dark}
|
70
69
|
disabled={disabled}
|
71
70
|
htmlType={type}
|
@@ -79,7 +78,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
|
79
78
|
>
|
80
79
|
<Icon
|
81
80
|
fixedWidth
|
82
|
-
htmlOptions={{'aria-hidden': true}}
|
83
81
|
icon={icon}
|
84
82
|
/>
|
85
83
|
</Button>
|
@@ -210,12 +210,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
210
210
|
className="input_wrapper"
|
211
211
|
>
|
212
212
|
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
/>
|
218
|
-
)}
|
213
|
+
<Caption
|
214
|
+
className="pb_date_picker_kit_label"
|
215
|
+
text={hideLabel ? null : label}
|
216
|
+
/>
|
219
217
|
<>
|
220
218
|
<div className="date_picker_input_wrapper">
|
221
219
|
<input
|
@@ -89,48 +89,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
89
89
|
}
|
90
90
|
}
|
91
91
|
|
92
|
-
// Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
|
93
|
-
const getMinMaxYears = () => {
|
94
|
-
const [minYear, maxYear] = yearRange;
|
95
|
-
|
96
|
-
const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
|
97
|
-
if (!dateOption) return null;
|
98
|
-
|
99
|
-
// If it's already a number, assume it's a year
|
100
|
-
if (typeof dateOption === 'number') {
|
101
|
-
return dateOption;
|
102
|
-
}
|
103
|
-
|
104
|
-
// If it's a string, extract year with regex
|
105
|
-
if (typeof dateOption === 'string') {
|
106
|
-
const match = dateOption.match(/\b(19|20)\d{2}\b/);
|
107
|
-
return match ? parseInt(match[0], 10) : null;
|
108
|
-
}
|
109
|
-
|
110
|
-
// If it's a Date object, get the year directly
|
111
|
-
if (dateOption instanceof Date) {
|
112
|
-
return dateOption.getFullYear();
|
113
|
-
}
|
114
|
-
|
115
|
-
return null;
|
116
|
-
};
|
117
|
-
|
118
|
-
const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
|
119
|
-
const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
|
120
|
-
|
121
|
-
return { setMinYear, setMaxYear };
|
122
|
-
};
|
123
|
-
|
124
|
-
const { setMinYear, setMaxYear } = getMinMaxYears()
|
125
|
-
|
126
|
-
// Helper function to get min/max dates based on yearRange
|
127
|
-
const getMinMaxDates = () => {
|
128
|
-
const setMinDate = minDate || `01/01/${setMinYear}`
|
129
|
-
const setMaxDate = maxDate || `12/31/${setMaxYear}`
|
130
|
-
|
131
|
-
return { setMinDate, setMaxDate }
|
132
|
-
}
|
133
|
-
|
134
92
|
const disabledWeekDays = () => {
|
135
93
|
return (
|
136
94
|
[
|
@@ -243,8 +201,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
243
201
|
// | Flatpickr initializer w/ config |
|
244
202
|
// ===========================================================
|
245
203
|
|
246
|
-
const { setMinDate, setMaxDate } = getMinMaxDates()
|
247
|
-
|
248
204
|
flatpickr(`#${pickerId}`, {
|
249
205
|
allowInput,
|
250
206
|
closeOnSelect,
|
@@ -256,8 +212,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
256
212
|
locale: {
|
257
213
|
rangeSeparator: ' to '
|
258
214
|
},
|
259
|
-
maxDate
|
260
|
-
minDate
|
215
|
+
maxDate,
|
216
|
+
minDate,
|
261
217
|
mode,
|
262
218
|
nextArrow: '<i class="far fa-angle-right"></i>',
|
263
219
|
onOpen: [() => {
|
@@ -294,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
294
250
|
|
295
251
|
// create html option tags for desired years
|
296
252
|
let years = ''
|
297
|
-
for (let year =
|
253
|
+
for (let year = yearRange[1]; year >= yearRange[0]; year--) {
|
298
254
|
years += `<option value="${year}">${year}</option>`
|
299
255
|
}
|
300
256
|
|
@@ -367,7 +323,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
367
323
|
}
|
368
324
|
// === End of Automatic Sync Logic ===
|
369
325
|
|
370
|
-
|
326
|
+
|
371
327
|
// Adding dropdown icons to year and month select
|
372
328
|
dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
|
373
329
|
if (picker.monthElements[0].parentElement) {
|
@@ -12,14 +12,10 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
|
|
12
12
|
const timesIcon = getAllIcons()["times"]
|
13
13
|
return (
|
14
14
|
<div
|
15
|
-
aria-label="Close Dialog"
|
16
15
|
className="pb_dialog_close_icon"
|
17
|
-
onClick={onClose}
|
18
|
-
role="button"
|
19
|
-
tabIndex={0}
|
16
|
+
onClick={onClose}
|
20
17
|
>
|
21
18
|
<Icon
|
22
|
-
aria={{ "hidden": true }}
|
23
19
|
className="svg-inline--fa"
|
24
20
|
customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
|
25
21
|
fixedWidth
|
@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
73
73
|
const ariaProps = buildAriaProps(aria);
|
74
74
|
const dataProps = buildDataProps(data)
|
75
75
|
const htmlProps = buildHtmlProps(htmlOptions);
|
76
|
-
const
|
77
|
-
base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)
|
76
|
+
const dialogClassNames = {
|
77
|
+
base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
|
78
78
|
afterOpen: "pb_dialog_after_open",
|
79
79
|
beforeClose: "pb_dialog_before_close",
|
80
80
|
};
|
@@ -93,8 +93,10 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
93
93
|
|
94
94
|
const dynamicInlineProps = globalInlineProps(props);
|
95
95
|
|
96
|
-
const
|
96
|
+
const classes = classnames(
|
97
97
|
buildCss("pb_dialog_wrapper"),
|
98
|
+
globalProps(props),
|
99
|
+
className
|
98
100
|
);
|
99
101
|
|
100
102
|
const [triggerOpened, setTriggerOpened] = useState(false),
|
@@ -171,13 +173,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
171
173
|
{...ariaProps}
|
172
174
|
{...dataProps}
|
173
175
|
{...htmlProps}
|
174
|
-
className={
|
176
|
+
className={classes}
|
175
177
|
>
|
176
178
|
<Modal
|
177
179
|
ariaHideApp={false}
|
178
|
-
className={
|
180
|
+
className={dialogClassNames}
|
179
181
|
closeTimeoutMS={200}
|
180
|
-
contentLabel="
|
182
|
+
contentLabel="Minimal Modal Example"
|
181
183
|
id={id}
|
182
184
|
isOpen={modalIsOpened}
|
183
185
|
onRequestClose={onClose}
|
@@ -12,7 +12,7 @@
|
|
12
12
|
data-cancel-button-id="<%= object.cancel_button_id %>"
|
13
13
|
<% end %>
|
14
14
|
>
|
15
|
-
<%= pb_content_tag(:dialog
|
15
|
+
<%= pb_content_tag(:dialog) do %>
|
16
16
|
<% if object.status === "" && object.title %>
|
17
17
|
<%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
|
18
18
|
<% end %>
|