playbook_ui 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR462starratingdefaultvalue3579

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) 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_badge/_badge.scss +9 -0
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
  7. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  8. data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
  9. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
  11. data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
  12. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_button/button.rb +4 -0
  14. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
  15. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
  16. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
  17. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +4 -1
  18. data/app/pb_kits/playbook/pb_dialog/dialog.rb +3 -0
  19. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
  20. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +21 -0
  21. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +4 -2
  22. data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +10 -1
  23. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  24. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
  25. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
  26. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +13 -0
  27. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
  28. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +3 -0
  29. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +2 -1
  30. data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  32. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  33. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
  34. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
  35. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  36. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  37. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
  38. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
  39. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
  40. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
  41. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
  42. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
  43. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
  44. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  45. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
  46. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
  47. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
  48. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
  49. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
  50. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
  51. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
  52. data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
  53. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
  54. data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
  55. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
  56. data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
  57. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
  58. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
  59. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
  60. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  61. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  62. data/app/pb_kits/playbook/pb_star_rating/index.js +88 -41
  63. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
  64. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +19 -0
  65. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
  66. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
  67. data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
  68. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  69. data/app/pb_kits/playbook/pb_time/time.rb +4 -0
  70. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +2 -37
  71. data/app/pb_kits/playbook/tokens/_container.scss +21 -0
  72. data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
  73. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
  74. data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
  75. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
  76. data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
  77. data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
  78. data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
  79. data/dist/chunks/_typeahead-nSyn1ajB.js +22 -0
  80. data/dist/chunks/_weekday_stacked-iq_X37be.js +45 -0
  81. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  82. data/dist/chunks/{lib-BE0Z3F7x.js → lib-D9uVVKnh.js} +2 -2
  83. data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-u2wnZ3oe.js} +1 -1
  84. data/dist/chunks/vendor.js +1 -1
  85. data/dist/menu.yml +4 -0
  86. data/dist/playbook-doc.js +1 -1
  87. data/dist/playbook-rails-react-bindings.js +1 -1
  88. data/dist/playbook-rails.js +1 -1
  89. data/dist/playbook.css +1 -1
  90. data/lib/playbook/classnames.rb +1 -0
  91. data/lib/playbook/spacing.rb +31 -2
  92. data/lib/playbook/version.rb +1 -1
  93. metadata +34 -10
  94. data/dist/chunks/_typeahead-D-4y9pbv.js +0 -22
  95. data/dist/chunks/_weekday_stacked-Cax4nrUa.js +0 -45
  96. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  97. /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: 9e9a8573217ee764fa83fe813c05c7aaeedf7c9fdb98d4b702a358eceedf1330
4
- data.tar.gz: bb76d9f0e12c6c3be671b40a953be9755b42d65fc2764e10d6541ba5e4d4863d
3
+ metadata.gz: 8a0f1bd7136bc3fbada2444b68aa7c6d83295501cc223b25ae0854f244c43a0e
4
+ data.tar.gz: 3024204d57c39ba05fe933e8b06e8e6a07bed5ea3b69243a756ee7870f4fe677
5
5
  SHA512:
6
- metadata.gz: 03c473ef11036a31e0bde23b85f3aa7f7e103e58698f776c1e40a1b45426ff0f1e54e76f7ff6af82d33a5c5d3914bd25f79588a708568c1b554ce20c00cfbbdb
7
- data.tar.gz: 9e938be1a3fc22b60a1d3ada831f0f427f5a948c742758cfb8f4c5be97174d03b173f4c0d0694b7e01e15f4b93a2379c7d0f25a1bad46dd9f39548c1622ba112
6
+ metadata.gz: ce2b76ce46f51e211466413f6b8290c6d9aad2ed9106d3497336e57cade7d949e0899f1608a47e14a49633c8e257793383eae640bc1466dd1d346f6b8160c778
7
+ data.tar.gz: e7413c58b5f1ce545ee86881b87ea9e80aecfc3948279a2d912a2715d92e14e3c637d73d7b7efb2a3fb01212f3aaec307538d20423401db2079a11ff30d8f2b2
@@ -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', 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
@@ -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}
@@ -22,8 +22,11 @@
22
22
  <% if object.cancel_button && object.confirm_button %>
