playbook_ui 14.3.2.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3791 → 14.3.2.pre.alpha.PBNTR480radiocustomchildrenprop3759

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +23 -245
  3. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -1
  4. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  5. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  6. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +1 -1
  7. data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
  8. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +1 -5
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +0 -4
  12. data/app/pb_kits/playbook/pb_radio/index.js +1 -1
  13. data/app/pb_kits/playbook/pb_radio/radio.html.erb +19 -17
  14. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +0 -16
  15. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +0 -4
  16. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +18 -26
  17. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
  18. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  19. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -4
  20. data/app/pb_kits/playbook/tokens/_colors.scss +0 -2
  21. data/dist/chunks/{_typeahead-B2zRxReA.js → _typeahead-DbAz2Okr.js} +2 -2
  22. data/dist/chunks/{_weekday_stacked-CvAnMnnS.js → _weekday_stacked-CZ5S17_d.js} +1 -1
  23. data/dist/chunks/lib-D9uVVKnh.js +16 -0
  24. data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-u2wnZ3oe.js} +1 -1
  25. data/dist/chunks/vendor.js +1 -1
  26. data/dist/playbook-doc.js +1 -1
  27. data/dist/playbook-rails-react-bindings.js +1 -1
  28. data/dist/playbook-rails.js +1 -1
  29. data/dist/playbook.css +1 -1
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +6 -17
  32. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +0 -117
  33. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +0 -227
  34. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +0 -1
  35. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +0 -72
  36. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +0 -91
  37. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +0 -1
  38. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +0 -1
  39. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +0 -31
  40. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +0 -26
  41. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +0 -1
  42. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +0 -1
  43. data/dist/chunks/lib-D2U4I1U6.js +0 -16
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b05e4ed56c48be4731977c03a59d76947f17b896a2cb4e7c2402433bb6a80d63
4
- data.tar.gz: eb12efbde71ac19ed246b5fb7b8250cb0be7721deb98ba34dad10343143ff949
3
+ metadata.gz: cdd1dded7ae1ba871ee3d9c6301c8157a59069e5b30bd4192aa3923cda2f470f
4
+ data.tar.gz: f9a6884a3c4fbc00c1cacb9706fcfa02c166c5bcd81c394e37489a953f29b099
5
5
  SHA512:
6
- metadata.gz: 14d45a7aa2ee15d462c6bf97230c170d5fe65576e48ced5170f2d211c15b16f72666a06ac5ba7b2236afe52405b2f87831c448d09a3a39ea52a03b3eed5f2a28
7
- data.tar.gz: 3d390890e511a6f6bfea02ee214c001fce3b7e85ca0d2265e7d28b246ffe84575c828cf4c7ca7a87b6488bfef2f2ab9f5ed3b7b19ef79dbed1065cd75890559b
6
+ metadata.gz: cb419c98c99095e28a2b17fef5e5f9a5dd258a2d75b26d46a34182af3c56396f3ac60de61e40f9fec9afc6dd38ef00341e54f02bc762f9d4eae31d5d5b783550
7
+ data.tar.gz: ad8e3e17e90704d2f8ee7f4ff4665e0a195cfc83c0a4908ae19f8cbf3edfbd79930a221d23ba714b9272053c1514e95753dfad4b56722ce1bbbfcb44ac2d07a2
@@ -7,7 +7,10 @@
7
7
 
8
8
  $selector: ".pb_form_pill";
9
9
  $pb_form_pill_height: 27px;
10
- $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));
10
+ $form_pill_colors: (
11
+ primary: map-get($status_color_text, "primary"),
12
+ neutral: map-get($status_color_text, "neutral"),
13
+ );
11
14
 
12
15
 
13
16
  [class^=pb_form_pill_kit] {
@@ -33,18 +36,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
33
36
  color: $text_lt_default;
34
37
  }
35
38
  }
36
- @if ($color_name == "warning") {
37
- background-color: mix($yellow, $card_light, 10%);
38
- .pb_form_pill_icon {
39
- color: $yellow;
40
- }
41
- }
42
- @if ($color_name == "accessories") {
43
- background-color: mix($product_8_background, $card_light, 10%);
44
- .pb_form_pill_icon {
45
- color: $product_8_background;
46
- }
47
- }
48
39
  transition: background-color 0.2s ease;
49
40
  box-shadow: none;
