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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/index.js +60 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -9
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -9
- data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +16 -6
- data/app/pb_kits/playbook/pb_currency/currency.rb +38 -11
- data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form/form.rb +2 -0
- data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +9 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +27 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +211 -227
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +105 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +106 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
- data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +3 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
- data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
- data/dist/chunks/_weekday_stacked-C2icYweq.js +45 -0
- data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
- data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +21 -1
- data/lib/playbook/pb_doc_helper.rb +5 -5
- data/lib/playbook/pb_forms_helper.rb +3 -1
- data/lib/playbook/version.rb +2 -2
- metadata +40 -9
- data/dist/chunks/_typeahead-BYw0HEgO.js +0 -22
- data/dist/chunks/_weekday_stacked-DumiyWjh.js +0 -45
@@ -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
|
>
|
@@ -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(
|
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?
|
@@ -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') {
|