playbook_ui 12.12.0 → 12.13.0.pre.alpha.addingProductTokens439

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.scss +2 -3
  3. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  4. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +22 -35
  5. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +34 -37
  6. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +27 -44
  7. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +21 -33
  8. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +7 -7
  9. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +6 -8
  10. data/app/pb_kits/playbook/pb_flex/_flex.scss +1 -0
  11. data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -3
  12. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +1 -1
  15. data/app/pb_kits/playbook/pb_flex/flex.rb +3 -3
  16. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb +4 -4
  17. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +5 -5
  18. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -3
  19. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +3 -3
  20. data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +107 -0
  21. data/app/pb_kits/playbook/pb_selectable_list/{_selectable_list.jsx → _selectable_list.tsx} +11 -9
  22. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js +68 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb +6 -6
  24. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +6 -6
  25. data/app/pb_kits/playbook/tokens/_colors.scss +55 -15
  26. data/app/pb_kits/playbook/utilities/_colors.scss +7 -13
  27. data/lib/playbook/version.rb +2 -2
  28. metadata +10 -9
  29. data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +0 -106
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 52982a7fd482e46a592ec1dd33c640b2f4c3468c8c2c6ef89e63c2ac3aedc642
4
- data.tar.gz: 9b01af38e5ed588b0d649a9ff770a3aa6529cf8673eec79919b197f9c1cdacaa
3
+ metadata.gz: 5810ed238e19013cd9913f7751d768a9b0e8c29cb9fb12e7b94f040eb90252ec
4
+ data.tar.gz: '08a0f2529b37414524c4dbb79c3ea1c7efa4a388ade459dc6a77836f93ab1c0e'
5
5
  SHA512:
6
- metadata.gz: a6c68065b2497b859a00255121fd7240cf0dc4f667c3c74ccccf1e59b6dae29d1a8c5146fe95780a1c9e5f90ced89fad71f79046a0c70b1723268e1674170b6d
7
- data.tar.gz: '08ea2b02f9def8c1da0372a5a4b76a8740217256cb47582fda6d668736adbd936c7b086313a533a51ad0c1e809366068dfecf799dd5098b3d9296c83e374d638'
6
+ metadata.gz: 64c3596d0dd7835e6ee4ae6b1bfd55be5a8f87f4be5f90d0a584e60c5c3d0dc89c49b82ba8936417d210daeed87487bf99a218430bf9fec5084c0074601408bb
7
+ data.tar.gz: 7a51f19a279eca809c072cd7b34b39b4efc30a766d28538e1548715036076438c00d442134d26d31357239b24f9ccb4c787b2cea4015c2445d165848e1e8718b
data/app/pb_kits/playbook/pb_card/_card.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import "card_mixin";
2
+ @import "../utilities/colors";
2
3
 
3
4
  [class^=pb_card_kit] {
4
5
  @include pb_card;
@@ -29,9 +30,7 @@
29
30
  @each $color_name, $color_value in $pb_card_header_colors {
30
31
  &[class*=_#{$color_name}] {
31
32
  @include pb_card_header_color($color_value);
32
- [class^=pb_body_kit] {
33
- color: lightenText($color_value);
34
- }
33
+ color: lightenText($color_value);
35
34
  }
36
35
  }
37
36
  &[class*=_white] {
data/app/pb_kits/playbook/pb_card/card.rb CHANGED
@@ -15,7 +15,7 @@ module Playbook
15
15
  values: %w[xs sm md lg xl none rounded],
16
16
  default: "md"
17
17
  prop :background, type: Playbook::Props::Enum,
18
- values: %w[white light dark windows siding doors solar roofing gutters insulation none],
18
+ values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
19
19
  default: "none"
20
20
 
21
21
  def classname
data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED
@@ -1,57 +1,44 @@
1
- <%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
1
+ <%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
2
2
 
3
- <br>
4
-
5
- <%= pb_rails("card", props: { background: "dark", dark: true }) do %>
3
+ <%= pb_rails("card", props: { background: "dark", dark: true, margin_bottom: "sm" }) do %>
6
4
  <%= pb_rails("body", props: {
7
5
  text: "Dark",
8
- color: "lighter"
6
+ dark: true
9
7
  }) %>
10
8
  <% end %>
11
9
 
12
- <br>
13
-
14
- <%= pb_rails("card") do %>
10
+ <%= pb_rails("card", props: { margin_bottom: "sm" }) do %>
15
11
  <%= pb_rails("body", props: {
16
- text: "White"
12
+ text: "White / Default"
17
13
  }) %>
18
14
  <% end %>
19
15
 
20
- <br>
21
-
22
- <%= pb_rails("card", props: { background: "light" }) do %>
16
+ <%= pb_rails("card", props: { background: "light", margin_bottom: "sm" }) do %>
23
17
  <%= pb_rails("body", props: {
24
- text: "Light"
25
- }) %>
18
+ text: "Light",
19
+ dark: false
20
+ }) %>
26
21
  <% end %>
