playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) 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_card/_card.tsx +5 -1
  8. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  9. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
  10. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
  11. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
  12. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
  20. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
  21. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
  22. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
  23. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  25. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
  26. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
  27. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
  29. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
  30. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
  31. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
  32. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  33. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  34. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  35. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
  36. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  37. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  38. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  39. data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
  40. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
  41. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
  42. data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
  43. data/app/pb_kits/playbook/pb_form/form.rb +2 -0
  44. data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
  45. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  46. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  47. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  48. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  49. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  50. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  51. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  52. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  53. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  54. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
  55. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
  56. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  57. data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
  58. data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
  59. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
  60. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  61. data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
  62. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +28 -0
  63. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
  64. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  65. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +5 -1
  66. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  67. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  68. data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
  69. data/dist/chunks/_weekday_stacked-B9Sy5PN8.js +45 -0
  70. data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
  71. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
  72. data/dist/chunks/vendor.js +1 -1
  73. data/dist/playbook-doc.js +1 -1
  74. data/dist/playbook-rails-react-bindings.js +1 -1
  75. data/dist/playbook-rails.js +1 -1
  76. data/dist/playbook.css +1 -1
  77. data/lib/playbook/kit_base.rb +21 -1
  78. data/lib/playbook/pb_forms_helper.rb +3 -1
  79. data/lib/playbook/version.rb +1 -1
  80. metadata +24 -6
  81. data/dist/chunks/_typeahead-C9g4qCcE.js +0 -22
  82. data/dist/chunks/_weekday_stacked-B0Zid7Rv.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
@@ -129,6 +129,34 @@ $pb_selectable_paddings: (
129
129
  }
130
130
  }
131
131
 
132
+ &[class*=_display_input] {
133
+ input[type="checkbox"],
134
+ input[type="radio"] {
135
+ &:checked {
136
+ ~label {
137
+ border-width: $pb_card_border_width;
138
+ outline: 1px solid $primary;
139
+ }
140
+
141
+ }
142
+ }
143
+
144
+ > label {
145
+ outline: 1px solid transparent;
146
+ padding: $space_sm;
147
+ }
148
+
149
+ &.dark {
150
+ input[type="checkbox"],
151
+ input[type="radio"] {
152
+ &:checked ~ label {
153
+ border-width: $pb_card_border_width;
154
+ outline: 1px solid $primary;
155
+ }
156
+ }
157
+ }
158
+ }
159
+
132
160
  &.dark {
133
161
  color: $white;
134
162
  > label {
@@ -66,6 +66,7 @@ const SelectableCard = (props: SelectableCardProps) => {
66
66
  'checked': checked,
67
67
  'disabled': disabled,
68
68
  'enabled': !disabled,
69
+ 'display_input': variant === 'displayInput',
69
70
  }),
70
71
  { error },
71
72
  dark ? 'dark' : '',
@@ -25,7 +25,7 @@
25
25
  <% end %>
26
26
  <div class="separator"></div>
27
27
  <div class="psuedo_separator"></div>
28
- <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
28
+ <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
29
29
  <% if content.nil? %>
30
30
  <%= pb_rails("body", props: { text: object.text }) %>
31
31
  <% else %>
@@ -25,7 +25,7 @@ module Playbook
25
25
 
26
26
  def classname
27
27
  [
28
- generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
28
+ generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class, display_input_class),
29
29
  error_class,
30
30
  dark_props,
31
31
  ].compact.join(" ")
@@ -79,6 +79,10 @@ module Playbook
79
79
  def error_class
80
80
  error ? "error" : nil
81
81
  end
82
+
83
+ def display_input_class
84
+ variant == "display_input" ? "display_input" : nil
85
+ end
82
86
  end
83
87
  end
84
88
  end
@@ -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') {