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.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +8 -4
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +1 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +6 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +2 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json +278 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -7
  17. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -7
  18. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +7 -0
  19. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +7 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -2
  21. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
  23. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -0
  24. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +34 -0
  25. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +17 -1
  26. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +18 -2
  27. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +14 -0
  28. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  29. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb +5 -0
  30. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +6 -0
  31. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  32. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -0
  33. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +0 -2
  34. data/app/pb_kits/playbook/pb_list/list.rb +0 -2
  35. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -2
  36. 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
  37. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +5 -0
  38. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -1
  39. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
  40. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +1 -10
  41. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
  42. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +7 -13
  43. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb +6 -9
  44. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +18 -7
  45. data/app/pb_kits/playbook/pb_online_status/online_status.rb +1 -1
  46. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +2 -1
  47. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +2 -2
  48. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +39 -6
  49. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +17 -12
  50. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb +11 -0
  51. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +21 -0
  52. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +3 -1
  53. data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
  54. data/app/pb_kits/playbook/pb_toggle/toggle.rb +2 -1
  55. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +7 -0
  56. data/app/pb_kits/playbook/utilities/_positioning.scss +23 -10
  57. data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
  58. data/dist/menu.yml +4 -0
  59. data/dist/playbook-rails.js +7 -7
  60. data/lib/playbook/bottom.rb +6 -3
  61. data/lib/playbook/kit_base.rb +1 -1
  62. data/lib/playbook/left.rb +6 -3
  63. data/lib/playbook/pb_doc_helper.rb +1 -1
  64. data/lib/playbook/position_props_css.rb +17 -0
  65. data/lib/playbook/props/percentage.rb +2 -2
  66. data/lib/playbook/right.rb +6 -3
  67. data/lib/playbook/top.rb +6 -3
  68. data/lib/playbook/version.rb +2 -2
  69. metadata +38 -38
  70. 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.