playbook_ui 14.1.0 → 14.2.0.pre.alpha.PLAY15063618

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +2 -2
  6. data/app/pb_kits/playbook/pb_badge/_badge.scss +9 -0
  7. data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
  8. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  9. data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
  11. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
  12. data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
  13. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_button/button.rb +4 -0
  15. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -1
  16. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
  17. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
  19. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
  20. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
  22. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
  23. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
  24. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  25. data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  27. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  28. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
  29. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
  30. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  31. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  32. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
  33. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
  34. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
  35. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
  36. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
  37. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
  39. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  40. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
  41. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
  42. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
  43. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
  44. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
  45. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
  46. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
  47. data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
  48. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
  49. data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
  50. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
  51. data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
  52. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
  53. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
  54. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
  55. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  56. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  57. data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
  58. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
  59. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
  60. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
  61. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
  62. data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
  63. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  64. data/app/pb_kits/playbook/pb_time/time.rb +4 -0
  65. data/app/pb_kits/playbook/tokens/_container.scss +21 -0
  66. data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
  67. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
  68. data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
  69. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
  70. data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
  71. data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
  72. data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
  73. data/dist/chunks/_typeahead-Cq7RLPBA.js +22 -0
  74. data/dist/chunks/_weekday_stacked-Cykj5kLZ.js +45 -0
  75. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  76. data/dist/chunks/{lib-BE0Z3F7x.js → lib-DErGXNy3.js} +2 -2
  77. data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-BC6kh7Hu.js} +1 -1
  78. data/dist/chunks/vendor.js +1 -1
  79. data/dist/menu.yml +4 -0
  80. data/dist/playbook-doc.js +1 -1
  81. data/dist/playbook-rails-react-bindings.js +1 -1
  82. data/dist/playbook-rails.js +1 -1
  83. data/dist/playbook.css +1 -1
  84. data/lib/playbook/classnames.rb +1 -0
  85. data/lib/playbook/spacing.rb +31 -2
  86. data/lib/playbook/version.rb +2 -2
  87. metadata +35 -13
  88. data/dist/chunks/_typeahead-D6PRvP-1.js +0 -22
  89. data/dist/chunks/_weekday_stacked-DbdEuIzh.js +0 -45
  90. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  91. /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: 3dfe679d3c4ee46d2a61f58949a98fecb815e3bfa4fb3e9d61848a398553cbbf
4
- data.tar.gz: f869e694c46e0c08a6dab622d0484db944e68c03ec5abaac1ef3bc8bcecae06c
3
+ metadata.gz: a8d3dca1c0f2c197c091448ad9e991ca875c1c9f0cf689357f798c8521749d63
4
+ data.tar.gz: 7a9ecdd1736ee1e29238bcb23b56041baead70da068eceac78f181495e5ed483
5
5
  SHA512:
6
- metadata.gz: ac5c91536b69507a6722a55d9b34c9071e6e63e87c1bb417bdfb770be890a4e874856c816ffc941c469428eacafe2229b4a5b694a116b1c4edff5c8958bd9ef0
7
- data.tar.gz: 052a1e5be0ea1266df9959687df847e37724abb9d17236469da42d8e9af50de815d98564a7c41eb18fed817eb9f46fc29c594ee9c8770d734799e496582bc5a2
6
+ metadata.gz: 02dc18bfae0107af6202c571169f840bd6139773149e96e1c6e2cbb10c04427ce3f0ee82f9c6358c04974e31d7b20db110f0ba9963e5a30b1bf48b3a66b00e9e
7
+ data.tar.gz: d6404b2cb0f485a4d2dbcc8fb4f82cc6221ad9380f05ea1148f3367c638a5ac96cb6a3139eb2ee4cbe95f5724d43aedf06ccb99914b2b95361748eb040484f0f
@@ -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 %>
@@ -35,8 +35,8 @@
35
35
  &[class*=_#{$name}] {
36
36
 
37
37
  $avatar_size: map-get($avatar-sizes, $name);
38
- $icon_size: calc($avatar_size / 2);
39
- $border_size: calc($icon_size / 10);
38
+ $icon_size: $avatar_size / 2;
39
+ $border_size: $icon_size / 10;
40
40
 
41
41
  position: relative;
42
42
  width: $avatar_size * 1.25;
@@ -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', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
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 variant', () => {
98
- render(
99
- <Badge
100
- data={{ testid: testId }}
101
- text="1"
102
- variant="notification"
103
- />
104
- )
105
- const kit = screen.getByTestId(testId)
106
- expect(kit).toHaveClass(`pb_badge_kit_notification`)
107
- cleanup()
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
- <Badge
8
- rounded
9
- text="1"
10
- variant="notification"
11
- {...props}
12
- />
7
+ <div>
8
+ <Badge
9
+ rounded
10
+ text="1"
11
+ variant="notification"
12
+ {...props}
13
+ />
13
14
 
14
- &nbsp;
15
+ &nbsp;
15
16
 
16
- <Badge
17
- text="4"
18
- variant="notification"
19
- {...props}
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
+ &nbsp;
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: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
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>
@@ -103,6 +103,10 @@ module Playbook
103
103
  def highlight_active
104
104
  variant === "reaction" && object.highlight ? " active" : ""
105
105
  end
106
+
107
+ def spinner_path
108
+ "app/pb_kits/playbook/utilities/icons/spinner.svg"
109
+ end
106
110
  end
107
111
  end
108
112
  end
@@ -16,7 +16,7 @@ $pb_button_styles: (
16
16
  flex-grow: 0;
17
17
  width: $pb_button_size;
18
18
  height: $pb_button_size;
19
- border-radius: calc($pb_button_size/2);
19
+ border-radius: $pb_button_size / 2;
20
20
  line-height: $pb_button_size;
21
21
  flex-basis: $pb_button_size;
22
22
  min-width: $pb_button_size;
@@ -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('.pb_icon_kit.far.fa-fw.fa-clock')
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('.pb_icon_kit.far.fa-fw.fa-clock')
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:{icon: "times"}) %>
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") %>
@@ -12,6 +12,10 @@ module Playbook
12
12
  def sticky_header
13
13
  "dialog_sticky_header"
14
14
  end
15
+
16
+ def times_icon
17
+ "app/pb_kits/playbook/utilities/icons/times.svg"
18
+ end
15
19
  end
16
20
  end
17
21
  end
@@ -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={() => setIsLoading(!isLoading)}
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
@@ -22,6 +22,7 @@ examples:
22
22
  - dialog_stacked_alert: Stacked Button Alert
23
23
  - dialog_full_height: Full Height
24
24
  - dialog_full_height_placement: Full Height Placement
25
+ - dialog_loading: Loading
25
26
 
26
27
  swift:
27
28
  - dialog_default_swift: Simple
@@ -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'
@@ -17,7 +17,7 @@ module Playbook
17
17
  default: "bottom-start"
18
18
 
19
19
  def classname
20
- generate_classname("pb_filter_kit")
20
+ generate_classname("pb_filter_kit").rstrip
21
21
  end
22
22
 
23
23
  def result_text
@@ -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 %>