playbook_ui 13.22.0 → 13.23.0
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/Components/CustomCell.tsx +8 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json +278 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +7 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +7 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +34 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +17 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +18 -2
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +14 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +0 -2
- data/app/pb_kits/playbook/pb_list/list.rb +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx} +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +5 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.scss +1 -10
- data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +7 -13
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +6 -9
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +18 -7
- data/app/pb_kits/playbook/pb_online_status/online_status.rb +1 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +2 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +39 -6
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +17 -12
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +11 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +21 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +2 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.test.js +7 -0
- data/app/pb_kits/playbook/utilities/_positioning.scss +23 -10
- data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
- data/dist/menu.yml +4 -0
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/bottom.rb +6 -3
- data/lib/playbook/kit_base.rb +1 -1
- data/lib/playbook/left.rb +6 -3
- data/lib/playbook/pb_doc_helper.rb +1 -1
- data/lib/playbook/position_props_css.rb +17 -0
- data/lib/playbook/props/percentage.rb +2 -2
- data/lib/playbook/right.rb +6 -3
- data/lib/playbook/top.rb +6 -3
- data/lib/playbook/version.rb +2 -2
- metadata +38 -38
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
@@ -119,19 +119,19 @@ type Position = {
|
|
119
119
|
}
|
120
120
|
|
121
121
|
type Top = {
|
122
|
-
top?: Sizes,
|
122
|
+
top?: Sizes | {value: string, inset: boolean},
|
123
123
|
}
|
124
124
|
|
125
125
|
type Right = {
|
126
|
-
right?: Sizes,
|
126
|
+
right?: Sizes | {value: string, inset: boolean},
|
127
127
|
}
|
128
128
|
|
129
129
|
type Bottom = {
|
130
|
-
bottom?: Sizes,
|
130
|
+
bottom?: Sizes | {value: string, inset: boolean},
|
131
131
|
}
|
132
132
|
|
133
133
|
type Left = {
|
134
|
-
left?: Sizes,
|
134
|
+
left?: Sizes | {value: string, inset: boolean},
|
135
135
|
}
|
136
136
|
|
137
137
|
type Shadow = {
|
@@ -177,6 +177,19 @@ const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: st
|
|
177
177
|
}).join(" ")
|
178
178
|
}
|
179
179
|
|
180
|
+
//reusable function for top, bottom, right and left props
|
181
|
+
const getPositioningPropsClasses = (position: string, value: Sizes | {value: string, inset: boolean} ) => {
|
182
|
+
let css = "";
|
183
|
+
if (typeof value === 'string') {
|
184
|
+
css += `${position}_${value}`;
|
185
|
+
} else if (typeof value === 'object' && value.inset) {
|
186
|
+
css += `${position}_${value.value}_inset`;
|
187
|
+
} else if (typeof value === 'object') {
|
188
|
+
css += `${position}_${value.value}`;
|
189
|
+
}
|
190
|
+
return css;
|
191
|
+
};
|
192
|
+
|
180
193
|
// Prop categories
|
181
194
|
const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
|
182
195
|
|
@@ -441,11 +454,16 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
441
454
|
return css
|
442
455
|
},
|
443
456
|
|
444
|
-
topProps: ({ top }: Top) => top ? `top_${top}` : '',
|
445
|
-
rightProps: ({ right }: Right) => right ? `right_${right}` : '',
|
446
|
-
bottomProps: ({ bottom }: Bottom) => bottom ? `bottom_${bottom}` : '',
|
447
|
-
leftProps: ({ left }: Left) => left ? `left_${left}` : '',
|
448
457
|
|
458
|
+
topProps: ({top}) => getPositioningPropsClasses('top', top),
|
459
|
+
|
460
|
+
rightProps: ({right}) => getPositioningPropsClasses('right', right),
|
461
|
+
|
462
|
+
bottomProps:({bottom}) => getPositioningPropsClasses('bottom', bottom),
|
463
|
+
|
464
|
+
leftProps: ({left}) => getPositioningPropsClasses('left', left),
|
465
|
+
|
466
|
+
|
449
467
|
textAlignProps: ({ textAlign }: TextAlign) => {
|
450
468
|
if (typeof textAlign === 'object') {
|
451
469
|
return getResponsivePropClasses(textAlign, 'text_align')
|
data/dist/menu.yml
CHANGED
@@ -407,6 +407,10 @@ kits:
|
|
407
407
|
platforms: *web
|
408
408
|
description: Badges can be used for notification, tags, and status. They are used for count and numbers.
|
409
409
|
status: "stable"
|
410
|
+
- name: "online_status"
|
411
|
+
platforms: *web
|
412
|
+
description: Online Status is a small indicator that lets the user know the status of a person or item.
|
413
|
+
status: "stable"
|
410
414
|
- name: "pill"
|
411
415
|
platforms: *all
|
412
416
|
description: A pill uses both a keyword and a specific color to categorize an item.
|