playbook_ui 11.7.0 → 11.8.1
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
@@ -23,6 +23,11 @@ const LightboxCompoundComponent = (props) => {
|
|
23
23
|
setSelectedPhoto(photo)
|
24
24
|
}
|
25
25
|
|
26
|
+
const exampleStyles = {
|
27
|
+
width: "100%",
|
28
|
+
overflow: "auto"
|
29
|
+
}
|
30
|
+
|
26
31
|
return (
|
27
32
|
<>
|
28
33
|
<div>
|
@@ -36,15 +41,18 @@ const LightboxCompoundComponent = (props) => {
|
|
36
41
|
{...props}
|
37
42
|
/>
|
38
43
|
) : (
|
39
|
-
<div className="PhotoViewer"
|
44
|
+
<div className="PhotoViewer"
|
45
|
+
style={exampleStyles}
|
46
|
+
>
|
40
47
|
<Flex>
|
41
48
|
{photos.map((photo, index) => {
|
42
49
|
return (
|
43
50
|
<div
|
44
|
-
key={
|
51
|
+
key={index}
|
45
52
|
onClick={() => onPhotoClick(index)}
|
46
53
|
>
|
47
54
|
<Image
|
55
|
+
cursor="pointer"
|
48
56
|
marginRight="xl"
|
49
57
|
rounded
|
50
58
|
size="lg"
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
`title` and `description` are optional props that can be passed to the kit if needed. Each of these props can take a string OR a custom component. This example highlights what the kit will look like when only strings are passed as `title` and `description`.
|
@@ -0,0 +1,95 @@
|
|
1
|
+
/* @flow */
|
2
|
+
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
|
3
|
+
import React, { useState } from "react";
|
4
|
+
import { Flex, Image, Title, Pill } from "../../";
|
5
|
+
import Lightbox from "../_lightbox.tsx";
|
6
|
+
|
7
|
+
const LightboxCustomHeader = (props) => {
|
8
|
+
const photos = [
|
9
|
+
"https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80",
|
10
|
+
"https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
|
11
|
+
"https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
|
12
|
+
];
|
13
|
+
const [selectedPhoto, setSelectedPhoto] = useState(0);
|
14
|
+
const [showLightbox, toggleShowLightbox] = useState(false);
|
15
|
+
|
16
|
+
const handleCloseLightbox = () => {
|
17
|
+
toggleShowLightbox(!showLightbox);
|
18
|
+
setSelectedPhoto(null);
|
19
|
+
};
|
20
|
+
|
21
|
+
const onPhotoClick = (photo) => {
|
22
|
+
toggleShowLightbox(!showLightbox);
|
23
|
+
setSelectedPhoto(photo);
|
24
|
+
};
|
25
|
+
|
26
|
+
const exampleStyles = {
|
27
|
+
width: "100%",
|
28
|
+
overflow: "auto",
|
29
|
+
};
|
30
|
+
|
31
|
+
const customTitle = (
|
32
|
+
<Title dark
|
33
|
+
paddingBottom="xxs"
|
34
|
+
size={4}
|
35
|
+
>
|
36
|
+
My Custom Title
|
37
|
+
</Title>
|
38
|
+
);
|
39
|
+
|
40
|
+
const customDescription = (
|
41
|
+
<>
|
42
|
+
<Title dark
|
43
|
+
size={4}
|
44
|
+
text="Tags"
|
45
|
+
/>
|
46
|
+
<Pill text="3"
|
47
|
+
variant="success"
|
48
|
+
/>
|
49
|
+
</>
|
50
|
+
);
|
51
|
+
|
52
|
+
return (
|
53
|
+
<>
|
54
|
+
<div>
|
55
|
+
{showLightbox ? (
|
56
|
+
<Lightbox
|
57
|
+
description={customDescription}
|
58
|
+
initialPhoto={selectedPhoto}
|
59
|
+
navRight="All Photos"
|
60
|
+
onClickRight={()=> alert("Clicked!")}
|
61
|
+
onClose={handleCloseLightbox}
|
62
|
+
photos={photos}
|
63
|
+
title={customTitle}
|
64
|
+
{...props}
|
65
|
+
/>
|
66
|
+
) : (
|
67
|
+
<div className="PhotoViewer"
|
68
|
+
style={exampleStyles}
|
69
|
+
>
|
70
|
+
<Flex>
|
71
|
+
{photos.map((photo, index) => {
|
72
|
+
return (
|
73
|
+
<div key={index}
|
74
|
+
onClick={() => onPhotoClick(index)}
|
75
|
+
>
|
76
|
+
<Image marginRight="xl"
|
77
|
+
rounded
|
78
|
+
size="lg"
|
79
|
+
url={photo}
|
80
|
+
/>
|
81
|
+
|
82
|
+
<div className="overlay" />
|
83
|
+
</div>
|
84
|
+
);
|
85
|
+
})}
|
86
|
+
</Flex>
|
87
|
+
</div>
|
88
|
+
)
|
89
|
+
}
|
90
|
+
</div>
|
91
|
+
</>
|
92
|
+
);
|
93
|
+
};
|
94
|
+
|
95
|
+
export default LightboxCustomHeader;
|
@@ -0,0 +1 @@
|
|
1
|
+
`title` and `description` props also accept custom components if needed. The optional `navRight` prop only accepts a string that translates into a clickable button. `onClickRight` prop can be used to pass in click function for `navRight`.
|
@@ -27,11 +27,9 @@ const LightboxDefault = (props) => {
|
|
27
27
|
{showLightbox ? (
|
28
28
|
<Lightbox
|
29
29
|
icon="times"
|
30
|
-
iconSize="2x"
|
31
30
|
initialPhoto={selectedPhoto}
|
32
31
|
onClose={handleCloseLightbox}
|
33
32
|
photos={photos}
|
34
|
-
showCount={false}
|
35
33
|
{...props}
|
36
34
|
/>
|
37
35
|
) : (
|
@@ -44,6 +42,7 @@ const LightboxDefault = (props) => {
|
|
44
42
|
onClick={() => onPhotoClick(index)}
|
45
43
|
>
|
46
44
|
<Image
|
45
|
+
cursor="pointer"
|
47
46
|
marginRight="xl"
|
48
47
|
rounded
|
49
48
|
size="lg"
|
@@ -1 +1 @@
|
|
1
|
-
Lightbox contains
|
1
|
+
Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
|
@@ -52,8 +52,8 @@ const LightboxMultiple = (props) => {
|
|
52
52
|
{light ? (
|
53
53
|
<Lightbox
|
54
54
|
icon="times"
|
55
|
-
iconSize="2x"
|
56
55
|
initialPhoto={selectedPhoto}
|
56
|
+
onChange={(index) => console.log(`current photo index: ${index}`)}
|
57
57
|
onClose={handleCloseLightbox}
|
58
58
|
photos={photos}
|
59
59
|
{...props}
|
@@ -67,10 +67,11 @@ const LightboxMultiple = (props) => {
|
|
67
67
|
{photos.map((photo, index) => {
|
68
68
|
return (
|
69
69
|
<div
|
70
|
-
key={
|
70
|
+
key={index}
|
71
71
|
onClick={() => onPhotoClick(index)}
|
72
72
|
>
|
73
73
|
<Image
|
74
|
+
cursor="pointer"
|
74
75
|
marginRight="xl"
|
75
76
|
rounded
|
76
77
|
size="lg"
|
@@ -0,0 +1,2 @@
|
|
1
|
+
When multiple images are passed to the Lightbox kit, it will also display scrollable thumbnails at the bottom of the screen for easier access to all images. In addition to the scrollable thumbnails, larger screens provide arrow buttons on the left and right of the image itself for easier scrolling while on mobile devices the kit allows for swiping.
|
2
|
+
This example also highlights the use of the optional `onChange` prop which is an event handler prop that tracks the index of the image being viewed and exposes it for use by the developer.
|
@@ -1,3 +1,4 @@
|
|
1
1
|
export { default as LightboxDefault } from './_lightbox_default.jsx'
|
2
2
|
export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
|
3
3
|
export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
|
4
|
+
export { default as LightboxCustomHeader } from './_lightbox_custom_header'
|
@@ -17,8 +17,11 @@ $slides-margin: $space-md;
|
|
17
17
|
align-items: center;
|
18
18
|
transition: all .5s;
|
19
19
|
|
20
|
-
.
|
21
|
-
|
20
|
+
.nav-right-btn {
|
21
|
+
padding-left: $space_xs !important;
|
22
|
+
}
|
23
|
+
.custom-header {
|
24
|
+
text-align: center;
|
22
25
|
}
|
23
26
|
}
|
24
27
|
}
|
@@ -81,6 +84,26 @@ $slides-margin: $space-md;
|
|
81
84
|
}
|
82
85
|
}
|
83
86
|
|
87
|
+
.carousel-arrow-left {
|
88
|
+
display: block;
|
89
|
+
position: absolute;
|
90
|
+
z-index: 4;
|
91
|
+
top: 50%;
|
92
|
+
@media only screen and (max-width: $screen-xs-max) {
|
93
|
+
display: none;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
.carousel-arrow-right {
|
98
|
+
display: block;
|
99
|
+
position: absolute;
|
100
|
+
z-index: 4;
|
101
|
+
top: 50%;
|
102
|
+
right: 0;
|
103
|
+
@media only screen and (max-width: $screen-xs-max) {
|
104
|
+
display: none;
|
105
|
+
}
|
106
|
+
}
|
84
107
|
}
|
85
108
|
|
86
109
|
.Slide,
|
@@ -112,33 +135,6 @@ $slides-margin: $space-md;
|
|
112
135
|
}
|
113
136
|
}
|
114
137
|
|
115
|
-
.BackBtn,
|
116
|
-
.NextBtn {
|
117
|
-
z-index: 2;
|
118
|
-
color: black;
|
119
|
-
position: absolute;
|
120
|
-
width: 50px;
|
121
|
-
height: 50px;
|
122
|
-
top: calc(50vh - 5px);
|
123
|
-
border: none;
|
124
|
-
border-radius: 50%;
|
125
|
-
background-color: white;
|
126
|
-
}
|
127
|
-
|
128
|
-
.BackBtn::before,
|
129
|
-
.NextBtn::before {
|
130
|
-
content: "▸";
|
131
|
-
}
|
132
|
-
|
133
|
-
.BackBtn {
|
134
|
-
left: 30px;
|
135
|
-
transform: rotate(180deg);
|
136
|
-
}
|
137
|
-
|
138
|
-
.NextBtn {
|
139
|
-
right: 30px;
|
140
|
-
}
|
141
|
-
|
142
138
|
.Thumbnails {
|
143
139
|
display: flex;
|
144
140
|
width: 100vw;
|
@@ -17,7 +17,6 @@ test('Kit renders', () => {
|
|
17
17
|
className="customClass"
|
18
18
|
data={{ testid: testId }}
|
19
19
|
icon="close"
|
20
|
-
iconSize="3x"
|
21
20
|
id="test1"
|
22
21
|
initialPhoto={1}
|
23
22
|
onClose={() => {}}
|
@@ -35,7 +34,6 @@ test('Shows selected images', () => {
|
|
35
34
|
<Lightbox
|
36
35
|
data={{ testid: testId }}
|
37
36
|
icon="close"
|
38
|
-
iconSize="3x"
|
39
37
|
id="test1"
|
40
38
|
initialPhoto={1}
|
41
39
|
onClose={() => {}}
|
@@ -78,7 +76,6 @@ test('Closes on escape key', async () => {
|
|
78
76
|
<Lightbox
|
79
77
|
data={{ testid: testId }}
|
80
78
|
icon="close"
|
81
|
-
iconSize="3x"
|
82
79
|
id="test1"
|
83
80
|
initialPhoto={0}
|
84
81
|
onClose={mockClose}
|
@@ -108,7 +105,6 @@ test('Closes on close button', async () => {
|
|
108
105
|
<Lightbox
|
109
106
|
data={{ testid: testId }}
|
110
107
|
icon="close"
|
111
|
-
iconSize="3x"
|
112
108
|
id="test1"
|
113
109
|
initialPhoto={0}
|
114
110
|
onClose={mockClose}
|
@@ -117,7 +113,7 @@ test('Closes on close button', async () => {
|
|
117
113
|
)
|
118
114
|
|
119
115
|
const kit = screen.getByTestId(testId)
|
120
|
-
const closeIcon = kit.getElementsByClassName('
|
116
|
+
const closeIcon = kit.getElementsByClassName('pb_button_kit_link_inline_enabled')[0]
|
121
117
|
|
122
118
|
fireEvent(
|
123
119
|
closeIcon,
|
@@ -2,6 +2,8 @@ Lists display a vertical set of related content.
|
|
2
2
|
|
3
3
|
**Layout Prop**
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
|
5
|
+
Setting the `layout` prop to either `left` or `right` creates a 2 column layout on the the list/item kit. This is useful if you need 2 things on the same line in a list.
|
6
|
+
|
7
|
+
Using `layout:'left'` will make the first column shrink and the second column grow and align to the left.
|
8
|
+
|
9
|
+
Using `layout:'right'` will make the first column grow and push the second column to the right.
|
@@ -4,68 +4,75 @@ import Table from '../_table'
|
|
4
4
|
|
5
5
|
const TableAlignmentShiftData = (props) => {
|
6
6
|
return (
|
7
|
-
<
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
<
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
<
|
20
|
-
{'
|
21
|
-
<
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
{'
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
{'
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
7
|
+
<div>
|
8
|
+
<Table
|
9
|
+
marginBottom="md"
|
10
|
+
{...props}
|
11
|
+
>
|
12
|
+
<thead>
|
13
|
+
<tr>
|
14
|
+
<th> </th>
|
15
|
+
<th>{'Price'}</th>
|
16
|
+
</tr>
|
17
|
+
</thead>
|
18
|
+
<tbody>
|
19
|
+
<tr>
|
20
|
+
<td shift="down">{'Total'}</td>
|
21
|
+
<td>
|
22
|
+
{'$12'}
|
23
|
+
<br />
|
24
|
+
{'$46'}
|
25
|
+
<br />
|
26
|
+
{'$25'}
|
27
|
+
<br />
|
28
|
+
{'-------'}
|
29
|
+
<br />
|
30
|
+
{'$83'}
|
31
|
+
</td>
|
32
|
+
</tr>
|
33
|
+
</tbody>
|
34
|
+
</Table>
|
35
|
+
<Table
|
36
|
+
{...props}
|
37
|
+
>
|
38
|
+
<thead>
|
39
|
+
<tr>
|
40
|
+
<th>{'Espresso Drinks'}</th>
|
41
|
+
<th>{'Ingredients'}</th>
|
42
|
+
</tr>
|
43
|
+
</thead>
|
44
|
+
<tbody>
|
45
|
+
<tr>
|
46
|
+
<td shift="up">{'Cappuccino'}</td>
|
47
|
+
<td>
|
48
|
+
{'Espresso'}
|
49
|
+
<br />
|
50
|
+
{'Steamed Milk'}
|
51
|
+
<br />
|
52
|
+
{'Milk Foam'}
|
53
|
+
</td>
|
54
|
+
</tr>
|
55
|
+
<tr>
|
56
|
+
<td shift="up">{'Macchiato'}</td>
|
57
|
+
<td>
|
58
|
+
{'Espresso'}
|
59
|
+
<br />
|
60
|
+
{'Steamed Milk'}
|
61
|
+
</td>
|
62
|
+
</tr>
|
63
|
+
<tr>
|
64
|
+
<td shift="up">{'Mocha'}</td>
|
65
|
+
<td>
|
66
|
+
{'Espresso'}
|
67
|
+
<br />
|
68
|
+
{'Hot Chocolate'}
|
69
|
+
<br />
|
70
|
+
{'Steamed Milk'}
|
71
|
+
</td>
|
72
|
+
</tr>
|
73
|
+
</tbody>
|
74
|
+
</Table>
|
75
|
+
</div>
|
69
76
|
)
|
70
77
|
}
|
71
78
|
|
@@ -15,7 +15,7 @@
|
|
15
15
|
<td>Value 3</td>
|
16
16
|
<td>Value 4</td>
|
17
17
|
<td>
|
18
|
-
<%= pb_rails("flex") do %>
|
18
|
+
<%= pb_rails("flex", props: { justify: "end" }) do %>
|
19
19
|
<%= pb_rails("body", props: {classname: "flex-item"}) do %>
|
20
20
|
<%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
|
21
21
|
<% end %>
|
@@ -31,7 +31,7 @@
|
|
31
31
|
<td>Value 3</td>
|
32
32
|
<td>Value 4</td>
|
33
33
|
<td>
|
34
|
-
<%= pb_rails("flex") do %>
|
34
|
+
<%= pb_rails("flex", props: { justify: "end" }) do %>
|
35
35
|
<%= pb_rails("body", props: {classname: "flex-item"}) do %>
|
36
36
|
<%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
|
37
37
|
<% end %>
|
@@ -46,8 +46,8 @@
|
|
46
46
|
<td>Value 2</td>
|
47
47
|
<td>Value 3</td>
|
48
48
|
<td>Value 4</td>
|
49
|
-
<td>
|
50
|
-
<%= pb_rails("flex") do %>
|
49
|
+
<td align="right">
|
50
|
+
<%= pb_rails("flex", props: { justify: "end" }) do %>
|
51
51
|
<%= pb_rails("body", props: {classname: "flex-item"}) do %>
|
52
52
|
<%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
|
53
53
|
<% end %>
|
@@ -27,8 +27,11 @@ const TableIconButtons = (props) => {
|
|
27
27
|
<td>{'Value 2'}</td>
|
28
28
|
<td>{'Value 3'}</td>
|
29
29
|
<td>{'Value 4'}</td>
|
30
|
-
<td>
|
31
|
-
<Flex
|
30
|
+
<td align="right">
|
31
|
+
<Flex
|
32
|
+
justifyContent="end"
|
33
|
+
orientation="row"
|
34
|
+
>
|
32
35
|
<FlexItem>
|
33
36
|
<CircleIconButton
|
34
37
|
icon="trash-alt"
|
@@ -51,8 +54,11 @@ const TableIconButtons = (props) => {
|
|
51
54
|
<td>{'Value 2'}</td>
|
52
55
|
<td>{'Value 3'}</td>
|
53
56
|
<td>{'Value 4'}</td>
|
54
|
-
<td>
|
55
|
-
<Flex
|
57
|
+
<td align="right">
|
58
|
+
<Flex
|
59
|
+
justifyContent="end"
|
60
|
+
orientation="row"
|
61
|
+
>
|
56
62
|
<FlexItem>
|
57
63
|
<CircleIconButton
|
58
64
|
icon="trash-alt"
|
@@ -74,9 +80,12 @@ const TableIconButtons = (props) => {
|
|
74
80
|
<td>{'Value 1'}</td>
|
75
81
|
<td>{'Value 2'}</td>
|
76
82
|
<td>{'Value 3'}</td>
|
77
|
-
<td>{'Value
|
78
|
-
<td>
|
79
|
-
<Flex
|
83
|
+
<td>{'Value lk'}</td>
|
84
|
+
<td align="right">
|
85
|
+
<Flex
|
86
|
+
justifyContent="end"
|
87
|
+
orientation="row"
|
88
|
+
>
|
80
89
|
<FlexItem>
|
81
90
|
<CircleIconButton
|
82
91
|
icon="trash-alt"
|
@@ -14,21 +14,21 @@
|
|
14
14
|
<td>Value 2</td>
|
15
15
|
<td>Value 3</td>
|
16
16
|
<td>Value 4</td>
|
17
|
-
<td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
|
17
|
+
<td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
|
18
18
|
</tr>
|
19
19
|
<tr>
|
20
20
|
<td>Value 1</td>
|
21
21
|
<td>Value 2</td>
|
22
22
|
<td>Value 3</td>
|
23
23
|
<td>Value 4</td>
|
24
|
-
<td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
|
24
|
+
<td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
|
25
25
|
</tr>
|
26
26
|
<tr>
|
27
27
|
<td>Value 1</td>
|
28
28
|
<td>Value 2</td>
|
29
29
|
<td>Value 3</td>
|
30
30
|
<td>Value 4</td>
|
31
|
-
<td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
|
31
|
+
<td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
|
32
32
|
</tr>
|
33
33
|
</tbody>
|
34
34
|
<% end %>
|
@@ -24,7 +24,7 @@ const TableOneAction = (props) => {
|
|
24
24
|
<td>{'Value 2'}</td>
|
25
25
|
<td>{'Value 3'}</td>
|
26
26
|
<td>{'Value 4'}</td>
|
27
|
-
<td>
|
27
|
+
<td align="right">
|
28
28
|
{' '}
|
29
29
|
<Button
|
30
30
|
onClick={() => alert('button clicked!')}
|
@@ -40,7 +40,7 @@ const TableOneAction = (props) => {
|
|
40
40
|
<td>{'Value 2'}</td>
|
41
41
|
<td>{'Value 3'}</td>
|
42
42
|
<td>{'Value 4'}</td>
|
43
|
-
<td>
|
43
|
+
<td align="right">
|
44
44
|
{' '}
|
45
45
|
<Button
|
46
46
|
onClick={() => alert('button clicked!')}
|
@@ -56,7 +56,7 @@ const TableOneAction = (props) => {
|
|
56
56
|
<td>{'Value 2'}</td>
|
57
57
|
<td>{'Value 3'}</td>
|
58
58
|
<td>{'Value 4'}</td>
|
59
|
-
<td>
|
59
|
+
<td align="right">
|
60
60
|
{' '}
|
61
61
|
<Button
|
62
62
|
onClick={() => alert('button clicked!')}
|
@@ -14,8 +14,8 @@
|
|
14
14
|
<td>Value 2</td>
|
15
15
|
<td>Value 3</td>
|
16
16
|
<td>Value 4</td>
|
17
|
-
<td>
|
18
|
-
<%= pb_rails("button", props: { text: "
|
17
|
+
<td align="right">
|
18
|
+
<%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
|
19
19
|
<%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
|
20
20
|
</td>
|
21
21
|
</tr>
|
@@ -24,8 +24,8 @@
|
|
24
24
|
<td>Value 2</td>
|
25
25
|
<td>Value 3</td>
|
26
26
|
<td>Value 4</td>
|
27
|
-
<td>
|
28
|
-
<%= pb_rails("button", props: { text: "
|
27
|
+
<td align="right">
|
28
|
+
<%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
|
29
29
|
<%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
|
30
30
|
</td>
|
31
31
|
</tr>
|
@@ -34,8 +34,8 @@
|
|
34
34
|
<td>Value 2</td>
|
35
35
|
<td>Value 3</td>
|
36
36
|
<td>Value 4</td>
|
37
|
-
<td>
|
38
|
-
<%= pb_rails("button", props: { text: "
|
37
|
+
<td align="right">
|
38
|
+
<%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
|
39
39
|
<%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
|
40
40
|
</td>
|
41
41
|
</tr>
|
@@ -24,7 +24,7 @@ const TableOneAction = (props) => {
|
|
24
24
|
<td>{'Value 2'}</td>
|
25
25
|
<td>{'Value 3'}</td>
|
26
26
|
<td>{'Value 4'}</td>
|
27
|
-
<td>
|
27
|
+
<td align="right">
|
28
28
|
<Button
|
29
29
|
onClick={() => alert('button clicked!')}
|
30
30
|
paddingLeft="none"
|
@@ -45,7 +45,7 @@ const TableOneAction = (props) => {
|
|
45
45
|
<td>{'Value 2'}</td>
|
46
46
|
<td>{'Value 3'}</td>
|
47
47
|
<td>{'Value 4'}</td>
|
48
|
-
<td>
|
48
|
+
<td align="right">
|
49
49
|
<Button
|
50
50
|
onClick={() => alert('button clicked!')}
|
51
51
|
paddingLeft="none"
|
@@ -66,7 +66,7 @@ const TableOneAction = (props) => {
|
|
66
66
|
<td>{'Value 2'}</td>
|
67
67
|
<td>{'Value 3'}</td>
|
68
68
|
<td>{'Value 4'}</td>
|
69
|
-
<td>
|
69
|
+
<td align="right">
|
70
70
|
<Button
|
71
71
|
onClick={() => alert('button clicked!')}
|
72
72
|
paddingLeft="none"
|