playbook_ui 12.15.0 → 12.16.0.pre.alpha.PLAY693tooltipwrongbg532

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_background/_background.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_background/background.rb +1 -1
  4. data/app/pb_kits/playbook/pb_badge/_badge.scss +1 -0
  5. data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -1
  6. data/app/pb_kits/playbook/pb_badge/badge.rb +5 -1
  7. data/app/pb_kits/playbook/pb_badge/badge.test.js +16 -1
  8. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +3 -3
  9. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -2
  10. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +295 -8
  11. data/app/pb_kits/playbook/pb_docs/kit_api.rb +42 -0
  12. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +33 -0
  13. data/app/pb_kits/playbook/pb_docs/kit_example.rb +14 -1
  14. data/app/pb_kits/playbook/pb_enhanced_element/index.ts +1 -1
  15. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -5
  16. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -5
  18. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -4
  19. data/app/pb_kits/playbook/pb_table/{_table.jsx → _table.tsx} +9 -11
  20. data/app/pb_kits/playbook/pb_table/{_table_row.jsx → _table_row.tsx} +7 -8
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +41 -0
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +62 -0
  23. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  24. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_table/{index.js → index.ts} +4 -4
  26. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +129 -0
  27. data/app/pb_kits/playbook/pb_textarea/{index.js → index.tsx} +2 -0
  28. data/app/pb_kits/playbook/pb_textarea/textarea.test.js +213 -0
  29. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  30. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  31. data/app/pb_kits/playbook/tokens/_colors.scss +16 -1
  32. data/lib/playbook/version.rb +2 -2
  33. metadata +15 -14
  34. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +0 -41
  35. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +0 -135
  36. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: '03281cc1b427fa58d12d5fdda8a4c4d2cc8084c2bb8b57d1f8eab0666b833571'
4
- data.tar.gz: 6b12d9e8c14770af46560d1c47600ae8866973a96dbde010998f86de8fad929d
3
+ metadata.gz: f44b91f87a4f93de80836093a1dd1eb7ffe5d77e243727e8d82391ffbb4e5abe
4
+ data.tar.gz: 42e9db818fa3e7f685be9f15f137828a6648e1a1f50ca1ce4fb6d23aa453c095
5
5
  SHA512:
6
- metadata.gz: 9711f9bbac20056a5d7e66a5f2ce1385c520ab8a25d7d4505f23ab04e015d251f7eda1f561d7e9becaf8eefd9d04d9cf35dd5fabba5711397240f79318ce39ca
7
- data.tar.gz: d8d4f3c94fe38322ebbf9c14e607cb35f0834bd064795a235664551c56ee593b5ee5d9a0f1d175a826f93a50e5733e18ebef507281015c1e3eb88010ced4942c
6
+ metadata.gz: f733a9628bb2c9b5a0d56ec89c1e1abd84255ef26489e4ed82fb471b78658e1b3f364402f509981dbd6b96bd538733c14193e12f366b0c70db2c2d518e757cf5
7
+ data.tar.gz: 0d41813f51a41bff2c43f60f18db4b1fcae18e243614783ea680ae817bb9470135cf87c334856a4c97433921549415fa08461dfa7a2ed2008d1b2b1e846859a1
@@ -24,7 +24,7 @@ type BackgroundProps = {
24
24
  id?: string,
25
25
  imageUrl?: string,
26
26
  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
27
- tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
27
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
28
28
  transition?: 'fade' | 'blur' | 'scale',
29
29
  } & GlobalProps
30
30
 
@@ -91,7 +91,7 @@ module Playbook
91
91
  prop :image_url
92
92
 
93
93
  prop :tag, type: Playbook::Props::Enum,
94
- values: %w[h1 h2 h3 h4 h5 h6 p div span],
94
+ values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
95
95
  default: "div"
96
96
 
97
97
  prop :transition, type: Playbook::Props::Enum,
@@ -43,6 +43,7 @@
43
43
  @each $color_name, $color_value in $status_colors {
44
44
  &[class*=_#{$color_name}] {
45
45
  background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
46
+ color: map-get($status_color_text_dark, $color_name);
46
47
  }
47
48
  }
