playbook_ui 7.14.0.pre.alpha1 → 7.14.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (156) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/playbook/pb_sample_helper.rb +1 -1
  3. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
  4. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +12 -0
  5. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +0 -1
  8. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +10 -36
  9. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +20 -26
  10. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -5
  11. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +1 -0
  12. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -2
  13. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb +1 -0
  15. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +15 -0
  16. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  17. data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb +5 -0
  19. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx +26 -0
  20. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  21. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb +1 -0
  23. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +14 -0
  24. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +4 -0
  25. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb +5 -0
  27. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx +28 -0
  28. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +2 -0
  29. data/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +4 -9
  31. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss +7 -12
  32. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +1 -4
  33. data/app/pb_kits/playbook/pb_distribution_bar/docs/example.yml +0 -2
  34. data/app/pb_kits/playbook/pb_distribution_bar/docs/index.js +0 -1
  35. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +1 -12
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +0 -41
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +37 -84
  38. data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +7 -18
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb +21 -0
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +43 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +5 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +17 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +5 -0
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +2 -0
  45. data/app/pb_kits/playbook/pb_flex/_flex.jsx +9 -25
  46. data/app/pb_kits/playbook/pb_flex/_flex.scss +7 -40
  47. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +2 -6
  48. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -10
  49. data/app/pb_kits/playbook/pb_flex/docs/_description.md +0 -6
  50. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb +15 -15
  51. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +15 -17
  52. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md +1 -3
  53. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.html.erb → _flex_horizontal.html.erb} +21 -19
  54. data/app/pb_kits/playbook/pb_flex/docs/{_flex_align.jsx → _flex_horizontal.jsx} +77 -71
  55. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb +8 -8
  56. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md +1 -5
  57. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb +9 -9
  58. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +2 -2
  59. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +8 -23
  60. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +4 -4
  61. data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb +68 -0
  62. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.jsx → _flex_vertical.jsx} +99 -41
  63. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_flex/docs/example.yml +4 -9
  65. data/app/pb_kits/playbook/pb_flex/docs/index.js +2 -4
  66. data/app/pb_kits/playbook/pb_flex/flex.rb +12 -79
  67. data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -18
  68. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +1 -7
  69. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +3 -0
  70. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +18 -0
  71. data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -1
  72. data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
  73. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb +42 -0
  74. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +66 -0
  75. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb +4 -0
  76. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +17 -0
  77. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb +29 -0
  78. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +38 -0
  79. data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +7 -0
  80. data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +3 -0
  81. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb +23 -0
  82. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +37 -0
  83. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb +21 -0
  84. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +35 -0
  85. data/app/pb_kits/playbook/pb_icon_value/docs/example.yml +5 -0
  86. data/app/pb_kits/playbook/pb_icon_value/docs/index.js +2 -0
  87. data/app/pb_kits/playbook/pb_layout/_layout.scss +9 -9
  88. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb +32 -0
  89. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +97 -0
  90. data/app/pb_kits/playbook/pb_layout/docs/example.yml +4 -0
  91. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  92. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb +43 -0
  93. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +105 -0
  94. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb +25 -0
  95. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +51 -0
  96. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb +13 -0
  97. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +54 -0
  98. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb +25 -0
  99. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +57 -0
  100. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb +14 -0
  101. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +54 -0
  102. data/app/pb_kits/playbook/pb_popover/docs/example.yml +13 -0
  103. data/app/pb_kits/playbook/pb_popover/docs/index.js +5 -0
  104. data/app/pb_kits/playbook/pb_select/_select.scss +4 -6
  105. data/app/pb_kits/playbook/pb_table/_table.jsx +0 -8
  106. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb +4 -56
  107. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx +3 -64
  108. data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -3
  109. data/app/pb_kits/playbook/pb_table/table.rb +1 -8
  110. data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +4 -6
  111. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +16 -92
  112. data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +1 -12
  113. data/app/pb_kits/playbook/pb_timestamp/docs/_description.md +1 -1
  114. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +18 -26
  115. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +1 -21
  116. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +8 -40
  117. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +4 -12
  118. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
  119. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
  120. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +18 -26
  121. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
  122. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
  123. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +21 -0
  124. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +28 -6
  125. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
  126. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
  127. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +0 -8
  128. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -4
  129. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +1 -83
  130. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +4 -2
  131. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb +21 -0
  132. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx +36 -0
  133. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +1 -0
  134. data/lib/playbook/version.rb +1 -1
  135. metadata +57 -31
  136. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +0 -51
  137. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +0 -77
  138. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +0 -78
  139. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb +0 -4
  140. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx +0 -18
  141. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +0 -1
  142. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb +0 -101
  143. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +0 -7
  144. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +0 -33
  145. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +0 -75
  146. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +0 -9
  147. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +0 -49
  148. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +0 -11
  149. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +0 -113
  150. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +0 -7
  151. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md +0 -5
  152. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +0 -7
  153. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md +0 -5
  154. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -135
  155. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -135
  156. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -135
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import { FixedConfirmationToast } from '../../'
3
+
4
+ const FixedConfirmationToastMultiLineDark = (props) => {
5
+ return (
6
+ <div>
7
+ <FixedConfirmationToast
8
+ dark
9
+ status="tip"
10
+ text={'Scan to Assign Selected Items.\n Click here to generate report'}
11
+ {...props}
12
+ />
13
+ </div>
14
+ )
15
+ }
16
+
17
+ export default FixedConfirmationToastMultiLineDark
@@ -4,8 +4,13 @@ examples:
4
4
  - fixed_confirmation_toast_default: Default