27
22
 
28
- <br>
29
-
30
- <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
31
-
32
- <br>
23
+ <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
33
24
 
34
- <%= pb_rails("card", props: { background: "windows", dark: true }) do %>
25
+ <%= pb_rails("card", props: { background: "product_1_background", dark: true, margin_bottom: "sm" }) do %>
35
26
  <%= pb_rails("body", props: {
36
- text: "Windows",
37
- color: "lighter"
38
- }) %>
27
+ text: "Product 1 Background",
28
+ dark: true
29
+ }) %>
39
30
  <% end %>
40
31
 
41
- <br>
42
-
43
- <%= pb_rails("card", props: { background: "siding" }) do %>
32
+ <%= pb_rails("card", props: { background: "product_7_highlight", margin_bottom: "sm" }) do %>
44
33
  <%= pb_rails("body", props: {
45
- text: "Siding"
46
- }) %>
34
+ text: "Product 7 Highlight",
35
+ dark: true
36
+ }) %>
47
37
  <% end %>
48
38
 
49
- <br>
50
-
51
- <%= pb_rails("card", props: { background: "doors" }) do %>
39
+ <%= pb_rails("card", props: { background: "product_2_background", margin_bottom: "sm" }) do %>
52
40
  <%= pb_rails("body", props: {
53
- text: "Doors"
54
- }) %>
41
+ text: "Product 2 Highlight",
42
+ dark: true
43
+ }) %>
55
44
  <% end %>
56
-
57
- <br>
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -8,91 +8,88 @@ const CardBackground = (props) => {
8
8
  <div>
9
9
  <Title
10
10
  {...props}
11
+ marginBottom="sm"
11
12
  size={4}
12
13
  tag="h4"
13
14
  text="Card Colors"
14
15
  />
15
-
16
- <br />
17
-
18
16
  <Card
19
17
  background="dark"
20
18
  dark
19
+ marginBottom="sm"
21
20
  {...props}
22
21
  >
23
22
  <Body
24
- color="lighter"
23
+ dark
25
24
  text="Dark"
26
- {...props}
27
25
  />
28
26
  </Card>
29
27
 
30
- <br />
31
-
32
- <Card>
28
+ <Card
29
+ marginBottom="sm"
30
+ {...props}
31
+ >
33
32
  <Body
34
- text="White"
33
+ text="White / Default"
34
+ {...props}
35
35
  />
36
36
  </Card>
37
37
 
38
- <br />
39
38
 
40
39
  <Card
41
40
  background="light"
41
+ marginBottom="sm"
42
42
  {...props}
43
43
  >
44
- <Body
45
- text="Light"
46
- />
44
+ <Body text="Light" />
47
45
  </Card>
48
46
 
49
- <br />
50
-
47
+
51
48
  <Title
52
49
  {...props}
50
+ marginBottom="sm"
53
51
  size={4}
54
52
  tag="h4"
55
53
  text="Product Colors"
56
54
  />
57
55
 
58
- <br />
59
-
60
56
  <Card
61
- background="windows"
57
+ background="product_1_background"
58
+ marginBottom="sm"
62
59
  {...props}
63
- >
60
+ >
64
61
  <Body
65
- color="lighter"
66
- text="Windows"
67
- {...props}
62
+ dark
63
+ text="Product 1 Background"
68
64
  />
69
65
  </Card>
70
66
 
71
- <br />
67
+
72
68
 
73
- <Card
74
- background="siding"
75
- {...props}
76
- >
77
- <Body
78
- text="Siding"
79
- {...props}
80
- />
69
+ <Card
70
+ background="product_7_highlight"
71
+ marginBottom="sm"
72
+ {...props} >
73
+ <Body
74
+ dark
75
+ text="Product 7 Highlight"
76
+ />
81
77
  </Card>
82
78
 
83
- <br />
79
+
84
80
 
85
- <Card
86
- background="doors"
81
+ <Card
82
+ background="product_2_highlight"
83
+ marginBottom="sm"
87
84
  {...props}
88
85
  >
89
86
  <Body
90
- text="Doors"
91
- {...props}
87
+ dark
88
+ text="Product 2 Highlight"
92
89
  />
93
90
  </Card>
94
91
 
95
- <br />
92
+
96
93
  </div>
97
94
  )
