playbook_ui 14.8.0.pre.rc.4 → 14.8.0.pre.rc.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -1
  3. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb +42 -0
  4. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx +44 -0
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md +1 -0
  6. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  8. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +17 -1
  9. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +43 -1
  10. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +6 -2
  11. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +94 -0
  12. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +180 -0
  13. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -0
  14. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +5 -3
  15. data/app/pb_kits/playbook/pb_timeline/docs/index.js +2 -0
  16. data/app/pb_kits/playbook/pb_timeline/timeline.rb +11 -1
  17. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +4 -4
  18. data/app/pb_kits/playbook/utilities/_hover.scss +27 -29
  19. data/app/pb_kits/playbook/utilities/globalProps.ts +2 -2
  20. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +79 -0
  21. data/dist/chunks/{_typeahead-DEskmS_o.js → _typeahead-DM5bD2ck.js} +2 -2
  22. data/dist/chunks/{_weekday_stacked-DBuVOrwj.js → _weekday_stacked-RuOgC2uD.js} +2 -2
  23. data/dist/chunks/{lib-DpxYMiKe.js → lib-GRGYd9YR.js} +1 -1
  24. data/dist/chunks/{pb_form_validation-LqRlnmi6.js → pb_form_validation-CS6rgdtE.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/hover.rb +1 -1
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +13 -6
data/app/pb_kits/playbook/utilities/_hover.scss CHANGED
@@ -21,34 +21,32 @@
21
21
  }
22
22
 
23
23
  @mixin hover-color-classes($colors-list) {
24
- @each $name, $color in $colors-list {
25
- .hover_background_#{"" + $name}:hover,
26
- .group_hover:hover .group_hover.hover_background_#{"" + $name} {
27
- background-color: $color !important;
28
- transition: background-color $transition-speed ease;
29
- }
30
- .hover_color_#{"" + $name}:hover,
31
- .group_hover:hover .group_hover.hover_color_#{"" + $name} {
32
- color: $color !important;
33
- transition: color $transition-speed ease;
24
+ @each $name, $color in $colors-list {
25
+ .hover_background-#{"" + $name}:hover {
26
+ background-color: $color !important;
27
+ transition: background-color $transition-speed ease;
28
+ }
29
+ .hover_color-#{"" + $name}:hover {
30
+ color: $color !important;
31
+ transition: color $transition-speed ease;
32
+ }
34
33
  }
35
34
  }
36
- }
37
-
38
- @include hover-scale-classes($scales);
39
- @include hover-shadow-classes($box_shadows);
40
- @include hover-color-classes($product_colors);
41
- @include hover-color-classes($status_colors);
42
- @include hover-color-classes($data_colors);
43
- @include hover-color-classes($shadow_colors);
44
- @include hover-color-classes($colors);
45
- @include hover-color-classes($interface_colors);
46
- @include hover-color-classes($main_colors);
47
- @include hover-color-classes($background_colors);
48
- @include hover-color-classes($card_colors);
49
- @include hover-color-classes($active_colors);
50
- @include hover-color-classes($action_colors);
51
- @include hover-color-classes($hover_colors);
52
- @include hover-color-classes($border_colors);
53
- @include hover-color-classes($text_colors);
54
- @include hover-color-classes($category_colors);
35
+
36
+ @include hover-scale-classes($scales);
37
+ @include hover-shadow-classes($box_shadows);
38
+ @include hover-color-classes($product_colors);
39
+ @include hover-color-classes($status_colors);
40
+ @include hover-color-classes($data_colors);
41
+ @include hover-color-classes($shadow_colors);
42
+ @include hover-color-classes($colors);
43
+ @include hover-color-classes($interface_colors);
44
+ @include hover-color-classes($main_colors);
45
+ @include hover-color-classes($background_colors);
46
+ @include hover-color-classes($card_colors);
47
+ @include hover-color-classes($active_colors);
48
+ @include hover-color-classes($action_colors);
49
+ @include hover-color-classes($hover_colors);
50
+ @include hover-color-classes($border_colors);
51
+ @include hover-color-classes($text_colors);
52
+ @include hover-color-classes($category_colors);
data/app/pb_kits/playbook/utilities/globalProps.ts CHANGED
@@ -230,9 +230,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
230
230
  let css = '';
231
231
  if (!hover) return css;
232
232
  css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
233
- css += hover.background ? `hover_background_${hover.background } ` : '';
233
+ css += hover.background ? `hover_background-${hover.background } ` : '';
234
234
  css += hover.scale ? `hover_scale_${hover.scale} ` : '';
235
- css += hover.color ? `hover_color_${hover.color } ` : '';
235
+ css += hover.color ? `hover_color-${hover.color } ` : '';
236
236
  return css;
237
237
  },
238
238
 
data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js ADDED
@@ -0,0 +1,79 @@
1
+ import React from 'react';
2
+ import { render, screen } from '../../test-utils';
3
+ import Body from '../../../pb_body/_body';
4
+
5
+ const testSubject = 'body';
6
+
7
+ test('Hover Props: returns proper class name', () => {
8
+ const testIdColor = `${testSubject}-hover-color-red`;
9
+ render(
10
+ <Body
11
+ data={{ testid: testIdColor }}
12
+ hover={{ color: 'red' }}
13
+ text="Hi"
14
+ />
15
+ );
16
+
17
+ let kit = screen.getByTestId(testIdColor);
18
+ let expectedClassName = `hover_color-red`;
19
+ expect(kit).toHaveClass(expectedClassName);
20
+
21
+ const testIdBackground = `${testSubject}-hover-background-blue`;
22
+ render(
23
+ <Body
24
+ data={{ testid: testIdBackground }}
25
+ hover={{ background: 'blue' }}
26
+ text="Hi"
27
+ />
28
+ );
29
+
30
+ kit = screen.getByTestId(testIdBackground);
31
+ expectedClassName = `hover_background-blue`;
32
+ expect(kit).toHaveClass(expectedClassName);
33
+
34
+ const testIdShadow = `${testSubject}-hover-shadow-deep`;
35
+ render(
36
+ <Body
37
+ data={{ testid: testIdShadow }}
38
+ hover={{ shadow: 'deep' }}
39
+ text="Hi"
40
+ />
41
+ );
42
+
43
+ kit = screen.getByTestId(testIdShadow);
44
+ expectedClassName = `hover_shadow_deep`;
45
+ expect(kit).toHaveClass(expectedClassName);
46
+
47
+ const testIdScale = `${testSubject}-hover-scale`;
48
+ render(
49
+ <Body
50
+ data={{ testid: testIdScale }}
51
+ hover={{ scale: 'xl' }}
52
+ text="Test"
53
+ />
54
+ );
55
+
56
+ kit = screen.getByTestId(testIdScale);
57
+ expectedClassName = `hover_scale_xl`;
58
+ expect(kit).toHaveClass(expectedClassName);
59
+
60
+ const testIdMultiple = `${testSubject}-hover-multiple`;
61
+ render(
62
+ <Body
63
+ data={{ testid: testIdMultiple }}
64
+ hover={{
65
+ color: 'green',
66
+ background: 'error',
67
+ shadow: 'deeper',
68
+ scale: 'xl',
69
+ }}
70
+ text="Hi"
71
+ />
72
+ );
73
+
74
+ kit = screen.getByTestId(testIdMultiple);
75
+ expect(kit).toHaveClass('hover_color-green');
76
+ expect(kit).toHaveClass('hover_background-error');
77
+ expect(kit).toHaveClass('hover_shadow_deeper');
78
+ expect(kit).toHaveClass('hover_scale_xl');
79
+ });