playbook_ui 12.12.0 → 12.13.0.pre.alpha.addingProductTokens439

Sign up to get free protection for your applications and to get access to all the features.
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" }) %>