5
5
  - fixed_confirmation_toast_multi_line: Multi Line
6
6
  - fixed_confirmation_toast_close: Click to Close
7
+ - fixed_confirmation_toast_dark: Dark
8
+ - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
7
9
 
8
10
  react:
9
11
  - fixed_confirmation_toast_default: Default
10
12
  - fixed_confirmation_toast_multi_line: Multi Line
11
13
  - fixed_confirmation_toast_close: Click to Close
14
+ - fixed_confirmation_toast_dark: Dark
15
+ - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
16
+
@@ -1,3 +1,5 @@
1
1
  export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
2
2
  export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
3
3
  export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
4
+ export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
5
+ export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'
@@ -7,48 +7,35 @@ import { globalProps } from '../utilities/globalProps.js'
7
7
  type FlexProps = {
8
8
  children: array<React.ReactNode> | React.ReactNode,
9
9
  className?: string,
10
- horizontal?: "left" | "center" | "right" | "stretch" | "none",
11
- justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
10
+ horizontal?: "left" | "center" | "right" | "stretch",
12
11
  id?: string,
13
12
  inline?: boolean,
14
13
  orientation?: "row" | "column",
15
14
  spacing?: "around" | "between" | "evenly" | "none",
16
15
  reverse?: boolean,
17
- vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
18
- align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
19
- gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
20
- rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
21
- columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
16
+ vertical?: "top" | "center" | "bottom" | "stretch" | "baseline",
22
17
  wrap?: boolean,
23
18
  }
24
19
 