50
41
  @media (hover:hover) {
@@ -54,24 +45,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
54
45
  background-color: mix($neutral, $card_light, 20%);
55
46
  border: 1px solid $border_light;
56
47
  }
57
- @if ($color_name == "warning") {
58
- background-color: mix($yellow, $card_light, 20%);
59
- }
60
- @if ($color_name == "accessories") {
61
- background-color: mix($product_8_background, $card_light, 20%);
62
- }
63
48
  }
64
49
  &:active {
65
50
  background-color: mix($color_value, $card_light, 30%);
66
51
  @if ($color_name == "neutral") {
67
52
  background-color: mix($neutral, $card_light, 30%);
68
53
  }
69
- @if ($color_name == "warning") {
70
- background-color: mix($yellow, $card_light, 30%);
71
- }
72
- @if ($color_name == "accessories") {
73
- background-color: mix($product_8_background, $card_light, 30%);
74
- }
75
54
  }
76
55
  }
77
56
  #{$selector}_text {
@@ -79,9 +58,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
79
58
  @if ($color_name == "neutral") {
80
59
  color: $text_lt_default;
81
60
  }
82
- @if ($color_name == "warning") {
83
- color: $yellow;
84
- }
85
61
  padding: 0 $space-xs;
86
62
  }
87
63
  #{$selector}_close {
@@ -100,23 +76,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
100
76
  background-color: mix($neutral, $card_light, 60%);
101
77
  }
102
78
  }
103
- @if ($color_name == "warning") {
104
- color: $yellow;
105
- }
106
- &:hover {
107
- background-color: mix($color_value, $card_light, 40%);
108
- @if ($color_name == "warning") {
109
- background-color: mix($yellow, $card_light, 40%);
110
- }
111
- }
112
- @if ($color_name == "accessories") {
113
- color: $product_8_background;
114
- }
115
- &:hover {
116
- @if ($color_name == "accessories") {
117
- background-color: mix($product_8_background, $card_light, 40%);
118
- }
119
- }
120
79
  }
121
80
  #{$selector}_tag {
122
81
  color: $color_value;
@@ -124,9 +83,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
124
83
  @if ($color_name == "neutral") {
125
84
  color: $text_lt_default;
126
85
  }
127
- @if ($color_name == "warning") {
128
- color: $yellow;
129
- }
130
86
  }
131
87
  }
132
88
  }
@@ -176,23 +132,25 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
176
132
  }
177
133
  &.dark {
178
134
  @each $color_name, $color_value in $form_pill_colors {
135
+ // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info.
136
+ // Primary and Neutral are exceptions to the general rule in the handoff
179
137
  &[class*=_#{$color_name}] {
180
- background-color: mix($color_value, $card_dark, 10%);
181
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
182
- color: $color_name;
183
- }
184
- .pb_form_pill_close {
185
- color: $color_name;
186
- &:hover {
187
- background-color: mix($color_value, $card_dark, 40%);
188
- }
189
- }
190
- &:hover {
191
- background-color: mix($color_value, $card_dark, 20%);
192
- }
193
- &:active {
194
- background-color: mix($color_value, $card_dark, 30%);
195
- }
138
+ // background-color: mix($color_value, $card_dark, 10%);
139
+ // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
140
+ // color: $color_name;
141
+ // }
142
+ // .pb_form_pill_close {
143
+ // color: $color_name;
144
+ // &:hover {
145
+ // background-color: mix($color_value, $card_dark, 40%);
146
+ // }
147
+ // }
148
+ // &:hover {
149
+ // background-color: mix($color_value, $card_dark, 20%);
150
+ // }
151
+ // &:active {
152
+ // background-color: mix($color_value, $card_dark, 30%);
153
+ // }
196
154
  @if ($color_name == "neutral") {
197
155
  background-color: transparent;
198
156
  border: 1px solid $border_dark;
@@ -227,192 +185,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
227
185
  }
228
186
  }
229
187
  &:hover {
230
- background-color: mix($active_dark, $card_dark, 20%);
188
+ background-color: mix($active_dark, $card_dark, 20px);
231
189
  }
232
190
  &:active {
233
191
  background-color: mix($active_dark, $card_dark, 30%);
234
192
  }
235
193
  }
