playbook_ui 13.31.0 → 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +4 -0
- data/app/pb_kits/playbook/pb_button/_button.scss +3 -3
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +3 -2
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +1 -1
- data/app/pb_kits/playbook/pb_dashboard/commonSettings.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +15 -1
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +14 -19
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +5 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +7 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +3 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +3 -5
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +12 -7
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +31 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +31 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +4 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +13 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +95 -8
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +9 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +109 -6
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +53 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +11 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +5 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +4 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +3 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +2 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +5 -1
- data/app/pb_kits/playbook/pb_icon/_icon.scss +210 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +100 -41
- data/app/pb_kits/playbook/pb_icon/icon.rb +33 -19
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +2 -2
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +48 -0
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md +3 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_nav/index.js +43 -0
- data/app/pb_kits/playbook/pb_nav/nav.rb +9 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +8 -23
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +11 -2
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +1 -0
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +50 -0
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +25 -5
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +6 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/index.ts +4 -4
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
- data/app/pb_kits/playbook/pb_textarea/index.tsx +3 -3
- data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -2
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -3
- data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +11 -7
- data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx +8 -3
- data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +6 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +18 -19
- data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +6 -6
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx +6 -6
- data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx +3 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +22 -57
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
- data/app/pb_kits/playbook/pb_typeahead/index.ts +31 -31
- data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
- data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
- data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -2
- data/app/pb_kits/playbook/playbook-rails.js +6 -0
- data/app/pb_kits/playbook/tokens/_titles.scss +4 -4
- data/app/pb_kits/playbook/tokens/_typography.scss +10 -10
- data/dist/menu.yml +566 -472
- data/dist/playbook-rails.js +7 -7
- data/dist/reset.css +1 -1
- data/lib/playbook/forms/builder/star_rating_field.rb +14 -0
- data/lib/playbook/forms/builder.rb +1 -0
- data/lib/playbook/version.rb +2 -2
- metadata +16 -6
- data/app/pb_kits/playbook/pb_icon/icon_aliases.json +0 -39
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 46be62680a9b7f69c65dbc7401bac4bfa0fdcc6eb8e77b636053147335db6aeb
|
4
|
+
data.tar.gz: a6b937a47504236820e0452a347643dd726ab61d2b95ecf78ecaf9c88eae14cf
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 30558fa14a011d3a22c55218a8e66e23a6beb66f11e065135189e5f171799669c7f213aa751554df57dc599416b99759971f66d319e9c44a4cdd30dfb23c25d7
|
7
|
+
data.tar.gz: 5690e376f3790d415dc66f95a53c73327fd5c5f769ed7dd3199aa097ca1f36c3584505bffa08ae142d546f5249c199160f531772e904878f06c89d9d7fabcdc6
|
@@ -1,2 +1,6 @@
|
|
1
1
|
The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
|
2
2
|
It's important to note that certain options may require specific script imports to function properly.
|
3
|
+
|
4
|
+
Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
|
5
|
+
|
6
|
+
You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.
|
@@ -9,7 +9,7 @@
|
|
9
9
|
|
10
10
|
$pb_button_size: 40px;
|
11
11
|
$pb_button_v_padding: 7px;
|
12
|
-
$pb_button_h_padding:
|
12
|
+
$pb_button_h_padding: 28px;
|
13
13
|
$pb_button_hover_darken: 4%;
|
14
14
|
$pb_button_border_width: 0px;
|
15
15
|
|
@@ -27,13 +27,14 @@ $pb_button_border_width: 0px;
|
|
27
27
|
text-rendering: optimizeLegibility;
|
28
28
|
font-size: $font_small;
|
29
29
|
font-weight: $bold;
|
30
|
+
letter-spacing: $lspace_loose;
|
30
31
|
text-align: center;
|
31
32
|
text-decoration: none;
|
32
33
|
vertical-align: middle;
|
33
34
|
text-transform: none;
|
34
35
|
border-width: $pb_button_border_width;
|
35
36
|
border-style: solid;
|
36
|
-
border-radius: $
|
37
|
+
border-radius: $border_rad_heavy;
|
37
38
|
min-height: $pb_button_size;
|
38
39
|
line-height: 1.5;
|
39
40
|
padding: $pb_button_v_padding $pb_button_h_padding;
|
@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
|
|
28
28
|
style="vertical-align: middle; color: rgb(193, 205, 214);"
|
29
29
|
>
|
30
30
|
<i
|
31
|
-
class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
|
31
|
+
class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
|
32
32
|
/>
|
33
33
|
<span
|
34
34
|
aria-label="chevron-down icon"
|
@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
|
|
53
53
|
/* Change axis label styles */
|
54
54
|
axis.labels.style.fontFamily = typography.font_family_base
|
55
55
|
axis.labels.style.color = colors.charcoal
|
56
|
-
axis.labels.style.fontWeight = typography.
|
56
|
+
axis.labels.style.fontWeight = typography.regular
|
57
57
|
axis.labels.style.fontSize = typography.font_small
|
58
58
|
}
|
59
59
|
|
@@ -4,7 +4,10 @@ import { DateYearStacked } from '../../'
|
|
4
4
|
const DateYearStackedDefault = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
|
-
<DateYearStacked
|
7
|
+
<DateYearStacked
|
8
|
+
date={new Date()}
|
9
|
+
{...props}
|
10
|
+
/>
|
8
11
|
<DateYearStacked
|
9
12
|
align="center"
|
10
13
|
date={new Date()}
|
@@ -51,7 +51,16 @@ export const DraggableContext = () => {
|
|
51
51
|
return useContext(DragContext);
|
52
52
|
};
|
53
53
|
|
54
|
-
export const DraggableProvider = ({
|
54
|
+
export const DraggableProvider = ({
|
55
|
+
children,
|
56
|
+
initialItems,
|
57
|
+
onReorder,
|
58
|
+
onDragStart,
|
59
|
+
onDragEnter,
|
60
|
+
onDragEnd,
|
61
|
+
onDrop,
|
62
|
+
onDragOver
|
63
|
+
}: DraggableProviderType) => {
|
55
64
|
const [state, dispatch] = useReducer(reducer, initialState);
|
56
65
|
|
57
66
|
useEffect(() => {
|
@@ -65,6 +74,7 @@ export const DraggableProvider = ({ children, initialItems, onReorder }: Draggab
|
|
65
74
|
const handleDragStart = (id: string, container: string) => {
|
66
75
|
dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
|
67
76
|
dispatch({ type: 'SET_IS_DRAGGING', payload: id });
|
77
|
+
if (onDragStart) onDragStart(id, container);
|
68
78
|
};
|
69
79
|
|
70
80
|
const handleDragEnter = (id: string, container: string) => {
|
@@ -72,11 +82,13 @@ export const DraggableProvider = ({ children, initialItems, onReorder }: Draggab
|
|
72
82
|
dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
|
73
83
|
dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
|
74
84
|
}
|
85
|
+
if (onDragEnter) onDragEnter(id, container);
|
75
86
|
};
|
76
87
|
|
77
88
|
const handleDragEnd = () => {
|
78
89
|
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
79
90
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
91
|
+
if (onDragEnd) onDragEnd();
|
80
92
|
};
|
81
93
|
|
82
94
|
const changeCategory = (itemId: string, container: string) => {
|
@@ -87,11 +99,13 @@ export const DraggableProvider = ({ children, initialItems, onReorder }: Draggab
|
|
87
99
|
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
88
100
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
89
101
|
changeCategory(state.dragData.id, container);
|
102
|
+
if (onDrop) onDrop(container);
|
90
103
|
};
|
91
104
|
|
92
105
|
const handleDragOver = (e: Event, container: string) => {
|
93
106
|
e.preventDefault();
|
94
107
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
|
108
|
+
if (onDragOver) onDragOver(e, container);
|
95
109
|
};
|
96
110
|
|
97
111
|
const contextValue = useMemo(() => ({
|
@@ -23,4 +23,9 @@ export interface ItemType {
|
|
23
23
|
children: React.ReactNode;
|
24
24
|
initialItems: ItemType[];
|
25
25
|
onReorder: (items: ItemType[]) => void;
|
26
|
+
onDragStart?: (id: string, container: string) => void;
|
27
|
+
onDragEnter?: (id: string, container: string) => void;
|
28
|
+
onDragEnd?: () => void;
|
29
|
+
onDrop?: (container: string) => void;
|
30
|
+
onDragOver?: (e: Event, container: string) => void;
|
26
31
|
}
|
@@ -1,23 +1,19 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import {
|
2
|
+
import { Flex, Image, Draggable, DraggableProvider } from "../../";
|
3
3
|
|
4
4
|
// Initial items to be dragged
|
5
5
|
const data = [
|
6
6
|
{
|
7
|
-
id: "
|
8
|
-
|
7
|
+
id: "21",
|
8
|
+
url: "https://unsplash.it/500/400/?image=633",
|
9
9
|
},
|
10
10
|
{
|
11
|
-
id: "
|
12
|
-
|
11
|
+
id: "22",
|
12
|
+
url: "https://unsplash.it/500/400/?image=634",
|
13
13
|
},
|
14
14
|
{
|
15
|
-
id: "
|
16
|
-
|
17
|
-
},
|
18
|
-
{
|
19
|
-
id: "4",
|
20
|
-
text: "Task 4",
|
15
|
+
id: "23",
|
16
|
+
url: "https://unsplash.it/500/400/?image=637",
|
21
17
|
},
|
22
18
|
];
|
23
19
|
|
@@ -30,20 +26,19 @@ const DraggableDefault = (props) => {
|
|
30
26
|
onReorder={(items) => setInitialState(items)}
|
31
27
|
>
|
32
28
|
<Draggable.Container {...props}>
|
33
|
-
|
34
|
-
{initialState.map(({ id,
|
29
|
+
<Flex>
|
30
|
+
{initialState.map(({ id, url }) => (
|
35
31
|
<Draggable.Item dragId={id}
|
36
32
|
key={id}
|
37
33
|
>
|
38
|
-
<
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
{...props}
|
34
|
+
<Image alt={id}
|
35
|
+
margin="xs"
|
36
|
+
size="md"
|
37
|
+
url={url}
|
43
38
|
/>
|
44
39
|
</Draggable.Item>
|
45
40
|
))}
|
46
|
-
|
41
|
+
</Flex>
|
47
42
|
</Draggable.Container>
|
48
43
|
</DraggableProvider>
|
49
44
|
</>
|
@@ -1,4 +1,6 @@
|
|
1
|
-
|
1
|
+
The Draggable kit gives you a full subcomponent structure that allows it to be used with almost any kits.
|
2
2
|
|
3
|
-
|
4
|
-
|
3
|
+
`DraggableProvider` = This provider manages all settings that allows drag and drop to function and must be used as the outermost wrapper. It has 2 REQUIRED props: `initialItems` (initial data) and `onReorder` (function that returns mutated data as items are reordered via drag and drop). Devs must manage state as shown.
|
4
|
+
|
5
|
+
`Draggable.Container` = This specifies the container within which items can be dropped.
|
6
|
+
`Draggable.Item` = This specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.
|
@@ -1,5 +1,9 @@
|
|
1
|
-
For a simplified version of the Draggable API for the Card kit,
|
1
|
+
For a simplified version of the Draggable API for the Card kit, you can do the following:
|
2
|
+
|
3
|
+
Use `DraggableProvider` and manage state as shown.
|
4
|
+
|
5
|
+
`Draggable.Container` creates the container within which the cards can be dragged and dropped.
|
6
|
+
|
7
|
+
The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
|
2
8
|
|
3
|
-
In addition to the above `dragId` is a REQUIRED prop to be passedd to the Card kit when implementing dragging.
|
4
9
|
|
5
|
-
The dev must manage state as shown.
|
@@ -1,7 +1,5 @@
|
|
1
|
-
For a simplified version of the Draggable API for the List kit,
|
1
|
+
For a simplified version of the Draggable API for the List kit, you can do the following:
|
2
2
|
|
3
|
-
|
3
|
+
Use `DraggableProvider` and manage state as shown.
|
4
4
|
|
5
|
-
The
|
6
|
-
|
7
|
-
The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.
|
5
|
+
The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.
|
@@ -1,7 +1,5 @@
|
|
1
|
-
For a simplified version of the Draggable API for the SelectableList kit,
|
1
|
+
For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
|
2
2
|
|
3
|
-
|
3
|
+
Use `DraggableProvider` and manage state as shown.
|
4
4
|
|
5
|
-
The
|
6
|
-
|
7
|
-
The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.
|
5
|
+
The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
|
@@ -22,10 +22,12 @@ import {
|
|
22
22
|
type DropdownProps = {
|
23
23
|
aria?: { [key: string]: string };
|
24
24
|
autocomplete?: boolean;
|
25
|
+
blankSelection?: string;
|
25
26
|
children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
|
26
27
|
className?: string;
|
27
28
|
dark?: boolean;
|
28
29
|
data?: { [key: string]: string };
|
30
|
+
defaultValue?: GenericObject;
|
29
31
|
error?: string;
|
30
32
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
|
31
33
|
id?: string;
|
@@ -40,10 +42,12 @@ const Dropdown = (props: DropdownProps) => {
|
|
40
42
|
const {
|
41
43
|
aria = {},
|
42
44
|
autocomplete = false,
|
45
|
+
blankSelection = '',
|
43
46
|
children,
|
44
47
|
className,
|
45
48
|
dark = false,
|
46
49
|
data = {},
|
50
|
+
defaultValue = {},
|
47
51
|
error,
|
48
52
|
htmlOptions = {},
|
49
53
|
id,
|
@@ -66,7 +70,7 @@ const Dropdown = (props: DropdownProps) => {
|
|
66
70
|
const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
|
67
71
|
|
68
72
|
const [filterItem, setFilterItem] = useState("");
|
69
|
-
const [selected, setSelected] = useState<GenericObject>(
|
73
|
+
const [selected, setSelected] = useState<GenericObject>(defaultValue);
|
70
74
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
71
75
|
const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
|
72
76
|
const [hasContainerSubcomponent, setHasContainerSubcomponent] =
|
@@ -116,11 +120,12 @@ const Dropdown = (props: DropdownProps) => {
|
|
116
120
|
setIsDropDownClosed(isClosed)
|
117
121
|
}, [isClosed])
|
118
122
|
|
119
|
-
const
|
123
|
+
const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
|
124
|
+
const optionsWithBlankSelection = blankSelectionOption.concat(options);
|
125
|
+
const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
|
120
126
|
const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
|
121
127
|
return String(label).toLowerCase().includes(filterItem.toLowerCase());
|
122
|
-
}
|
123
|
-
);
|
128
|
+
});
|
124
129
|
|
125
130
|
// For keyboard accessibility: Set focus within dropdown to selected item if it exists
|
126
131
|
useEffect(() => {
|
@@ -194,7 +199,7 @@ const Dropdown = (props: DropdownProps) => {
|
|
194
199
|
inputWrapperRef,
|
195
200
|
isDropDownClosed,
|
196
201
|
isInputFocused,
|
197
|
-
|
202
|
+
optionsWithBlankSelection,
|
198
203
|
selected,
|
199
204
|
setFocusedOptionIndex,
|
200
205
|
setIsDropDownClosed,
|
@@ -233,8 +238,8 @@ const Dropdown = (props: DropdownProps) => {
|
|
233
238
|
<>
|
234
239
|
<DropdownTrigger />
|
235
240
|
<DropdownContainer>
|
236
|
-
{
|
237
|
-
|
241
|
+
{optionsWithBlankSelection &&
|
242
|
+
optionsWithBlankSelection?.map((option: GenericObject) => (
|
238
243
|
<Dropdown.Option key={option.id}
|
239
244
|
option={option}
|
240
245
|
/>
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
6
|
+
]
|
7
|
+
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("dropdown", props: { blank_selection: "Select One...", options: options }) %>
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown } from '../../'
|
3
|
+
|
4
|
+
const DropdownBlankSelection = (props) => {
|
5
|
+
const options = [
|
6
|
+
{
|
7
|
+
label: "United States",
|
8
|
+
value: "United States",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "Canada",
|
12
|
+
value: "Canada",
|
13
|
+
},
|
14
|
+
{
|
15
|
+
label: "Pakistan",
|
16
|
+
value: "Pakistan",
|
17
|
+
}
|
18
|
+
];
|
19
|
+
|
20
|
+
return (
|
21
|
+
<>
|
22
|
+
<Dropdown
|
23
|
+
blankSelection="Select one..."
|
24
|
+
options={options}
|
25
|
+
{...props}
|
26
|
+
/>
|
27
|
+
</>
|
28
|
+
)
|
29
|
+
}
|
30
|
+
|
31
|
+
export default DropdownBlankSelection
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' },
|
6
|
+
]
|
7
|
+
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("dropdown", props: {options: options, default_value: options.last}) %>
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown } from '../../'
|
3
|
+
|
4
|
+
const DropdownDefaultValue = (props) => {
|
5
|
+
const options = [
|
6
|
+
{
|
7
|
+
label: "United States",
|
8
|
+
value: "United States",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "Canada",
|
12
|
+
value: "Canada",
|
13
|
+
},
|
14
|
+
{
|
15
|
+
label: "Pakistan",
|
16
|
+
value: "Pakistan",
|
17
|
+
}
|
18
|
+
];
|
19
|
+
|
20
|
+
return (
|
21
|
+
<>
|
22
|
+
<Dropdown
|
23
|
+
defaultValue={options[2]}
|
24
|
+
options={options}
|
25
|
+
{...props}
|
26
|
+
/>
|
27
|
+
</>
|
28
|
+
)
|
29
|
+
}
|
30
|
+
|
31
|
+
export default DropdownDefaultValue
|
@@ -8,6 +8,8 @@ examples:
|
|
8
8
|
- dropdown_with_custom_trigger_rails: Custom Trigger
|
9
9
|
- dropdown_with_custom_padding: Custom Option Padding
|
10
10
|
- dropdown_error: Dropdown with Error
|
11
|
+
- dropdown_default_value: Default Value
|
12
|
+
- dropdown_blank_selection: Blank Selection
|
11
13
|
|
12
14
|
react:
|
13
15
|
- dropdown_default: Default
|
@@ -18,6 +20,8 @@ examples:
|
|
18
20
|
- dropdown_with_custom_trigger: Custom Trigger
|
19
21
|
- dropdown_with_custom_padding: Custom Option Padding
|
20
22
|
- dropdown_error: Dropdown with Error
|
23
|
+
- dropdown_default_value: Default Value
|
24
|
+
- dropdown_blank_selection: Blank Selection
|
21
25
|
# - dropdown_with_autocomplete: Autocomplete
|
22
26
|
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
23
27
|
# - dropdown_with_external_control: useDropdown Hook
|
@@ -9,4 +9,6 @@ export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
|
|
9
9
|
export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
|
10
10
|
export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
|
11
11
|
export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
|
12
|
-
export { default as DropdownError } from './_dropdown_error.jsx'
|
12
|
+
export { default as DropdownError } from './_dropdown_error.jsx'
|
13
|
+
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
14
|
+
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
@@ -8,15 +8,16 @@
|
|
8
8
|
<%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
|
9
9
|
<% end %>
|
10
10
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
11
|
-
<input
|
11
|
+
<input id="dropdown-selected-option" name="<%= object.name %>" value="<%= input_default_value %>" style="display: none" <%= object.required ? "required" : ""%> />
|
12
|
+
|
12
13
|
<% if content.present? %>
|
13
14
|
<%= content.presence %>
|
14
15
|
<%= pb_rails("body", props: { status: "negative", text: object.error }) %>
|
15
16
|
<% else %>
|
16
17
|
<%= pb_rails("dropdown/dropdown_trigger") %>
|
17
18
|
<%= pb_rails("dropdown/dropdown_container") do %>
|
18
|
-
<% if
|
19
|
-
<%
|
19
|
+
<% if options_with_blank.present? %>
|
20
|
+
<% options_with_blank.each do |option| %>
|
20
21
|
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
|
21
22
|
<% end %>
|
22
23
|
<% end %>
|
@@ -8,6 +8,11 @@ module Playbook
|
|
8
8
|
prop :label, type: Playbook::Props::String
|
9
9
|
prop :name, type: Playbook::Props::String
|
10
10
|
prop :error, type: Playbook::Props::String
|
11
|
+
prop :required, type: Playbook::Props::Boolean,
|
12
|
+
default: false
|
13
|
+
prop :default_value
|
14
|
+
prop :blank_selection, type: Playbook::Props::String,
|
15
|
+
default: ""
|
11
16
|
|
12
17
|
def data
|
13
18
|
Hash(prop(:data)).merge(pb_dropdown: true)
|
@@ -22,6 +27,14 @@ module Playbook
|
|
22
27
|
def error_class
|
23
28
|
error.present? ? " error" : ""
|
24
29
|
end
|
30
|
+
|
31
|
+
def input_default_value
|
32
|
+
default_value.present? ? default_value.transform_keys(&:to_s) : ""
|
33
|
+
end
|
34
|
+
|
35
|
+
def options_with_blank
|
36
|
+
blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
|
37
|
+
end
|
25
38
|
end
|
26
39
|
end
|
27
40
|
end
|