playbook_ui 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438 → 13.21.0.pre.alpha.PBNTR243globalpositioningpropinset2504

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/README.md +2 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +20 -35
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +7 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -7
  6. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +14 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +19 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +16 -10
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +9 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +30 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +20 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +21 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +37 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +32 -0
  16. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +2 -1
  17. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +2 -1
  18. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -1
  19. data/app/pb_kits/playbook/pb_badge/badge.html.erb +2 -1
  20. data/app/pb_kits/playbook/pb_body/body.html.erb +2 -1
  21. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +0 -7
  22. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +2 -1
  23. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -1
  24. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -1
  25. data/app/pb_kits/playbook/pb_button/button.rb +2 -3
  26. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -1
  27. data/app/pb_kits/playbook/pb_caption/caption.html.erb +2 -1
  28. data/app/pb_kits/playbook/pb_card/card.html.erb +2 -1
  29. data/app/pb_kits/playbook/pb_card/card_body.html.erb +2 -1
  30. data/app/pb_kits/playbook/pb_card/card_header.html.erb +2 -1
  31. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +3 -1
  32. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +2 -1
  33. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +2 -1
  34. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +2 -1
  35. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +2 -1
  36. data/app/pb_kits/playbook/pb_contact/contact.html.erb +2 -1
  37. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -1
  38. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +2 -1
  39. data/app/pb_kits/playbook/pb_date/date.html.erb +2 -1
  40. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +1 -2
  41. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -0
  42. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +4 -2
  43. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
  44. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -1
  45. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +9 -7
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +7 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +41 -0
  48. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  49. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  50. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -2
  51. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +2 -1
  52. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +2 -1
  53. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -1
  54. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +2 -1
  55. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +3 -2
  56. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +2 -1
  57. data/app/pb_kits/playbook/pb_detail/detail.html.erb +2 -1
  58. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +2 -1
  59. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +3 -2
  60. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +2 -1
  61. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +3 -2
  62. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -1
  63. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -1
  64. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +8 -3
  65. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -0
  66. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +51 -1
  67. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +62 -11
  68. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +7 -2
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +4 -3
  70. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +0 -4
  71. data/app/pb_kits/playbook/pb_flex/flex.html.erb +2 -1
  72. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -1
  73. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +2 -1
  74. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +2 -2
  75. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +2 -1
  76. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +2 -1
  77. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +2 -1
  78. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  79. data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -1
  80. data/app/pb_kits/playbook/pb_icon/icon.rb +3 -3
  81. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -1
  82. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +2 -1
  83. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +2 -1
  84. data/app/pb_kits/playbook/pb_image/image.html.erb +2 -1
  85. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +2 -1
  86. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +3 -2
  87. data/app/pb_kits/playbook/pb_layout/body.html.erb +2 -1
  88. data/app/pb_kits/playbook/pb_layout/footer.html.erb +2 -1
  89. data/app/pb_kits/playbook/pb_layout/header.html.erb +2 -1
  90. data/app/pb_kits/playbook/pb_layout/item.html.erb +2 -1
  91. data/app/pb_kits/playbook/pb_layout/layout.html.erb +2 -1
  92. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +2 -1
  93. data/app/pb_kits/playbook/pb_legend/legend.html.erb +2 -1
  94. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -1
  95. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -1
  96. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +2 -1
  97. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  98. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +3 -2
  99. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +2 -1
  100. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +2 -1
  101. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +2 -1
  102. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -2
  103. data/app/pb_kits/playbook/pb_nav/nav.html.erb +2 -1
  104. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -1
  105. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +2 -1
  106. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  107. data/app/pb_kits/playbook/pb_person/person.html.erb +2 -1
  108. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +2 -1
  109. data/app/pb_kits/playbook/pb_pill/pill.html.erb +2 -1
  110. data/app/pb_kits/playbook/pb_popover/popover.html.erb +2 -1
  111. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -1
  112. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +2 -1
  113. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +2 -1
  114. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -1
  115. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -1
  116. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +2 -1
  117. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -1
  118. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +2 -1
  119. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +2 -1
  120. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +2 -1
  121. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +2 -1
  122. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +2 -1
  123. data/app/pb_kits/playbook/pb_source/source.html.erb +2 -1
  124. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -1
  125. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +2 -1
  126. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +2 -1
  127. data/app/pb_kits/playbook/pb_table/table.html.erb +4 -2
  128. data/app/pb_kits/playbook/pb_table/table_body.html.erb +5 -3
  129. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +5 -3
  130. data/app/pb_kits/playbook/pb_table/table_head.html.erb +5 -3
  131. data/app/pb_kits/playbook/pb_table/table_header.html.erb +5 -3
  132. data/app/pb_kits/playbook/pb_table/table_row.html.erb +5 -3
  133. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  134. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
  135. data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +2 -1
  136. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -1
  137. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +1 -1
  138. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +2 -1
  139. data/app/pb_kits/playbook/pb_time/time.html.erb +2 -1
  140. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +3 -2
  141. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -1
  142. data/app/pb_kits/playbook/pb_timeline/item.html.erb +2 -1
  143. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +2 -1
  144. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +2 -1
  145. data/app/pb_kits/playbook/pb_title/title.html.erb +3 -2
  146. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +2 -1
  147. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +2 -1
  148. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +2 -1
  149. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -1
  150. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  151. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  152. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +2 -1
  153. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +2 -1
  154. data/app/pb_kits/playbook/utilities/_positioning.scss +23 -10
  155. data/app/pb_kits/playbook/utilities/globalProps.ts +52 -9
  156. data/dist/playbook-rails.js +4 -4
  157. data/lib/playbook/bottom.rb +6 -3
  158. data/lib/playbook/kit_base.rb +18 -0
  159. data/lib/playbook/left.rb +6 -3
  160. data/lib/playbook/right.rb +6 -3
  161. data/lib/playbook/top.rb +6 -3
  162. data/lib/playbook/version.rb +1 -1
  163. metadata +15 -5
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <% if object.stat_label.present? %>
7
8
  <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
