@toptal/picasso-page 2.2.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/PageSidebar/PageSidebar.d.ts.map +1 -1
- package/dist-package/src/PageSidebar/PageSidebar.js +2 -2
- package/dist-package/src/PageSidebar/PageSidebar.js.map +1 -1
- package/dist-package/src/PageTopBar/PageTopBar.d.ts.map +1 -1
- package/dist-package/src/PageTopBar/PageTopBar.js +1 -1
- package/dist-package/src/PageTopBar/PageTopBar.js.map +1 -1
- package/dist-package/src/SidebarItem/SidebarItemHeader.d.ts.map +1 -1
- package/dist-package/src/SidebarItem/SidebarItemHeader.js +58 -15
- package/dist-package/src/SidebarItem/SidebarItemHeader.js.map +1 -1
- package/dist-package/src/SidebarItem/styles.d.ts +1 -1
- package/dist-package/src/SidebarItem/styles.d.ts.map +1 -1
- package/dist-package/src/SidebarItem/styles.js +1 -69
- package/dist-package/src/SidebarItem/styles.js.map +1 -1
- package/dist-package/src/SidebarLogo/SidebarLogo.d.ts.map +1 -1
- package/dist-package/src/SidebarLogo/SidebarLogo.js +1 -1
- package/dist-package/src/SidebarLogo/SidebarLogo.js.map +1 -1
- package/dist-package/src/SidebarMenu/SidebarMenu.d.ts.map +1 -1
- package/dist-package/src/SidebarMenu/SidebarMenu.js +3 -9
- package/dist-package/src/SidebarMenu/SidebarMenu.js.map +1 -1
- package/dist-package/src/TopBarItem/TopBarItem.d.ts.map +1 -1
- package/dist-package/src/TopBarItem/TopBarItem.js +15 -9
- package/dist-package/src/TopBarItem/TopBarItem.js.map +1 -1
- package/dist-package/src/TopBarMenu/TopBarMenu.d.ts.map +1 -1
- package/dist-package/src/TopBarMenu/TopBarMenu.js +4 -6
- package/dist-package/src/TopBarMenu/TopBarMenu.js.map +1 -1
- package/package.json +19 -18
- package/src/PageAutocomplete/__snapshots__/test.tsx.snap +5 -19
- package/src/PageSidebar/PageSidebar.tsx +1 -3
- package/src/PageSidebar/__snapshots__/test.tsx.snap +9 -9
- package/src/PageTopBar/PageTopBar.tsx +1 -5
- package/src/PageTopBar/__snapshots__/test.tsx.snap +13 -13
- package/src/PageTopBarMenu/__snapshots__/test.tsx.snap +3 -3
- package/src/PageTopBarMenu/test.tsx +3 -3
- package/src/SidebarItem/SidebarItemHeader.tsx +90 -26
- package/src/SidebarItem/__snapshots__/test.tsx.snap +79 -79
- package/src/SidebarItem/styles.ts +1 -69
- package/src/SidebarLogo/SidebarLogo.tsx +0 -2
- package/src/SidebarLogo/__snapshots__/test.tsx.snap +1 -1
- package/src/SidebarMenu/SidebarMenu.tsx +3 -12
- package/src/SidebarMenu/__snapshots__/test.tsx.snap +2 -2
- package/src/TopBarItem/TopBarItem.tsx +25 -10
- package/src/TopBarMenu/TopBarMenu.tsx +1 -7
- package/dist-package/src/SidebarMenu/styles.d.ts +0 -3
- package/dist-package/src/SidebarMenu/styles.d.ts.map +0 -1
- package/dist-package/src/SidebarMenu/styles.js +0 -20
- package/dist-package/src/SidebarMenu/styles.js.map +0 -1
- package/dist-package/src/TopBarItem/styles.d.ts +0 -4
- package/dist-package/src/TopBarItem/styles.d.ts.map +0 -1
- package/dist-package/src/TopBarItem/styles.js +0 -46
- package/dist-package/src/TopBarItem/styles.js.map +0 -1
- package/dist-package/src/TopBarMenu/styles.d.ts +0 -3
- package/dist-package/src/TopBarMenu/styles.d.ts.map +0 -1
- package/dist-package/src/TopBarMenu/styles.js +0 -11
- package/dist-package/src/TopBarMenu/styles.js.map +0 -1
- package/src/SidebarMenu/styles.ts +0 -21
- package/src/TopBarItem/styles.ts +0 -49
- package/src/TopBarMenu/styles.ts +0 -13
|
@@ -6,19 +6,19 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
6
6
|
class="Picasso-root"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="
|
|
9
|
+
class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
|
|
10
10
|
>
|
|
11
11
|
<div
|
|
12
12
|
class="PageSidebar-wrapper PageSidebar-sticky"
|
|
13
13
|
>
|
|
14
14
|
<div
|
|
15
|
-
class="
|
|
15
|
+
class="flex flex-col PageSidebar-scrollableContent"
|
|
16
16
|
>
|
|
17
17
|
<div
|
|
18
18
|
class="PageSidebar-spacer"
|
|
19
19
|
/>
|
|
20
20
|
<ul
|
|
21
|
-
class="
|
|
21
|
+
class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
|
|
22
22
|
role="menu"
|
|
23
23
|
tabindex="-1"
|
|
24
24
|
>
|
|
@@ -37,24 +37,24 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
37
37
|
>
|
|
38
38
|
<li
|
|
39
39
|
aria-disabled="false"
|
|
40
|
-
class="
|
|
40
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
|
|
41
41
|
role="menuitem"
|
|
42
42
|
tabindex="0"
|
|
43
43
|
>
|
|
44
44
|
<div
|
|
45
|
-
class="
|
|
45
|
+
class="flex flex-1 max-w"
|
|
46
46
|
>
|
|
47
47
|
<div
|
|
48
|
-
class="
|
|
48
|
+
class="flex flex-col flex-1 min-w"
|
|
49
49
|
>
|
|
50
50
|
<div
|
|
51
|
-
class="
|
|
51
|
+
class="flex items-center"
|
|
52
52
|
>
|
|
53
53
|
<div
|
|
54
|
-
class="
|
|
54
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
55
55
|
>
|
|
56
56
|
<div
|
|
57
|
-
class="
|
|
57
|
+
class="items-center flex PicassoSidebarItemContent-noWrap"
|
|
58
58
|
>
|
|
59
59
|
<p
|
|
60
60
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -92,33 +92,33 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
92
92
|
role="region"
|
|
93
93
|
>
|
|
94
94
|
<div
|
|
95
|
-
class="
|
|
95
|
+
class="flex p-0"
|
|
96
96
|
>
|
|
97
97
|
<ul
|
|
98
|
-
class="
|
|
98
|
+
class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
|
|
99
99
|
role="menu"
|
|
100
100
|
tabindex="-1"
|
|
101
101
|
>
|
|
102
102
|
<li
|
|
103
103
|
aria-disabled="false"
|
|
104
|
-
class="
|
|
104
|
+
class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
105
105
|
role="menuitem"
|
|
106
106
|
tabindex="0"
|
|
107
107
|
>
|
|
108
108
|
<div
|
|
109
|
-
class="
|
|
109
|
+
class="flex flex-1 max-w"
|
|
110
110
|
>
|
|
111
111
|
<div
|
|
112
|
-
class="
|
|
112
|
+
class="flex flex-col flex-1 min-w"
|
|
113
113
|
>
|
|
114
114
|
<div
|
|
115
|
-
class="
|
|
115
|
+
class="flex items-center"
|
|
116
116
|
>
|
|
117
117
|
<div
|
|
118
|
-
class="
|
|
118
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
119
119
|
>
|
|
120
120
|
<div
|
|
121
|
-
class="
|
|
121
|
+
class="items-center flex PicassoSidebarItemContent-noWrap"
|
|
122
122
|
>
|
|
123
123
|
<p
|
|
124
124
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -152,19 +152,19 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
152
152
|
class="Picasso-root"
|
|
153
153
|
>
|
|
154
154
|
<div
|
|
155
|
-
class="
|
|
155
|
+
class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
|
|
156
156
|
>
|
|
157
157
|
<div
|
|
158
158
|
class="PageSidebar-wrapper PageSidebar-sticky"
|
|
159
159
|
>
|
|
160
160
|
<div
|
|
161
|
-
class="
|
|
161
|
+
class="flex flex-col PageSidebar-scrollableContent"
|
|
162
162
|
>
|
|
163
163
|
<div
|
|
164
164
|
class="PageSidebar-spacer"
|
|
165
165
|
/>
|
|
166
166
|
<ul
|
|
167
|
-
class="
|
|
167
|
+
class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
|
|
168
168
|
role="menu"
|
|
169
169
|
tabindex="-1"
|
|
170
170
|
>
|
|
@@ -183,24 +183,24 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
183
183
|
>
|
|
184
184
|
<li
|
|
185
185
|
aria-disabled="false"
|
|
186
|
-
class="
|
|
186
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
|
|
187
187
|
role="menuitem"
|
|
188
188
|
tabindex="0"
|
|
189
189
|
>
|
|
190
190
|
<div
|
|
191
|
-
class="
|
|
191
|
+
class="flex flex-1 max-w"
|
|
192
192
|
>
|
|
193
193
|
<div
|
|
194
|
-
class="
|
|
194
|
+
class="flex flex-col flex-1 min-w"
|
|
195
195
|
>
|
|
196
196
|
<div
|
|
197
|
-
class="
|
|
197
|
+
class="flex items-center"
|
|
198
198
|
>
|
|
199
199
|
<div
|
|
200
|
-
class="
|
|
200
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
201
201
|
>
|
|
202
202
|
<div
|
|
203
|
-
class="
|
|
203
|
+
class="items-center flex PicassoSidebarItemContent-noWrap"
|
|
204
204
|
>
|
|
205
205
|
<p
|
|
206
206
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -238,33 +238,33 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
238
238
|
role="region"
|
|
239
239
|
>
|
|
240
240
|
<div
|
|
241
|
-
class="
|
|
241
|
+
class="flex p-0"
|
|
242
242
|
>
|
|
243
243
|
<ul
|
|
244
|
-
class="
|
|
244
|
+
class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
|
|
245
245
|
role="menu"
|
|
246
246
|
tabindex="-1"
|
|
247
247
|
>
|
|
248
248
|
<li
|
|
249
249
|
aria-disabled="false"
|
|
250
|
-
class="
|
|
250
|
+
class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
251
251
|
role="menuitem"
|
|
252
252
|
tabindex="0"
|
|
253
253
|
>
|
|
254
254
|
<div
|
|
255
|
-
class="
|
|
255
|
+
class="flex flex-1 max-w"
|
|
256
256
|
>
|
|
257
257
|
<div
|
|
258
|
-
class="
|
|
258
|
+
class="flex flex-col flex-1 min-w"
|
|
259
259
|
>
|
|
260
260
|
<div
|
|
261
|
-
class="
|
|
261
|
+
class="flex items-center"
|
|
262
262
|
>
|
|
263
263
|
<div
|
|
264
|
-
class="
|
|
264
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
265
265
|
>
|
|
266
266
|
<div
|
|
267
|
-
class="
|
|
267
|
+
class="items-center flex PicassoSidebarItemContent-noWrap"
|
|
268
268
|
>
|
|
269
269
|
<p
|
|
270
270
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -299,21 +299,21 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
|
|
|
299
299
|
>
|
|
300
300
|
<li
|
|
301
301
|
aria-disabled="false"
|
|
302
|
-
class="
|
|
302
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
303
303
|
role="menuitem"
|
|
304
304
|
tabindex="-1"
|
|
305
305
|
>
|
|
306
306
|
<div
|
|
307
|
-
class="
|
|
307
|
+
class="flex flex-1 max-w"
|
|
308
308
|
>
|
|
309
309
|
<div
|
|
310
|
-
class="
|
|
310
|
+
class="flex flex-col flex-1 min-w"
|
|
311
311
|
>
|
|
312
312
|
<div
|
|
313
|
-
class="
|
|
313
|
+
class="flex items-center"
|
|
314
314
|
>
|
|
315
315
|
<div
|
|
316
|
-
class="
|
|
316
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
317
317
|
>
|
|
318
318
|
<svg
|
|
319
319
|
class="PicassoSvgCandidates16-root"
|
|
@@ -325,7 +325,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
|
|
|
325
325
|
/>
|
|
326
326
|
</svg>
|
|
327
327
|
<div
|
|
328
|
-
class="
|
|
328
|
+
class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
|
|
329
329
|
>
|
|
330
330
|
<p
|
|
331
331
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -340,30 +340,30 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
|
|
|
340
340
|
</li>
|
|
341
341
|
<div>
|
|
342
342
|
<ul
|
|
343
|
-
class="
|
|
343
|
+
class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
|
|
344
344
|
role="menu"
|
|
345
345
|
tabindex="-1"
|
|
346
346
|
>
|
|
347
347
|
<li
|
|
348
348
|
aria-disabled="false"
|
|
349
|
-
class="
|
|
349
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
350
350
|
role="menuitem"
|
|
351
351
|
tabindex="0"
|
|
352
352
|
>
|
|
353
353
|
<div
|
|
354
|
-
class="
|
|
354
|
+
class="flex flex-1 max-w"
|
|
355
355
|
>
|
|
356
356
|
<div
|
|
357
|
-
class="
|
|
357
|
+
class="flex flex-col flex-1 min-w"
|
|
358
358
|
>
|
|
359
359
|
<div
|
|
360
|
-
class="
|
|
360
|
+
class="flex items-center"
|
|
361
361
|
>
|
|
362
362
|
<div
|
|
363
|
-
class="
|
|
363
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
364
364
|
>
|
|
365
365
|
<div
|
|
366
|
-
class="
|
|
366
|
+
class="items-center flex PicassoSidebarItemContent-noWrap"
|
|
367
367
|
>
|
|
368
368
|
<p
|
|
369
369
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -389,21 +389,21 @@ exports[`SidebarItem is selected 1`] = `
|
|
|
389
389
|
>
|
|
390
390
|
<li
|
|
391
391
|
aria-disabled="false"
|
|
392
|
-
class="
|
|
392
|
+
class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
393
393
|
role="menuitem"
|
|
394
394
|
tabindex="-1"
|
|
395
395
|
>
|
|
396
396
|
<div
|
|
397
|
-
class="
|
|
397
|
+
class="flex flex-1 max-w"
|
|
398
398
|
>
|
|
399
399
|
<div
|
|
400
|
-
class="
|
|
400
|
+
class="flex flex-col flex-1 min-w"
|
|
401
401
|
>
|
|
402
402
|
<div
|
|
403
|
-
class="
|
|
403
|
+
class="flex items-center"
|
|
404
404
|
>
|
|
405
405
|
<div
|
|
406
|
-
class="
|
|
406
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
407
407
|
>
|
|
408
408
|
<svg
|
|
409
409
|
class="PicassoSvgCandidates16-root"
|
|
@@ -415,7 +415,7 @@ exports[`SidebarItem is selected 1`] = `
|
|
|
415
415
|
/>
|
|
416
416
|
</svg>
|
|
417
417
|
<div
|
|
418
|
-
class="
|
|
418
|
+
class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
|
|
419
419
|
>
|
|
420
420
|
<p
|
|
421
421
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -439,24 +439,24 @@ exports[`SidebarItem renders 1`] = `
|
|
|
439
439
|
>
|
|
440
440
|
<li
|
|
441
441
|
aria-disabled="false"
|
|
442
|
-
class="
|
|
442
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
443
443
|
role="menuitem"
|
|
444
444
|
tabindex="-1"
|
|
445
445
|
>
|
|
446
446
|
<div
|
|
447
|
-
class="
|
|
447
|
+
class="flex flex-1 max-w"
|
|
448
448
|
>
|
|
449
449
|
<div
|
|
450
|
-
class="
|
|
450
|
+
class="flex flex-col flex-1 min-w"
|
|
451
451
|
>
|
|
452
452
|
<div
|
|
453
|
-
class="
|
|
453
|
+
class="flex items-center"
|
|
454
454
|
>
|
|
455
455
|
<div
|
|
456
|
-
class="
|
|
456
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
457
457
|
>
|
|
458
458
|
<div
|
|
459
|
-
class="
|
|
459
|
+
class="items-center flex PicassoSidebarItemContent-noWrap"
|
|
460
460
|
>
|
|
461
461
|
<p
|
|
462
462
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -493,21 +493,21 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
|
|
|
493
493
|
>
|
|
494
494
|
<li
|
|
495
495
|
aria-disabled="false"
|
|
496
|
-
class="
|
|
496
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
|
|
497
497
|
role="menuitem"
|
|
498
498
|
tabindex="-1"
|
|
499
499
|
>
|
|
500
500
|
<div
|
|
501
|
-
class="
|
|
501
|
+
class="flex flex-1 max-w"
|
|
502
502
|
>
|
|
503
503
|
<div
|
|
504
|
-
class="
|
|
504
|
+
class="flex flex-col flex-1 min-w"
|
|
505
505
|
>
|
|
506
506
|
<div
|
|
507
|
-
class="
|
|
507
|
+
class="flex items-center"
|
|
508
508
|
>
|
|
509
509
|
<div
|
|
510
|
-
class="
|
|
510
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
511
511
|
>
|
|
512
512
|
<svg
|
|
513
513
|
class="PicassoSvgCandidates16-root"
|
|
@@ -519,7 +519,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
|
|
|
519
519
|
/>
|
|
520
520
|
</svg>
|
|
521
521
|
<div
|
|
522
|
-
class="
|
|
522
|
+
class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
|
|
523
523
|
>
|
|
524
524
|
<p
|
|
525
525
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -557,33 +557,33 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
|
|
|
557
557
|
role="region"
|
|
558
558
|
>
|
|
559
559
|
<div
|
|
560
|
-
class="
|
|
560
|
+
class="flex p-0"
|
|
561
561
|
>
|
|
562
562
|
<ul
|
|
563
|
-
class="
|
|
563
|
+
class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
|
|
564
564
|
role="menu"
|
|
565
565
|
tabindex="-1"
|
|
566
566
|
>
|
|
567
567
|
<li
|
|
568
568
|
aria-disabled="false"
|
|
569
|
-
class="
|
|
569
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
570
570
|
role="menuitem"
|
|
571
571
|
tabindex="0"
|
|
572
572
|
>
|
|
573
573
|
<div
|
|
574
|
-
class="
|
|
574
|
+
class="flex flex-1 max-w"
|
|
575
575
|
>
|
|
576
576
|
<div
|
|
577
|
-
class="
|
|
577
|
+
class="flex flex-col flex-1 min-w"
|
|
578
578
|
>
|
|
579
579
|
<div
|
|
580
|
-
class="
|
|
580
|
+
class="flex items-center"
|
|
581
581
|
>
|
|
582
582
|
<div
|
|
583
|
-
class="
|
|
583
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
584
584
|
>
|
|
585
585
|
<div
|
|
586
|
-
class="
|
|
586
|
+
class="items-center flex PicassoSidebarItemContent-noWrap"
|
|
587
587
|
>
|
|
588
588
|
<p
|
|
589
589
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -614,21 +614,21 @@ exports[`SidebarItem with icon 1`] = `
|
|
|
614
614
|
>
|
|
615
615
|
<li
|
|
616
616
|
aria-disabled="false"
|
|
617
|
-
class="
|
|
617
|
+
class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
|
|
618
618
|
role="menuitem"
|
|
619
619
|
tabindex="-1"
|
|
620
620
|
>
|
|
621
621
|
<div
|
|
622
|
-
class="
|
|
622
|
+
class="flex flex-1 max-w"
|
|
623
623
|
>
|
|
624
624
|
<div
|
|
625
|
-
class="
|
|
625
|
+
class="flex flex-col flex-1 min-w"
|
|
626
626
|
>
|
|
627
627
|
<div
|
|
628
|
-
class="
|
|
628
|
+
class="flex items-center"
|
|
629
629
|
>
|
|
630
630
|
<div
|
|
631
|
-
class="
|
|
631
|
+
class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
|
|
632
632
|
>
|
|
633
633
|
<svg
|
|
634
634
|
class="PicassoSvgCandidates16-root"
|
|
@@ -640,7 +640,7 @@ exports[`SidebarItem with icon 1`] = `
|
|
|
640
640
|
/>
|
|
641
641
|
</svg>
|
|
642
642
|
<div
|
|
643
|
-
class="
|
|
643
|
+
class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
|
|
644
644
|
>
|
|
645
645
|
<p
|
|
646
646
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -1,71 +1,15 @@
|
|
|
1
1
|
import type { Theme } from '@material-ui/core/styles'
|
|
2
2
|
import { createStyles } from '@material-ui/core/styles'
|
|
3
3
|
|
|
4
|
-
export default ({ palette
|
|
4
|
+
export default ({ palette }: Theme) =>
|
|
5
5
|
createStyles({
|
|
6
6
|
root: {
|
|
7
|
-
height: '2.75em',
|
|
8
|
-
padding: '0 1rem',
|
|
9
|
-
margin: '0 1rem',
|
|
10
|
-
whiteSpace: 'nowrap',
|
|
11
|
-
borderRadius: sizes.borderRadius.small,
|
|
12
7
|
fontSize: '1rem',
|
|
13
8
|
},
|
|
14
|
-
light: {
|
|
15
|
-
color: palette.grey.dark,
|
|
16
|
-
'&:hover': {
|
|
17
|
-
color: palette.blue.main,
|
|
18
|
-
},
|
|
19
|
-
'&:focus': {
|
|
20
|
-
color: palette.blue.main,
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
dark: {
|
|
24
|
-
'&:hover': {
|
|
25
|
-
color: palette.common.white,
|
|
26
|
-
},
|
|
27
|
-
'&:focus': {
|
|
28
|
-
color: palette.common.white,
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
selected: {
|
|
32
|
-
'&$light': {
|
|
33
|
-
'&, &:hover, &:focus': {
|
|
34
|
-
color: palette.blue.main,
|
|
35
|
-
backgroundColor: palette.grey.light,
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
'&$dark': {
|
|
39
|
-
'&, &:hover, &:focus': {
|
|
40
|
-
color: palette.common.white,
|
|
41
|
-
backgroundColor: palette.grey.dark,
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
parentCompact: {
|
|
46
|
-
'&$light': {
|
|
47
|
-
'&, &:hover, &:focus': {
|
|
48
|
-
margin: 0,
|
|
49
|
-
padding: '0.375em 1em',
|
|
50
|
-
borderRadius: sizes.borderRadius.small,
|
|
51
|
-
'&$selected': {
|
|
52
|
-
backgroundColor: palette.grey.lighter,
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
},
|
|
57
9
|
collapsibleWrapper: {
|
|
58
10
|
padding: '0 0 0 1rem',
|
|
59
11
|
margin: '0 1rem',
|
|
60
12
|
},
|
|
61
|
-
nestedMenu: {
|
|
62
|
-
padding: '0 1rem 0 2rem',
|
|
63
|
-
marginRight: '1rem',
|
|
64
|
-
},
|
|
65
|
-
nestedMenuWithIcon: {
|
|
66
|
-
padding: '0 1rem 0 2.875rem',
|
|
67
|
-
marginRight: '1rem',
|
|
68
|
-
},
|
|
69
13
|
content: {
|
|
70
14
|
// to cover text overflow in the sub-menu header item
|
|
71
15
|
maxWidth: '100%',
|
|
@@ -85,16 +29,4 @@ export default ({ palette, sizes }: Theme) =>
|
|
|
85
29
|
expandIconDisabled: {
|
|
86
30
|
color: palette.grey.main,
|
|
87
31
|
},
|
|
88
|
-
compact: {
|
|
89
|
-
padding: 0,
|
|
90
|
-
overflow: 'visible',
|
|
91
|
-
},
|
|
92
|
-
noWrap: {
|
|
93
|
-
flex: 1,
|
|
94
|
-
minWidth: 0,
|
|
95
|
-
},
|
|
96
|
-
collapsible: {
|
|
97
|
-
margin: 0,
|
|
98
|
-
padding: 0,
|
|
99
|
-
},
|
|
100
32
|
})
|
|
@@ -6,7 +6,7 @@ exports[`SidebarLogo renders 1`] = `
|
|
|
6
6
|
class="Picasso-root"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="
|
|
9
|
+
class="mb-2 ml-8 PicassoSidebarLogo-root"
|
|
10
10
|
>
|
|
11
11
|
<svg
|
|
12
12
|
class="PicassoSvgLogo-root PicassoLogo-root PicassoLogo-default"
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
2
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
3
1
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
4
2
|
import cx from 'classnames'
|
|
5
3
|
import type { HTMLAttributes } from 'react'
|
|
@@ -9,25 +7,18 @@ import { Menu } from '@toptal/picasso-menu'
|
|
|
9
7
|
import { useSidebarContext } from '../PageSidebar/SidebarContextProvider'
|
|
10
8
|
import type { SidebarItemProps } from '../SidebarItem'
|
|
11
9
|
import { useSubMenuContext } from '../SidebarItem'
|
|
12
|
-
import styles from './styles'
|
|
13
10
|
|
|
14
11
|
export interface Props extends BaseProps, HTMLAttributes<HTMLUListElement> {
|
|
15
12
|
/** Defines is sidebar menu pushed to bottom of sidebar */
|
|
16
13
|
bottom?: boolean
|
|
17
14
|
}
|
|
18
15
|
|
|
19
|
-
const useStyles = makeStyles<Theme>(styles, {
|
|
20
|
-
name: 'PicassoSidebarMenu',
|
|
21
|
-
})
|
|
22
|
-
|
|
23
16
|
export const SidebarMenu = forwardRef<HTMLUListElement, Props>(
|
|
24
17
|
function SidebarMenu(props, ref) {
|
|
25
18
|
const { bottom, style, className, children, ...rest } = props
|
|
26
19
|
const { parentSidebarItemIndex, isSubMenu, parentMenu } =
|
|
27
20
|
useSubMenuContext()
|
|
28
21
|
|
|
29
|
-
const classes = useStyles()
|
|
30
|
-
|
|
31
22
|
const {
|
|
32
23
|
variant,
|
|
33
24
|
expandedItemKey,
|
|
@@ -81,10 +72,10 @@ export const SidebarMenu = forwardRef<HTMLUListElement, Props>(
|
|
|
81
72
|
ref={ref}
|
|
82
73
|
style={style}
|
|
83
74
|
className={cx(
|
|
84
|
-
|
|
75
|
+
'shadow-0 order-1 [&_&]:flex-1 flex-grow-0 flex-shrink-1 max-w-full',
|
|
85
76
|
{
|
|
86
|
-
[
|
|
87
|
-
[
|
|
77
|
+
['order-[99]']: bottom,
|
|
78
|
+
['p-2']: parentMenu?.compact,
|
|
88
79
|
},
|
|
89
80
|
className
|
|
90
81
|
)}
|