playbook_ui 14.5.0 → 14.6.0.pre.alpha.PBNTR5554217

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/index.js +60 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -9
  9. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -9
  10. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  11. data/app/pb_kits/playbook/pb_currency/_currency.tsx +16 -6
  12. data/app/pb_kits/playbook/pb_currency/currency.rb +38 -11
  13. data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
  14. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
  15. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
  16. data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
  17. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
  21. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
  22. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
  30. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
  31. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
  32. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
  33. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  34. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  35. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
  36. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
  37. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
  38. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
  43. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
  44. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  45. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  46. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  47. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
  48. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  50. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  51. data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
  52. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
  54. data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
  55. data/app/pb_kits/playbook/pb_form/form.rb +2 -0
  56. data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
  57. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
  58. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
  59. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
  60. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  61. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  62. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  63. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +211 -227
  64. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
  65. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  66. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
  67. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
  68. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
  69. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
  70. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
  71. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
  72. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +4 -0
  73. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  74. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
  75. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  76. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  77. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  78. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  79. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  80. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  81. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  82. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  83. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  84. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
  85. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
  86. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  87. data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
  88. data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
  89. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
  90. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  91. data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
  92. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
  93. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
  94. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
  95. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  96. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  97. data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
  98. data/dist/chunks/_weekday_stacked-C2icYweq.js +45 -0
  99. data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
  100. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
  101. data/dist/chunks/vendor.js +1 -1
  102. data/dist/playbook-doc.js +1 -1
  103. data/dist/playbook-rails-react-bindings.js +1 -1
  104. data/dist/playbook-rails.js +1 -1
  105. data/dist/playbook.css +1 -1
  106. data/lib/playbook/kit_base.rb +21 -1
  107. data/lib/playbook/pb_doc_helper.rb +5 -5
  108. data/lib/playbook/pb_forms_helper.rb +3 -1
  109. data/lib/playbook/version.rb +2 -2
  110. metadata +40 -9
  111. data/dist/chunks/_typeahead-BYw0HEgO.js +0 -22
  112. data/dist/chunks/_weekday_stacked-DumiyWjh.js +0 -45
@@ -1 +1,4 @@
1
- declare module 'intl-tel-input'
1
+ declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
2
+ const intlTelInput: any;
3
+ export default intlTelInput;
4
+ }
@@ -21,7 +21,7 @@ import classnames from "classnames";
21
21
  import { globalProps, GlobalProps } from "../utilities/globalProps";
22
22
  import { uniqueId } from 'lodash';
23
23
 
24
- type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
24
+ type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
25
25
 
26
26
  type PbPopoverProps = {
27
27
  aria?: { [key: string]: string };
@@ -79,6 +79,7 @@ const Popover = (props: PbPopoverProps) => {
79
79
  maxWidth,
80
80
  minHeight,
81
81
  minWidth,
82
+ width,
82
83
  targetId,
83
84
  } = props;
84
85
 
@@ -97,7 +98,8 @@ const Popover = (props: PbPopoverProps) => {
97
98
  maxHeight ? { maxHeight: maxHeight } : {},
98
99
  maxWidth ? { maxWidth: maxWidth } : {},
99
100
  minHeight ? { minHeight: minHeight } : {},
100
- minWidth ? { minWidth: minWidth } : {}
101
+ minWidth ? { minWidth: minWidth } : {},
102
+ width ? { width: width } : {}
101
103
  );
102
104
  };
103
105
  const ariaProps = buildAriaProps(aria);
@@ -167,6 +169,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
167
169
  maxWidth,
168
170
  minHeight,
169
171
  minWidth,
172
+ width,
170
173
  } = props;
171
174
 
172
175
  useEffect(() => {
@@ -216,6 +219,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
216
219
  placement={placement}
217
220
  referenceElement={referenceElement}
218
221
  targetId={targetId}
222
+ width={width}
219
223
  zIndex={zIndex}
220
224
  {...props}
221
225
  >
@@ -14,7 +14,7 @@
14
14
  trigger_element_id: "regular-popover-1",
15
15
  tooltip_id: "tooltip-1",
16
16
  offset: true,
17
- position: "top"
17
+ position: "top",
18
18
  }) do %>
19
19
  I'm a popover. I can show content of any size.
20
20
  <% end %>
@@ -12,6 +12,7 @@ module Playbook
12
12
  prop :max_width
13
13
  prop :min_width
14
14
  prop :min_height
15
+ prop :width
15
16
  prop :z_index, type: Playbook::Props::String
16
17
  prop :offset, type: Playbook::Props::Boolean, default: false
17
18
  prop :close_on_click, type: Playbook::Props::Enum,
@@ -36,11 +37,12 @@ module Playbook
36
37
  out += "max-width: #{max_width}; " if max_width.present?
37
38
  out += "min-height: #{min_height}; " if min_height.present?
38
39
  out += "min-width: #{min_width};" if min_width.present?