8
9
  <% end %>
@@ -2,7 +2,8 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
 
7
8
  <% if object.unstyled %>
8
9
  <!-- icon -->
@@ -10,7 +10,6 @@
10
10
 
11
11
  [class^=pb_date_picker_kit] {
12
12
  .input_wrapper {
13
- margin-bottom: $space_sm;
14
13
  position: relative;
15
14
 
16
15
  .flatpickr-wrapper {
@@ -76,4 +75,4 @@
76
75
  &:after {
77
76
  content: none;
78
77
  }
79
- }
78
+ }
@@ -135,6 +135,9 @@ useEffect(() => {
135
135
  }, scrollContainer)
136
136
  })
137
137
  const filteredProps = {...props}
138
+ if (filteredProps.marginBottom === undefined) {
139
+ filteredProps.marginBottom = "sm"
140
+ }
138
141
  delete filteredProps?.position
139
142
 
140
143
  const classes = classnames(
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  class: object.classname + object.error_class,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <div class="input_wrapper">
7
8
  <% if content.present? %>
8
9
  <%= content %>
@@ -16,6 +17,7 @@
16
17
  error: object.error,
17
18
  id: object.picker_id,
18
19
  label: object.hide_label ? nil : object.label,
20
+ margin_bottom: "none",
19
21
  name: object.name,
20
22
  placeholder: object.placeholder,
21
23
  required: object.required,
@@ -80,4 +82,4 @@
80
82
  }
81
83
  })
82
84
  <% end %>
83
- <% end %>
85
+ <% end %>
@@ -75,7 +75,8 @@ module Playbook
75
75
  default: [1900, 2100]
76
76
 
77
77
  def classname
78
- generate_classname("pb_date_picker_kit")
78
+ default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
79
+ generate_classname("pb_date_picker_kit") + default_margin_bottom
79
80
  end
80
81
 
81
82
  def date_picker_config
@@ -37,7 +37,7 @@ describe('DatePicker Kit', () => {
37
37
  )
38
38
 
39
39
  const kit = screen.getByTestId(testId)
40
- expect(kit).toHaveClass('pb_date_picker_kit')
40
+ expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
41
41
  })
42
42
 
43
43
  test('shows DatePicker date format m/d/Y', async () => {
@@ -1,4 +1,5 @@
1
1
  import flatpickr from 'flatpickr'
2
+ import { Instance } from "flatpickr/dist/types/instance"
2
3
  import { BaseOptions } from 'flatpickr/dist/types/options'
3
4
  import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
4
5
  import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
@@ -165,9 +166,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
165
166
  }
166
167
 
167
168
  // two way binding
168
- const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
169
- const yearChangeHook = () => {
170
- initialDropdown.value = initialPicker.currentYear
169
+ const yearChangeHook = (fp: Instance) => {
170
+ const yearInput = document.querySelector(`#year-${fp.input.id}`) as HTMLInputElement
171
+ yearInput.value = fp.currentYear?.toString()
171
172
  }
172
173
 
173
174
  // ===========================================================
@@ -199,11 +200,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
199
200
  if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
200
201
  onClose(selectedDates, dateStr)
201
202
  }],
