playbook_ui 12.39.0 → 13.0.0.pre.alpha.PLAY966collapsiblenav41128

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +18 -8
  4. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +45 -39
  5. data/app/pb_kits/playbook/pb_kit/dateTime.ts +204 -1
  6. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +16 -14
  7. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +86 -115
  8. data/app/pb_kits/playbook/pb_nav/_collapsible_trail_mixin.scss +14 -0
  9. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +58 -57
  10. data/app/pb_kits/playbook/pb_nav/_item.tsx +234 -138
  11. data/app/pb_kits/playbook/pb_nav/_nav.scss +38 -0
  12. data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
  13. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
  14. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +50 -58
  15. data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +4 -1
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +4 -4
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +4 -10
  19. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +5 -1
  20. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +12 -12
  21. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx +13 -1
  22. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -1
  23. data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx +4 -1
  24. data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx +4 -1
  25. data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx +4 -1
  26. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -5
  27. data/app/pb_kits/playbook/pb_nav/item.html.erb +19 -12
  28. data/app/pb_kits/playbook/pb_nav/item.rb +55 -14
  29. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
  30. data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
  31. data/dist/playbook-rails.js +7 -279
  32. data/lib/playbook/version.rb +2 -2
  33. metadata +9 -8
  34. data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
@@ -3,74 +3,43 @@
3
3
  @import "../tokens/border_radius";
4
4
  @import "../tokens/titles";
5
5
  @import "../tokens/typography";
6
- @import "./mixins";
6
+ @import "./collapsible_trail_mixin";
7
7
 