25
20
  const Flex = (props: FlexProps) => {
26
21
  const {
27
- align = 'none',
28
22
  children,
29
23
  className,
30
24
  inline = false,
31
25
  horizontal = 'left',
32
- justify = 'none',
33
26
  orientation = 'row',
34
27
  spacing = 'none',
35
- gap = 'none',
36
- rowGap = 'none',
37
- columnGap = 'none',
38
28
  reverse = false,
39
29
  vertical = 'top',
40
30
  wrap = false,
41
31
  } = props
42
32
  const orientationClass =
43
33
  orientation !== undefined ? `orientation_${orientation}` : ''
44
- const justifyClass =
45
- justify !== 'none' ? `justify_content_${justify}` : `justify_content_${horizontal}`
46
- const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
34
+ const horizontalClass =
35
+ horizontal !== undefined ? `justify_content_${horizontal}` : ''
36
+ const verticalClass = vertical !== undefined ? `align_items_${vertical}` : ''
47
37
  const inlineClass = inline === true ? 'inline' : ''
48
38
  const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
49
- const gapClass = gap !== 'none' ? `gap_${gap}` : ''
50
- const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
51
- const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
52
39
  const wrapClass = wrap === true ? 'wrap' : ''
53
40
  const reverseClass = reverse === true ? 'reverse' : ''
54
41
  return (
@@ -57,15 +44,12 @@ const Flex = (props: FlexProps) => {
57
44
  buildCss(
58
45
  'pb_flex_kit',
59
46
  orientationClass,
60
- justifyClass,
61
- alignClass,
47
+ horizontalClass,
48
+ verticalClass,
62
49
  inlineClass,
63
- reverseClass,
64
- wrapClass,
65
50
  spacingClass,
66
- gapClass,
67
- rowGapClass,
68
- columnGapClass
51
+ reverseClass,
52
+ wrapClass
69
53
  ),
70
54
  globalProps(props),
71
55
  className
@@ -1,19 +1,4 @@
1
1
  @import "flex_item";
2
- @import "../tokens/spacing";
3
-
4
- $gapSpaces:(
5
- xs: $space_xs,
6
- sm: $space_sm,
7
- md: $space_md,
8
- lg: $space_lg,
9
- xl: $space_xl
10
- );
11
-
12
- $gapTypes: (
13
- gap: gap,
14
- columnGap: column-gap,
15
- rowGap: row-gap
16
- );
17
2
 
18
3
  [class^=pb_flex_kit] {
19
4
  display: flex;
@@ -48,8 +33,7 @@ $gapTypes: (
48
33
 
49
34
  // Alignment: Justify Content
50
35
  &[class*=justify_content_left],
51
- &[class*=justify_content_top],
52
- &[class*=justify_content_start] {
36
+ &[class*=justify_content_top] {
53
37
  justify-content: flex-start;
54
38
  &[class*=_reverse] {
55
39
  justify-content: flex-end;
@@ -57,8 +41,7 @@ $gapTypes: (
57
41
  }
58
42
 
59
43
  &[class*=justify_content_right],
60
- &[class*=justify_content_bottom],
61
- &[class*=justify_content_end] {
44
+ &[class*=justify_content_bottom] {
62
45
  justify-content: flex-end;
63
46
  &[class*=_reverse] {
64
47
  justify-content: flex-start;
@@ -71,14 +54,12 @@ $gapTypes: (
71
54
 
72
55
  // Alignment: Align Items
73
56
  &[class*=align_items_left],
74
- &[class*=align_items_top],
75
- &[class*=align_items_start] {
57
+ &[class*=align_items_top] {
76
58
  align-items: flex-start;
77
59
  }
78
60
 
79
61
  &[class*=align_items_right],
80
- &[class*=align_items_bottom],
81
- &[class*=align_items_end] {
62
+ &[class*=align_items_bottom] {
82
63
  align-items: flex-end;
83
64
  }
84
65
 
@@ -95,29 +76,15 @@ $gapTypes: (
95
76
  }
96
77
 
97
78
  // Spacing
98
- &[class*=spacing_around],
99
- &[class*=justify_content_around] {
79
+ &[class*=spacing_around] {
100
80
  justify-content: space-around;
101
81
  }
102
82
 
103
- &[class*=spacing_between],
104
- &[class*=justify_content_between] {
83
+ &[class*=spacing_between] {
105
84
  justify-content: space-between;
106
85
  }
107
86
 
108
- &[class*=spacing_evenly],
109
- &[class*=justify_content_evenly] {
87
+ &[class*=spacing_evenly] {
110
88
  justify-content: space-evenly;
111
89
  }
112
-
113
- //Gap
114
- @each $gapType, $gapValue in $gapTypes{
115
- @each $sizeName, $sizeValue in $gapSpaces {
116
- &[class*=_#{$gapType}_#{$sizeName}]{
117
- #{$gapValue}: $sizeValue;
118
- }
119
- }
120
- }
121
-
122
-
123
90
  }
@@ -7,22 +7,18 @@ type FlexItemPropTypes = {
7
7
  children: array<React.ReactNode> | React.ReactNode,
8
8
  fixedSize: string,
9
9
  grow: boolean,
10
- shrink: boolean,
11
- flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
12
10
  className: string,
13
11
  }
14
12
 
15
13
  const FlexItem = (props: FlexItemPropTypes) => {
16
- const { children, className, fixedSize, grow, shrink, flex } = props
14
+ const { children, className, fixedSize, grow } = props
17
15
  const growClass = grow === true ? 'grow' : ''
18
- const flexClass = flex !== 'none' ? `flex_${flex}` : ''
19
- const shrinkClass = shrink === true ? 'shrink' : ''
20
16
  const fixedStyle =
21
17
  fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
22
18
 
23
19
  return (
24
20
  <div
25
- className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), globalProps(props), className)}
21
+ className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
26
22
  style={fixedStyle}
27
23
  >
28
24
  {children}
@@ -7,14 +7,4 @@
7
7
  &[class*=_grow] {
8
8
  flex-grow: 1;
9
9
  }
10
-
11
- &[class*=_shrink] {
12
- flex-shrink: 1;
13
- }
14
-
15
- @for $i from 0 through 12 {
16
- &[class*=_flex_#{$i}]{
17
- flex: $i;
18
- }
19
- }
20
10
  }
@@ -1,7 +1 @@
1
1
  This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
2
-
3
- ##### !!!Attention these props will be deprecated in the future please use new props in their place
4
-
5
- * `horizontal` - Will be replaced with `justify`
6
- * `vertical` - Will be replaced with `align`
7
- * `spacing` - Will be removed. Use `justify`
@@ -1,23 +1,23 @@
1
- <%= pb_rails("title", props: {size: 4, text: "Row"}) %>
2
- <br/>
3
1
  <div class="flex-doc-example">
2
+
3
+ <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
4
+
4
5
  <%= pb_rails("flex") do %>
5
- <%= pb_rails("flex/flex_item") do %>1<% end %>
6
- <%= pb_rails("flex/flex_item") do %>2<% end %>
7
- <%= pb_rails("flex/flex_item") do %>3<% end %>
8
- <%= pb_rails("flex/flex_item") do %>4<% end %>
6
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
7
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
8
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
9
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
9
10
  <% end %>
10
- </div>
11
11
 
12
- <br/><br/>
12
+ <br/><br/>
13
+
14
+ <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
13
15
 
14
- <%= pb_rails("title", props: {size: 4, text: "Column"}) %>
15
- <br/>
16
- <div class="flex-doc-example">
17
16
  <%= pb_rails("flex", props: {orientation: "column"}) do %>
18
- <%= pb_rails("flex/flex_item") do %>1<% end %>
19
- <%= pb_rails("flex/flex_item") do %>2<% end %>
20
- <%= pb_rails("flex/flex_item") do %>3<% end %>
21
- <%= pb_rails("flex/flex_item") do %>4<% end %>
17
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
18
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
19
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
20
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
22
21
  <% end %>
22
+
23
23
  </div>
@@ -4,14 +4,13 @@ import { Flex, FlexItem, Title } from '../../'
4
4
  const FlexDefault = (props) => {
5
5
  return (
6
6
  <>
7
-
8
- <Title
9
- size={4}
10
- text="Row"
11
- {...props}
12
- />
13
- <br />
14
7
  <div className="flex-doc-example">
8
+ <Title
9
+ size={4}
10
+ text="Row"
11
+ {...props}
12
+ />
13
+ <br />
15
14
  <Flex
16
15
  orientation="row"
17
16
  {...props}
@@ -29,18 +28,17 @@ const FlexDefault = (props) => {
29
28
  {'4'}
30
29
  </FlexItem>
31
30
  </Flex>
32
- </div>
33
- <br />
34
- <Title
35
- size={4}
36
- text="Column"
37
- {...props}
38
- />
39
- <br />
40
- <div className="flex-doc-example">
31
+
32
+ <br />
33
+ <Title
34
+ size={4}
35
+ text="Column"
36
+ {...props}
37
+ />
38
+ <br />
41
39
  <Flex
42
- align="start"
43
40
  orientation="column"
41
+ vertical="left"
44
42
  {...props}
45
43
  >
46
44
  <FlexItem>
@@ -1,3 +1 @@
1
- ##### Prop
2
-
3
- * `orientation` | **Type**: String | **Values**: row | column
1
+ Display: block
@@ -1,66 +1,68 @@
1
-
2
- <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
3
1
  <div class="flex-doc-example">
4
- <%= pb_rails("flex", props:{justify: "start" }) do %>
2
+
3
+ <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
4
+
5
+ <%= pb_rails("flex", props: {horizontal: "left"}) do %>
5
6
  <%= pb_rails("flex/flex_item") do %>1<% end %>
6
7
  <%= pb_rails("flex/flex_item") do %>2<% end %>
7
8
  <%= pb_rails("flex/flex_item") do %>3<% end %>
8
9
  <%= pb_rails("flex/flex_item") do %>4<% end %>
9
10
  <% end %>
10
- </div>
11
11
 
12
12
  <br/><br/>
13
13
 
14
- <div class="flex-doc-example">
15
- <%= pb_rails("flex", props:{justify: "center" }) do %>
14
+ <%= pb_rails("flex", props: {horizontal: "center"}) do %>
16
15
  <%= pb_rails("flex/flex_item") do %>1<% end %>
17
16
  <%= pb_rails("flex/flex_item") do %>2<% end %>
18
17
  <%= pb_rails("flex/flex_item") do %>3<% end %>
19
18
  <%= pb_rails("flex/flex_item") do %>4<% end %>
20
19
  <% end %>
21
- </div>
22
20
 
23
21
  <br/><br/>
24
22
 
25
- <div class="flex-doc-example">
26
- <%= pb_rails("flex", props:{justify: "end" }) do %>
23
+ <%= pb_rails("flex", props: {horizontal: "right"}) do %>
27
24
  <%= pb_rails("flex/flex_item") do %>1<% end %>
28
25
  <%= pb_rails("flex/flex_item") do %>2<% end %>
29
26
  <%= pb_rails("flex/flex_item") do %>3<% end %>
30
27
  <%= pb_rails("flex/flex_item") do %>4<% end %>
31
28
  <% end %>
32
- </div>
33
29
 
34
30
  <br/><br/>
35
31
 
36
- <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
37
- <div class="flex-doc-example tall">
38
- <%= pb_rails("flex", props:{ justify: "start", orientation: "column" }) do %>
32
+ <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
33
+
34
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "left"}) do %>
39
35
  <%= pb_rails("flex/flex_item") do %>1<% end %>
40
36
  <%= pb_rails("flex/flex_item") do %>2<% end %>
41
37
  <%= pb_rails("flex/flex_item") do %>3<% end %>
42
38
  <%= pb_rails("flex/flex_item") do %>4<% end %>
43
39
  <% end %>
44
- </div>
45
40
 
46
41
  <br/><br/>
47
42
 
48
- <div class="flex-doc-example tall">
49
- <%= pb_rails("flex", props:{justify: "center", orientation: "column" }) do %>
43
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
50
44
  <%= pb_rails("flex/flex_item") do %>1<% end %>
51
45
  <%= pb_rails("flex/flex_item") do %>2<% end %>
52
46
  <%= pb_rails("flex/flex_item") do %>3<% end %>
53
47
  <%= pb_rails("flex/flex_item") do %>4<% end %>
54
48
  <% end %>
55
- </div>
56
49
 
57
50
  <br/><br/>
58
51
 
59
- <div class="flex-doc-example tall">
60
- <%= pb_rails("flex", props:{ justify: "end", orientation: "column" }) do %>
52
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "right"}) do %>
61
53
  <%= pb_rails("flex/flex_item") do %>1<% end %>
62
54
  <%= pb_rails("flex/flex_item") do %>2<% end %>
63
55
  <%= pb_rails("flex/flex_item") do %>3<% end %>
64
56
  <%= pb_rails("flex/flex_item") do %>4<% end %>
65
57
  <% end %>
58
+
59
+ <br/><br/>
60
+
61
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) do %>
62
+ <%= pb_rails("flex/flex_item") do %>1<% end %>
63
+ <%= pb_rails("flex/flex_item") do %>2<% end %>
64
+ <%= pb_rails("flex/flex_item") do %>3<% end %>
65
+ <%= pb_rails("flex/flex_item") do %>4<% end %>
66
+ <% end %>
67
+
66
68
  </div>
@@ -1,42 +1,25 @@
1
1
  import React from 'react'
2
2
  import { Flex, FlexItem, Title } from '../..'
3
3
 
4
- const FlexAlign = (props) => {
4
+ const FlexHorizontal = (props) => {
5
5
  return (
6
6
  <>
7
-
8
- <Title
9
- size={4}
10
- text="Row"
11
- {...props}
12
- />
13
- <br />
14
-
15
- <div className="flex-doc-example ">
16
- <Flex
17
- align="start"
7
+ <div className="flex-doc-example">
8
+ <Title
9
+ size={3}
10
+ text="Row"
18
11
  {...props}
19
- >
20
- <FlexItem>
21
- {'1'}
22
- </FlexItem>
23
- <FlexItem>
24
- {'2'}
25
- </FlexItem>
26
- <FlexItem padding="xl">
27
- {'3'}
28
- </FlexItem>
29
- <FlexItem padding="md">
30
- {'4'}
31
- </FlexItem>
32
- </Flex>
33
- </div>
34
-
35
- <br />
36
-
37
- <div className="flex-doc-example ">
12
+ />
13
+ <br />
14
+ <Title
15
+ size={4}
16
+ text="Left"
17
+ {...props}
18
+ />
19
+ <br />
38
20
  <Flex
39
- align="center"
21
+ horizontal="left"
22
+ orientation="row"
40
23
  {...props}
41
24
  >
42
25
  <FlexItem>
@@ -45,20 +28,25 @@ const FlexAlign = (props) => {
45
28
  <FlexItem>
46
29
  {'2'}
47
30
  </FlexItem>
48
- <FlexItem padding="xl">
31
+ <FlexItem>
49
32
  {'3'}
50
33
  </FlexItem>
51
- <FlexItem padding="md">
34
+ <FlexItem>
52
35
  {'4'}
53
36
  </FlexItem>
54
37
  </Flex>
55
- </div>
56
38
 
57
- <br />
39
+ <br />
58
40
 
59
- <div className="flex-doc-example ">
41
+ <Title
42
+ size={4}
43
+ text="Center"
44
+ {...props}
45
+ />
46
+ <br />
60
47
  <Flex
61
- align="end"
48
+ horizontal="center"
49
+ orientation="row"
62
50
  {...props}
63
51
  >
64
52
  <FlexItem>
@@ -67,20 +55,24 @@ const FlexAlign = (props) => {
67
55
  <FlexItem>
68
56
  {'2'}
69
57
  </FlexItem>
70
- <FlexItem padding="xl">
58
+ <FlexItem>
71
59
  {'3'}
72
60
  </FlexItem>
73
- <FlexItem padding="md">
61
+ <FlexItem>
74
62
  {'4'}
75
63
  </FlexItem>
76
64
  </Flex>
77
- </div>
78
65
 
79
- <br />
66
+ <br />
80
67
 
81
- <div className="flex-doc-example ">
68
+ <Title
69
+ size={4}
70
+ text="Right"
71
+ {...props}
72
+ />
73
+ <br />
82
74
  <Flex
83
- align="stretch"
75
+ horizontal="right"
84
76
  orientation="row"
85
77
  {...props}
86
78
  >
@@ -90,28 +82,31 @@ const FlexAlign = (props) => {
90
82
  <FlexItem>
91
83
  {'2'}
92
84
  </FlexItem>
93
- <FlexItem padding="xl">
85
+ <FlexItem>
94
86
  {'3'}
95
87
  </FlexItem>
96
- <FlexItem padding="md">
88
+ <FlexItem>
97
89
  {'4'}
98
90
  </FlexItem>
99
91
  </Flex>
100
- </div>
101
92
 
102
- <br />
93
+ <br />
103
94
 
104
- <Title
105
- size={4}
106
- text="Column"
107
- {...props}
108
- />
109
- <br />
110
-
111
- <div className="flex-doc-example ">
95
+ <Title
96
+ size={3}
97
+ text="Column"
98
+ {...props}
99
+ />
100
+ <br />
101
+ <Title
102
+ size={4}
103
+ text="Left"
104
+ {...props}
105
+ />
106
+ <br />
112
107
  <Flex
113
- align="start"
114
108
  orientation="column"
109
+ vertical="left"
115
110
  {...props}
116
111
  >
117
112
  <FlexItem>
@@ -127,14 +122,18 @@ const FlexAlign = (props) => {
127
122
  {'4'}
128
123
  </FlexItem>
129
124
  </Flex>
130
- </div>
131
125
 
132
- <br />
126
+ <br />
133
127
 
134
- <div className="flex-doc-example ">
128
+ <Title
129
+ size={4}
130
+ text="Center"
131
+ {...props}
132
+ />
133
+ <br />
135
134
  <Flex
136
- align="center"
137
135
  orientation="column"
136
+ vertical="center"
138
137
  {...props}
139
138
  >
140
139
  <FlexItem>
@@ -150,14 +149,18 @@ const FlexAlign = (props) => {
150
149
  {'4'}
151
150
  </FlexItem>
152
151
  </Flex>
153
- </div>
154
152
 
155
- <br />
153
+ <br />
156
154
 
157
- <div className="flex-doc-example ">
155
+ <Title
156
+ size={4}
157
+ text="Right"
158
+ {...props}
159
+ />
160
+ <br />
158
161
  <Flex
159
- align="end"
160
162
  orientation="column"
163
+ vertical="right"
161
164
  {...props}
162
165
  >
163
166
  <FlexItem>
@@ -173,14 +176,18 @@ const FlexAlign = (props) => {
173
176
  {'4'}
174
177
  </FlexItem>
175
178
  </Flex>
176
- </div>
177
179
 
178
- <br />
180
+ <br />
179
181
 
180
- <div className="flex-doc-example ">
182
+ <Title
183
+ size={4}
184
+ text="Stretch"
185
+ {...props}
186
+ />
187
+ <br />
181
188
  <Flex
182
- align="stretch"
183
189
  orientation="column"
190
+ vertical="stretch"
184
191
  {...props}
185
192
  >
186
193
  <FlexItem>
@@ -197,9 +204,8 @@ const FlexAlign = (props) => {
197
204
  </FlexItem>
198
205
  </Flex>
199
206
  </div>
200
-
201
207
  </>
202
208
  )
203
209
  }
204
210
 
205
- export default FlexAlign
211
+ export default FlexHorizontal