playbook_ui 11.7.0 → 11.8.0
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_dialog/_dialog.scss +32 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +12 -2
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +3 -3
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +17 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +103 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +102 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md +5 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +4 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +4 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -1
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +2 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +14 -23
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +7 -12
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +13 -21
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +3 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +7 -11
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +2 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +7 -11
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +2 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +7 -11
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +2 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +7 -11
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +2 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +26 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -2
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +2 -4
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +83 -67
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +18 -14
- data/app/pb_kits/playbook/pb_lightbox/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +10 -2
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md +1 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +95 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +3 -2
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.md +2 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +25 -29
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +1 -5
- data/app/pb_kits/playbook/pb_list/docs/_description.md +5 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +69 -62
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +16 -7
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +6 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +3 -3
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +7 -2
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -2
- data/lib/playbook/version.rb +2 -2
- metadata +10 -3
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header_icon.tsx +0 -27
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1786432b79daa7bd71c9c2eeefbd167c26c858d33a7b3c1600e9c53416f0a4cc
|
4
|
+
data.tar.gz: 63355e58e35c1a322f9864aa6000d315643d30123349c7c817bf642db85a2940
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d0a254347288d447d1f86672c50de6f64295bc23eac906cf6fd7d06da198dbfcc3c135e29b6caa0a2b5ddee8dec400065f352976094b9ebbb0c0a748a7feca28
|
7
|
+
data.tar.gz: 6dde7b191a13a9ee1630cf92e64229ed03ab69c1874aa5805991d660376c11f2cef81225420a611299a8bc7816545b849d4772a445e22ac150e700e1db9c162c
|
@@ -62,6 +62,7 @@
|
|
62
62
|
$status_size: 375px;
|
63
63
|
$medium: 500px;
|
64
64
|
$large: 800px;
|
65
|
+
$xlarge: 1150px;
|
65
66
|
$animation-duration: 0.2s;
|
66
67
|
$z-index: 100;
|
67
68
|
$opacity_visible: 1;
|
@@ -71,6 +72,7 @@
|
|
71
72
|
background-color: $white;
|
72
73
|
box-shadow: $shadow_deepest;
|
73
74
|
border: 0;
|
75
|
+
border-radius: 0;
|
74
76
|
max-height: calc(100vh - #{$gutter * 2});
|
75
77
|
max-width: calc(100vw - #{$gutter * 2});
|
76
78
|
overflow: auto;
|
@@ -78,7 +80,7 @@
|
|
78
80
|
animation-duration: $animation-duration;
|
79
81
|
outline: none;
|
80
82
|
animation-timing-function: $easeInOutQuint;
|
81
|
-
|
83
|
+
|
82
84
|
&[class*="_status_size"] {
|
83
85
|
width: $status_size;
|
84
86
|
}
|
@@ -135,5 +137,34 @@
|
|
135
137
|
animation-duration: $animation-duration;
|
136
138
|
opacity: $opacity_hidden;
|
137
139
|
}
|
140
|
+
&[class*="full_height"] {
|
141
|
+
|
142
|
+
&[class*="_left"]{
|
143
|
+
justify-content: flex-start;
|
144
|
+
}
|
145
|
+
|
146
|
+
&[class*="_center"]{
|
147
|
+
justify-content: center;
|
148
|
+
}
|
149
|
+
|
150
|
+
&[class*="_right"]{
|
151
|
+
justify-content: flex-end;
|
152
|
+
}
|
153
|
+
|
154
|
+
.pb_dialog {
|
155
|
+
height: 100%;
|
156
|
+
max-height: 100%;
|
157
|
+
max-width: none;
|
158
|
+
&[class*="_sm"] {
|
159
|
+
width: $medium;
|
160
|
+
}
|
161
|
+
&[class*="_md"] {
|
162
|
+
width: $large;
|
163
|
+
}
|
164
|
+
&[class*="_lg"] {
|
165
|
+
width: $xlarge;
|
166
|
+
}
|
167
|
+
}
|
168
|
+
}
|
138
169
|
}
|
139
170
|
}
|
@@ -27,6 +27,7 @@ type DialogProps = {
|
|
27
27
|
confirmButton?: string;
|
28
28
|
data?: object;
|
29
29
|
id?: string;
|
30
|
+
fullHeight?: boolean;
|
30
31
|
loading?: boolean;
|
31
32
|
onCancel?: () => void;
|
32
33
|
onChange?: () => void;
|
@@ -34,8 +35,9 @@ type DialogProps = {
|
|
34
35
|
onConfirm?: () => void;
|
35
36
|
opened: boolean;
|
36
37
|
portalClassName?: string;
|
38
|
+
placement?: "left" | "center" | "right";
|
37
39
|
shouldCloseOnOverlayClick: boolean;
|
38
|
-
size?: "sm" | "md" | "lg" | "status_size" | "content";
|
40
|
+
size?: "sm" | "md" | "lg" | "xl" | "status_size" | "content";
|
39
41
|
status?: "info" | "caution" | "delete" | "error" | "success";
|
40
42
|
text?: string;
|
41
43
|
title?: string;
|
@@ -53,10 +55,12 @@ const Dialog = (props: DialogProps) => {
|
|
53
55
|
size = "md",
|
54
56
|
children,
|
55
57
|
loading = false,
|
58
|
+
fullHeight = false,
|
56
59
|
opened,
|
57
60
|
onCancel = () => {},
|
58
61
|
onConfirm = () => {},
|
59
62
|
onClose = () => {},
|
63
|
+
placement = "center",
|
60
64
|
portalClassName,
|
61
65
|
shouldCloseOnOverlayClick = true,
|
62
66
|
status,
|
@@ -72,8 +76,14 @@ const Dialog = (props: DialogProps) => {
|
|
72
76
|
beforeClose: "pb_dialog_before_close",
|
73
77
|
};
|
74
78
|
|
79
|
+
const fullHeightClassNames = () => {
|
80
|
+
if(!fullHeight) return null
|
81
|
+
if(size === "xl") return `full_height_center`
|
82
|
+
return `full_height_${placement}`
|
83
|
+
}
|
84
|
+
|
75
85
|
const overlayClassNames = {
|
76
|
-
base:
|
86
|
+
base: `pb_dialog_overlay ${fullHeight !== null && fullHeightClassNames() }`,
|
77
87
|
afterOpen: "pb_dialog_overlay_after_open",
|
78
88
|
beforeClose: "pb_dialog_overlay_before_close",
|
79
89
|
};
|
@@ -9,10 +9,10 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
|
|
9
9
|
|
10
10
|
|
11
11
|
type DialogFooterProps = {
|
12
|
-
aria?:
|
12
|
+
aria?: {[key: string]: string},
|
13
13
|
children: React.ReactChild[] | React.ReactChild | string,
|
14
14
|
className?: string,
|
15
|
-
data?:
|
15
|
+
data?: {[key: string]: string},
|
16
16
|
id?: string,
|
17
17
|
padding?: string,
|
18
18
|
paddingBottom?: string,
|
@@ -39,7 +39,7 @@ const DialogFooter = (props: DialogFooterProps) => {
|
|
39
39
|
return (
|
40
40
|
<>
|
41
41
|
{separator &&
|
42
|
-
<SectionSeparator
|
42
|
+
<SectionSeparator />
|
43
43
|
}
|
44
44
|
<Flex
|
45
45
|
className={classnames(footerCSS, footerSpacing, className)}
|
@@ -8,7 +8,7 @@ const size="sm"
|
|
8
8
|
const confirmButton="Okay"
|
9
9
|
const cancelButton="Cancel Button"
|
10
10
|
|
11
|
-
function DialogTest() {
|
11
|
+
function DialogTest({ props }) {
|
12
12
|
const [isOpen, setIsOpen] = useState(false)
|
13
13
|
const close = () => setIsOpen(false)
|
14
14
|
const open = () => setIsOpen(true)
|
@@ -29,6 +29,7 @@ function DialogTest() {
|
|
29
29
|
size={size}
|
30
30
|
text={text}
|
31
31
|
title={title}
|
32
|
+
{...props}
|
32
33
|
/>
|
33
34
|
</>
|
34
35
|
);
|
@@ -71,6 +72,19 @@ test("renders the title and body text", async () => {
|
|
71
72
|
cleanup()
|
72
73
|
});
|
73
74
|
|
75
|
+
test("renders the full height version", async () => {
|
76
|
+
|
77
|
+
const { queryByText } = render(<DialogTest fullHeight />);
|
78
|
+
|
79
|
+
fireEvent.click(queryByText('Open Dialog'));
|
80
|
+
|
81
|
+
await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toHaveTextContent(title));
|
82
|
+
|
83
|
+
await waitFor(() => expect(queryByText("Hello Body Text, Nice to meet ya.")).toHaveTextContent(text));
|
84
|
+
|
85
|
+
cleanup()
|
86
|
+
});
|
87
|
+
|
74
88
|
test("renders the buttons", async () => {
|
75
89
|
|
76
90
|
const { queryByText } = render(<DialogTest />);
|
@@ -82,4 +96,5 @@ test("renders the buttons", async () => {
|
|
82
96
|
await waitFor(() => expect(queryByText("Cancel Button")).toHaveTextContent(cancelButton));
|
83
97
|
|
84
98
|
cleanup()
|
85
|
-
});
|
99
|
+
});
|
100
|
+
|
@@ -0,0 +1,103 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import {
|
3
|
+
Body,
|
4
|
+
Button,
|
5
|
+
Caption,
|
6
|
+
Dialog,
|
7
|
+
Flex,
|
8
|
+
RichTextEditor,
|
9
|
+
Typeahead,
|
10
|
+
} from "../..";
|
11
|
+
|
12
|
+
const useDialog = (visible = false) => {
|
13
|
+
const [opened, setOpened] = useState(visible);
|
14
|
+
const toggle = () => setOpened(!opened);
|
15
|
+
|
16
|
+
return [opened, toggle];
|
17
|
+
};
|
18
|
+
|
19
|
+
const DialogFullHeight = () => {
|
20
|
+
const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
|
21
|
+
useDialog();
|
22
|
+
const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
|
23
|
+
useDialog();
|
24
|
+
const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
|
25
|
+
|
26
|
+
const dialogs = [
|
27
|
+
{
|
28
|
+
size: "sm",
|
29
|
+
title: "Small Dialog",
|
30
|
+
toggle: toggleHeaderSeparatorDialog,
|
31
|
+
visible: headerSeparatorDialogOpened,
|
32
|
+
},
|
33
|
+
{
|
34
|
+
size: "md",
|
35
|
+
title: "Medium Dialog",
|
36
|
+
toggle: toggleFooterSeparatorDialog,
|
37
|
+
visible: footerSeparatorDialogOpened,
|
38
|
+
},
|
39
|
+
{
|
40
|
+
size: "lg",
|
41
|
+
title: "Large Dialog",
|
42
|
+
toggle: toggleBothSeparatorsDialog,
|
43
|
+
visible: bothSeparatorsDialogOpened,
|
44
|
+
},
|
45
|
+
];
|
46
|
+
|
47
|
+
return (
|
48
|
+
<>
|
49
|
+
<Flex wrap>
|
50
|
+
<Button id="sm"
|
51
|
+
marginRight="xl"
|
52
|
+
onClick={toggleHeaderSeparatorDialog}>
|
53
|
+
{"Small Dialog"}
|
54
|
+
</Button>
|
55
|
+
<Button marginRight="xl"
|
56
|
+
onClick={toggleFooterSeparatorDialog}>
|
57
|
+
{"Medium Dialog"}
|
58
|
+
</Button>
|
59
|
+
<Button marginRight="xl"
|
60
|
+
onClick={toggleBothSeparatorsDialog}>
|
61
|
+
{"Large Dialog"}
|
62
|
+
</Button>
|
63
|
+
</Flex>
|
64
|
+
<Flex>
|
65
|
+
{dialogs.map(({toggle, visible, placement, size, title}, index) => (
|
66
|
+
<Dialog
|
67
|
+
fullHeight
|
68
|
+
key={index}
|
69
|
+
onClose={toggle}
|
70
|
+
opened={visible}
|
71
|
+
placement={placement}
|
72
|
+
size={size}
|
73
|
+
>
|
74
|
+
<Dialog.Header>
|
75
|
+
<Body>{title}</Body>
|
76
|
+
</Dialog.Header>
|
77
|
+
<Dialog.Body>
|
78
|
+
<Caption marginBottom="xs">{"Description"}</Caption>
|
79
|
+
<RichTextEditor />
|
80
|
+
<br />
|
81
|
+
<Caption>
|
82
|
+
{
|
83
|
+
"Type in a word or term too help find tickets later. ex. training,"
|
84
|
+
}
|
85
|
+
{"phone setup, hr"}
|
86
|
+
</Caption>
|
87
|
+
<Typeahead placeholder="Tags.." />
|
88
|
+
</Dialog.Body>
|
89
|
+
<Dialog.Footer>
|
90
|
+
<Button onClick={toggle}>{"Send My Issue"}</Button>
|
91
|
+
<Button onClick={toggle}
|
92
|
+
variant="link">
|
93
|
+
{"Back"}
|
94
|
+
</Button>
|
95
|
+
</Dialog.Footer>
|
96
|
+
</Dialog>
|
97
|
+
))}
|
98
|
+
</Flex>
|
99
|
+
</>
|
100
|
+
);
|
101
|
+
};
|
102
|
+
|
103
|
+
export default DialogFullHeight;
|
@@ -0,0 +1,102 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import {
|
3
|
+
Body,
|
4
|
+
Button,
|
5
|
+
Caption,
|
6
|
+
Dialog,
|
7
|
+
Flex,
|
8
|
+
RichTextEditor,
|
9
|
+
Typeahead,
|
10
|
+
} from "../..";
|
11
|
+
|
12
|
+
const useDialog = (visible = false) => {
|
13
|
+
const [opened, setOpened] = useState(visible);
|
14
|
+
const toggle = () => setOpened(!opened);
|
15
|
+
|
16
|
+
return [opened, toggle];
|
17
|
+
};
|
18
|
+
|
19
|
+
const DialogFullHeightPlacement = () => {
|
20
|
+
const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
|
21
|
+
useDialog();
|
22
|
+
const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
|
23
|
+
useDialog();
|
24
|
+
const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
|
25
|
+
|
26
|
+
const dialogs = [
|
27
|
+
{
|
28
|
+
title: "Left Dialog",
|
29
|
+
toggle: toggleHeaderSeparatorDialog,
|
30
|
+
visible: headerSeparatorDialogOpened,
|
31
|
+
placement: "left",
|
32
|
+
},
|
33
|
+
{
|
34
|
+
title: "Center Dialog",
|
35
|
+
toggle: toggleFooterSeparatorDialog,
|
36
|
+
visible: footerSeparatorDialogOpened,
|
37
|
+
},
|
38
|
+
{
|
39
|
+
title: "Right Dialog",
|
40
|
+
toggle: toggleBothSeparatorsDialog,
|
41
|
+
visible: bothSeparatorsDialogOpened,
|
42
|
+
placement: "right",
|
43
|
+
},
|
44
|
+
];
|
45
|
+
|
46
|
+
return (
|
47
|
+
<>
|
48
|
+
<Flex wrap>
|
49
|
+
<Button id="sm"
|
50
|
+
marginRight="xl"
|
51
|
+
onClick={toggleHeaderSeparatorDialog}>
|
52
|
+
{"Left Dialog"}
|
53
|
+
</Button>
|
54
|
+
<Button marginRight="xl"
|
55
|
+
onClick={toggleFooterSeparatorDialog}>
|
56
|
+
{"Center Dialog"}
|
57
|
+
</Button>
|
58
|
+
<Button marginRight="xl"
|
59
|
+
onClick={toggleBothSeparatorsDialog}>
|
60
|
+
{"Right Dialog"}
|
61
|
+
</Button>
|
62
|
+
</Flex>
|
63
|
+
<Flex>
|
64
|
+
{dialogs.map(({toggle, visible, placement, title}, index) => (
|
65
|
+
<Dialog
|
66
|
+
fullHeight
|
67
|
+
key={index}
|
68
|
+
onClose={toggle}
|
69
|
+
opened={visible}
|
70
|
+
placement={placement}
|
71
|
+
size={"md"}
|
72
|
+
>
|
73
|
+
<Dialog.Header>
|
74
|
+
<Body>{title}</Body>
|
75
|
+
</Dialog.Header>
|
76
|
+
<Dialog.Body>
|
77
|
+
<Caption marginBottom="xs">{"Description"}</Caption>
|
78
|
+
<RichTextEditor />
|
79
|
+
<br />
|
80
|
+
<Caption>
|
81
|
+
{
|
82
|
+
"Type in a word or term too help find tickets later. ex. training,"
|
83
|
+
}
|
84
|
+
{"phone setup, hr"}
|
85
|
+
</Caption>
|
86
|
+
<Typeahead placeholder="Tags.." />
|
87
|
+
</Dialog.Body>
|
88
|
+
<Dialog.Footer>
|
89
|
+
<Button onClick={toggle}>{"Send My Issue"}</Button>
|
90
|
+
<Button onClick={toggle}
|
91
|
+
variant="link">
|
92
|
+
{"Back"}
|
93
|
+
</Button>
|
94
|
+
</Dialog.Footer>
|
95
|
+
</Dialog>
|
96
|
+
))}
|
97
|
+
</Flex>
|
98
|
+
</>
|
99
|
+
);
|
100
|
+
};
|
101
|
+
|
102
|
+
export default DialogFullHeightPlacement;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The full height dialog is centered by default, but the placement can changed via `placement` prop with one of the following values: `left`, `center`, `right`.
|
2
|
+
|
3
|
+
The `large` variant will allways be centered even sending a preferred placement.
|
4
|
+
|
5
|
+
All dialogs with the `fullHeight` prop will be displayed full-width on mobile screens.
|
@@ -6,3 +6,5 @@ export { default as DialogSeparators } from './_dialog_separators.jsx'
|
|
6
6
|
export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'
|
7
7
|
export { default as DialogStatus } from './_dialog_status.jsx'
|
8
8
|
export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
|
9
|
+
export { default as DialogFullHeight } from './_dialog_full_height.jsx'
|
10
|
+
export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
|
@@ -7,7 +7,7 @@ const FilterClosePopover = (props) => {
|
|
7
7
|
{ value: 'Canada' },
|
8
8
|
{ value: 'Brazil' },
|
9
9
|
{ value: 'Philippines' },
|
10
|
-
{ value: 'A
|
10
|
+
{ value: 'A galaxy far far away, like really far away...' },
|
11
11
|
]
|
12
12
|
|
13
13
|
return (
|
@@ -17,6 +17,7 @@ const FilterClosePopover = (props) => {
|
|
17
17
|
'Full Name': 'John Wick',
|
18
18
|
'City': 'San Francisco',
|
19
19
|
}}
|
20
|
+
minWidth="375px"
|
20
21
|
results={1}
|
21
22
|
sortOptions={{
|
22
23
|
popularity: 'Popularity',
|
@@ -1,5 +1,6 @@
|
|
1
1
|
<%=
|
2
2
|
pb_rails("filter", props: {
|
3
|
+
min_width: "375px",
|
3
4
|
id: "1",
|
4
5
|
filters: [
|
5
6
|
{ name: "name", value: "John Wick" },
|
@@ -16,21 +17,16 @@
|
|
16
17
|
%>
|
17
18
|
<%
|
18
19
|
example_collection = [
|
19
|
-
OpenStruct.new(name: "
|
20
|
-
OpenStruct.new(name: "
|
21
|
-
OpenStruct.new(name: "
|
22
|
-
OpenStruct.new(name: "
|
23
|
-
OpenStruct.new(name: "
|
24
|
-
OpenStruct.new(name: "Colorado", value: 6),
|
25
|
-
OpenStruct.new(name: "Connecticut", value: 7),
|
26
|
-
OpenStruct.new(name: "Delaware", value: 8),
|
27
|
-
OpenStruct.new(name: "Florida", value: 9),
|
28
|
-
OpenStruct.new(name: "Georgia", value: 10),
|
20
|
+
OpenStruct.new(name: "USA", value: 1),
|
21
|
+
OpenStruct.new(name: "Canada", value: 2),
|
22
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
23
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
24
|
+
OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
|
29
25
|
]
|
30
26
|
%>
|
31
27
|
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
32
28
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
33
|
-
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
29
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
34
30
|
|
35
31
|
<%= form.actions do |action| %>
|
36
32
|
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
@@ -44,8 +40,8 @@
|
|
44
40
|
|
45
41
|
<%=
|
46
42
|
pb_rails("filter", props: {
|
43
|
+
min_width: "375px",
|
47
44
|
id: "def2",
|
48
|
-
|
49
45
|
sort_menu: [
|
50
46
|
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
51
47
|
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
@@ -57,21 +53,16 @@
|
|
57
53
|
%>
|
58
54
|
<%
|
59
55
|
example_collection = [
|
60
|
-
OpenStruct.new(name: "
|
61
|
-
OpenStruct.new(name: "
|
62
|
-
OpenStruct.new(name: "
|
63
|
-
OpenStruct.new(name: "
|
64
|
-
OpenStruct.new(name: "
|
65
|
-
OpenStruct.new(name: "Colorado", value: 6),
|
66
|
-
OpenStruct.new(name: "Connecticut", value: 7),
|
67
|
-
OpenStruct.new(name: "Delaware", value: 8),
|
68
|
-
OpenStruct.new(name: "Florida", value: 9),
|
69
|
-
OpenStruct.new(name: "Georgia", value: 10),
|
56
|
+
OpenStruct.new(name: "USA", value: 1),
|
57
|
+
OpenStruct.new(name: "Canada", value: 2),
|
58
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
59
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
60
|
+
OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
|
70
61
|
]
|
71
62
|
%>
|
72
63
|
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
73
64
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
74
|
-
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
65
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
75
66
|
|
76
67
|
<%= form.actions do |action| %>
|
77
68
|
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
@@ -11,7 +11,7 @@ const FilterDefault = (props) => {
|
|
11
11
|
{ value: 'Canada' },
|
12
12
|
{ value: 'Brazil' },
|
13
13
|
{ value: 'Philippines' },
|
14
|
-
{ value: 'A
|
14
|
+
{ value: 'A galaxy far far away, like really far away...' },
|
15
15
|
]
|
16
16
|
return (
|
17
17
|
|
@@ -22,6 +22,7 @@ const FilterDefault = (props) => {
|
|
22
22
|
'Full Name': 'John Wick',
|
23
23
|
'City': 'San Francisco',
|
24
24
|
}}
|
25
|
+
minWidth="375px"
|
25
26
|
onSortChange={SortingChangeCallback}
|
26
27
|
results={1}
|
27
28
|
sortOptions={{
|
@@ -43,6 +44,7 @@ const FilterDefault = (props) => {
|
|
43
44
|
<Select
|
44
45
|
blankSelection="Select One..."
|
45
46
|
label="Territory"
|
47
|
+
maxWidth="sm"
|
46
48
|
name="location"
|
47
49
|
options={options}
|
48
50
|
{...props}
|
@@ -67,6 +69,7 @@ const FilterDefault = (props) => {
|
|
67
69
|
|
68
70
|
<Filter
|
69
71
|
double
|
72
|
+
minWidth="375px"
|
70
73
|
onSortChange={SortingChangeCallback}
|
71
74
|
results={1}
|
72
75
|
sortOptions={{
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<%=
|
2
2
|
pb_rails("filter", props: {
|
3
|
-
min_width: "
|
3
|
+
min_width: "375px",
|
4
4
|
id: "25",
|
5
5
|
position: "top",
|
6
6
|
filters: [
|
@@ -17,17 +17,12 @@
|
|
17
17
|
}) do
|
18
18
|
%>
|
19
19
|
<%
|
20
|
-
|
21
|
-
OpenStruct.new(name: "
|
22
|
-
OpenStruct.new(name: "
|
23
|
-
OpenStruct.new(name: "
|
24
|
-
OpenStruct.new(name: "
|
25
|
-
OpenStruct.new(name: "
|
26
|
-
OpenStruct.new(name: "Colorado", value: 6),
|
27
|
-
OpenStruct.new(name: "Connecticut", value: 7),
|
28
|
-
OpenStruct.new(name: "Delaware", value: 8),
|
29
|
-
OpenStruct.new(name: "Florida", value: 9),
|
30
|
-
OpenStruct.new(name: "Georgia", value: 10),
|
20
|
+
example_collection = [
|
21
|
+
OpenStruct.new(name: "USA", value: 1),
|
22
|
+
OpenStruct.new(name: "Canada", value: 2),
|
23
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
24
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
25
|
+
OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
|
31
26
|
]
|
32
27
|
%>
|
33
28
|
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
@@ -7,7 +7,7 @@ const FilterMinWidth = (props) => {
|
|
7
7
|
{ value: 'Canada' },
|
8
8
|
{ value: 'Brazil' },
|
9
9
|
{ value: 'Philippines' },
|
10
|
-
{ value: 'A
|
10
|
+
{ value: 'A galaxy far far away, like really far away...' },
|
11
11
|
]
|
12
12
|
return (
|
13
13
|
<Filter
|
@@ -17,7 +17,7 @@ const FilterMinWidth = (props) => {
|
|
17
17
|
'Full Name': 'John Wick',
|
18
18
|
'City': 'San Francisco',
|
19
19
|
}}
|
20
|
-
minWidth="
|
20
|
+
minWidth="375px"
|
21
21
|
results={1}
|
22
22
|
sortOptions={{
|
23
23
|
popularity: 'Popularity',
|