236
- @if ($color_name == "data_1") {
237
- background-color: mix($active_dark, $card_dark, 10%);
238
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
239
- color: mix($active_dark, $card_light, 90%);
240
- }
241
- .pb_form_pill_close {
242
- color: mix($active_dark, $card_light, 90%);
243
- &:hover {
244
- background-color: mix($active_dark, $card_dark, 40%);
245
- }
246
- }
247
- &:hover {
248
- background-color: mix($active_dark, $card_dark, 20%);
249
- }
250
- &:active {
251
- background-color: mix($data_1, $card_dark, 30%);
252
- }
253
- }
254
- @if ($color_name == "data_6") {
255
- background-color: mix($data_6, $card_dark, 10%);
256
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
257
- color: $text_dk_light;
258
- }
259
- .pb_form_pill_close {
260
- color: $text_dk_light;
261
- &:hover {
262
- background-color: mix($text_dk_light, $card_dark, 40%);
263
- }
264
- }
265
- &:hover {
266
- background-color: mix($data_6, $card_dark, 20%);
267
- }
268
- &:active {
269
- background-color: mix($data_6, $card_dark, 30%);
270
- }
271
- }
272
- @if ($color_name == "windows") {
273
- background-color: mix($product_1_highlight, $card_dark, 10%);
274
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
275
- color: $product_1_highlight;
276
- }
277
- .pb_form_pill_close {
278
- color: $product_1_highlight;
279
- &:hover {
280
- background-color: mix($product_1_highlight, $card_dark, 40%);
281
- }
282
- }
283
- &:hover {
284
- background-color: mix($product_1_highlight, $card_dark, 20%);
285
- }
286
- &:active {
287
- background-color: mix($product_1_highlight, $card_dark, 30%);
288
- }
289
- }
290
- @if ($color_name == "siding") {
291
- background-color: mix($product_2_highlight, $card_dark, 10%);
292
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
293
- color: $product_2_highlight;
294
- }
295
- .pb_form_pill_close {
296
- color: $product_2_highlight;
297
- &:hover {
298
- background-color: mix($product_2_highlight, $card_dark, 40%);
299
- }
300
- }
301
- &:hover {
302
- background-color: mix($product_2_highlight, $card_dark, 20%);
303
- }
304
- &:active {
305
- background-color: mix($product_2_highlight, $card_dark, 30%);
306
- }
307
- }
308
- @if ($color_name == "roofing") {
309
- background-color: mix($product_5_highlight, $card_dark, 10%);
310
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
311
- color: $product_5_highlight;
312
- }
313
- .pb_form_pill_close {
314
- color: $product_5_highlight;
315
- &:hover {
316
- background-color: mix($product_5_highlight, $card_dark, 40%);
317
- }
318
- }
319
- &:hover {
320
- background-color: mix($product_5_highlight, $card_dark, 20%);
321
- }
322
- &:active {
323
- background-color: mix($product_5_highlight, $card_dark, 30%);
324
- }
325
- }
326
- @if ($color_name == "doors") {
327
- background-color: mix($product_3_highlight, $card_dark, 10%);
328
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
329
- color: $product_3_highlight;
330
- }
331
- .pb_form_pill_close {
332
- color: $product_3_highlight;
333
- &:hover {
334
- background-color: mix($product_3_highlight, $card_dark, 40%);
335
- }
336
- }
337
- &:hover {
338
- background-color: mix($product_3_highlight, $card_dark, 20%);
339
- }
340
- &:active {
341
- background-color: mix($product_3_highlight, $card_dark, 30%);
342
- }
343
- }
344
- @if ($color_name == "gutters") {
345
- background-color: mix($product_6_highlight, $card_dark, 10%);
346
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
347
- color: $product_6_highlight;
348
- }
349
- .pb_form_pill_close {
350
- color: $product_6_highlight;
351
- &:hover {
352
- background-color: mix($product_6_highlight, $card_dark, 40%);
353
- }
354
- }
355
- &:hover {
356
- background-color: mix($product_6_highlight, $card_dark, 20%);
357
- }
358
- &:active {
359
- background-color: mix($product_6_highlight, $card_dark, 30%);
360
- }
361
- }
362
- @if ($color_name == "solar") {
363
- background-color: mix($product_4_highlight, $card_dark, 10%);
364
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
365
- color: $product_4_highlight;
366
- }
367
- .pb_form_pill_close {
368
- color: $product_4_highlight;
369
- &:hover {
370
- background-color: mix($product_4_highlight, $card_dark, 40%);
371
- }
372
- }
373
- &:hover {
374
- background-color: mix($product_4_highlight, $card_dark, 20%);
375
- }
376
- &:active {
377
- background-color: mix($product_4_highlight, $card_dark, 30%);
378
- }
379
- }
380
- @if ($color_name == "insulation") {
381
- background-color: mix($product_7_highlight, $card_dark, 10%);
382
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
383
- color: $product_7_highlight;
384
- }
385
- .pb_form_pill_close {
386
- color: $product_7_highlight;
387
- &:hover {
388
- background-color: mix($product_7_highlight, $card_dark, 40%);
389
- }
390
- }
391
- &:hover {
392
- background-color: mix($product_7_highlight, $card_dark, 20%);
393
- }
394
- &:active {
395
- background-color: mix($product_7_highlight, $card_dark, 30%);
396
- }
397
- }
398
- @if ($color_name == "accessories") {
399
- background-color: mix($product_8_highlight, $card_dark, 10%);
400
- .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
401
- color: $text_dk_light;
402
- }
403
- .pb_form_pill_close {
404
- color: $text_dk_light;
405
- &:hover {
406
- background-color: mix($product_8_highlight, $card_dark, 40%);
407
- }
408
- }
409
- &:hover {
410
- background-color: mix($product_8_highlight, $card_dark, 20%);
411
- }
412
- &:active {
413
- background-color: mix($product_8_highlight, $card_dark, 30%);
414
- }
415
- }
416
194
  }