202
- onChange: [(selectedDates, dateStr) => {
203
+ onChange: [(selectedDates, dateStr, fp) => {
204
+ yearChangeHook(fp)
203
205
  onChange(dateStr, selectedDates)
204
206
  }],
205
- onYearChange: [() => {
206
- yearChangeHook()
207
+ onYearChange: [(_selectedDates, _dateStr, fp) => {
208
+ yearChangeHook(fp)
207
209
  }],
208
210
  plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
209
211
  position,
@@ -248,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
248
250
  /* Reset date picker to default value on form.reset() */
249
251
  if (defaultDate){
250
252
  picker.setDate(defaultDate)
251
- yearChangeHook()
253
+ yearChangeHook(picker)
252
254
  }
253
255
  }, 0)
254
256
  })
@@ -0,0 +1,7 @@
1
+
2
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-none", margin_bottom: "none"}) %>
3
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-xs", margin_bottom: "xs"}) %>
4
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-sm", margin_bottom: "sm"}) %>
5
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-md", margin_bottom: "md"}) %>
6
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-lg", margin_bottom: "lg"}) %>
7
+ <%= pb_rails("date_picker", props: { picker_id: "date-picker-xl", margin_bottom: "xl"}) %>
@@ -0,0 +1,41 @@
1
+
2
+ import React from 'react'
3
+
4
+ import DatePicker from '../_date_picker'
5
+
6
+ const DatePickerMarginBottom = (props) => (
7
+ <div>
8
+ <DatePicker
9
+ marginBottom="none"
10
+ pickerId="date-picker-none"
11
+ {...props}
12
+ />
13
+ <DatePicker
14
+ marginBottom="xs"
15
+ pickerId="date-picker-xs"
16
+ {...props}
17
+ />
18
+ <DatePicker
19
+ marginBottom="sm"
20
+ pickerId="date-picker-sm"
21
+ {...props}
22
+ />
23
+ <DatePicker
24
+ marginBottom="md"
25
+ pickerId="date-picker-md"
26
+ {...props}
27
+ />
28
+ <DatePicker
29
+ marginBottom="lg"
30
+ pickerId="date-picker-lg"
31
+ {...props}
32
+ />
33
+ <DatePicker
34
+ marginBottom="xl"
35
+ pickerId="date-picker-xl"
36
+ {...props}
37
+ />
38
+ </div>
39
+ )
40
+
41
+ export default DatePickerMarginBottom
@@ -20,6 +20,7 @@ examples:
20
20
  - date_picker_hooks: Hooks
21
21
  - date_picker_year_range: Year Range
22
22
  - date_picker_anti_patterns: Anti-Patterns
23
+ - date_picker_margin_bottom: Margin Bottom
23
24
  - date_picker_inline: Inline
24
25
  - date_picker_month_and_year: Month & Year Only
25
26
  - date_picker_week: Week
@@ -48,6 +49,7 @@ examples:
48
49
  - date_picker_flatpickr_methods: Flatpickr Methods
49
50
  - date_picker_hooks: Hooks
50
51
  - date_picker_year_range: Year Range
52
+ - date_picker_margin_bottom: Margin Bottom
51
53
  - date_picker_inline: Inline
52
54
  - date_picker_month_and_year: Month & Year Only
53
55
  - date_picker_week: Week
@@ -19,6 +19,7 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
19
19
  export { default as DatePickerPositions } from './_date_picker_positions.jsx'
20
20
  export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
21
21
  export { default as DatePickerAllowInput } from './_date_picker_allow_input'
22
+ export { default as DatePickerMarginBottom} from './_date_picker_margin_bottom'
22
23
  export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
23
24
  export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
24
25
  export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
@@ -1,7 +1,6 @@
1
1
  @import "../../pb_textarea/textarea_mixin";
2
2
 
3
3
  [class^=pb_date_picker_kit] {
4
- margin-bottom: $space_sm;
5
4
 
6
5
  .pb_date_picker_kit_label {
7
6
  margin-bottom: $space_xs;
@@ -65,4 +64,4 @@
65
64
  }
66
65
  }
67
66
  }
68
- }
67
+ }
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <div class="pb_date_range_inline_wrapper">
6
7
  <% if object.icon == true %>
7
8
  <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
 
6
7
  <%= pb_rails("flex", props: {vertical: "center"}) do %>