23
23
  <%= pb_rails("dialog/dialog_footer", props: {
24
24
  cancel_button: object.cancel_button,
25
+ cancel_button_id: object.cancel_button_id,
25
26
  confirm_button: object.confirm_button,
26
- id: object.id
27
+ confirm_button_id: object.confirm_button_id,
28
+ id: object.id,
29
+ loading: object.loading
27
30
  }) %>
28
31
  <% end %>
29
32
 
@@ -13,8 +13,11 @@ module Playbook
13
13
  prop :should_close_on_overlay_click, type: Playbook::Props::Boolean, default: true
14
14
  prop :title
15
15
  prop :text
16
+ prop :loading
16
17
  prop :confirm_button
18
+ prop :confirm_button_id
17
19
  prop :cancel_button
20
+ prop :cancel_button_id
18
21
  prop :status, type: Playbook::Props::Enum,
19
22
  values: ["info", "caution", "delete", "error", "success", "default", ""],
20
23
  default: ""
@@ -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,6 +3,27 @@ const dialogHelper = () => {
3
3
  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
4
4
  const dialogs = document.querySelectorAll(".pb_dialog_rails")
5
5
 
6
+ const loadingButton = document.querySelector('[data-disable-with="Loading"]');
7
+ if (loadingButton) {
8
+ loadingButton.addEventListener("click", function() {
9
+ const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
10
+ const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
11
+ let currentClass = okayLoadingButton.className;
12
+ let cancelClass = cancelButton ? cancelButton.className : "";
13
+
14
+ let newClass = currentClass.replace("_enabled", "_disabled_loading");
15
+ let newCancelClass = cancelClass.replace("_enabled", "_disabled");
16
+
17
+ // Disable the buttons
18
+ okayLoadingButton.disabled = true;
19
+ if (cancelButton) cancelButton.disabled = true;
20
+
21
+ okayLoadingButton.className = newClass;
22
+ if (cancelButton) cancelButton.className = newCancelClass;
23
+ });
24
+ }
25
+
26
+
6
27
  openTrigger.forEach((open) => {
7
28
  open.addEventListener("click", () => {
8
29
  var openTriggerData = open.dataset.openDialog;
@@ -3,10 +3,12 @@
3
3
  <% if object.confirm_button && object.cancel_button %>
4
4
  <div class="dialog-pseudo-footer"></div>
5
5
  <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
6
- <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
6
+
7
+ <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id, data: loading_data,
8
+ }) do %>
7
9
  <%= object.confirm_button %>
8
10
  <% end %>
9
- <%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
11
+ <%= pb_rails("button", props: { type: "button", data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link", data: cancel_loading}) do %>
10
12
  <%= object.cancel_button %>
11
13
  <% end %>
12
14
  <% end %>
@@ -4,13 +4,22 @@ module Playbook
4
4
  module PbDialog
5
5
  class DialogFooter < Playbook::KitBase
6
6
  prop :cancel_button
7
+ prop :cancel_button_id
7
8
  prop :confirm_button
8
9
  prop :confirm_button_id
9
- prop :cancel_button_id
10
+ prop :loading
10
11
 
11
12
  def classname
12
13
  generate_classname("dialog_footer")
13
14
  end
15
+
16
+ def cancel_loading
17
+ loading ? { disable_cancel_with: "Loading" } : {}
18
+ end
19
+
20
+ def loading_data
21
+ loading ? { disable_with: "Loading" } : {}
22
+ end
14
23
  end
15
24
  end
16
25
  end
@@ -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,13 @@
1
+ <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
2
+
3
+ <%= pb_rails("dialog", props: {
4
+ id:"dialog-loading",
5
+ size: "sm",
6
+ title: "Loading Exmaple",
7
+ text: "Make a loading request?",
8
+ cancel_button: "Cancel Button",
9
+ cancel_button_id: "cancel-button-loading",
10
+ confirm_button: "Okay",
11
+ confirm_button_id: "confirm-button-loading",
12
+ loading: true,
13
+ }) %>
@@ -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
@@ -0,0 +1,3 @@
1
+ Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
2
+
3
+ Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.
@@ -10,7 +10,7 @@ examples:
10
10
  - dialog_stacked_alert: Stacked Button Alert
11
11
  - dialog_full_height: Full Height
12
12
  - dialog_full_height_placement: Full Height Placement
13
-
13
+ - dialog_loading: Loading
14
14
 
15
15
  react:
16
16
  - dialog_default: Simple
@@ -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 %>