8
- [class^="pb_nav_list"] {
9
- .font_size_small {
10
- .pb_nav_list_item_text,
11
- .pb_nav_list_item_text_collapsible {
12
- font-size: $font_small !important;
13
- }
14
- }
15
-
16
- .font_bolder {
17
- .pb_nav_list_item_text {
18
- @include pb_title_4;
19
- }
20
- .pb_collapsible_main_kit {
21
- .pb_nav_list_item_text_collapsible {
22
- @include pb_title_4;
23
- font-weight: $bolder !important;
24
- }
25
- }
26
- }
27
-
28
- .font_bold {
29
- .pb_nav_list_item_text {
30
- font-weight: $bold;
31
- }
32
- .pb_collapsible_main_kit {
33
- .pb_nav_list_item_text_collapsible {
34
- font-weight: $bold !important;
35
- }
36
- }
37
- }
38
-
39
- .font_regular {
40
- .pb_nav_list_item_text {
41
- font-weight: $regular;
42
- }
43
- .pb_collapsible_main_kit {
44
- .pb_nav_list_item_text_collapsible {
45
- font-weight: $regular !important;
46
- }
47
- }
8
+ [class^="pb_nav_list"][class*="_vertical"] {
9
+ .pb_collapsible_main_kit,
10
+ .pb_collapsible_content_kit,
11
+ .pb_collapsible_kit {
12
+ padding: 0 !important;
48
13
  }
49
14
 
50
15
  //styling for default variant with collapsible
51
16
  &[class*="_normal"] {
52
- [class*="pb_collapsible_nav_item"] {
17
+ .pb_collapsible_kit {
18
+ &[class*="_active"] {
19
+ background-color: unset;
20
+ }
21
+ &[class*="_collapsible_trail"] {
22
+ .pb_collapsible_content_kit {
23
+ &::after {
24
+ left: 0px !important;
25
+ }
26
+ }
27
+ }
53
28
  .pb_collapsible_content_kit {
54
29
  margin-left: $space_lg + 3;
55
30
  }
56
31
  .pb_collapsible_main_kit {
57
32
  border-radius: unset;
33
+ margin: 0;
58
34
  }
59
35
  &[class*="_active"] {
60
36
  .pb_collapsible_main_kit {
61
37
  background-color: $active_light;
62
38
  }
63
- .pb_nav_list_item_link {
64
- border-color: transparent !important;
65
- .pb_nav_list_item_text {
66
- color: unset !important;
67
- font-weight: $regular !important;
68
- }
69
- }
70
39
  }
71
-
72
- &.dark {
73
- border-color: $border_dark;
40
+ }
41
+ &.dark {
42
+ .pb_collapsible_kit {
74
43
  .pb_collapsible_main_kit:hover {
75
44
  .pb_nav_list_item_text_collapsible {
76
45
  color: $white !important;
@@ -91,16 +60,17 @@
91
60
 
92
61
  //styling bold variant to work with collapsible
93
62
  &[class*="_bold"] {
94
- [class*="pb_collapsible_nav_item"] {
63
+ .pb_collapsible_kit {
95
64
  &[class*="_active"] {
65
+ background-color: unset;
96
66
  .pb_collapsible_main_kit {
97
- background-color: $primary !important;
67
+ background-color: $primary;
98
68
  border-radius: $border_rad_heavier;
99
69
  .pb_nav_list_item_text_collapsible,
100
70
  .pb_nav_list_item_icon_collapsible,
101
71
  .icon_wrapper,
102
72
  .pb_icon_kit {
103
- color: $white !important;
73
+ color: $white;
104
74
  }
105
75
  }
106
76
  .pb_nav_list_item_link {
@@ -109,11 +79,28 @@
109
79
  &:hover {
110
80
  background-color: rgba($primary, 0.03) !important;
111
81
  .pb_nav_list_item_text {
112
- color: $primary !important;
82
+ color: $primary;
113
83
  }
114
84
  }
115
85
  .pb_nav_list_item_text {
116
- font-weight: $regular !important;
86
+ font-weight: $regular;
87
+ }
88
+ }
89
+ .icon_wrapper:hover {
90
+ background-color: mix($primary, $card_light, 40%);
91
+ }
92
+ }
93
+ }
94
+ &.dark {
95
+ .pb_collapsible_kit {
96
+ &[class*="_active"] {
97
+ .pb_collapsible_main_kit {
98
+ background-color: $primary;
99
+ }
100
+ .pb_nav_list_item_link {
101
+ &:hover {
102
+ background-color: rgba($white, $opacity_1) !important;
103
+ }
117
104
  }
118
105
  }
119
106
  }
@@ -122,33 +109,30 @@
122
109
 
123
110
  //styling for subtle variant with collapsible
124
111
  &[class*="_subtle"] {
125
- [class*="pb_collapsible_nav_item"] {
112
+ .pb_collapsible_kit {
126
113
  &[class*="_active"] {
114
+ background-color: unset;
127
115
  .pb_collapsible_main_kit {
128
- background-color: $primary !important;
116
+ background-color: $active_light;
129
117
  border-radius: $border_rad_heavier;
130
118
  .pb_nav_list_item_text_collapsible,
131
- .pb_nav_list_item_icon_collapsible,
132
- .icon_wrapper,
133
- .pb_icon_kit {
134
- color: $white !important;
119
+ .pb_nav_list_item_icon_collapsible {
120
+ color: $primary;
135
121
  }
136
122
  }
137
-
138
123
  &:hover {
139
124
  background-color: unset;
140
125
  }
141
- .pb_collapsible_main_kit:hover {
142
- .pb_nav_list_item_text_collapsible {
143
- color: $white !important;
144
- }
145
- }
146
-
147
- .icon_wrapper {
148
- &:hover {
149
- background-color: mix($primary, $card_light, 40%);
150
- .pb_icon_kit {
151
- color: $primary !important;
126
+ }
127
+ }
128
+ &.dark {
129
+ .pb_collapsible_kit {
130
+ &[class*="_active"] {
131
+ .pb_collapsible_main_kit {
132
+ background-color: mix($white, $card_dark, 20%) !important;
133
+ .pb_nav_list_item_text_collapsible,
134
+ svg {
135
+ color: $white !important;
152
136
  }
153
137
  }
154
138
  }
@@ -156,16 +140,20 @@
156
140
  }
157
141
  }
158
142
 
159
- [class*="pb_collapsible_nav_item"] {
160
- .pb_nav_list_kit_item {
161
- margin-right: 0px !important;
143
+ .pb_collapsible_kit {
144
+ [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
145
+ margin: 0px;
146
+ &[class*="_active"] {
147
+ background-color: unset;
148
+ box-shadow: unset;
149
+ .pb_nav_list_item_text_collapsible {
150
+ color: unset;
151
+ }
152
+ }
162
153
  }
163
154
 
164
- &[class*="_active"] {
165
- background-color: unset !important;
166
- .pb_nav_list_item_link {
167
- color: unset !important;
168
- }
155
+ &[class*="_collapsible_trail"] {
156
+ @include collapsible_trail_class;
169
157
  }
170
158
 
171
159
  .pb_nav_list_item_link_collapsible {
@@ -175,6 +163,7 @@
175
163
  }
176
164
 
177
165
  .pb_collapsible_main_kit {
166
+ margin: $space_xs ($space_sm - 2px);
178
167
  &:focus-visible {
179
168
  box-shadow: 0px 0px 0px 2px $primary_action;
180
169
  border-radius: $border_rad_heavier;
@@ -194,10 +183,9 @@
194
183
  }
195
184
  }
196
185
 
197
- // vertical line on left of collapsible content
186
+ // indention on left of collapsible content
198
187
  .pb_collapsible_content_kit {
199
- margin-left: $space_sm + 2;
200
- border-left: 1px solid transparent;
188
+ margin-left: $space_lg - 2;
201
189
  }
202
190
 
203
191
  .pb_collapsible_main_kit {
@@ -209,21 +197,11 @@
209
197
  background-color: mix($primary, $card_light, 10%);
210
198
  .pb_nav_list_item_text_collapsible,
211
199
  svg {
212
- color: $primary !important;
200
+ color: $primary;
213
201
  }
214
202
  }
215
203
  }
216
204
 
217
- .pb_collapsible_main_kit,
218
- .pb_collapsible_content_kit,
219
- .pb_collapsible_kit {
220
- padding: 0 !important;
221
- }
222
-
223
- &[class*="_collapsible_trail"] {
224
- @include collapsible_trail_class;
225
- }
226
-
227
205
  .icon_wrapper {
228
206
  border-radius: $border_radius_rounded;
229
207
  width: $space_sm + 3;
@@ -236,22 +214,18 @@
236
214
  background-color: mix($primary, $card_light, 40%);
237
215
  }
238
216
  }
239
-
240
- &.dark {
241
- .pb_nav_list_kit_item {
242
- border-color: $border_dark;
243
- .pb_nav_list_item_text {
244
- color: $text_dk_light !important;
245
- }
246
- }
217
+ }
218
+ &.dark {
219
+ .pb_collapsible_kit {
247
220
  &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
248
221
  .pb_nav_list_item_text {
249
222
  color: $white !important;
250
223
  }
251
224
  }
252
-
253
- .pb_nav_list_item_text_collapsible {
254
- color: $white !important;
225
+ [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
226
+ .pb_nav_list_item_text_collapsible {
227
+ color: $white !important;
228
+ }
255
229
  }
256
230
  .pb_nav_list_item_text {
257
231
  color: $text_dk_light;
@@ -274,15 +248,12 @@
274
248
  .icon_wrapper:hover {
275
249
  background-color: mix($white, $card_dark, 40%);
276
250
  }
277
- &[class*="_active"] {
278
- .icon_wrapper:hover {
279
- background-color: mix($primary, $card_light, 40%);
280
- }
281
- }
282
251
 
283
- &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
252
+ &[class*="_collapsible_trail"] {
284
253
  .pb_collapsible_content_kit {
285
- border-color: $border_dark;
254
+ &::after {
255
+ background-color: $border_dark;
256
+ }
286
257
  }
287
258
  }
288
259
  }
@@ -0,0 +1,14 @@
1
+ @mixin collapsible_trail_class {
2
+ .pb_collapsible_content_kit {
3
+ position: relative;
4
+ &::after {
5
+ content: "";
6
+ position: absolute;
7
+ top: 4px;
8
+ bottom: 4px;
9
+ left: 5px;
10
+ width: 1px;
11
+ background-color: $border_light;
12
+ }
13
+ }
14
+ }
@@ -8,8 +8,8 @@
8
8
 
9
9
  $selector: ".pb_nav_list";
10
10
 
11
- [class^=pb_nav_list][class*=_horizontal] {
12
- ul {
11
+ [class^="pb_nav_list"][class*="_horizontal"] {
12
+ .pb_nav_wrapper {
13
13
  display: flex;
14
14
  align-items: center;
15
15
  padding: 0;
@@ -17,13 +17,13 @@ $selector: ".pb_nav_list";
17
17
  list-style: none;
18
18
  }
19
19
 
20
- [class*=pb_nav_list_kit_item] {
20
+ [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
21
21
  transition-property: border-color;
22
22
  transition-duration: 0.15s;
23
23
  transition-timing-function: $bezier;
24
24
  padding: 0;
25
25
 
26
- [class*=_link] {
26
+ &[class*="_link"] {
27
27
  text-decoration: none;
28
28
  display: flex;
29
29
  align-items: center;
@@ -36,19 +36,19 @@ $selector: ".pb_nav_list";
36
36
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
37
37
  color: $text_lt_default;
38
38
 
39
- [class*=_icon_left] {
39
+ [class*="_icon_left"] {
40
40
  font-size: $font_large;
41
41
  margin-right: $space_sm;
42
42
  color: $text_lt_lighter;
43
43
  }
44
44
 
45
- [class*=_text] {
45
+ [class*="_text"] {
46
46
  font-size: $font_base;
47
- font-weight: $bold;
48
47
  color: $text_lt_default;
48
+ font-weight: $bold;
49
49
  }
50
50
 
51
- @media (hover:hover) {
51
+ @media (hover: hover) {
52
52
  &:hover {
53
53
  color: $primary;
54
54
  #{$selector}_item_icon,
@@ -57,84 +57,85 @@ $selector: ".pb_nav_list";
57
57
  }
58
58
  }
59
59
  }
60
- }
61
- }
62
-
63
- [class*=_active] {
64
- #{$selector}_item_link {
65
- border-color: $primary;
66
-
67
- [class*=_item_icon] {
68
- color: $text_lt_default;
69
- }
70
-
71
- [class*=_item_text] {
72
- color: $text_lt_default;
73
- font-weight: $bold;
60
+ &[class*="_active"] {
61
+ border-color: $primary;
62
+ [class*="_item_icon"] {
63
+ color: $text_lt_default;
64
+ }
65
+ [class*="_item_text"] {
66
+ color: $text_lt_default;
67
+ font-weight: $bold;
68
+ }
69
+ &:hover {
70
+ #{$selector}_item_icon,
71
+ #{$selector}_item_text {
72
+ color: $primary;
73
+ }
74
+ }
74
75
  }
75
76
  }
76
77
  }
77
78
 
78
79
  // Subtle Variant
79
- &[class*=_subtle] {
80
+ &[class*="_subtle"] {
80
81
  @include subtle;
81
82
  // Horizontal Overrides
82
- [class*=pb_nav_list_kit_item] {
83
+ [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
83
84
  margin: 0;
84
- [class*=_item_text]{
85
- font-weight: $regular;
86
- }
87
- }
88
- [class*=_active] {
89
- background-color: $active_light;
90
- &[class*=dark] {
91
- background-color: rgba($white, $opacity_1);
85
+ [class*="_item_text"] {
86
+ font-weight: $regular !important;
92
87
  }
93
- [class*=_item_link] {
94
- [class*=_item_text]{
95
- color: $primary;
88
+ &[class*="_active"] {
89
+ background-color: $active_light;
90
+ &[class*="dark"] {
91
+ background-color: rgba($white, $opacity_1);
92
+ [class*="_item_text"] {
93
+ color: $white !important;
94
+ }
95
+ }
96
+ [class*="_item_text"] {
97
+ color: $primary !important;
96
98
  }
97
99
  }
98
100
  }
99
101
  }
100
102
 
101
103
  // Bold Variant
102
- &[class*=_bold] {
104
+ &[class*="_bold"] {
103
105
  @include bold;
104
106
  // Horizontal Overrides
105
- [class*=pb_nav_list_kit_item] {
107
+ [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
106
108
  margin: 0;
107
- [class*=_item_text]{
109
+ [class*="_item_text"] {
108
110
  font-weight: $regular;
109
111
  }
110
112
  }
111
- [class*=_active] {
112
- [class*=_text] {
113
- color: $white;
113
+ [class*="_active"] {
114
+ [class*="_text"] {
115
+ color: $white !important;
114
116
  }
115
117
  }
116
118
  }
117
119
 
118
- &[class*=dark]{
119
- [class*=pb_nav_list_kit_item]{
120
- [class*=_link]{
121
- border-color: rgba($white, $opacity_3);
122
- }
123
- &[class*=_active] [class*=_link]{
120
+ &[class*="dark"] {
121
+ [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
122
+ border-color: rgba($white, $opacity_3);
123
+ &[class*="_active"] {
124
124
  border-color: $active_dark;
125
- [class*=_text],[class*=_icon]{
125
+ [class*="_text"],
126
+ [class*="_icon"] {
126
127
  color: $text_dk_default;
127
128
  }
128
129
  }
129
- [class*=_link] {
130
- [class*=_text],[class*=_icon]{
131
- color: $text_dk_lighter;
132
- }
133
- &:hover{
134
- background-color: rgba($white, $opacity_1);
135
- [class*=_icon],[class*=_text] {
136
- color: $white;
137
- }
130
+ [class*="_text"],
131
+ [class*="_icon"] {
132
+ color: $text_dk_lighter;
133
+ }
134
+ &:hover {
135
+ background-color: rgba($white, $opacity_1);
136
+ [class*="_icon"],
137
+ [class*="_text"] {
138
+ color: $white !important;
138
139
  }
139
140
  }
140
141
  }