7
8
  <%= pb_rails("flex/flex_item") do %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
 
6
7
  <% if object.bold == false %>
7
8
 
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
 
7
8
  <%= pb_rails("flex", props: {
8
9
  orientation: "row",
@@ -2,7 +2,8 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
 
7
8
  <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
8
9
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>
@@ -14,4 +15,4 @@
14
15
  <% end %>
15
16
  <% end %>
16
17
 
17
- <% end %>
18
+ <% end %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
6
7
  <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
7
8
  <% end %>
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <%= object.content %>
7
8
  <% end %>
@@ -3,7 +3,8 @@
3
3
  aria: object.aria,
4
4
  data: object.data,
5
5
  id: object.id,
6
- class: object.classname) do %>
6
+ class: object.classname,
7
+ **combined_html_options) do %>
7
8
  <% if object.status === "" && object.title %>
8
9
  <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
9
10
  <% end %>
@@ -2,6 +2,7 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence || object.text %>
7
- <% end %>
8
+ <% end %>
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- aria: object.aria) do %>
4
+ aria: object.aria,
5
+ **combined_html_options) do %>
5
6
  <% if object.confirm_button && object.cancel_button %>
6
7
  <div class="dialog-pseudo-footer"></div>
7
8
  <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
@@ -2,7 +2,8 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.sticky_header,
5
- aria: object.aria) do %>
5
+ aria: object.aria,
6
+ **combined_html_options) do %>
6
7
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
7
8
  <%= content.presence || object.title %>
8
9
 
@@ -11,4 +12,4 @@
11
12
  </button>
12
13
  <% end %>
13
14
  <%= pb_rails("section_separator") %>
14
- <% end %>
15
+ <% end %>
@@ -2,7 +2,8 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
7
8
  <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
8
9
  <%= pb_rails("text_input", props: {
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <%= object.wrapper do %>
6
7
  <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
7
8
  <% if (object.template != "sort_only") %>
@@ -36,6 +36,8 @@ $confirmation_toast_colors: (
36
36
  z-index: $z_9;
37
37
  display: flex;
38
38
  justify-content: space-around;
39
+ max-width: max-content;
40
+ width: 90%;
39
41
 
40
42
  &.top {
41
43
  top: $space_md;
@@ -82,9 +84,12 @@ $confirmation_toast_colors: (
82
84
 
83
85
  &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
84
86
  color: $white;
85
- margin: 0 $space_md 0 $space_md;
86
- max-width: 100%;
87
- white-space: break-spaces;
87
+ overflow: hidden;
88
+ display: -webkit-box;
89
+ -webkit-line-clamp: 3;
90
+ -webkit-box-orient: vertical;
91
+ white-space: normal;
92
+ text-align: left;
88
93
  }
89
94
  }
90
95
  }
@@ -98,6 +98,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
98
98
  (text && (
99
99
  <Title
100
100
  className="pb_fixed_confirmation_toast_text"
101
+ flex="1"
101
102
  size={4}
102
103
  text={text}
103
104
  />
@@ -1,5 +1,55 @@
1
+ <%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
2
+
1
3
  <%= pb_rails("fixed_confirmation_toast", props: {
4
+ classname: "multitoast-to-hide",
5
+ closeable: true,
6
+ id: "toast-short",
2
7
  multi_line: true,
3
- text: "Scan to Assign Selected Items. Click here to generate report",
8
+ text: "Multi-line is used when the given text will not fit on one line.",
4
9
  status: "tip",
10
+ vertical: "top",
11
+ horizontal: "center"
5
12
  }) %>
13
+
14
+ <%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
15
+
16
+ <%= pb_rails("fixed_confirmation_toast", props: {
17
+ classname: "multitoast-to-hide",
18
+ closeable: true,
19
+ id: "toast-long",
20
+ multi_line: true,
21
+ text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
22
+ status: "tip",
23
+ vertical: "top",
24
+ horizontal: "center"
25
+ }) %>
26
+
27
+
28
+ <script type="text/javascript">
29
+ const multitoasts = document.querySelectorAll(".multitoast-to-hide")
30
+ const multibuttons = document.querySelectorAll("button[data-multitoast]")
31
+
32
+ const hideMultiToasts = () => {
33
+ multitoasts.forEach((toast) => {
34
+ toast.style.display = "none"
35
+ })
36
+ }
37
+
38
+ multibuttons.forEach((button) => {
39
+ button.onclick = () => {
40
+ hideMultiToasts()
41
+ let toast = document.querySelector(button.getAttribute("data-multitoast"))
42
+
43
+ if (toast) {
44
+ toast.style.display = "flex"
45
+ }
46
+ }
47
+ })
48
+ </script>
49
+
50
+ <!-- hiding toast on page load -->
51
+ <style>
52
+ #toast-long, #toast-short {
53
+ display: none;
54
+ }
55
+ </style>
@@ -1,18 +1,69 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
 
3
+ import Button from '../../pb_button/_button'
3
4
  import FixedConfirmationToast from '../_fixed_confirmation_toast'
4
5
 
5
6
  const FixedConfirmationToastMultiLine = (props) => {
6
- return (
7
- <div>
8
- <FixedConfirmationToast
9
- multiLine
10
- status="tip"
11
- text="Scan to Assign Selected Items. Click here to generate report"
12
- {...props}
13
- />
14
- </div>
15
- )
7
+
8
+ const [openShort, setOpenShort] = useState(false)
9
+ const [openLong, setOpenLong] = useState(false)
10
+
11
+ const handleClickShort = () => {
12
+ setOpenShort(true)
13
+ }
14
+ const handleClickLong= () => {
15
+ setOpenLong(true)
16
+ }
17
+
18
+ const handleCloseShort = () => {
19
+ setOpenShort(false)
20
+ }
21
+
22
+ const handleCloseLong= () => {
23
+ setOpenLong(false)
24
+ }
25
+
26
+ return (
27
+ <>
28
+ <Button
29
+ onClick={handleClickShort}
30
+ text="Short Multiline"
31
+ variant="secondary"
32
+ {...props}
33
+ />
34
+ {' '}
35
+ <Button
36
+ onClick={handleClickLong}
37
+ text="Long Multiline"
38
+ variant="secondary"
39
+ {...props}
40
+ />
41
+
42
+ <FixedConfirmationToast
43
+ closeable
44
+ horizontal='center'
45
+ multiLine
46
+ onClose={handleCloseShort}
47
+ open={openShort}
48
+ status='tip'
49
+ text='Multi-line is used when the given text will not fit on one line.'
50
+ vertical='top'
51
+ {...props}
52
+ />
53
+
54
+ <FixedConfirmationToast
55
+ closeable
56
+ horizontal='center'
57
+ multiLine
58
+ onClose={handleCloseLong}
59
+ open={openLong}
60
+ status='tip'
61
+ text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
62
+ vertical='top'
63
+ {...props}
64
+ />
65
+ </>
66
+ )
16
67
  }
17
68
 
18
69
  export default FixedConfirmationToastMultiLine
@@ -75,8 +75,6 @@
75
75
  })
76
76
  }
