playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2048phonenumberinputcountrysearch7456
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 +23 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -128
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +9 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
- data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
- data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
- data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
- data/app/pb_kits/playbook/pb_table/table.rb +13 -1
- data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/dist/chunks/_typeahead-D4Ack5Pn.js +22 -0
- data/dist/chunks/_weekday_stacked-DWOZhThL.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/lib-96_ZmvAo.js +29 -0
- data/dist/chunks/{pb_form_validation-BiHyZedy.js → pb_form_validation-Vv2TqXVC.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +19 -1
- 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/version.rb +2 -2
- metadata +81 -21
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
- data/dist/chunks/_typeahead-CPM091Hj.js +0 -22
- data/dist/chunks/_weekday_stacked-BzIANIYX.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- data/dist/chunks/lib-Bg2KFzpz.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -1,10 +1,15 @@
|
|
1
1
|
examples:
|
2
2
|
react:
|
3
3
|
- overlay_default: Default
|
4
|
+
- overlay_gradient_opacity: Gradient & Opacity
|
5
|
+
- overlay_color: Color
|
6
|
+
- overlay_layout: Layout
|
4
7
|
- overlay_multi_directional: Multi-directional
|
5
8
|
- overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
|
6
9
|
- overlay_toggle: Toggle
|
7
10
|
- overlay_hide_scroll_bar: Hide Scroll Bar
|
11
|
+
- overlay_fullscreen_opacity: Full Page Opacity
|
12
|
+
- overlay_fullscreen_background: Full Page Using Background Color Tokens
|
8
13
|
|
9
14
|
rails:
|
10
15
|
- overlay_default: Default
|
@@ -1,5 +1,10 @@
|
|
1
1
|
export { default as OverlayDefault } from './_overlay_default.jsx'
|
2
|
+
export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
|
3
|
+
export { default as OverlayColor } from './_overlay_color.jsx'
|
4
|
+
export { default as OverlayLayout } from './_overlay_layout.jsx'
|
2
5
|
export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
|
3
6
|
export { default as OverlayToggle } from './_overlay_toggle.jsx'
|
4
7
|
export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
|
5
8
|
export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
|
9
|
+
export { default as OverlayFullscreenOpacity } from './_overlay_fullscreen_opacity.jsx'
|
10
|
+
export { default as OverlayFullscreenBackground } from './_overlay_fullscreen_background.jsx'
|
@@ -71,8 +71,46 @@ test('should add overlay-hide-scrollbar class when scrollBarNone is true', () =>
|
|
71
71
|
data: { testid: testId },
|
72
72
|
scrollBarNone: true
|
73
73
|
}
|
74
|
-
|
74
|
+
|
75
75
|
render(<Overlay {...props} />)
|
76
76
|
const kit = screen.getByTestId(testId)
|
77
77
|
expect(kit).toHaveClass('overlay-hide-scrollbar')
|
78
78
|
})
|
79
|
+
|
80
|
+
test('should have no_gradient class if gradient prop is false', () => {
|
81
|
+
const props = {
|
82
|
+
children,
|
83
|
+
data: { testid: testId },
|
84
|
+
id: testId,
|
85
|
+
gradient: false
|
86
|
+
}
|
87
|
+
|
88
|
+
render(<Overlay {...props} />)
|
89
|
+
const kit = screen.getByTestId(testId)
|
90
|
+
expect(kit).toHaveClass('no_gradient')
|
91
|
+
})
|
92
|
+
|
93
|
+
test('should not have no_gradient class if gradient is not passed', () => {
|
94
|
+
const props = {
|
95
|
+
children,
|
96
|
+
data: { testid: testId },
|
97
|
+
id: testId
|
98
|
+
}
|
99
|
+
|
100
|
+
render(<Overlay {...props} />)
|
101
|
+
const kit = screen.getByTestId(testId)
|
102
|
+
expect(kit).not.toHaveClass('no_gradient')
|
103
|
+
})
|
104
|
+
|
105
|
+
test('should have the correct opacity class if opacity prop is passed', () => {
|
106
|
+
const props = {
|
107
|
+
children,
|
108
|
+
data: { testid: testId },
|
109
|
+
id: testId,
|
110
|
+
opacity: "opacity_5"
|
111
|
+
}
|
112
|
+
|
113
|
+
render(<Overlay {...props} />)
|
114
|
+
const kit = screen.getByTestId(testId)
|
115
|
+
expect(kit).toHaveClass('opacity_5')
|
116
|
+
})
|
@@ -39,6 +39,9 @@ $flag-min-resolution: 192dpi;
|
|
39
39
|
color: $charcoal;
|
40
40
|
}
|
41
41
|
|
42
|
+
.iti__country-list {
|
43
|
+
min-width: $dropdown-min-width;
|
44
|
+
}
|
42
45
|
// iti-spacer-horizontal's default is 8px, or $space_xs
|
43
46
|
.iti__country-list .iti__flag, .iti__country-name {
|
44
47
|
margin-right: $space_xs;
|
@@ -227,6 +230,16 @@ $flag-min-resolution: 192dpi;
|
|
227
230
|
.iti__dropdown-content {
|
228
231
|
border-radius: $space_xs;
|
229
232
|
border: 1px solid $border_dark !important;
|
233
|
+
.iti__search-input {
|
234
|
+
background-color: $bg_dark_card;
|
235
|
+
&:hover {
|
236
|
+
background-color: $bg_dark_card;
|
237
|
+
}
|
238
|
+
&:active,
|
239
|
+
&:focus {
|
240
|
+
background-color: $card_dark;
|
241
|
+
}
|
242
|
+
}
|
230
243
|
}
|
231
244
|
|
232
245
|
.iti__divider {
|
@@ -37,6 +37,7 @@ type PhoneNumberInputProps = {
|
|
37
37
|
required?: boolean,
|
38
38
|
value?: string,
|
39
39
|
formatAsYouType?: boolean,
|
40
|
+
countrySearch?: boolean,
|
40
41
|
}
|
41
42
|
|
42
43
|
enum ValidationError {
|
@@ -91,6 +92,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
91
92
|
preferredCountries = [],
|
92
93
|
value = "",
|
93
94
|
formatAsYouType = false,
|
95
|
+
countrySearch = false,
|
94
96
|
} = props
|
95
97
|
|
96
98
|
const ariaProps = buildAriaProps(aria)
|
@@ -242,7 +244,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
242
244
|
autoInsertDialCode: false,
|
243
245
|
initialCountry: initialCountry || fallbackCountry,
|
244
246
|
onlyCountries,
|
245
|
-
countrySearch:
|
247
|
+
countrySearch: countrySearch,
|
246
248
|
fixDropdownWidth: false,
|
247
249
|
formatAsYouType: formatAsYouType,
|
248
250
|
hiddenInput: hiddenInputs ? () => ({
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import PhoneNumberInput from '../_phone_number_input'
|
3
|
+
|
4
|
+
const PhoneNumberInputCountrySearch = (props) => (
|
5
|
+
<>
|
6
|
+
<PhoneNumberInput
|
7
|
+
countrySearch
|
8
|
+
id='country-search'
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<PhoneNumberInput
|
12
|
+
countrySearch
|
13
|
+
id='country-search-limited'
|
14
|
+
onlyCountries={["br", "us", "ph", "gb"]}
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
</>
|
18
|
+
)
|
19
|
+
|
20
|
+
export default PhoneNumberInputCountrySearch
|
@@ -0,0 +1 @@
|
|
1
|
+
Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.
|
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
|
|
3
3
|
import Button from '../../pb_button/_button'
|
4
4
|
import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
|
5
5
|
import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
|
6
|
+
import Icon from '../../pb_icon/_icon'
|
6
7
|
|
7
8
|
const PhoneNumberInputValidation = (props) => {
|
8
9
|
const [formErrors, setFormErrors] = useState("");
|
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
|
|
29
30
|
setShowFormErrors(formErrors.length > 0);
|
30
31
|
}, [formErrors]);
|
31
32
|
|
33
|
+
const error = (
|
34
|
+
<>
|
35
|
+
<Icon icon="warning" /> Missing phone number.
|
36
|
+
</>
|
37
|
+
)
|
38
|
+
|
32
39
|
return (
|
33
40
|
<form
|
34
41
|
action=""
|
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
|
|
43
50
|
/>
|
44
51
|
)}
|
45
52
|
<PhoneNumberInput
|
46
|
-
error=
|
53
|
+
error={error}
|
47
54
|
id="validation"
|
48
55
|
initialCountry={countryCode}
|
49
56
|
onChange={handleOnChange}
|
@@ -9,6 +9,7 @@ examples:
|
|
9
9
|
- phone_number_input_clear_field: Clearing the Input Field
|
10
10
|
- phone_number_input_access_input_element: Accessing the Input Element
|
11
11
|
- phone_number_input_format: Format as You Type
|
12
|
+
- phone_number_input_country_search: Country Search
|
12
13
|
|
13
14
|
rails:
|
14
15
|
- phone_number_input_default: Default
|
@@ -18,4 +19,5 @@ examples:
|
|
18
19
|
- phone_number_input_validation: Form Validation
|
19
20
|
- phone_number_input_format: Format as You Type
|
20
21
|
- phone_number_input_hidden_inputs: Hidden Inputs
|
22
|
+
- phone_number_input_country_search: Country Search
|
21
23
|
|
@@ -6,3 +6,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
|
|
6
6
|
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
7
7
|
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|
8
8
|
export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
|
9
|
+
export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
|
@@ -25,6 +25,8 @@ module Playbook
|
|
25
25
|
default: false
|
26
26
|
prop :hidden_inputs, type: Playbook::Props::Boolean,
|
27
27
|
default: false
|
28
|
+
prop :country_search, type: Playbook::Props::Boolean,
|
29
|
+
default: false
|
28
30
|
|
29
31
|
def classname
|
30
32
|
generate_classname("pb_phone_number_input")
|
@@ -45,6 +47,7 @@ module Playbook
|
|
45
47
|
preferredCountries: preferred_countries,
|
46
48
|
required: required,
|
47
49
|
value: value,
|
50
|
+
countrySearch: country_search,
|
48
51
|
}
|
49
52
|
end
|
50
53
|
end
|
@@ -139,3 +139,22 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
|
|
139
139
|
|
140
140
|
expect(input.value).toBe("555-555-5555");
|
141
141
|
});
|
142
|
+
|
143
|
+
test("should pass countrySearch prop to component", () => {
|
144
|
+
window.intlTelInput = jest.fn(() => ({
|
145
|
+
getSelectedCountryData: jest.fn(() => ({})),
|
146
|
+
isValidNumber: jest.fn(() => true),
|
147
|
+
getValidationError: jest.fn(() => 0),
|
148
|
+
}));
|
149
|
+
|
150
|
+
const props = {
|
151
|
+
id: testId,
|
152
|
+
countrySearch: true,
|
153
|
+
data: { testid: 'phone-input-with-search' }
|
154
|
+
};
|
155
|
+
|
156
|
+
render(<PhoneNumberInput {...props} />);
|
157
|
+
|
158
|
+
const wrapper = screen.getByTestId('phone-input-with-search');
|
159
|
+
expect(wrapper).toBeInTheDocument();
|
160
|
+
});
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import Body from '../../pb_body/_body'
|
3
3
|
import Select from '../../pb_select/_select'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const SelectError = (props) => {
|
6
7
|
const options = [
|
@@ -18,10 +19,14 @@ const SelectError = (props) => {
|
|
18
19
|
},
|
19
20
|
]
|
20
21
|
|
22
|
+
const error = (<>
|
23
|
+
<Icon icon="warning" /> Please make a valid selection
|
24
|
+
</>)
|
25
|
+
|
21
26
|
return (
|
22
27
|
<div>
|
23
28
|
<Select
|
24
|
-
error=
|
29
|
+
error={error}
|
25
30
|
label="Favorite Food"
|
26
31
|
name="food"
|
27
32
|
options={options}
|
@@ -29,7 +34,7 @@ const SelectError = (props) => {
|
|
29
34
|
{...props}
|
30
35
|
/>
|
31
36
|
<Body
|
32
|
-
error=
|
37
|
+
error={error}
|
33
38
|
status="negative"
|
34
39
|
{...props}
|
35
40
|
/>
|
@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
84
84
|
'single-line': singleLine,
|
85
85
|
'no-hover': disableHover,
|
86
86
|
'sticky-header': sticky,
|
87
|
-
'sticky-left-column': stickyLeftColumn,
|
88
|
-
'sticky-right-column': stickyRightColumn,
|
87
|
+
'sticky-left-column': stickyLeftColumn.length,
|
88
|
+
'sticky-right-column': stickyRightColumn.length,
|
89
89
|
'striped': striped,
|
90
90
|
'header-borderless': headerStyle === 'borderless',
|
91
91
|
'header-floating': headerStyle === 'floating',
|
@@ -1,3 +1,5 @@
|
|
1
1
|
The `collapsibleContent` can display any content, including nested Table Rows.
|
2
2
|
|
3
|
-
Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
3
|
+
Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
4
|
+
|
5
|
+
**NOTE**: We advise against using the `disableHover` Table prop when nesting Table Rows within a Table.
|
@@ -1,3 +1,5 @@
|
|
1
1
|
The `collapsible_content` can display any content, including nested Table Rows.
|
2
2
|
|
3
|
-
Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
3
|
+
Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
4
|
+
|
5
|
+
**NOTE**: We advise against using the `disable_hover` Table prop when nesting Table Rows within a Table.
|
@@ -1 +1,3 @@
|
|
1
|
-
The `collapsible_content` can also be used to display nested Tables within each Row.
|
1
|
+
The `collapsible_content` can also be used to display nested Tables within each Row.
|
2
|
+
|
3
|
+
**NOTE**: We advise against using the `disable_hover` Table prop when nesting Tables within a Table.
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th>Column 1</th>
|
5
|
+
<th>Column 2</th>
|
6
|
+
<th>Column 3</th>
|
7
|
+
<th>Column 4</th>
|
8
|
+
<th>Column 5</th>
|
9
|
+
</tr>
|
10
|
+
</thead>
|
11
|
+
<tbody>
|
12
|
+
<tr>
|
13
|
+
<td>Value 1</td>
|
14
|
+
<td>Value 2</td>
|
15
|
+
<td>Value 3</td>
|
16
|
+
<td>Value 4</td>
|
17
|
+
<td>Value 5</td>
|
18
|
+
</tr>
|
19
|
+
<tr>
|
20
|
+
<td>Value 1</td>
|
21
|
+
<td>Value 2</td>
|
22
|
+
<td>Value 3</td>
|
23
|
+
<td>Value 4</td>
|
24
|
+
<td>Value 5</td>
|
25
|
+
</tr>
|
26
|
+
<tr>
|
27
|
+
<td>Value 1</td>
|
28
|
+
<td>Value 2</td>
|
29
|
+
<td>Value 3</td>
|
30
|
+
<td>Value 4</td>
|
31
|
+
<td>Value 5</td>
|
32
|
+
</tr>
|
33
|
+
</tbody>
|
34
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Customize your header by removing the header borders with the `header_style: "borderless"` prop.
|
@@ -0,0 +1,36 @@
|
|
1
|
+
<%= pb_rails("card", props: { background: "light" }) do %>
|
2
|
+
<%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
|
3
|
+
<%= pb_rails("table/table_head") do %>
|
4
|
+
<%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
9
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
<%= pb_rails("table/table_body") do %>
|
13
|
+
<%= pb_rails("table/table_row") do %>
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
18
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
19
|
+
<% end %>
|
20
|
+
<%= pb_rails("table/table_row") do %>
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
25
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
26
|
+
<% end %>
|
27
|
+
<%= pb_rails("table/table_row") do %>
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
32
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
35
|
+
<% end %>
|
36
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).
|
@@ -1 +1 @@
|
|
1
|
-
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).
|
1
|
+
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `background` or `backgroundColor` for the element in which it is nested).
|
@@ -37,6 +37,8 @@ examples:
|
|
37
37
|
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|
38
38
|
- table_with_clickable_rows: Table with Clickable Rows
|
39
39
|
- table_with_selectable_rows: Table with Selectable Rows
|
40
|
+
- table_with_header_style_borderless: Header Style Borderless
|
41
|
+
- table_with_header_style_floating: Header Style Floating
|
40
42
|
|
41
43
|
react:
|
42
44
|
- table_sm: Small
|
@@ -6,8 +6,20 @@
|
|
6
6
|
&.table-lg {
|
7
7
|
thead, .pb_table_thead {
|
8
8
|
tr, .pb_table_tr {
|
9
|
-
th
|
9
|
+
th:not(:has(
|
10
|
+
[class*="pb_body_kit"],
|
11
|
+
[class*="pb_detail_kit"],
|
12
|
+
[class*="pb_title_kit"]
|
13
|
+
)),
|
14
|
+
.pb_table_th:not(:has(
|
15
|
+
[class*="pb_body_kit"],
|
16
|
+
[class*="pb_detail_kit"],
|
17
|
+
[class*="pb_title_kit"]
|
18
|
+
)) {
|
10
19
|
@include caption;
|
20
|
+
}
|
21
|
+
|
22
|
+
th, .pb_table_th {
|
11
23
|
border-bottom: 1px solid $border_light;
|
12
24
|
}
|
13
25
|
}
|
@@ -83,10 +95,10 @@
|
|
83
95
|
|
84
96
|
// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
|
85
97
|
.header-floating > thead > tr:first-child > th:first-child,
|
86
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
87
|
-
border-top-left-radius: 0 !important;
|
88
|
-
}
|
89
|
-
.header-floating > thead > tr:first-child > th:last-child,
|
90
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
91
|
-
border-top-right-radius: 0 !important;
|
98
|
+
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
99
|
+
border-top-left-radius: 0 !important;
|
100
|
+
}
|
101
|
+
.header-floating > thead > tr:first-child > th:last-child,
|
102
|
+
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
103
|
+
border-top-right-radius: 0 !important;
|
92
104
|
}
|
@@ -37,13 +37,16 @@ module Playbook
|
|
37
37
|
prop :outer_padding, type: Playbook::Props::Enum,
|
38
38
|
values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
|
39
39
|
default: nil
|
40
|
+
prop :header_style, type: Playbook::Props::Enum,
|
41
|
+
values: %w[default borderless floating],
|
42
|
+
default: "default"
|
40
43
|
|
41
44
|
def classname
|
42
45
|
generate_classname(
|
43
46
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
44
47
|
disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
|
45
48
|
sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
|
46
|
-
"table-responsive-#{responsive}", separator: " "
|
49
|
+
"table-responsive-#{responsive}", header_style_class, separator: " "
|
47
50
|
)
|
48
51
|
end
|
49
52
|
|
@@ -123,6 +126,15 @@ module Playbook
|
|
123
126
|
outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
|
124
127
|
end
|
125
128
|
end
|
129
|
+
|
130
|
+
def header_style_class
|
131
|
+
case header_style
|
132
|
+
when "borderless"
|
133
|
+
"header-borderless"
|
134
|
+
when "floating"
|
135
|
+
"header-floating"
|
136
|
+
end
|
137
|
+
end
|
126
138
|
end
|
127
139
|
end
|
128
140
|
end
|
@@ -26,9 +26,12 @@ module Playbook
|
|
26
26
|
prop :tag, type: Playbook::Props::Enum,
|
27
27
|
values: %w[table div],
|
28
28
|
default: "table"
|
29
|
+
prop :header_style, type: Playbook::Props::Enum,
|
30
|
+
values: %w[default borderless floating],
|
31
|
+
default: "default"
|
29
32
|
|
30
33
|
def classname
|
31
|
-
generate_classname("pb_table_header_kit", align_class) + tag_class
|
34
|
+
generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
|
32
35
|
end
|
33
36
|
|
34
37
|
def tag_class
|
@@ -106,6 +109,15 @@ module Playbook
|
|
106
109
|
end
|
107
110
|
active_item
|
108
111
|
end
|
112
|
+
|
113
|
+
def header_style_class
|
114
|
+
case header_style
|
115
|
+
when "borderless"
|
116
|
+
"header-borderless"
|
117
|
+
when "floating"
|
118
|
+
"header-floating"
|
119
|
+
end
|
120
|
+
end
|
109
121
|
end
|
110
122
|
end
|
111
123
|
end
|
@@ -25,7 +25,7 @@ type TextInputProps = {
|
|
25
25
|
name: string,
|
26
26
|
label: string,
|
27
27
|
mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
|
28
|
-
onChange: (e: React.FormEvent<HTMLInputElement
|
28
|
+
onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
|
29
29
|
placeholder: string,
|
30
30
|
required?: boolean,
|
31
31
|
type: string,
|
@@ -102,10 +102,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
102
102
|
|
103
103
|
let cursorPosition = e.target.selectionStart;
|
104
104
|
const isAtEnd = cursorPosition === inputValue.length;
|
105
|
-
|
105
|
+
|
106
106
|
const formattedValue = INPUTMASKS[mask].format(inputValue)
|
107
|
+
|
108
|
+
let sanitizedValue = formattedValue;
|
109
|
+
if (INPUTMASKS[mask].sanitize) {
|
110
|
+
sanitizedValue = INPUTMASKS[mask].sanitize(formattedValue)
|
111
|
+
}
|
112
|
+
|
107
113
|
e.target.value = formattedValue
|
108
|
-
|
114
|
+
|
109
115
|
// Keep cursor position
|
110
116
|
if (!isAtEnd) {
|
111
117
|
// Account for extra characters (e.g., commas added/removed in currency)
|
@@ -116,9 +122,11 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
116
122
|
}
|
117
123
|
e.target.selectionStart = e.target.selectionEnd = cursorPosition
|
118
124
|
}
|
125
|
+
|
126
|
+
onChange(e, sanitizedValue);
|
127
|
+
} else {
|
128
|
+
onChange(e)
|
119
129
|
}
|
120
|
-
|
121
|
-
onChange(e)
|
122
130
|
}
|
123
131
|
|
124
132
|
const childInput = children ? children.type === "input" : undefined
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
|
3
3
|
import TextInput from '../_text_input'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const TextInputError = (props) => {
|
6
7
|
const [email, setEmail] = useState('')
|
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
|
|
8
9
|
const handleUpdateEmail = ({ target }) => {
|
9
10
|
setEmail(target.value)
|
10
11
|
}
|
12
|
+
|
13
|
+
const error = (
|
14
|
+
<>
|
15
|
+
<Icon icon="warning" /> Please enter a valid email address
|
16
|
+
</>
|
17
|
+
)
|
18
|
+
|
11
19
|
return (
|
12
20
|
<div>
|
13
21
|
<TextInput
|
14
22
|
addOn={{ icon: 'user', alignment: 'left', border: true }}
|
15
|
-
error=
|
23
|
+
error={error}
|
16
24
|
label="Email Address"
|
17
25
|
onChange={handleUpdateEmail}
|
18
26
|
placeholder="Enter email address"
|