417
195
  }
418
196
  }
@@ -17,7 +17,7 @@ type FormPillProps = {
17
17
  avatarUrl?: string,
18
18
  size?: string,
19
19
  textTransform?: 'none' | 'lowercase',
20
- color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
20
+ color?: "primary" | "neutral",
21
21
  data?: {[key: string]: string},
22
22
  tabIndex?: number,
23
23
  icon?: string,
@@ -6,7 +6,6 @@ examples:
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
8
  - form_pill_icon: Form Pill Icon
9
- - form_pill_colors: Form Pill Colors
10
9
 
11
10
  react:
12
11
  - form_pill_user: Form Pill User
@@ -14,4 +13,3 @@ examples:
14
13
  - form_pill_tag: Form Pill Tag
15
14
  - form_pill_example: Example
16
15
  - form_pill_icon: Form Pill Icon
17
- - form_pill_colors: Form Pill Colors
@@ -3,4 +3,3 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
3
3
  export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
- export { default as FormPillColors } from './_form_pill_colors.jsx'
@@ -12,7 +12,7 @@ module Playbook
12
12
  values: %w[none lowercase],
13
13
  default: "none"
14
14
  prop :color, type: Playbook::Props::Enum,
15
- values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
15
+ values: %w[primary neutral],
16
16
  default: "primary"
17
17
  prop :tabindex
18
18
  prop :icon
@@ -9,7 +9,7 @@ module Playbook
9
9
  prop :border, type: Playbook::Props::Boolean,
10
10
  default: false
11
11
  prop :fixed_width, type: Playbook::Props::Boolean,
12
- default: true
12
+ default: false
13
13
  prop :flip, type: Playbook::Props::Enum,
14
14
  values: ["horizontal", "vertical", "both", nil],
15
15
  default: nil
@@ -34,7 +34,6 @@ type MultiLevelSelectProps = {
34
34
  onSelect?: (prop: { [key: string]: any }) => void
35
35
  selectedIds?: string[]
36
36
  variant?: "multi" | "single"
37
- pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
38
37
  } & GlobalProps
39
38
 
40
39
  const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -51,8 +50,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
51
50
  treeData,
52
51
  onSelect = () => null,
53
52
  selectedIds,
54
- variant = "multi",
55
- pillColor = "primary"
53
+ variant = "multi"
56
54
  } = props
57
55
 
58
56
  const ariaProps = buildAriaProps(aria)
@@ -469,7 +467,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
469
467
  inputDisplay === "pills"