77
77
 
78
- hideToasts()
79
-
80
78
  buttons.forEach((button) => {
81
79
  button.onclick = () => {
82
80
  hideToasts()
@@ -88,3 +86,10 @@
88
86
  }
89
87
  })
90
88
  </script>
89
+
90
+ <!-- hiding toast on page load -->
91
+ <style>
92
+ #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
93
+ display: none;
94
+ }
95
+ </style>
@@ -2,14 +2,15 @@
2
2
  aria: object.aria,
3
3
  id: object.id,
4
4
  data: object.data,
5
- class: object.classname) do %>
5
+ class: object.classname,
6
+ **combined_html_options) do %>
6
7
  <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
7
8
 
8
9
  <% if content %>
9
10
  <%= content %>
10
11
  <% elsif object.show_text? %>
11
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
12
+ <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
12
13
  <% end %>
13
14
 
14
- <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
15
+ <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
15
16
  <% end %>
@@ -46,7 +46,3 @@
46
46
  <%= pb_rails("flex/flex_item") do %>4<% end %>
47
47
  <% end %>
48
48
  </div>
49
-
50
-
51
-
52
- </div>
@@ -1,6 +1,7 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname) do %>
4
+ class: object.classname,
5
+ **combined_html_options) do %>
5
6
  <%= content.presence %>
6
7
  <% end %>
@@ -2,6 +2,7 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname,
5
- style: object.style_value) do %>
5
+ style: object.style_value,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -2,6 +2,7 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.id) do %>
5
+ id: object.id,
6
+ **combined_html_options) do %>
6
7
  <%= content.presence %>
7
8
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class) do %>
1
+ <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
2
2
  <% if object.name.present? %>
3
3
  <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
4
4
  <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
@@ -9,4 +9,4 @@
9
9
  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
10
10
  <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
11
11
  <% end %>
12
- <% end %>
12
+ <% end %>