98
95
  }
data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED
@@ -1,74 +1,57 @@
1
- <%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
1
+ <%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
2
2
 
3
- <br>
4
-
5
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
6
- <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
7
- <%= pb_rails("body", props: { text: "category_1", dark: true }) %>
8
- <% end %>
9
- <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
10
- Body
11
- <% end %>
3
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
4
+ <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
5
+ <%= pb_rails("body", props: { text: "Category 1", dark: true }) %>
12
6
  <% end %>
13
-
14
- <br>
15
-
16
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
17
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
18
- <%= pb_rails("body", props: { text: "category_2", dark: true }) %>
19
-
20
- <% end %>
21
- <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
22
- Body
23
- <% end %>
7
+ <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
8
+ Category 1
24
9
  <% end %>
10
+ <% end %>
25
11
 
26
- <br>
27
-
28
- <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
12
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
13
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_3" }) do %>
14
+ <%= pb_rails("body", props: { text: "Category 3", dark: false }) %>
15
+ <% end %>
16
+ <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
17
+ Body
18
+ <% end %>
19
+ <% end %>
29
20
 
30
- <br>
21
+ <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
31
22
 
32
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
33
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "siding" }) do %>
34
- <%= pb_rails("body", props: { text: "Siding", dark: true }) %>
23
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
24
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_2_background" }) do %>
25
+ <%= pb_rails("body", props: { text: "Product 2 Background", dark: true }) %>
35
26
  <% end %>
36
27
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
37
28
  Body
38
29
  <% end %>
39
30
  <% end %>
40
31
 
41
- <br>
42
-
43
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
44
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "gutters" }) do %>
45
- <%= pb_rails("body", props: { text: "Gutters", dark: true }) %>
32
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
33
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_6_background" }) do %>
34
+ <%= pb_rails("body", props: { text: "Product 6 Background", dark: true }) %>
46
35
  <% end %>
47
36
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
48
37
  Body
49
38
  <% end %>
50
39
  <% end %>
51
40
 
52
- <br>
41
+ <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
53
42
 
54
- <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4 }) %>
55
-
56
- <br>
57
-
58
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
43
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
59
44
  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %>
60
- <%= pb_rails("body", props: { text: "White" }) %>
45
+ <%= pb_rails("body", props: { text: "White", dark: false }) %>
61
46
  <% end %>
62
47
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
63
48
  Body
64
49
  <% end %>
65
50
  <% end %>
66
51
 
67
- <br>
68
-
69
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
52
+ <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
70
53
  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
71
- <%= pb_rails("body", props: { text: "Dark" }) %>
54
+ <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
72
55
  <% end %>
73
56
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
74
57
  Body