470
468
  ? returnedArray.map((item, index) => (
471
469
  <FormPill
472
- color={pillColor}
473
470
  key={index}
474
471
  onClick={(event: any) => handlePillClose(event, item)}
475
472
  text={item.label}
@@ -482,7 +479,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
482
479
  inputDisplay === "pills"
483
480
  ? defaultReturn.map((item, index) => (
484
481
  <FormPill
485
- color={pillColor}
486
482
  key={index}
487
483
  onClick={(event: any) => handlePillClose(event, item)}
488
484
  text={item.label}
@@ -6,7 +6,6 @@ examples:
6
6
  - multi_level_select_return_all_selected: Return All Selected
7
7
  - multi_level_select_selected_ids: Selected Ids
8
8
  - multi_level_select_with_form: With Form
9
- - multi_level_select_color: With Pills (Custom Color)
10
9
 
11
10
  react:
12
11
  - multi_level_select_default: Default
@@ -14,4 +13,3 @@ examples:
14
13
  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
15
14
  - multi_level_select_return_all_selected: Return All Selected
16
15
  - multi_level_select_selected_ids_react: Selected Ids
17
- - multi_level_select_color: With Pills (Custom Color)
@@ -3,4 +3,3 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
3
3
  export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
5
  export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
6
- export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
@@ -19,9 +19,6 @@ module Playbook
19
19
  prop :variant, type: Playbook::Props::Enum,
20
20
  values: %w[multi single],
21
21
  default: "multi"
22
- prop :pill_color, type: Playbook::Props::Enum,
23
- values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
24
- default: "primary"
25
22
 
26
23
  def classname
27
24
  generate_classname("pb_multi_level_select")
@@ -37,7 +34,6 @@ module Playbook
37
34
  selectedIds: selected_ids,
38
35
  input_name: input_name,
39
36
  variant: variant,
40
- pillColor: pill_color,
41
37
  }
42
38
  end
43
39
  end
@@ -9,7 +9,7 @@ export default class PbRadio extends PbEnhancedElement {
9
9
  }
10
10
 
11
11
  connect() {
12
- const radioWrapperElement = this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR)
12
+ const radioWrapperElement = this.element.querySelector(RADIO_WRAPPER_SELECTOR)
13
13
  radioWrapperElement.addEventListener("click", () => {
14
14
  this.element.querySelector("input[type='radio']").click()
15
15
  })
@@ -1,23 +1,25 @@
1
1
  <% if object.custom_children %>
2
- <%= pb_rails("flex", props: {
3
- aria: object.aria,
4
- align: "center",
5
- class: object.classname,
6
- cursor: "pointer",
7
- data: object.data,
8
- **combined_html_options
9
- }) do %>
10
- <%= content_tag(:label,
11
- 'data-pb-radio-children': 'true',
12
- checked: object.checked,
2
+ <div data-pb-radio-children="true">
3
+ <%= pb_rails("flex", props: {
4
+ aria: object.aria,
5
+ align: "center",
13
6
  class: object.classname,
14
- id: object.id,
15
- value: object.value) do %>
16
- <%= input %>
17
- <span class="pb_radio_button"></span>
7
+ cursor: "pointer",
8
+ **combined_html_options
9
+ }) do %>
10
+ <%= content_tag(:label,
11
+ checked: object.checked,
12
+ class: object.classname,
13
+ data: object.data,
14
+ id: object.id,
15
+ value: object.value,
16
+ **combined_html_options) do %>
17
+ <%= input %>
18
+ <span class="pb_radio_button"></span>
19
+ <% end %>
20
+ <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
18
21
  <% end %>
19
- <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
20
- <% end %>
22
+ </div>
21
23
  <% else %>
22
24
  <%= content_tag(:label,
23
25
  aria: object.aria,
@@ -107,20 +107,4 @@ test('should pass className prop', () => {
107
107
 
108
108
  const kit = screen.getByTestId('typeahead-test')
109
109
  expect(kit).toHaveClass(className)
110
- })
111
-
112
- test('typeahead with colored pills', () => {
113
- render(
114
- <Typeahead
115
- data={{ testid: 'pills-color-test' }}
116
- defaultValue={[options[0]]}
117
- isMulti
118
- options={options}
119
- pillColor="neutral"
120
- />
121
- )
122
-
123
- const kit = screen.getByTestId('pills-color-test')
124
- const pill = kit.querySelector(".pb_form_pill_kit_neutral")
125
- expect(pill).toBeInTheDocument()
126
110
  })
@@ -45,14 +45,12 @@ type TypeaheadProps = {
45
45
  getOptionLabel?: string | (() => any),
46
46
  getOptionValue?: string | (() => any),
47
47
  name?: string,
48
- pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
49
48
  } & GlobalProps
50
49
 
51
50
  export type SelectValueType = {
52
51
  label: string,
53
52
  value: string,
54
53
  imageUrl?: string,
55
- pillColor?: string,
56
54
  }
57
55
 
58
56
  type TagOnChangeValues = {
@@ -78,7 +76,6 @@ const Typeahead = ({
78
76
  htmlOptions = {},
79
77
  id,
80
78
  loadOptions = noop,
81
- pillColor,
82
79
  ...props
83
80
  }: TypeaheadProps) => {
84
81
  const selectProps = {
@@ -108,7 +105,6 @@ const Typeahead = ({
108
105
  onCreateOption: null as null,
109
106
  plusIcon: false,
110
107
  onMultiValueClick: (_option: SelectValueType): any => undefined,
111
- pillColor: pillColor,
112
108
  ...props,
113
109
  }
114
110
 
@@ -8,7 +8,6 @@ import { SelectValueType } from '../_typeahead'
8
8
  type Props = {
9
9
  data: SelectValueType,
10
10
  multiValueTemplate: any,
11
- pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
12
11
  removeProps: any,
13
12
  selectProps: any,
14
13
  }
@@ -16,55 +15,48 @@ type Props = {
16
15
  const MultiValue = (props: Props) => {
17
16
  const { removeProps } = props
18
17
  const { imageUrl, label } = props.data
19
- const { dark, multiKit, pillColor } = props.selectProps
18
+ const { multiKit } = props.selectProps
20
19
 
21
20
  const formPillProps = {
22
21
  marginRight: 'xs',
23
22
  name: label,
24
23
  avatarUrl: '',
25
- dark,
26
24
  }
27
25
 
28
26
  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
29
27
 
30
28
  return (
31
29
  <components.MultiValueContainer
32
- className="text_input_multivalue_container"
33
- {...props}
30
+ className="text_input_multivalue_container"
31
+ {...props}
34
32
  >
35
33
  {multiKit === 'badge' &&
36
34
  <Badge
37
- closeProps={removeProps}
38
- removeIcon
39
- text={label}
40
- variant="primary"
35
+ closeProps={removeProps}
36
+ removeIcon
37
+ text={label}
38
+ variant="primary"
41
39
  />
42
40
  }
43
41
 
44
42
  {multiKit !== 'badge' && imageUrl &&
45
43
  <FormPill
46
- avatarUrl={imageUrl}
47
- closeProps={removeProps}
48
- color={pillColor}
49
- dark={dark}
50
- marginRight="xs"
51
- name={label}
52
- size={multiKit === 'smallPill' ? 'small' : ''}
53
- text=''
54
- {...props}
44
+ avatarUrl={imageUrl}
45
+ closeProps={removeProps}
46
+ marginRight="xs"
47
+ name={label}
48
+ size={multiKit === 'smallPill' ? 'small' : ''}
49
+ text=''
55
50
  />
56
51
  }
57
52
 
58
53
  {multiKit !== 'badge' && !imageUrl &&
59
54
  <FormPill
60
- closeProps={removeProps}
61
- color={pillColor}
62
- dark={dark}
63
- marginRight="xs"
64
- name=''
65
- size={multiKit === 'smallPill' ? 'small' : ''}
66
- text={label}
67
- {...props}
55
+ closeProps={removeProps}
56
+ marginRight="xs"
57
+ name=''
58
+ size={multiKit === 'smallPill' ? 'small' : ''}
59
+ text={label}
68
60
  />
69
61
  }
70
62
  </components.MultiValueContainer>
@@ -9,7 +9,6 @@ examples:
9
9
  - typeahead_inline: Inline
10
10
  - typeahead_multi_kit: Multi Kit Options
11
11
  - typeahead_error_state: Error State
12
- - typeahead_with_pills_color: With Pills (Custom Color)
13
12
 
14
13
  react:
15
14
  - typeahead_default: Default
@@ -24,4 +23,3 @@ examples:
24
23
  - typeahead_async_createable: Createable (+ Async Data)
25
24
  - typeahead_error_state: Error State
26
25
  - typeahead_custom_menu_list: Custom MenuList
27
- - typeahead_with_pills_color: With Pills (Custom Color)