playbook_ui 15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419 → 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790
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 +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +24 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -13
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
- data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -0
- data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
- data/app/pb_kits/playbook/pb_contact/contact.test.js +21 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +16 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +15 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +5 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/pb_form_validation.js +19 -4
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
- data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
- data/app/pb_kits/playbook/pb_nav/_nav.scss +27 -0
- data/app/pb_kits/playbook/pb_nav/_nav.test.js +16 -0
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
- data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
- 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 +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +28 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +43 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
- data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
- data/dist/chunks/{_line_graph-B-n_nsLR.js → _line_graph-CspDMr9b.js} +1 -1
- data/dist/chunks/{_typeahead-CS9PvM1x.js → _typeahead-B_wpgm_J.js} +2 -2
- data/dist/chunks/{_weekday_stacked-DaFBilv5.js → _weekday_stacked-CXzARuTy.js} +3 -3
- data/dist/chunks/componentRegistry-DzmmLR2x.js +1 -0
- data/dist/chunks/{lib-BTs5acfO.js → lib-QZuu1ltS.js} +1 -1
- data/dist/chunks/pb_form_validation-W63gNcnu.js +1 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +15 -1
- 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/engine.rb +0 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +9 -1
- data/lib/playbook/kit_base.rb +23 -2
- data/lib/playbook/version.rb +1 -1
- metadata +106 -27
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
- data/dist/chunks/pb_form_validation-CKkaQFX3.js +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 88a9c380534f63a7de7599bf2ee71a8afbb142b8ef6eb20a698a3df876024638
|
4
|
+
data.tar.gz: 79475a4ef5ad22653424134e6c132760f48c1622bcaf7233e63744c325bc0321
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4b589699c270e2d4454a2eb681af65adcd913e97a40aee6bc9fe5dc8ccf3242eb39b15af4a24ca77f339da55f1977d2e8a5f95a8d9dd2b7403070c99cbe25e71
|
7
|
+
data.tar.gz: 52fad58b74f2a87c0d9d608bce2001fb8ea4ebe2323961a0d705e267a870fc5b1677eb4deca9eb1d15d5acea4db084239214565ff78d2a79cfe69bab9504fc7e
|
@@ -1,5 +1,6 @@
|
|
1
1
|
|
2
2
|
|
3
|
+
|
3
4
|
@import 'pb_advanced_table/advanced_table';
|
4
5
|
@import 'pb_avatar/avatar';
|
5
6
|
@import 'pb_background/background';
|
@@ -108,6 +109,8 @@
|
|
108
109
|
@import 'pb_user_badge/user_badge';
|
109
110
|
@import 'pb_weekday_stacked/weekday_stacked';
|
110
111
|
@import 'pb_empty_state/empty_state';
|
112
|
+
@import 'pb_pb_bar_graph/pb_bar_graph';
|
113
|
+
@import 'pb_pb_circle_chart/pb_circle_chart';
|
111
114
|
@import 'utilities/mixins';
|
112
115
|
@import 'utilities/spacing';
|
113
116
|
@import 'utilities/cursor';
|
@@ -5,6 +5,7 @@ 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"
|
8
9
|
|
9
10
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
10
11
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -29,6 +30,7 @@ const TableCellRenderer = ({
|
|
29
30
|
columnPinning,
|
30
31
|
customRowStyle,
|
31
32
|
columnDefinitions,
|
33
|
+
isMultiHeaderColumn = false,
|
32
34
|
}: {
|
33
35
|
row: Row<GenericObject>
|
34
36
|
collapsibleTrail?: boolean
|
@@ -37,12 +39,18 @@ const TableCellRenderer = ({
|
|
37
39
|
columnPinning: { left: string[] }
|
38
40
|
customRowStyle?: GenericObject
|
39
41
|
columnDefinitions?: {[key:string]:any}[]
|
42
|
+
isMultiHeaderColumn?: boolean
|
40
43
|
}) => {
|
41
44
|
return (
|
42
45
|
<>
|
43
46
|
{row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
|
44
47
|
const isPinnedLeft = columnPinning.left.includes(cell.column.id);
|
48
|
+
// Add a border to the right of each group of columns for multi-header column tables
|
45
49
|
const isLastCell = (() => {
|
50
|
+
if (!isMultiHeaderColumn) {
|
51
|
+
return false;
|
52
|
+
}
|
53
|
+
|
46
54
|
const parent = cell.column.parent;
|
47
55
|
if (!parent) {
|
48
56
|
const last = row.getVisibleCells().at(-1);
|
@@ -60,7 +68,7 @@ const TableCellRenderer = ({
|
|
60
68
|
const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
|
61
69
|
const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
|
62
70
|
const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
|
63
|
-
|
71
|
+
|
64
72
|
return (
|
65
73
|
<td
|
66
74
|
align={cellAlignment}
|
@@ -132,6 +140,10 @@ export const RegularTableView = ({
|
|
132
140
|
|
133
141
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
134
142
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
143
|
+
const isMultiHeaderColumn = columnDefinitions.some(
|
144
|
+
(obj: Record<string, unknown>) => "columns" in obj
|
145
|
+
);
|
146
|
+
|
135
147
|
// Row pinning
|
136
148
|
function PinnedRow({ row }: { row: Row<any> }) {
|
137
149
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
@@ -144,7 +156,7 @@ export const RegularTableView = ({
|
|
144
156
|
backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
|
145
157
|
color: customRowStyle?.fontColor,
|
146
158
|
position: 'sticky',
|
147
|
-
top:
|
159
|
+
top:
|
148
160
|
row.getIsPinned() === 'top'
|
149
161
|
? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
|
150
162
|
: undefined,
|
@@ -156,6 +168,7 @@ export const RegularTableView = ({
|
|
156
168
|
columnDefinitions={columnDefinitions}
|
157
169
|
columnPinning={columnPinning}
|
158
170
|
customRowStyle={customRowStyle}
|
171
|
+
isMultiHeaderColumn={isMultiHeaderColumn}
|
159
172
|
loading={loading}
|
160
173
|
row={row}
|
161
174
|
stickyLeftColumn={stickyLeftColumn}
|
@@ -169,21 +182,20 @@ export const RegularTableView = ({
|
|
169
182
|
return (
|
170
183
|
<>
|
171
184
|
{pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
|
172
|
-
<PinnedRow key={row.id}
|
173
|
-
row={row}
|
185
|
+
<PinnedRow key={row.id}
|
186
|
+
row={row}
|
174
187
|
/>
|
175
188
|
))}
|
176
189
|
{totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
|
177
|
-
const isExpandable = row.getIsExpanded();
|
178
190
|
const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
|
179
|
-
const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
|
180
191
|
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";
|
184
192
|
const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
|
185
193
|
const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
|
186
194
|
|
195
|
+
// Use functions from RowUtils for consistent cell coloring
|
196
|
+
const rowColor = getRowColorClass(row, inlineRowLoading || false);
|
197
|
+
const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
|
198
|
+
|
187
199
|
return (
|
188
200
|
<React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
|
189
201
|
{isFirstChildofSubrow && subRowHeaders && (
|
@@ -220,6 +232,7 @@ export const RegularTableView = ({
|
|
220
232
|
columnDefinitions={columnDefinitions}
|
221
233
|
columnPinning={columnPinning}
|
222
234
|
customRowStyle={customRowStyle}
|
235
|
+
isMultiHeaderColumn={isMultiHeaderColumn}
|
223
236
|
loading={loading}
|
224
237
|
row={row}
|
225
238
|
stickyLeftColumn={stickyLeftColumn}
|
@@ -228,7 +241,7 @@ export const RegularTableView = ({
|
|
228
241
|
|
229
242
|
{/* Display LoadingInline if Row Data is querying and there are no children already */}
|
230
243
|
{isDataLoading && (
|
231
|
-
<tr key={`${row.id}-row`}>
|
244
|
+
<tr key={`${row.id}-loading-row`}>
|
232
245
|
<td colSpan={numberOfColumns}
|
233
246
|
style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
|
234
247
|
>
|
@@ -243,4 +256,4 @@ export const RegularTableView = ({
|
|
243
256
|
);
|
244
257
|
}
|
245
258
|
|
246
|
-
export default RegularTableView;
|
259
|
+
export default RegularTableView;
|
@@ -7,6 +7,7 @@ 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"
|
10
11
|
|
11
12
|
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
12
13
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
@@ -45,10 +46,10 @@ export const VirtualizedTableView = ({
|
|
45
46
|
|
46
47
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
47
48
|
const sortingState = JSON.stringify(table.getState().sorting || []);
|
48
|
-
|
49
|
+
|
49
50
|
// Store column widths extracted from header
|
50
51
|
const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
|
51
|
-
|
52
|
+
|
52
53
|
// Function to get header cell widths
|
53
54
|
const getHeaderCellWidths = () => {
|
54
55
|
const widths: {[key: string]: string} = {};
|
@@ -136,7 +137,7 @@ export const VirtualizedTableView = ({
|
|
136
137
|
</tr>
|
137
138
|
);
|
138
139
|
}
|
139
|
-
|
140
|
+
|
140
141
|
// Establish # of Parent Rows (so that Footer count does not include every single row)
|
141
142
|
const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
|
142
143
|
|
@@ -172,10 +173,9 @@ export const VirtualizedTableView = ({
|
|
172
173
|
|
173
174
|
if (item.type === 'row') {
|
174
175
|
const row = item.row;
|
175
|
-
|
176
|
-
|
177
|
-
const
|
178
|
-
const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
|
176
|
+
|
177
|
+
// Use the utility function to get consistent row color
|
178
|
+
const rowColor = getRowColorClass(row, inlineRowLoading || false);
|
179
179
|
|
180
180
|
return (
|
181
181
|
<tr
|
@@ -10,9 +10,14 @@ 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));
|
14
13
|
|
15
|
-
|
14
|
+
// Check if row can expand or is currently expanded
|
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";
|
16
21
|
}
|
17
22
|
|
18
23
|
/**
|
@@ -249,8 +249,10 @@
|
|
249
249
|
}
|
250
250
|
|
251
251
|
.pb_advanced_table_body {
|
252
|
-
|
253
|
-
|
252
|
+
tr {
|
253
|
+
.last-cell:not(:last-of-type) {
|
254
|
+
border-right: 1px solid $border_light !important;
|
255
|
+
}
|
254
256
|
}
|
255
257
|
tr td:first-child {
|
256
258
|
padding-left: 8px !important;
|
@@ -701,6 +703,14 @@
|
|
701
703
|
}
|
702
704
|
}
|
703
705
|
}
|
706
|
+
|
707
|
+
.pb_advanced_table_header {
|
708
|
+
> tr {
|
709
|
+
.last-header-cell:last-of-type {
|
710
|
+
border-right-width: 0 !important;
|
711
|
+
}
|
712
|
+
}
|
713
|
+
}
|
704
714
|
}
|
705
715
|
}
|
706
716
|
|
@@ -975,14 +985,14 @@
|
|
975
985
|
// Firefox-specific fix for last-header-cell and last-cell vertical borders
|
976
986
|
@-moz-document url-prefix() {
|
977
987
|
.pb_advanced_table_header {
|
978
|
-
.last-header-cell {
|
988
|
+
.last-header-cell:not(:last-child) {
|
979
989
|
border-right: none !important;
|
980
990
|
box-shadow: 1px 0 0 0 $border_light !important;
|
981
991
|
}
|
982
992
|
}
|
983
993
|
|
984
994
|
.pb_advanced_table_body {
|
985
|
-
.last-cell {
|
995
|
+
.last-cell:not(:last-child) {
|
986
996
|
border-right: none !important;
|
987
997
|
box-shadow: 1px 0 0 0 $border_light !important;
|
988
998
|
}
|
@@ -991,14 +1001,14 @@
|
|
991
1001
|
// Dark mode Firefox fixes
|
992
1002
|
&.dark {
|
993
1003
|
.pb_advanced_table_header {
|
994
|
-
.last-header-cell {
|
1004
|
+
.last-header-cell:not(:last-child) {
|
995
1005
|
border-right: none !important;
|
996
1006
|
box-shadow: 1px 0 0 0 $border_dark !important;
|
997
1007
|
}
|
998
1008
|
}
|
999
1009
|
|
1000
1010
|
.pb_advanced_table_body {
|
1001
|
-
.last-cell {
|
1011
|
+
.last-cell:not(:last-child) {
|
1002
1012
|
border-right: none !important;
|
1003
1013
|
box-shadow: 1px 0 0 0 $border_dark !important;
|
1004
1014
|
}
|
@@ -1011,18 +1021,62 @@
|
|
1011
1021
|
.pb-advanced-table-popover-option:hover {
|
1012
1022
|
background-color: $bg_light;
|
1013
1023
|
}
|
1024
|
+
|
1014
1025
|
// Removes borders when Wrapped inside the Card Kit
|
1015
|
-
.pb_card_kit > .pb_advanced_table
|
1016
|
-
|
1017
|
-
.
|
1018
|
-
.
|
1026
|
+
.pb_card_kit > .pb_advanced_table {
|
1027
|
+
// Remove right border only from the actual last column
|
1028
|
+
.pb_advanced_table_body tr td:last-child,
|
1029
|
+
.pb_advanced_table_header tr th:last-child {
|
1030
|
+
box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
|
1019
1031
|
border-right: none !important;
|
1032
|
+
}
|
1033
|
+
|
1034
|
+
// Without vertical border, remove all last-cell borders
|
1035
|
+
// Specifically for header to prevent thicker borders in firefox.
|
1036
|
+
.pb_table:not(.vertical-border) {
|
1037
|
+
.pb_advanced_table_header .last-header-cell {
|
1038
|
+
box-shadow: none !important;
|
1039
|
+
}
|
1040
|
+
}
|
1041
|
+
// Firefox fix
|
1042
|
+
@-moz-document url-prefix() {
|
1043
|
+
.pb_advanced_table_header {
|
1044
|
+
.last-header-cell {
|
1045
|
+
box-shadow: 1px 0 0 0 $border_light !important;
|
1046
|
+
}
|
1047
|
+
}
|
1048
|
+
}
|
1049
|
+
|
1050
|
+
// For tables WITH vertical borders, only remove border from actual last column
|
1051
|
+
.pb_table.vertical-border {
|
1052
|
+
.pb_advanced_table_body .last-cell:not(:last-child),
|
1053
|
+
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1054
|
+
box-shadow: none !important;
|
1055
|
+
border-right: 1px solid $border_light !important;
|
1056
|
+
}
|
1057
|
+
|
1058
|
+
// Dark mode
|
1059
|
+
&.dark {
|
1060
|
+
.pb_advanced_table_body .last-cell:not(:last-child),
|
1061
|
+
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1062
|
+
border-right: 1px solid $border_dark !important;
|
1063
|
+
}
|
1064
|
+
}
|
1065
|
+
}
|
1066
|
+
|
1067
|
+
// Support column group border colors
|
1068
|
+
&.pb_advanced_table[class*="column-group-border-"] {
|
1069
|
+
.pb_advanced_table_body .last-cell:not(:last-child),
|
1070
|
+
.pb_advanced_table_header .last-header-cell:not(:last-child) {
|
1071
|
+
border-right: 1px solid var(--column-border-color) !important;
|
1072
|
+
}
|
1073
|
+
}
|
1020
1074
|
}
|
1021
1075
|
|
1022
|
-
//
|
1023
|
-
.pb_card_kit > .pb_advanced_table tr:last-child,
|
1076
|
+
// Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
|
1077
|
+
.pb_card_kit > .pb_advanced_table tr:last-child,
|
1024
1078
|
.pb_card_kit > .pb_advanced_table .last-row-cell {
|
1025
1079
|
td {
|
1026
|
-
border-bottom: none !important;
|
1080
|
+
border-bottom: none !important;
|
1027
1081
|
}
|
1028
1082
|
}
|
@@ -4,7 +4,6 @@ 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
|
8
7
|
- bar_graph_height: Height
|
9
8
|
- bar_graph_spline: Spline
|
10
9
|
- 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,7 +33,8 @@
|
|
33
33
|
|
34
34
|
// Highlight styles
|
35
35
|
.pb_card_kit_highlight_top,
|
36
|
-
.pb_card_kit_highlight_side
|
36
|
+
.pb_card_kit_highlight_side,
|
37
|
+
.pb_card_kit_highlight_right_side {
|
37
38
|
overflow: hidden;
|
38
39
|
}
|
39
40
|
|
@@ -52,13 +53,20 @@
|
|
52
53
|
}
|
53
54
|
}
|
54
55
|
|
55
|
-
// Highlight side variants
|
56
|
+
// Highlight side variants
|
56
57
|
@each $color_name, $color_value in $pb_card_highlight_colors {
|
57
58
|
.pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
|
58
59
|
@include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
|
59
60
|
}
|
60
61
|
}
|
61
62
|
|
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
|
+
|
62
70
|
// Card Header
|
63
71
|
.pb_card_header_kit {
|
64
72
|
flex-grow: 0;
|
@@ -68,7 +76,7 @@
|
|
68
76
|
padding: $space_sm;
|
69
77
|
border: 0;
|
70
78
|
border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
|
71
|
-
|
79
|
+
|
72
80
|
// Inherit border radius from parent card
|
73
81
|
.pb_card_kit_border_radius_xs & {
|
74
82
|
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" | "top",
|
29
|
+
position?: "side" | "right_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,6 +87,16 @@ $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
|
+
|
90
100
|
@mixin pb_card_header_color($header_color) {
|
91
101
|
background: $header_color;
|
92
102
|
}
|
@@ -4,6 +4,9 @@
|
|
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 %>
|
7
10
|
<%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
|
8
11
|
Side Position & Category 2 Color
|
9
12
|
<% end %>
|
@@ -21,6 +21,14 @@ 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
|
+
|
24
32
|
<Card
|
25
33
|
{...props}
|
26
34
|
highlight={{ position: 'side', color: 'category_2' }}
|
@@ -17,6 +17,7 @@ const contactTypeMap: { [key: string]: string } = {
|
|
17
17
|
'work': 'phone-office',
|
18
18
|
'work-cell': 'phone-laptop',
|
19
19
|
'wrong-phone': 'phone-slash',
|
20
|
+
'international': 'globe',
|
20
21
|
}
|
21
22
|
|
22
23
|
const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
|
@@ -24,6 +25,10 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string
|
|
24
25
|
const formatContact = (contactString: string, contactType: string) => {
|
25
26
|
if (contactType === 'email') return contactString
|
26
27
|
|
28
|
+
// International phone numbers are unformatted
|
29
|
+
if (contactType === 'international') return contactString
|
30
|
+
|
31
|
+
// Format US numbers
|
27
32
|
const cleaned = contactString.replace(/\D/g, '')
|
28
33
|
const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
|
29
34
|
|
@@ -29,6 +29,8 @@ module Playbook
|
|
29
29
|
"phone-slash"
|
30
30
|
when "extension"
|
31
31
|
"phone-plus"
|
32
|
+
when "international"
|
33
|
+
"globe"
|
32
34
|
else # "unknown" || "other"
|
33
35
|
"phone"
|
34
36
|
end
|
@@ -39,6 +41,8 @@ module Playbook
|
|
39
41
|
contact_value
|
40
42
|
elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
|
41
43
|
contact_value
|
44
|
+
elsif contact_type == "international"
|
45
|
+
contact_value
|
42
46
|
else
|
43
47
|
number_to_phone(formatted_value, area_code: true)
|
44
48
|
end
|
@@ -66,6 +66,12 @@ test('returns correct icon', () => {
|
|
66
66
|
contactValue="1234"
|
67
67
|
data={{ testid: 'test-extension' }}
|
68
68
|
/>
|
69
|
+
<Contact
|
70
|
+
contactDetail="International"
|
71
|
+
contactType="international"
|
72
|
+
contactValue="+44 20 7946 0958"
|
73
|
+
data={{ testid: 'test-international' }}
|
74
|
+
/>
|
69
75
|
<Contact
|
70
76
|
contactDetail=""
|
71
77
|
contactType=""
|
@@ -83,10 +89,11 @@ test('returns correct icon', () => {
|
|
83
89
|
expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
84
90
|
expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
85
91
|
expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
92
|
+
expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
86
93
|
expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
|
87
94
|
})
|
88
95
|
|
89
|
-
test("not compliant values return null in phone related contact types", () => {
|
96
|
+
test("not compliant values return null in US phone related contact types", () => {
|
90
97
|
const notCompliantValues = [
|
91
98
|
"349-185-998223",
|
92
99
|
"349-1858",
|
@@ -129,3 +136,16 @@ test("not compliant values return null in phone related contact types", () => {
|
|
129
136
|
)
|
130
137
|
})
|
131
138
|
})
|
139
|
+
|
140
|
+
test('international contact type preserves original format', () => {
|
141
|
+
render(
|
142
|
+
<Contact
|
143
|
+
contactType="international"
|
144
|
+
contactValue="+44 20 7946 0958"
|
145
|
+
data={{ testid: 'test-international-format' }}
|
146
|
+
/>
|
147
|
+
)
|
148
|
+
|
149
|
+
const kit = screen.getByTestId('test-international-format')
|
150
|
+
expect(kit).toHaveTextContent('+44 20 7946 0958')
|
151
|
+
})
|
@@ -13,7 +13,7 @@
|
|
13
13
|
}) %>
|
14
14
|
|
15
15
|
<%= pb_rails("contact", props: {
|
16
|
-
contact_type: "
|
16
|
+
contact_type: "work",
|
17
17
|
contact_value: "3245627482",
|
18
18
|
}) %>
|
19
19
|
|
@@ -21,3 +21,18 @@
|
|
21
21
|
contact_type: "work-cell",
|
22
22
|
contact_value: "349-185-9988",
|
23
23
|
}) %>
|
24
|
+
|
25
|
+
<%= pb_rails("contact", props: {
|
26
|
+
contact_type: "wrong-phone",
|
27
|
+
contact_value: "2124396666",
|
28
|
+
}) %>
|
29
|
+
|
30
|
+
<%= pb_rails("contact", props: {
|
31
|
+
contact_type: "extension",
|
32
|
+
contact_value: "1233",
|
33
|
+
}) %>
|
34
|
+
|
35
|
+
<%= pb_rails("contact", props: {
|
36
|
+
contact_type: "international",
|
37
|
+
contact_value: "+44 7700 900461",
|
38
|
+
}) %>
|
@@ -28,6 +28,21 @@ const ContactDefault = (props) => {
|
|
28
28
|
contactValue="3245627482"
|
29
29
|
{...props}
|
30
30
|
/>
|
31
|
+
<Contact
|
32
|
+
contactType="wrong-phone"
|
33
|
+
contactValue="2124396666"
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
<Contact
|
37
|
+
contactType='extension'
|
38
|
+
contactValue="1234"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
<Contact
|
42
|
+
contactType="international"
|
43
|
+
contactValue="+44 7700 900461"
|
44
|
+
{...props}
|
45
|
+
/>
|
31
46
|
</div>
|
32
47
|
)
|
33
48
|
}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
|
2
|
+
|
3
|
+
- Use `email` to display emails.
|
4
|
+
- Use `international` to display International phone numbers exactly as provided (no formatting applied).
|
5
|
+
- Use `extension` to display four digit phone extensions.
|
@@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
210
210
|
className="input_wrapper"
|
211
211
|
>
|
212
212
|
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
213
|
+
{!hideLabel && (
|
214
|
+
<Caption
|
215
|
+
className="pb_date_picker_kit_label"
|
216
|
+
text={label}
|
217
|
+
/>
|
218
|
+
)}
|
217
219
|
<>
|
218
220
|
<div className="date_picker_input_wrapper">
|
219
221
|
<input
|