data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx CHANGED
@@ -9,21 +9,21 @@ const CardHeader = (props) => {
9
9
  <div>
10
10
  <Title
11
11
  {...props}
12
+ marginBottom='sm'
12
13
  size={4}
13
14
  tag="h4"
14
15
  text="Category Colors"
15
16
  />
16
17
 
17
- <br />
18
-
19
18
  <Card
20
19
  {...props}
20
+ marginBottom='sm'
21
21
  padding="none"
22
22
  >
23
- <Card.Header>
23
+ <Card.Header headerColor="category_1" >
24
24
  <Body
25
- {...props}
26
- text="category_1"
25
+ dark
26
+ text="Category 1"
27
27
  />
28
28
  </Card.Header>
29
29
  <Card.Body>
@@ -34,19 +34,15 @@ const CardHeader = (props) => {
34
34
  </Card.Body>
35
35
  </Card>
36
36
 
37
- <br />
38
-
39
37
  <Card
40
38
  {...props}
39
+ marginBottom='sm'
41
40
  padding="none"
42
41
  >
43
42
  <Card.Header
44
- headerColor="category_2"
43
+ headerColor="category_3"
45
44
  >
46
- <Body
47
- {...props}
48
- text="category_2"
49
- />
45
+ <Body text="Category 3" />
50
46
  </Card.Header>
51
47
  <Card.Body
52
48
  padding="md"
@@ -58,27 +54,27 @@ const CardHeader = (props) => {
58
54
  </Card.Body>
59
55
  </Card>
60
56
 
61
- <br />
62
57
 
63
58
  <Title
64
59
  {...props}
60
+ marginBottom='sm'
65
61
  size={4}
66
62
  tag="h4"
67
63
  text="Product Colors"
68
64
  />
69
65
 
70
- <br />
71
-
72
66
  <Card
73
67
  {...props}
68
+ marginBottom='sm'
74
69
  padding="none"
75
70
  >
76
71
  <Card.Header
77
- headerColor="siding"
72
+ headerColor="product_2_background"
78
73
  >
79
74
  <Body
80
75
  {...props}
81
- text="Siding"
76
+ dark
77
+ text="Product 2 Background"
82
78
  />
83
79
  </Card.Header>
84
80
  <Card.Body>
@@ -89,18 +85,16 @@ const CardHeader = (props) => {
89
85
  </Card.Body>
90
86
  </Card>
91
87
 
92
- <br />
93
-
94
88
  <Card
95
89
  {...props}
90
+ marginBottom='sm'
96
91
  padding="none"
97
92
  >
98
- <Card.Header
99
- headerColor="gutters"
100
- >
93
+ <Card.Header headerColor="product_6_background" >
101
94
  <Body
102
95
  {...props}
103
- text="Gutters"
96
+ dark
97
+ text="Product 6 Background"
104
98
  />
105
99
  </Card.Header>
106
100
  <Card.Body>
@@ -111,28 +105,24 @@ const CardHeader = (props) => {
111
105
  </Card.Body>
112
106
  </Card>
113
107
 
114
- <br />
115
108
 
116
109
  <Title
117
110
  {...props}
111
+ marginBottom='sm'
118
112
  size={4}
119
113
  tag="h4"
120
114
  text="Background Colors"
121
115
  />
122
116
 
123
- <br />
124
-
125
117
  <Card
126
118
  {...props}
119
+ marginBottom='sm'
127
120
  padding="none"
128
121
  >
129
122
  <Card.Header
130
123
  headerColor="white"
131
124
  >
132
- <Body
133
- {...props}
134
- text="White"
135
- />
125
+ <Body text="White" />
136
126
  </Card.Header>
137
127
  <Card.Body>
138
128
  <Body
@@ -142,8 +132,6 @@ const CardHeader = (props) => {
142
132
  </Card.Body>
143
133
  </Card>
144
134
 
145
- <br />
146
-
147
135
  <Card
148
136
  {...props}
149
137
  padding="none"
@@ -152,7 +140,7 @@ const CardHeader = (props) => {
152
140
  headerColor="dark"
153
141
  >
154
142
  <Body
155
- {...props}
143
+ dark
156
144
  text="Dark"
157
145
  />
158
146
  </Card.Header>
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb CHANGED
@@ -1,9 +1,9 @@
1
- <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
2
- Card content
1
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"product_6_highlight"}, margin_bottom: "sm"}) do %>
2
+ Side Position & Product 6 Highlight Color
3
3
  <% end %>
4
-
5
- <br>
6
-
7
- <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}}) do %>
8
- Card content
4
+ <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
5
+ Top Position & Warning Color
9
6
  <% end %>
7
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
8
+ Side Position & Category 2 Color
9
+ <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx CHANGED
@@ -7,27 +7,25 @@ const CardHighlight = (props) => {
7
7
  <div>
8
8
  <Card
9
9
  {...props}
10
- highlight={{ position: 'side', color: 'windows' }}
10
+ highlight={{ position: 'side', color: 'product_6_highlight' }}
11
+ marginBottom="sm"
11
12
  >
12
- {'Card content'}
13
+ {'Side Position & Product 6 Highlight Color'}
13
14
  </Card>
14
15
 
15
- <br />
16
-
17
16
  <Card
18
17
  {...props}
19
18
  highlight={{ position: 'top', color: 'warning' }}
19
+ marginBottom="sm"
20
20
  >
21
- {'Card content'}
21
+ {'Top Position & Warning Color'}
22
22
  </Card>
23
23
 
24
- <br />
25
-
26
24
  <Card
27
25
  {...props}
28
26
  highlight={{ position: 'side', color: 'category_2' }}
29
27
  >
30
- {'Card content'}
28
+ {'Side Position & Category 2 Color'}
31
29
  </Card>
32
30
  </div>
33
31
  )
data/app/pb_kits/playbook/pb_flex/_flex.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @import "../tokens/spacing";
3
3
 
4
4
  $gapSpaces:(
5
+ xxs: $space_xxs,
5
6
  xs: $space_xs,
6
7
  sm: $space_sm,
7
8
  md: $space_md,
data/app/pb_kits/playbook/pb_flex/_flex.tsx CHANGED
@@ -2,6 +2,7 @@ import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildCss, buildDataProps } from '../utilities/props'
4
4
  import { GlobalProps, globalProps } from '../utilities/globalProps'
5
+ import { Sizes } from '../types'
5
6
 
6
7
  type FlexProps = {
7
8
  children: React.ReactChild[] | React.ReactNode,
@@ -16,9 +17,9 @@ type FlexProps = {
16
17
  reverse?: boolean,
17
18
  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
18
19
  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",
20
+ gap?: Sizes | "none",
21
+ rowGap?: Sizes| "none",
22
+ columnGap?: Sizes| "none",
22
23
  wrap?: boolean,
23
24
  alignSelf?: "start" | "end" | "center" | "stretch" | "none"
24
25
  } & GlobalProps
data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb CHANGED
@@ -1,7 +1,7 @@
1
1
  <%= pb_rails("title", props: {size: 4, text: "Row"}) %>
2
2
  <br/>
3
3
  <div class="flex-doc-example">
4
- <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
4
+ <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
5
5
  <%40.times do |i|%>
6
6
  <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
7
7
  <% end %>
data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx CHANGED
@@ -14,7 +14,7 @@ const FlexGap = (props) => {
14
14
  <>
15
15
  <div className="flex-doc-example">
16
16
  <Flex
17
- gap="xs"
17
+ gap="xxs"
18
18
  wrap
19
19
  {...props}
20
20
  >
data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ##### Prop
2
2
 
3
- * `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xs | sm | md | lg | xl | none
3
+ * `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
4
4
 
5
5
  - Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
6
6
 
data/app/pb_kits/playbook/pb_flex/flex.rb CHANGED
@@ -25,15 +25,15 @@ module Playbook
25
25
  deprecated: true
26
26
 
27
27
  prop :gap, type: Playbook::Props::Enum,
28
- values: %w[xs sm md lg xl none],
28
+ values: %w[xxs xs sm md lg xl none],
29
29
  default: "none"
30
30
 
31
31
  prop :row_gap, type: Playbook::Props::Enum,
32
- values: %w[xs sm md lg xl none],
32
+ values: %w[xxs xs sm md lg xl none],
33
33
  default: "none"
34
34
 
35
35
  prop :column_gap, type: Playbook::Props::Enum,
36
- values: %w[xs sm md lg xl none],
36
+ values: %w[xxs xs sm md lg xl none],
37
37
  default: "none"
38
38
 
39
39
  prop :reverse, type: Playbook::Props::Boolean,
data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= pb_rails("legend", props: { color: "data_8", text: "Windows" }) %>
2
- <%= pb_rails("legend", props: { color: "warning", text: "Windows" }) %>
3
- <%= pb_rails("legend", props: { color: "windows", text: "Windows" }) %>
4
- <%= pb_rails("legend", props: { color: "category_7", text: "Windows" }) %>
1
+ <%= pb_rails("legend", props: { color: "data_8", text: "Data 8" }) %>
2
+ <%= pb_rails("legend", props: { color: "warning", text: "Warning" }) %>
3
+ <%= pb_rails("legend", props: { color: "product_6_highlight", text: "Product 6 (highlight)" }) %>
4
+ <%= pb_rails("legend", props: { color: "category_7", text: "Category 7" }) %>