48
49
  }
@@ -42,7 +42,7 @@ const Badge = (props: BadgeProps) => {
42
42
  const ariaProps = buildAriaProps(aria)
43
43
  const dataProps = buildDataProps(data)
44
44
  const css = classnames(
45
- buildCss('pb_badge_kit', variant, rounded ? 'rounded' : null),
45
+ buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
46
46
  globalProps(props),
47
47
  className
48
48
  )
@@ -10,11 +10,15 @@ module Playbook
10
10
  default: "neutral"
11
11
 
12
12
  def classname
13
- generate_classname("pb_badge_kit", variant, rounded_class)
13
+ generate_classname("pb_badge_kit", variant_class, rounded_class)
14
14
  end
15
15
 
16
16
  private
17
17
 
18
+ def variant_class
19
+ variant === "success" ? "success_sm" : variant
20
+ end
21
+
18
22
  def rounded_class
19
23
  rounded ? "rounded" : nil
20
24
  end
@@ -60,7 +60,6 @@ test('displays rounded corners', () => {
60
60
 
61
61
  test('displays color variants', () => {
62
62
  [
63
- "success",
64
63
  "warning",
65
64
  "error",
66
65
  "info"
@@ -78,3 +77,19 @@ test('displays color variants', () => {
78
77
  cleanup()
79
78
  })
80
79
  })
80
+
81
+ test('displays success variant', () => {
82
+ render(
83
+ <Badge
84
+ data={{ testid: testId }}
85
+ text={"success"}
86
+ variant={"success"}
87
+ />
88
+ )
89
+ const kit = screen.getByTestId(testId)
90
+ expect(kit).toHaveClass(`pb_badge_kit_success_sm
91
+ `)
92
+
93
+ cleanup()
94
+
95
+ })
@@ -8,7 +8,7 @@ $pb_body_colors: (
8
8
  lighter: $text_lt_lighter,
9
9
  link: $primary,
10
10
  error: $error,
11
- success: $success,
11
+ success: $text_lt_success_sm,
12
12
  );
13
13
 
14
14
  $pb_dark_body_colors: (
@@ -16,7 +16,7 @@ $pb_dark_body_colors: (
16
16
  light: $text_dk_light,
17
17
  lighter: $text_dk_lighter,
18
18
  error: $error,
19
- success: $success,
19
+ success: $text_dk_success_sm,
20
20
  );
21
21
 
22
22
  // Order is important here!
@@ -24,7 +24,7 @@ $pb_body_status: (
24
24
  default: $text_lt_default,
25
25
  negative: $error,
26
26
  dark_error: $error_dark_body,
27
- positive: $success,
27
+ positive: $text_lt_success_sm,
28
28
  );
29
29
 
30
30
  @mixin pb_body($color: $text_lt_default) {
@@ -6,7 +6,7 @@ $pb_caption_colors: (
6
6
  light: $text_lt_light,
7
7
  link: $primary,
8
8
  lighter: $text_lt_lighter,
9
- success: $success,
9
+ success: $text_lt_success_sm,
10
10
  error: $error,
11
11
  );
12
12
 
@@ -14,7 +14,7 @@ $pb_dark_caption_colors: (
14
14
  default: $text_dk_default,
15
15
  light: $text_dk_light,
16
16
  link: $primary,
17
- success: $success,
17
+ success: $text_dk_success_sm,
18
18
  error: $error,
19
19
  );
20
20
 
@@ -1,12 +1,299 @@
1
- <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
1
+ <% if !local_prop_data.present? %>
2
+ <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
2
3
  <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
3
- <%= pb_rails("card", props: { padding: "none" }) do %>
4
- <%= pb_rails("list", props: { xpadding: true }) do %>
5
- <% kit_props.each do |key, _def| %>
6
- <%= pb_rails("list/item") do %>
7
- <%= key %>
4
+ <%= pb_rails("card", props: { padding: "none" }) do %>
5
+ <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
6
+ <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
7
+ <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
8
+ <% end %>
9
+ <% end %>
10
+ <%= pb_rails("section_separator") %>
11
+ <%= pb_rails("card/card_body", props: {}) do %>
12
+ <%= pb_rails("table", props: {container: false, disable_hover: true }) do %>
13
+ <thead>
14
+ <tr>
15
+ <th>Props</th>
16
+ <th>Type</th>
17
+ <th>Values</th>
18
+ <th>Default</th>
19
+ </tr>
20
+ </thead>
21
+ <tbody>
22
+ <% global_prop_data.each do |key, value|%>
23
+ <tr>
24
+ <td>
25
+ <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
26
+ </td>
27
+ <td>
28
+ <%= pb_rails("card", props: {
29
+ classname: "card",
30
+ padding: "xxs",
31
+ background: "light",
32
+ border_none: true,
33
+ border_radius: "sm"
34
+ }) do %>
35
+ <%= pb_rails("body", props: {
36
+ classname: "kearning"
37
+ }) do %>
38
+ <%= value[:type].downcase %>
39
+ <% end %>
40
+ <% end %>
41
+ </td>
42
+ <td>
43
+ <% if value[:values].present? %>
44
+ <% value[:values].each do |item| %>
45
+ <% if item != nil %>
46
+ <%= pb_rails("card", props: {
47
+ flex_direction: "row",
48
+ classname: "card",
49
+ padding: "xxs",
50
+ background: "light",
51
+ border_none: true,
52
+ border_radius: "sm",
53
+ margin: "xxs"
54
+ }) do %>
55
+ <%= pb_rails("body", props: {
56
+ classname: "kearning"
57
+ }) do %>
58
+ <%= item %>
59
+ <% end %>
60
+ <% end %>
61
+ <% end %>
62
+ <% end %>
63
+ <% end %>
64
+ </td>
65
+ <td>
66
+ <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
67
+ <%= pb_rails("card", props: {
68
+ classname: "card",
69
+ padding: "xxs",
70
+ background: "light",
71
+ border_none: true,
72
+ border_radius: "sm"
73
+ }) do %>
74
+ <%= pb_rails("body", props: {
75
+ classname: "kearning"
76
+ }) do %>
77
+ <%= value[:default] %>
78
+ <% end %>
79
+ <% end %>
80
+ <% end %>
81
+ </td>
82
+ </tr>
83
+ <% end %>
84
+ </tbody>
85
+ <% end %>
86
+ <% end %>
87
+ <% end %>
88
+ </div>
89
+ <% else %>
90
+ <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
91
+ <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
92
+ <%= pb_rails("card", props: { padding: "none" }) do %>
93
+ <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
94
+ <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
95
+ <% if local_prop_data.present? %>
96
+ <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
97
+ <% end %>
98
+ <% if local_prop_data.present? %>
99
+ <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
100
+ <% end %>
101
+ <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
102
+ <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
103
+ <% end %>
104
+ <% end %>
105
+ <%= pb_rails("section_separator") %>
106
+ <%= pb_rails("card/card_body", props: {}) do %>
107
+ <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) do %>
108
+ <thead>
109
+ <tr>
110
+ <th>Props</th>
111
+ <th>Type</th>
112
+ <th>Values</th>
113
+ <th>Default</th>
114
+ </tr>
115
+ </thead>
116
+ <tbody>
117
+ <% global_prop_data.each do |key, value|%>
118
+ <tr>
119
+ <td>
120
+ <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
121
+ </td>
122
+ <td>
123
+ <%= pb_rails("card", props: {
124
+ classname: "card",
125
+ padding: "xxs",
126
+ background: "light",
127
+ border_none: true,
128
+ border_radius: "sm"
129
+ }) do %>
130
+ <%= pb_rails("body", props: {
131
+ classname: "kearning"
132
+ }) do %>
133
+ <%= value[:type].downcase %>
134
+ <% end %>
135
+ <% end %>
136
+ </td>
137
+ <td>
138
+ <% if value[:values].present? %>
139
+ <% value[:values].each do |item| %>
140
+ <% if item != nil %>
141
+ <%= pb_rails("card", props: {
142
+ flex_direction: "row",
143
+ classname: "card",
144
+ padding: "xxs",
145
+ background: "light",
146
+ border_none: true,
147
+ border_radius: "sm",
148
+ margin: "xxs"
149
+ }) do %>
150
+ <%= pb_rails("body", props: {
151
+ classname: "kearning"
152
+ }) do %>
153
+ <%= item %>
154
+ <% end %>
155
+ <% end %>
156
+ <% end %>
157
+ <% end %>
158
+ <% end %>
159
+ </td>
160
+ <td>
161
+ <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
162
+ <%= pb_rails("card", props: {
163
+ classname: "card",
164
+ padding: "xxs",
165
+ background: "light",
166
+ border_none: true,
167
+ border_radius: "sm"
168
+ }) do %>
169
+ <%= pb_rails("body", props: {
170
+ classname: "kearning"
171
+ }) do %>
172
+ <%= value[:default] %>
173
+ <% end %>
174
+ <% end %>
175
+ <% end %>
176
+ </td>
177
+ </tr>
178
+ <% end %>
179
+ </tbody>
180
+ <% end %>
181
+ <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active"}) do %>
182
+ <thead>
183
+ <tr>
184
+ <th>Props</th>
185
+ <th>Type</th>
186
+ <th>Values</th>
187
+ <th>Default</th>
188
+ </tr>
189
+ </thead>
190
+ <tbody>
191
+ <% local_prop_data.each do |key, value|%>
192
+ <tr>
193
+ <td>
194
+ <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
195
+ </td>
196
+ <td>
197
+ <%= pb_rails("card", props: {
198
+ classname: "card",
199
+ padding: "xxs",
200
+ background: "light",
201
+ border_none: true,
202
+ border_radius: "sm"
203
+ }) do %>
204
+ <%= pb_rails("body", props: {
205
+ classname: "kearning"
206
+ }) do %>
207
+ <%= value[:type].downcase %>
208
+ <% end %>
209
+ <% end %>
210
+ </td>
211
+ <td>
212
+ <% if value[:values].present? %>
213
+ <% value[:values].each do |item| %>
214
+ <% if item != nil %>
215
+ <%= pb_rails("card", props: {
216
+ flex_direction: "row",
217
+ classname: "card",
218
+ padding: "xxs",
219
+ background: "light",
220
+ border_none: true,
221
+ border_radius: "sm",
222
+ margin: "xxs"
223
+ }) do %>
224
+ <%= pb_rails("body", props: {
225
+ classname: "kearning"
226
+ }) do %>
227
+ <%= item %>
228
+ <% end %>
229
+ <% end %>
230
+ <% end %>
231
+ <% end %>
232
+ <% end %>
233
+ </td>
234
+ <td>
235
+ <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
236
+ <%= pb_rails("card", props: {
237
+ classname: "card",
238
+ padding: "xxs",
239
+ background: "light",
240
+ border_none: true,
241
+ border_radius: "sm"
242
+ }) do %>
243
+ <%= pb_rails("body", props: {
244
+ classname: "kearning"
245
+ }) do %>
246
+ <%= value[:default] %>
247
+ <% end %>
248
+ <% end %>
249
+ <% end %>
250
+ </td>
251
+ </tr>
252
+ <% end %>
253
+ </tbody>
8
254
  <% end %>
9
255
  <% end %>
10
256
  <% end %>
11
- <% end %>
12
- </div>
257
+ </div>
258
+ <% end %>
259
+
260
+ <script>
261
+
262
+ const globalNavAndTable = document.querySelectorAll('.global-active');
263
+ const localNavAndTable = document.querySelectorAll('.local-active');
264
+
265
+ globalNavAndTable.forEach(element => {
266
+ element.style.display = 'none';
267
+ });
268
+
269
+ const globalButton = document.getElementById("global-button");
270
+ if (globalButton) {
271
+ globalButton.addEventListener("click", showGlobal);
272
+ }
273
+
274
+ const localButton = document.getElementById("local-button");
275
+ if (localButton) {
276
+ localButton.addEventListener("click", showLocal);
277
+ }
278
+
279
+ function showGlobal() {
280
+ localNavAndTable.forEach(element => {
281
+ element.style.display = 'none';
282
+ });
283
+
284
+ globalNavAndTable.forEach(element => {
285
+ element.style.display = 'table';
286
+ });
287
+ }
288
+
289
+ function showLocal() {
290
+ localNavAndTable.forEach(element => {
291
+ element.style.display = 'table';
292
+ });
293
+
294
+ globalNavAndTable.forEach(element => {
295
+ element.style.display = 'none';
296
+ });
297
+ }
298
+
299
+ </script>
@@ -5,6 +5,48 @@ module Playbook
5
5
  class KitApi < Playbook::KitBase
6
6
  prop :kit, type: Playbook::Props::String, required: true
7
7
 
8
+ def kit_local_props
9
+ local = []
10
+ kit_props.each do |key, value|
11
+ value.kit != Playbook::KitBase && local.push({ key: key, value: value })
12
+ end
13
+ local
14
+ end
15
+
16
+ def local_prop_data
17
+ local_props = {}
18
+
19
+ kit_local_props.each do |key, _value|
20
+ name = key[:value].instance_variable_get(:@name)
21
+ type = key[:value].class.to_s.split("::").last
22
+ default = key[:value].instance_variable_get(:@default)
23
+ values = key[:value].instance_variable_get(:@values)
24
+ local_props[name.to_sym] = { "type": type, "default": default, "values": values }
25
+ end
26
+ local_props
27
+ end
28
+
29
+ def kit_global_props
30
+ global = []
31
+ kit_props.each do |key, value|
32
+ value.kit == Playbook::KitBase && global.push({ key: key, value: value })
33
+ end
34
+ global
35
+ end
36
+
37
+ def global_prop_data
38
+ global_props = {}
39
+
40
+ kit_global_props.each do |key, _value|
41
+ name = key[:value].instance_variable_get(:@name)
42
+ type = key[:value].class.to_s.split("::").last
43
+ default = key[:value].instance_variable_get(:@default)
44
+ values = key[:value].instance_variable_get(:@values)
45
+ global_props[name.to_sym] = { "type": type, "default": default, "values": values }
46
+ end
47
+ global_props
48
+ end
49
+
8
50
  def kit_props
9
51
  kit_class.props
10
52
  end
@@ -1,3 +1,5 @@
1
+ <% example_html = ERB.new(example).result %>
2
+
1
3
  <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
2
4
  <div class="pb--kit-example">
3
5
  <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
@@ -13,6 +15,23 @@
13
15
  <div id="code-wrapper">
14
16
  <div class="pb--codeControls">
15
17
  <ul>
18
+ <% if type == "rails" %>
19
+ <li>
20
+ <a href="#" id="copy-<%= example_key %>-trigger" onclick="copyOnClick(`<%= example_html %>`, `copy-<%= example_key %>`)">
21
+ Copy HTML
22
+ </a>
23
+ <%= pb_rails("popover", props: {
24
+ classname: "popover-copy",
25
+ close_on_click: "any",
26
+ trigger_element_id: "copy-#{example_key}-trigger",
27
+ tooltip_id: "copy-#{example_key}",
28
+ position: "top",
29
+ padding: "xs"
30
+ }) do %>
31
+ HTML Copied
32
+ <% end %>
33
+ </li>
34
+ <% end %>
16
35
  <li>
17
36
  <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
18
37
  </li>
@@ -26,3 +45,17 @@
26
45
  </div>
27
46
  <% end %>
28
47
  <% end %>
48
+
49
+ <script>
50
+ function copyOnClick(content, elementID) {
51
+ copyContent(content)
52
+
53
+ const popover = document.getElementById(elementID);
54
+ popover.style.display = "block";
55
+
56
+ setTimeout(() => {
57
+ popover.style.display = "none";
58
+ }, 3000);
59
+ }
60
+ </script>
61
+
@@ -33,12 +33,25 @@ module Playbook
33
33
  def source
34
34
  @source ||= begin
35
35
  extension = type == "react" ? "jsx" : "html.erb"
36
- read_kit_file("_#{example_key}.#{extension}")
36
+ stringified_code = read_kit_file("_#{example_key}.#{extension}")
37
+ sanitize_code(stringified_code)
37
38
  end
38
39
  end
39
40
 
40
41
  private
41
42
 
43
+ def sanitize_code(stringified_code)
44
+ stringified_code = stringified_code.gsub(%r{'../.*}, "'playbook-ui'")
45
+ .gsub(%r{"../.*}, '"playbook-ui"')
46
+ stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
47
+ if stringified_code.include?("props: { ")
48
+ stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
49
+ elsif type == "rails" && dark
50
+ stringified_code = stringified_code.gsub("props: {", "props: {\n dark: true,")
51
+ end
52
+ stringified_code
53
+ end
54
+
42
55
  def read_kit_file(*args)
43
56
  path = ::Playbook.kit_path(kit, "docs", *args)
44
57
  path.exist? ? path.read : ""
@@ -7,7 +7,7 @@ export default class PbEnhancedElement {
7
7
  static _observer: ElementObserver
8
8
  element: Element
9
9
 
10
- constructor(element: Element) {
10
+ constructor(element?: Element) {
11
11
  this.element = element
12
12
  }
13
13
 
@@ -94,13 +94,13 @@ const IconStatValue = (props: IconStatValueProps) => {
94
94
 
95
95
  <div>
96
96
  <Flex
97
- vertical="bottom"
97
+ align="baseline"
98
98
  >
99
- {titleSize(size)}
99
+ {titleSize(size)}
100
100
  &nbsp;
101
- <Body
102
- text={unit}
103
- />
101
+ <Body
102
+ text={unit}
103
+ />
104
104
  </Flex>
105
105
  <Caption text={text} />
106
106
  </div>
@@ -10,7 +10,7 @@
10
10
  variant: object.variant } %>
11
11
 
12
12
  <div>
13
- <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
13
+ <%= pb_rails("flex", props: { align: "baseline" }) do %>
14
14
  <%= pb_rails "title", props: {
15
15
  tag: "span",
16
16
  text: object.value_string,
@@ -1,7 +1,6 @@
1
1
  @import "../tokens/colors";
2
2
 
3
3
  $transform-rotate-deg: 135deg;
4
- $input-max-width: 284px;
5
4
  $dropdown-min-width: 340px;
6
5
  $flag-min-resolution: 192dpi;
7
6
 
@@ -10,10 +9,6 @@ $flag-min-resolution: 192dpi;
10
9
  color: $focus_input_light;
11
10
  }
12
11
 
13
- .text_input {
14
- max-width: $input-max-width;
15
- }
16
-
17
12
  .dropdown_open {
18
13
  .text_input {
19
14
  border-color: $primary !important;
@@ -7,12 +7,10 @@ module Playbook
7
7
  default: false
8
8
  prop :initial_country, type: Playbook::Props::String,
9
9
  default: ""
10
- prop :is_valid
11
10
  prop :label, type: Playbook::Props::String,
12
11
  default: ""
13
12
  prop :name, type: Playbook::Props::String,
14
13
  default: ""
15
- prop :onchange
16
14
  prop :only_countries, type: Playbook::Props::Array,
17
15
  default: []
18
16
  prop :preferred_countries, type: Playbook::Props::Array,
@@ -30,10 +28,8 @@ module Playbook
30
28
  dark: dark,
31
29
  disabled: disabled,
32
30
  initialCountry: initial_country,
33
- isValid: is_valid,
34
31
  label: label,
35
32
  name: name,
36
- onChange: onchange,
37
33
  onlyCountries: only_countries,
38
34
  preferredCountries: preferred_countries,
39
35
  value: value,