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.
- 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_card/_card.tsx +5 -1
- 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/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_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_selectable_card/_selectable_card.scss +28 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +5 -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-B9Sy5PN8.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_forms_helper.rb +3 -1
- data/lib/playbook/version.rb +1 -1
- metadata +24 -6
- data/dist/chunks/_typeahead-C9g4qCcE.js +0 -22
- data/dist/chunks/_weekday_stacked-B0Zid7Rv.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
|
@@ -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 {
|
@@ -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
|
@@ -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') {
|