playbook_ui 14.1.0.pre.alpha.fixaction3547 → 14.1.0.pre.alpha.pbntr373enablekitsforradio3593
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/_playbook.scss +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +9 -0
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
- data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
- data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
- data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/button.rb +4 -0
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
- data/app/pb_kits/playbook/pb_radio/_radio.scss +11 -11
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +100 -50
- data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx +51 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
- data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
- data/app/pb_kits/playbook/pb_time/time.rb +4 -0
- data/app/pb_kits/playbook/tokens/_container.scss +21 -0
- data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
- data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
- data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
- data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
- data/dist/chunks/_typeahead-CTLaD81v.js +22 -0
- data/dist/chunks/_weekday_stacked-U-4S3-tB.js +45 -0
- data/dist/chunks/{lib-BE0Z3F7x.js → lib-DErGXNy3.js} +2 -2
- data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-BC6kh7Hu.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +4 -0
- data/dist/playbook-doc.js +1 -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/classnames.rb +1 -0
- data/lib/playbook/spacing.rb +31 -2
- data/lib/playbook/version.rb +1 -1
- metadata +32 -9
- data/dist/chunks/_typeahead-D-4y9pbv.js +0 -22
- data/dist/chunks/_weekday_stacked-D5SswkOC.js +0 -45
- /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3196a7c6aa5e0024e25c8581fe5f40df03e4e21cc9c56c49d0a1ca632526705a
|
4
|
+
data.tar.gz: f7c8bb1d07368d634a75ba43c233bfb38a56806f41b5233736cece0f9a7f94e4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 88b1dc8797609b61c77cac834ce35550d8a42ab675575b683b266d0b543c763d1f04effee8183793c331e6e4a7d96c53eb7b9b103e1a14d96cd0c4f337767f1b
|
7
|
+
data.tar.gz: 1ea4a1fdd91607e9c6c7af6029f637a48f8b770366ce33e87eb83be9f9672898c09fcac287c1c3478f226efd7c1c3a951c03c8769ee15da4b6560cd5af70e8ed
|
@@ -37,6 +37,7 @@
|
|
37
37
|
@import 'pb_form/form';
|
38
38
|
@import 'pb_form_group/form_group';
|
39
39
|
@import 'pb_form_pill/form_pill';
|
40
|
+
@import 'pb_gantt_chart/gantt_chart';
|
40
41
|
@import 'pb_gauge/gauge';
|
41
42
|
@import 'pb_hashtag/hashtag';
|
42
43
|
@import 'pb_highlight/highlight';
|
@@ -107,6 +108,7 @@
|
|
107
108
|
@import 'utilities/mixins';
|
108
109
|
@import 'utilities/spacing';
|
109
110
|
@import 'utilities/cursor';
|
111
|
+
@import 'utilities/min_width';
|
110
112
|
@import 'utilities/max_width';
|
111
113
|
@import 'utilities/positioning';
|
112
114
|
@import 'utilities/number_spacing';
|
@@ -164,7 +164,7 @@
|
|
164
164
|
background: $bg_dark;
|
165
165
|
}
|
166
166
|
|
167
|
-
.table-header-cells:first-child, td:first-child {
|
167
|
+
.table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
|
168
168
|
box-shadow: 1px 0px 0px 0px $border_dark !important;
|
169
169
|
}
|
170
170
|
|
@@ -172,7 +172,7 @@
|
|
172
172
|
background-color: $border_dark !important;
|
173
173
|
}
|
174
174
|
|
175
|
-
.sort-button-icon, .header-sort-button > div {
|
175
|
+
.sort-button-icon, .header-sort-button > div, .pb_th_link {
|
176
176
|
color: $white !important;
|
177
177
|
}
|
178
178
|
|
@@ -237,4 +237,4 @@
|
|
237
237
|
}
|
238
238
|
}
|
239
239
|
}
|
240
|
-
}
|
240
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= pb_content_tag do %>
|
2
|
-
<%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
|
2
|
+
<%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
|
3
3
|
<% if content.present? %>
|
4
4
|
<% content.presence %>
|
5
5
|
<% else %>
|
@@ -42,6 +42,10 @@
|
|
42
42
|
color: $white;
|
43
43
|
}
|
44
44
|
|
45
|
+
&[class*=_notification_error] {
|
46
|
+
background: $error;
|
47
|
+
}
|
48
|
+
|
45
49
|
&.dark {
|
46
50
|
border-width: 0;
|
47
51
|
|
@@ -51,5 +55,10 @@
|
|
51
55
|
color: map-get($status_color_text_dark, $color_name);
|
52
56
|
}
|
53
57
|
}
|
58
|
+
|
59
|
+
&[class*=_notification_error] {
|
60
|
+
background: $error_dark;
|
61
|
+
color: $white;
|
62
|
+
}
|
54
63
|
}
|
55
64
|
}
|
@@ -7,6 +7,7 @@ import {
|
|
7
7
|
buildCss,
|
8
8
|
buildDataProps,
|
9
9
|
buildHtmlProps } from '../utilities/props'
|
10
|
+
import { getAllIcons } from "../utilities/icons/allicons"
|
10
11
|
|
11
12
|
import Icon from '../pb_icon/_icon'
|
12
13
|
|
@@ -25,7 +26,7 @@ type BadgeProps = {
|
|
25
26
|
removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
|
26
27
|
rounded?: boolean,
|
27
28
|
text?: string,
|
28
|
-
variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
|
29
|
+
variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
|
29
30
|
} & GlobalProps
|
30
31
|
const Badge = (props: BadgeProps): React.ReactElement => {
|
31
32
|
const {
|
@@ -45,10 +46,13 @@ const Badge = (props: BadgeProps): React.ReactElement => {
|
|
45
46
|
const dataProps = buildDataProps(data)
|
46
47
|
const htmlProps = buildHtmlProps(htmlOptions)
|
47
48
|
const css = classnames(
|
48
|
-
buildCss('pb_badge_kit',
|
49
|
+
buildCss('pb_badge_kit',
|
50
|
+
variant === "success" ? "success_sm" : variant === "notificationError" ? "notification_error" : variant,
|
51
|
+
rounded ? 'rounded' : ''),
|
49
52
|
globalProps(props),
|
50
53
|
className
|
51
54
|
)
|
55
|
+
const timesIcon = getAllIcons()["times"]
|
52
56
|
|
53
57
|
return (
|
54
58
|
<div
|
@@ -67,8 +71,9 @@ const Badge = (props: BadgeProps): React.ReactElement => {
|
|
67
71
|
{...closeProps}
|
68
72
|
>
|
69
73
|
<Icon
|
74
|
+
className="svg-inline--fa"
|
75
|
+
customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
|
70
76
|
fixedWidth
|
71
|
-
icon="times"
|
72
77
|
/>
|
73
78
|
</span>
|
74
79
|
)}
|
@@ -6,7 +6,7 @@ module Playbook
|
|
6
6
|
prop :rounded, type: Playbook::Props::Boolean, default: false
|
7
7
|
prop :text
|
8
8
|
prop :variant, type: Playbook::Props::Enum,
|
9
|
-
values: %w[success warning error info neutral notification primary],
|
9
|
+
values: %w[success warning error info neutral notification notification_error primary],
|
10
10
|
default: "neutral"
|
11
11
|
|
12
12
|
def classname
|
@@ -94,15 +94,21 @@ test('displays success variant', () => {
|
|
94
94
|
|
95
95
|
})
|
96
96
|
|
97
|
-
test('displays notification
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
97
|
+
test('displays notification variants', () => {
|
98
|
+
[
|
99
|
+
"notification",
|
100
|
+
"notificationError"
|
101
|
+
].forEach((colorVariant) => {
|
102
|
+
render(
|
103
|
+
<Badge
|
104
|
+
data={{ testid: testId }}
|
105
|
+
text={colorVariant}
|
106
|
+
variant={colorVariant}
|
107
|
+
/>
|
108
|
+
)
|
109
|
+
const kit = screen.getByTestId(testId)
|
110
|
+
expect(kit).toHaveClass(`pb_badge_kit_${colorVariant === "notificationError" ? "notification_error" : "notification"}`)
|
111
|
+
|
112
|
+
cleanup()
|
113
|
+
})
|
108
114
|
})
|
@@ -10,3 +10,16 @@
|
|
10
10
|
variant: "notification"
|
11
11
|
}) %>
|
12
12
|
</div>
|
13
|
+
|
14
|
+
<div>
|
15
|
+
<%= pb_rails("badge", props: {
|
16
|
+
text: "1",
|
17
|
+
variant: "notification_error",
|
18
|
+
rounded: true
|
19
|
+
}) %>
|
20
|
+
|
21
|
+
<%= pb_rails("badge", props: {
|
22
|
+
text: "4",
|
23
|
+
variant: "notification_error"
|
24
|
+
}) %>
|
25
|
+
</div>
|
@@ -4,20 +4,39 @@ import Badge from '../_badge'
|
|
4
4
|
const BadgeNotification = (props) => {
|
5
5
|
return (
|
6
6
|
<>
|
7
|
-
<
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
7
|
+
<div>
|
8
|
+
<Badge
|
9
|
+
rounded
|
10
|
+
text="1"
|
11
|
+
variant="notification"
|
12
|
+
{...props}
|
13
|
+
/>
|
13
14
|
|
14
|
-
|
15
|
+
|
15
16
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
17
|
+
<Badge
|
18
|
+
text="4"
|
19
|
+
variant="notification"
|
20
|
+
{...props}
|
21
|
+
/>
|
22
|
+
</div>
|
23
|
+
|
24
|
+
<div>
|
25
|
+
<Badge
|
26
|
+
rounded
|
27
|
+
text="1"
|
28
|
+
variant="notificationError"
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
|
32
|
+
|
33
|
+
|
34
|
+
<Badge
|
35
|
+
text="4"
|
36
|
+
variant="notificationError"
|
37
|
+
{...props}
|
38
|
+
/>
|
39
|
+
</div>
|
21
40
|
</>
|
22
41
|
)
|
23
42
|
}
|
@@ -3,6 +3,7 @@ import classnames from 'classnames'
|
|
3
3
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
5
5
|
import { isValidEmoji } from '../utilities/validEmojiChecker'
|
6
|
+
import { getAllIcons } from "../utilities/icons/allicons"
|
6
7
|
|
7
8
|
import Icon from '../pb_icon/_icon'
|
8
9
|
import Caption from "../pb_caption/_caption"
|
@@ -65,6 +66,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
|
|
65
66
|
|
66
67
|
return className
|
67
68
|
}
|
69
|
+
const spinnerIcon = getAllIcons()["spinner"]
|
68
70
|
|
69
71
|
const Button = (props: ButtonPropTypes): React.ReactElement => {
|
70
72
|
const {
|
@@ -103,8 +105,9 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
|
|
103
105
|
const loadingIcon = (
|
104
106
|
<div className="loading-icon">
|
105
107
|
<Icon
|
108
|
+
className="svg-inline--fa"
|
109
|
+
customIcon={spinnerIcon.icon as unknown as { [key: string]: SVGElement }}
|
106
110
|
fixedWidth
|
107
|
-
icon="spinner"
|
108
111
|
pulse
|
109
112
|
/>
|
110
113
|
</div>
|
@@ -22,7 +22,7 @@
|
|
22
22
|
<%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
|
23
23
|
</span>
|
24
24
|
<% end %>
|
25
|
-
<%= pb_rails("icon", props: {
|
25
|
+
<%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
|
26
26
|
<span class="pb_button_content"><%= content.presence || object.text %></span>
|
27
27
|
<% if object.icon && object.icon_right %>
|
28
28
|
<span>
|
@@ -57,7 +57,7 @@ describe('DateTime Kit', () => {
|
|
57
57
|
|
58
58
|
const kit = screen.getByTestId(testId)
|
59
59
|
const text = kit.querySelector('.pb_time_kit_md.ml_sm')
|
60
|
-
const clock = kit.querySelector('.
|
60
|
+
const clock = kit.querySelector('.pb_custom_icon.svg-inline--fa.clock')
|
61
61
|
|
62
62
|
expect(clock).toBeInTheDocument()
|
63
63
|
expect(text.textContent).toEqual(' 12:00a EST')
|
@@ -72,7 +72,7 @@ describe('DateTime Kit', () => {
|
|
72
72
|
)
|
73
73
|
|
74
74
|
const kit = screen.getByTestId(testId)
|
75
|
-
const clock = kit.querySelector('.
|
75
|
+
const clock = kit.querySelector('.pb_custom_icon.svg-inline--fa.clock')
|
76
76
|
|
77
77
|
expect(clock).toBeNull()
|
78
78
|
})
|
@@ -1,20 +1,24 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import Icon from '../pb_icon/_icon'
|
3
3
|
|
4
|
+
import { getAllIcons } from "../utilities/icons/allicons"
|
5
|
+
|
4
6
|
type CloseIconProps = {
|
5
7
|
onClose: () => void,
|
6
8
|
}
|
7
9
|
|
8
10
|
export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
|
9
11
|
const { onClose } = props
|
12
|
+
const timesIcon = getAllIcons()["times"]
|
10
13
|
return (
|
11
14
|
<div
|
12
15
|
className="pb_dialog_close_icon"
|
13
16
|
onClick={onClose}
|
14
17
|
>
|
15
18
|
<Icon
|
19
|
+
className="svg-inline--fa"
|
20
|
+
customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
|
16
21
|
fixedWidth
|
17
|
-
icon="times"
|
18
22
|
/>
|
19
23
|
</div>
|
20
24
|
)
|
@@ -183,7 +183,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
183
183
|
onRequestClose={onClose}
|
184
184
|
overlayClassName={overlayClassNames}
|
185
185
|
portalClassName={portalClassName}
|
186
|
-
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
|
186
|
+
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
|
187
187
|
>
|
188
188
|
<>
|
189
189
|
{title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
|
@@ -215,6 +215,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
215
215
|
{cancelButton && confirmButton ? (
|
216
216
|
<Dialog.Footer>
|
217
217
|
<Button
|
218
|
+
disabled={loading}
|
218
219
|
htmlType="button"
|
219
220
|
loading={loading}
|
220
221
|
onClick={onConfirm}
|
@@ -223,6 +224,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
223
224
|
{confirmButton}
|
224
225
|
</Button>
|
225
226
|
<Button
|
227
|
+
disabled={loading}
|
226
228
|
htmlType="button"
|
227
229
|
id="cancel-button"
|
228
230
|
onClick={onCancel}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, {useState} from 'react'
|
2
|
-
import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
|
2
|
+
import { render, cleanup, waitFor, fireEvent, screen } from "../utilities/test-utils";
|
3
3
|
import { Dialog, Button } from 'playbook-ui'
|
4
4
|
|
5
5
|
const text="Hello Body Text, Nice to meet ya."
|
@@ -110,3 +110,22 @@ test("renders the right placement dialog", async () => {
|
|
110
110
|
cleanup()
|
111
111
|
});
|
112
112
|
|
113
|
+
test('renders loading dialog with disabled buttons', async () => {
|
114
|
+
|
115
|
+
const { queryByText } = render(<DialogTest />);
|
116
|
+
|
117
|
+
fireEvent.click(queryByText('Open Dialog'));
|
118
|
+
|
119
|
+
await waitFor(() => expect(queryByText("Okay")).toHaveTextContent(confirmButton));
|
120
|
+
await waitFor(() => expect(queryByText("Cancel Button")).toHaveTextContent(cancelButton));
|
121
|
+
|
122
|
+
fireEvent.click(queryByText('Okay'));
|
123
|
+
|
124
|
+
const loadingIconDiv = document.querySelector('.loading-icon');
|
125
|
+
expect(loadingIconDiv).toBeInTheDocument();
|
126
|
+
|
127
|
+
const cancelBtn = screen.getByRole('button', { name: cancelButton });
|
128
|
+
expect(cancelBtn).toBeDisabled();
|
129
|
+
|
130
|
+
cleanup()
|
131
|
+
})
|
@@ -3,7 +3,7 @@
|
|
3
3
|
<%= content.presence || object.title %>
|
4
4
|
|
5
5
|
<button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
|
6
|
-
<%= pb_rails("icon", props:{
|
6
|
+
<%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
|
7
7
|
</button>
|
8
8
|
<% end %>
|
9
9
|
<%= pb_rails("section_separator") %>
|
@@ -5,21 +5,17 @@ const DialogDefault = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = useState(false)
|
6
6
|
const close = () => setIsOpen(false)
|
7
7
|
const open = () => setIsOpen(true)
|
8
|
-
const [isLoading, setIsLoading] = useState(false)
|
9
8
|
|
10
9
|
return (
|
11
10
|
<>
|
12
11
|
<Button onClick={open}>{'Open Dialog'}</Button>
|
13
12
|
<Dialog
|
14
13
|
cancelButton="Cancel Button"
|
15
|
-
className="wrapper"
|
16
14
|
confirmButton="Okay"
|
17
|
-
loading={isLoading}
|
18
15
|
onCancel={close}
|
19
16
|
onClose={close}
|
20
|
-
onConfirm={
|
17
|
+
onConfirm={close}
|
21
18
|
opened={isOpen}
|
22
|
-
portalClassName="portal"
|
23
19
|
size="sm"
|
24
20
|
text="Hello Body Text, Nice to meet ya."
|
25
21
|
title="Header Title is the Title Prop"
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Button, Dialog } from 'playbook-ui'
|
3
|
+
|
4
|
+
const DialogLoading = () => {
|
5
|
+
const [isOpen, setIsOpen] = useState(false)
|
6
|
+
const close = () => {
|
7
|
+
if (!isLoading) {
|
8
|
+
setIsOpen(false)
|
9
|
+
}
|
10
|
+
}
|
11
|
+
const open = () => setIsOpen(true)
|
12
|
+
const [isLoading, setIsLoading] = useState(false)
|
13
|
+
const submit = async () => {
|
14
|
+
setIsLoading(true)
|
15
|
+
|
16
|
+
try {
|
17
|
+
await new Promise((r) => setTimeout(r, 3000))
|
18
|
+
setIsOpen(false)
|
19
|
+
} catch (error) {
|
20
|
+
console.error("An error occurred.")
|
21
|
+
} finally {
|
22
|
+
setIsLoading(false)
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
return (
|
27
|
+
<>
|
28
|
+
<Button onClick={open}>{'Open Dialog'}</Button>
|
29
|
+
<Dialog
|
30
|
+
cancelButton="Cancel"
|
31
|
+
className="wrapper"
|
32
|
+
confirmButton="Okay"
|
33
|
+
loading={isLoading}
|
34
|
+
onCancel={close}
|
35
|
+
onClose={close}
|
36
|
+
onConfirm={submit}
|
37
|
+
opened={isOpen}
|
38
|
+
size="sm"
|
39
|
+
text="Make a 3 second request?"
|
40
|
+
title="Loading Example"
|
41
|
+
/>
|
42
|
+
</>
|
43
|
+
)
|
44
|
+
}
|
45
|
+
|
46
|
+
export default DialogLoading
|
@@ -8,3 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
|
|
8
8
|
export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
|
9
9
|
export { default as DialogFullHeight } from './_dialog_full_height.jsx'
|
10
10
|
export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
|
11
|
+
export { default as DialogLoading } from './_dialog_loading.jsx'
|
@@ -35,6 +35,7 @@
|
|
35
35
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
36
36
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
37
37
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
38
|
+
<%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
|
38
39
|
|
39
40
|
<%= form.actions do |action| %>
|
40
41
|
<%= action.submit %>
|
@@ -3,9 +3,10 @@
|
|
3
3
|
@import "../tokens/opacity";
|
4
4
|
@import "../tokens/shadows";
|
5
5
|
@import "../pb_avatar/avatar";
|
6
|
+
@import "../tokens/typography";
|
6
7
|
|
7
8
|
$selector: ".pb_form_pill";
|
8
|
-
$pb_form_pill_height:
|
9
|
+
$pb_form_pill_height: 27px;
|
9
10
|
$form_pill_colors: (
|
10
11
|
primary: map-get($status_color_text, "primary"),
|
11
12
|
neutral: map-get($status_color_text, "neutral"),
|
@@ -16,18 +17,24 @@ $form_pill_colors: (
|
|
16
17
|
display: inline-flex;
|
17
18
|
justify-content: center;
|
18
19
|
align-items: center;
|
19
|
-
padding: 0 calc($space-
|
20
|
+
padding: 0 calc($space-md/2);
|
20
21
|
height: $pb_form_pill_height;
|
21
22
|
border-radius: calc($pb_form_pill_height/2);
|
22
23
|
margin-bottom: 2px;
|
23
24
|
margin-top: 2px;
|
24
25
|
cursor: pointer;
|
26
|
+
.pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
|
27
|
+
font-size: $font_small !important;
|
28
|
+
}
|
25
29
|
@each $color_name, $color_value in $form_pill_colors {
|
26
30
|
&[class*=_#{$color_name}] {
|
27
31
|
background-color: mix($color_value, $card_light, 10%);
|
28
32
|
@if ($color_name == "neutral") {
|
29
33
|
background-color: $white;
|
30
34
|
border: 1px solid $border_light;
|
35
|
+
.pb_form_pill_icon {
|
36
|
+
color: $text_lt_default;
|
37
|
+
}
|
31
38
|
}
|
32
39
|
transition: background-color 0.2s ease;
|
33
40
|
box-shadow: none;
|
@@ -51,20 +58,18 @@ $form_pill_colors: (
|
|
51
58
|
@if ($color_name == "neutral") {
|
52
59
|
color: $text_lt_default;
|
53
60
|
}
|
54
|
-
padding
|
55
|
-
padding-right: calc($space-sm/2);
|
61
|
+
padding: 0 $space-xs;
|
56
62
|
}
|
57
63
|
#{$selector}_close {
|
58
64
|
color: $color_value;
|
59
|
-
padding-left: calc($space-sm/4);
|
60
|
-
padding-right: calc($space-sm/4);
|
61
65
|
display: flex;
|
62
66
|
align-items: center;
|
63
|
-
|
64
|
-
|
65
|
-
height: 27px;
|
66
|
-
border-radius: 70px;
|
67
|
+
height: 17px;
|
68
|
+
border-radius: calc(50%);
|
67
69
|
cursor: pointer;
|
70
|
+
@if ($color_name == "neutral") {
|
71
|
+
color: $text_lt_default;
|
72
|
+
}
|
68
73
|
&:hover {
|
69
74
|
background-color: mix($color_value, $card_light, 40%);
|
70
75
|
@if ($color_name == "neutral") {
|
@@ -74,7 +79,7 @@ $form_pill_colors: (
|
|
74
79
|
}
|
75
80
|
#{$selector}_tag {
|
76
81
|
color: $color_value;
|
77
|
-
padding
|
82
|
+
padding: 0 $space-xs;
|
78
83
|
@if ($color_name == "neutral") {
|
79
84
|
color: $text_lt_default;
|
80
85
|
}
|
@@ -92,24 +97,37 @@ $form_pill_colors: (
|
|
92
97
|
.pb_form_pill_icon {
|
93
98
|
height: 12px !important;
|
94
99
|
width: 12px !important;
|
100
|
+
padding-right: $space_xs;
|
101
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag {
|
102
|
+
padding-left: 0;
|
103
|
+
}
|
95
104
|
}
|
96
105
|
&.small {
|
97
|
-
height:
|
98
|
-
|
106
|
+
height: 17px;
|
107
|
+
padding: 0 $space-xs;
|
99
108
|
.pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
|
100
|
-
font-size: $
|
101
|
-
font-weight: $regular;
|
109
|
+
font-size: $font_smallest !important;
|
102
110
|
}
|
103
111
|
.pb_form_pill_text, .pb_form_pill_tag {
|
104
112
|
line-height: 1.7;
|
105
|
-
padding
|
106
|
-
|
113
|
+
padding: 0 $space_xxs;
|
114
|
+
}
|
115
|
+
.pb_form_pill_close {
|
116
|
+
height: 10px;
|
117
|
+
border-radius: calc(50%);
|
107
118
|
}
|
108
|
-
[class^=pb_avatar_kit]
|
109
|
-
|
110
|
-
height:
|
111
|
-
|
112
|
-
|
119
|
+
[class^=pb_avatar_kit] .avatar_wrapper {
|
120
|
+
flex-basis: 16px;
|
121
|
+
height: 16px;
|
122
|
+
margin-top: 2px;
|
123
|
+
width: 16px;
|
124
|
+
&::before { line-height: 16.5px; }
|
125
|
+
}
|
126
|
+
.pb_form_pill_icon {
|
127
|
+
padding-right: $space_xxs;
|
128
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag {
|
129
|
+
padding-left: 0;
|
130
|
+
}
|
113
131
|
}
|
114
132
|
}
|
115
133
|
&.dark {
|
@@ -118,7 +136,7 @@ $form_pill_colors: (
|
|
118
136
|
// Primary and Neutral are exceptions to the general rule in the handoff
|
119
137
|
&[class*=_#{$color_name}] {
|
120
138
|
// background-color: mix($color_value, $card_dark, 10%);
|
121
|
-
// .pb_form_pill_tag {
|
139
|
+
// .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
|
122
140
|
// color: $color_name;
|
123
141
|
// }
|
124
142
|
// .pb_form_pill_close {
|
@@ -136,7 +154,7 @@ $form_pill_colors: (
|
|
136
154
|
@if ($color_name == "neutral") {
|
137
155
|
background-color: transparent;
|
138
156
|
border: 1px solid $border_dark;
|
139
|
-
.pb_form_pill_text, .pb_form_pill_tag {
|
157
|
+
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
|
140
158
|
color: $text_dk_default;
|
141
159
|
}
|
142
160
|
.pb_form_pill_close {
|
@@ -157,7 +175,7 @@ $form_pill_colors: (
|
|
157
175
|
}
|
158
176
|
@if ($color_name == "primary") {
|
159
177
|
background-color: mix($active_dark, $card_dark, 10%);
|
160
|
-
.pb_form_pill_text, .pb_form_pill_tag {
|
178
|
+
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
|
161
179
|
color: $active_dark;
|
162
180
|
}
|
163
181
|
.pb_form_pill_close {
|