40
+ out += "width: #{width};" if width.present?
39
41
  out
40
42
  end
41
43
 
42
44
  def width_height_class_helper
43
- "overflow_handling" if max_height || max_width
45
+ "overflow_handling" if max_height || max_width || width
44
46
  end
45
47
 
46
48
  def data
@@ -136,12 +136,15 @@ const Typeahead = ({
136
136
  }
137
137
  }
138
138
 
139
+ const filteredProps: TypeaheadProps = {...props}
140
+ delete filteredProps.truncate
141
+
139
142
  const dataProps = buildDataProps(data)
140
143
  const htmlProps = buildHtmlProps(htmlOptions)
141
144
  const classes = classnames(
142
145
  'pb_typeahead_kit react-select',
143
146
  `mb_${marginBottom}`,
144
- globalProps(props),
147
+ globalProps(filteredProps),
145
148
  className
146
149
  )
147
150
 
@@ -16,7 +16,7 @@ type Props = {
16
16
  const MultiValue = (props: Props) => {
17
17
  const { removeProps } = props
18
18
  const { imageUrl, label } = props.data
19
- const { dark, multiKit, pillColor } = props.selectProps
19
+ const { dark, multiKit, pillColor, truncate } = props.selectProps
20
20
 
21
21
  const formPillProps = {
22
22
  marginRight: 'xs',
@@ -51,6 +51,7 @@ const MultiValue = (props: Props) => {
51
51
  name={label}
52
52
  size={multiKit === 'smallPill' ? 'small' : ''}
53
53
  text=''
54
+ truncate={truncate}
54
55
  {...props}
55
56
  />
56
57
  }
@@ -64,6 +65,7 @@ const MultiValue = (props: Props) => {
64
65
  name=''
65
66
  size={multiKit === 'smallPill' ? 'small' : ''}
66
67
  text={label}
68
+ truncate={truncate}
67
69
  {...props}
68
70
  />
69
71
  }
@@ -65,10 +65,10 @@ module Playbook
65
65
  def typeahead_react_options
66
66
  base_options = {
67
67
  className: classname,
68
- pillColor: pill_color,
69
68
  dark: dark,
70
69
  defaultValue: default_options,
71
70
  error: error,
71
+ htmlOptions: html_options,
72
72
  id: id,
73
73
  inline: inline,
74
74
  isMulti: is_multi,
@@ -77,8 +77,10 @@ module Playbook
77
77
  multiKit: multi_kit,
78
78
  name: name,
79
79
  options: options,
80
+ pillColor: pill_color,
80
81
  placeholder: placeholder,
81
82
  plusIcon: plus_icon,
83
+ truncate: truncate,
82
84
  }
83
85
 
84
86
  base_options[:getOptionLabel] = get_option_label if get_option_label.present?
@@ -1,4 +1,7 @@
1
1
  export default [
2
+ "minHeight",
3
+ "maxHeight",
4
+ "height",
2
5
  "left",
3
6
  "bottom",
4
7
  "right",
@@ -170,12 +170,24 @@ type ZIndex = {
170
170
  zIndex?: ZIndexType,
171
171
  } | ZIndexResponsiveType
172
172
 
173
+ type Height = {
174
+ height?: string
175
+ }
176
+
177
+ type MaxHeight = {
178
+ maxHeight?: string
179
+ }
180
+
181
+ type MinHeight = {
182
+ minHeight?: string
183
+ }
184
+
173
185
  // keep this as the last type definition
174
186
  export type GlobalProps = AlignContent & AlignItems & AlignSelf &
175
187
  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
176
188
  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
177
189
  LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
178
- Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
190
+ Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
179
191
 
180
192
  const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
181
193
  const keys: string[] = Object.keys(prop)
@@ -498,7 +510,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
498
510
  } else {
499
511
  return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
500
512
  }
501
- }
513
+ },
514
+
515
+ }
516
+
517
+ const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
518
+ heightProps: ({ height }: Height) => {
519
+ return height ? { height } : {};
520
+ },
521
+
522
+ maxHeightProps: ({ maxHeight }: MaxHeight) => {
523
+ return maxHeight ? { maxHeight } : {};
524
+ },
525
+
526
+ minHeightProps: ({ minHeight }: MinHeight) => {
527
+ return minHeight ? { minHeight } : {};
528
+ },
502
529
  }
503
530
 
504
531
  type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -510,6 +537,16 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
510
537
  }).filter((value) => value?.length > 0).join(" ")
511
538
  }
512
539
 
540
+ // New function for inline styles
541
+ export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
542
+ const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
543
+ const result = PROP_INLINE_CATEGORIES[key](props);
544
+ return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
545
+ }, {});
546
+
547
+ return styles; // Return the styles object directly
548
+ }
549
+
513
550
 
514
551
  export const deprecatedProps = (): void => {
515
552
  // if (process.env.NODE_ENV === 'development') {