@toptal/picasso-page 2.0.6 → 2.0.8
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 +4 -3
- package/dist-package/src/PageSidebar/PageSidebar.js.map +1 -1
- package/dist-package/src/PageSidebar/styles.d.ts +1 -1
- package/dist-package/src/PageSidebar/styles.d.ts.map +1 -1
- package/dist-package/src/PageSidebar/styles.js +0 -20
- package/dist-package/src/PageSidebar/styles.js.map +1 -1
- package/package.json +22 -21
- package/src/PageAutocomplete/__snapshots__/test.tsx.snap +4 -3
- package/src/PageSidebar/PageSidebar.tsx +6 -3
- package/src/PageSidebar/styles.ts +0 -23
- package/src/PageTopBar/__snapshots__/test.tsx.snap +15 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSidebar.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"PageSidebar.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAuD,MAAM,OAAO,CAAA;AAgB3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,iDAAiD;IACjD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,2EAA2E;IAC3E,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,mBAAmB,CAAC,EAAE,MAAM,CAAA;KAC7B,CAAA;IACD,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAMD,eAAO,MAAM,WAAW,8EAwGtB,CAAA;;;;;;AASF,wBAIE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { makeStyles } from '@material-ui/core/styles';
|
|
2
2
|
import { useSidebar } from '@toptal/picasso-provider';
|
|
3
3
|
import cx from 'classnames';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
5
|
import React, { forwardRef, useCallback, useEffect, useState } from 'react';
|
|
5
6
|
import { ButtonCircular } from '@toptal/picasso-button';
|
|
6
7
|
import { Container } from '@toptal/picasso-container';
|
|
@@ -51,9 +52,9 @@ export const PageSidebar = forwardRef(function Sidebar(props, ref) {
|
|
|
51
52
|
[classes.sticky]: !disableSticky,
|
|
52
53
|
}) },
|
|
53
54
|
React.createElement(Container, { flex: true, direction: 'column', className: classes.scrollableContent, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.scrollableContainer },
|
|
54
|
-
collapsible && (React.createElement(ButtonCircular, { className:
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
collapsible && (React.createElement(ButtonCircular, { className: twMerge(
|
|
56
|
+
// TODO: [FX-XXXX] technical debt: button color/background/radius/shadow shouldn't be overwritten
|
|
57
|
+
'absolute -right-3 top-3 invisible text-graphite-700 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_0_8px_0_rgba(0,0,0,0.16)] z-[100] hover:text-white hover:bg-blue-500', isHovered && 'visible'), onClick: handleCollapseButtonClick, icon: isCollapsed ? React.createElement(ChevronRight16, null) : React.createElement(BackMinor16, null), "aria-label": 'collapse sidebar', variant: 'primary', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.collapseButton })),
|
|
57
58
|
React.createElement("div", { className: classes.spacer }),
|
|
58
59
|
React.createElement(SidebarContextProvider, { isCollapsed: isCollapsed, isHovered: isHovered, variant: variant, expandedItemKey: expandedItemKey, setExpandedItemKey: setExpandedItemKey }, children)))));
|
|
59
60
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette, screens, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "small" | "root" | "medium" | "dark" | "light" | "large" | "sticky" | "wrapper" | "hamburgerNotAvailable" | "scrollableContent" | "spacer" | "
|
|
2
|
+
declare const _default: ({ palette, screens, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "small" | "root" | "medium" | "dark" | "light" | "large" | "sticky" | "wrapper" | "hamburgerNotAvailable" | "scrollableContent" | "spacer" | "rootCollapsed">;
|
|
3
3
|
export default _default;
|
|
4
4
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;4DAMF,KAAK;AAAxD,wBAiFI"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { createStyles } from '@material-ui/core/styles';
|
|
2
2
|
import { rem } from '@toptal/picasso-shared';
|
|
3
3
|
import { headerBreakingPointXL } from '../PageTopBar/constants';
|
|
4
|
-
// decided to use a custom shadow for the sidebar's collapse button
|
|
5
|
-
const COLLAPSE_BUTTON_SHADOW = '0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 8px 0 rgba(0, 0, 0, 0.16)';
|
|
6
4
|
export default ({ palette, screens, transitions }) => createStyles({
|
|
7
5
|
root: {
|
|
8
6
|
height: '100%',
|
|
@@ -65,24 +63,6 @@ export default ({ palette, screens, transitions }) => createStyles({
|
|
|
65
63
|
boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
|
|
66
64
|
backgroundColor: palette.grey.darker,
|
|
67
65
|
},
|
|
68
|
-
collapseButton: {
|
|
69
|
-
position: 'absolute',
|
|
70
|
-
right: '-0.75rem',
|
|
71
|
-
top: '0.75rem',
|
|
72
|
-
visibility: 'hidden',
|
|
73
|
-
color: palette.grey.dark,
|
|
74
|
-
backgroundColor: palette.common.white,
|
|
75
|
-
borderRadius: '50%',
|
|
76
|
-
boxShadow: COLLAPSE_BUTTON_SHADOW,
|
|
77
|
-
zIndex: 100,
|
|
78
|
-
'&:hover': {
|
|
79
|
-
color: palette.common.white,
|
|
80
|
-
backgroundColor: palette.primary.main,
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
buttonVisible: {
|
|
84
|
-
visibility: 'visible',
|
|
85
|
-
},
|
|
86
66
|
rootCollapsed: {
|
|
87
67
|
width: '5rem',
|
|
88
68
|
transition: `width ${transitions.duration.leavingScreen}ms ease-in-out`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CAC1D,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,cAAc,gBAAgB;QACxE,OAAO,EAAE,MAAM;QACf,CAAC,qBAAqB,CAAC,EAAE;YACvB,OAAO,EAAE,OAAO;SACjB;QAED,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,QAAQ;SACpB;QAED,WAAW,EAAE;YACX,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,MAAM;SACf;KACF;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,OAAO;KACjB;IACD,OAAO,EAAE;QACP,MAAM,EAAE,MAAM;QACd,UAAU,EAAE;YACV,SAAS,EAAE,2CAA2C;YACtD,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,8BAA8B;SACpC;KACF;IACD,iBAAiB,EAAE;QACjB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,eAAe;KACzB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,MAAM;KACf;IACD,KAAK,EAAE;QACL,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC5D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KACtC;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,aAAa,gBAAgB;QAEvE,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;SACjB;QACD,sBAAsB,EAAE;YACtB,oBAAoB,EAAE,MAAM;YAC5B,iBAAiB,EAAE,MAAM;YACzB,sBAAsB,EAAE;gBACtB,OAAO,EAAE,MAAM;aAChB;SACF;KACF;IACD,MAAM,EAAE,EAAE;CACX,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-page",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.8",
|
|
4
4
|
"description": "Toptal UI components library - Page",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,24 +22,25 @@
|
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-accordion": "1.0.
|
|
26
|
-
"@toptal/picasso-autocomplete": "1.0.
|
|
27
|
-
"@toptal/picasso-avatar": "2.0.
|
|
28
|
-
"@toptal/picasso-badge": "1.0.
|
|
29
|
-
"@toptal/picasso-button": "
|
|
30
|
-
"@toptal/picasso-container": "1.0.
|
|
31
|
-
"@toptal/picasso-dropdown": "2.0.
|
|
32
|
-
"@toptal/picasso-icons": "1.1.
|
|
33
|
-
"@toptal/picasso-logo": "1.0.
|
|
34
|
-
"@toptal/picasso-menu": "1.0.
|
|
35
|
-
"@toptal/picasso-notification": "2.0.
|
|
36
|
-
"@toptal/picasso-shared": "
|
|
37
|
-
"@toptal/picasso-tag": "1.1.
|
|
38
|
-
"@toptal/picasso-tooltip": "1.1.
|
|
39
|
-
"@toptal/picasso-typography": "2.0.
|
|
40
|
-
"@toptal/picasso-user-badge": "2.0.
|
|
41
|
-
"@toptal/picasso-utils": "1.0.
|
|
42
|
-
"classnames": "^2.5.1"
|
|
25
|
+
"@toptal/picasso-accordion": "1.0.15",
|
|
26
|
+
"@toptal/picasso-autocomplete": "1.0.16",
|
|
27
|
+
"@toptal/picasso-avatar": "2.0.2",
|
|
28
|
+
"@toptal/picasso-badge": "1.0.3",
|
|
29
|
+
"@toptal/picasso-button": "2.0.1",
|
|
30
|
+
"@toptal/picasso-container": "1.0.3",
|
|
31
|
+
"@toptal/picasso-dropdown": "2.0.3",
|
|
32
|
+
"@toptal/picasso-icons": "1.1.1",
|
|
33
|
+
"@toptal/picasso-logo": "1.0.4",
|
|
34
|
+
"@toptal/picasso-menu": "1.0.11",
|
|
35
|
+
"@toptal/picasso-notification": "2.0.7",
|
|
36
|
+
"@toptal/picasso-shared": "15.0.0",
|
|
37
|
+
"@toptal/picasso-tag": "1.1.2",
|
|
38
|
+
"@toptal/picasso-tooltip": "1.1.2",
|
|
39
|
+
"@toptal/picasso-typography": "2.0.1",
|
|
40
|
+
"@toptal/picasso-user-badge": "2.0.2",
|
|
41
|
+
"@toptal/picasso-utils": "1.0.3",
|
|
42
|
+
"classnames": "^2.5.1",
|
|
43
|
+
"tailwind-merge": "^2.2.2"
|
|
43
44
|
},
|
|
44
45
|
"sideEffects": [
|
|
45
46
|
"**/styles.ts",
|
|
@@ -49,12 +50,12 @@
|
|
|
49
50
|
"@material-ui/core": "4.12.4",
|
|
50
51
|
"@toptal/picasso-provider": "*",
|
|
51
52
|
"react-dom": "^18.2.0",
|
|
52
|
-
"
|
|
53
|
+
"@toptal/picasso-tailwind": "^2.5.0",
|
|
53
54
|
"react": ">=16.12.0 < 19.0.0"
|
|
54
55
|
},
|
|
55
56
|
"devDependencies": {
|
|
56
57
|
"@toptal/picasso-provider": "4.2.1",
|
|
57
|
-
"@toptal/picasso-test-utils": "1.1.
|
|
58
|
+
"@toptal/picasso-test-utils": "1.1.1",
|
|
58
59
|
"react-dom": "^18.2.0",
|
|
59
60
|
"styled-components": "^6.1.1"
|
|
60
61
|
},
|
|
@@ -32,17 +32,18 @@ exports[`PageAutocomplete renders 1`] = `
|
|
|
32
32
|
data-testid="reset-adornment"
|
|
33
33
|
>
|
|
34
34
|
<button
|
|
35
|
-
|
|
35
|
+
aria-disabled="false"
|
|
36
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
|
|
36
37
|
data-component-type="button"
|
|
37
38
|
role="reset"
|
|
38
39
|
tabindex="-1"
|
|
39
40
|
type="button"
|
|
40
41
|
>
|
|
41
42
|
<span
|
|
42
|
-
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline
|
|
43
|
+
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
|
|
43
44
|
>
|
|
44
45
|
<svg
|
|
45
|
-
class="PicassoSvgCloseMinor16-root
|
|
46
|
+
class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1"
|
|
46
47
|
style="min-width: 16px; min-height: 16px;"
|
|
47
48
|
viewBox="0 0 16 16"
|
|
48
49
|
>
|
|
@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
|
|
|
3
3
|
import { useSidebar } from '@toptal/picasso-provider'
|
|
4
4
|
import type { BaseProps, SizeType } from '@toptal/picasso-shared'
|
|
5
5
|
import cx from 'classnames'
|
|
6
|
+
import { twMerge } from 'tailwind-merge'
|
|
6
7
|
import type { ReactNode } from 'react'
|
|
7
8
|
import React, { forwardRef, useCallback, useEffect, useState } from 'react'
|
|
8
9
|
import { ButtonCircular } from '@toptal/picasso-button'
|
|
@@ -128,9 +129,11 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
|
|
|
128
129
|
>
|
|
129
130
|
{collapsible && (
|
|
130
131
|
<ButtonCircular
|
|
131
|
-
className={
|
|
132
|
-
[
|
|
133
|
-
|
|
132
|
+
className={twMerge(
|
|
133
|
+
// TODO: [FX-XXXX] technical debt: button color/background/radius/shadow shouldn't be overwritten
|
|
134
|
+
'absolute -right-3 top-3 invisible text-graphite-700 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_0_8px_0_rgba(0,0,0,0.16)] z-[100] hover:text-white hover:bg-blue-500',
|
|
135
|
+
isHovered && 'visible'
|
|
136
|
+
)}
|
|
134
137
|
onClick={handleCollapseButtonClick}
|
|
135
138
|
icon={isCollapsed ? <ChevronRight16 /> : <BackMinor16 />}
|
|
136
139
|
aria-label='collapse sidebar'
|
|
@@ -4,10 +4,6 @@ import { rem } from '@toptal/picasso-shared'
|
|
|
4
4
|
|
|
5
5
|
import { headerBreakingPointXL } from '../PageTopBar/constants'
|
|
6
6
|
|
|
7
|
-
// decided to use a custom shadow for the sidebar's collapse button
|
|
8
|
-
const COLLAPSE_BUTTON_SHADOW =
|
|
9
|
-
'0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 8px 0 rgba(0, 0, 0, 0.16)'
|
|
10
|
-
|
|
11
7
|
export default ({ palette, screens, transitions }: Theme) =>
|
|
12
8
|
createStyles({
|
|
13
9
|
root: {
|
|
@@ -73,25 +69,6 @@ export default ({ palette, screens, transitions }: Theme) =>
|
|
|
73
69
|
boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
|
|
74
70
|
backgroundColor: palette.grey.darker,
|
|
75
71
|
},
|
|
76
|
-
collapseButton: {
|
|
77
|
-
position: 'absolute',
|
|
78
|
-
right: '-0.75rem',
|
|
79
|
-
top: '0.75rem',
|
|
80
|
-
visibility: 'hidden',
|
|
81
|
-
color: palette.grey.dark,
|
|
82
|
-
backgroundColor: palette.common.white,
|
|
83
|
-
borderRadius: '50%',
|
|
84
|
-
boxShadow: COLLAPSE_BUTTON_SHADOW,
|
|
85
|
-
zIndex: 100,
|
|
86
|
-
|
|
87
|
-
'&:hover': {
|
|
88
|
-
color: palette.common.white,
|
|
89
|
-
backgroundColor: palette.primary.main,
|
|
90
|
-
},
|
|
91
|
-
},
|
|
92
|
-
buttonVisible: {
|
|
93
|
-
visibility: 'visible',
|
|
94
|
-
},
|
|
95
72
|
rootCollapsed: {
|
|
96
73
|
width: '5rem',
|
|
97
74
|
transition: `width ${transitions.duration.leavingScreen}ms ease-in-out`,
|
|
@@ -27,16 +27,18 @@ exports[`Page.TopBar render with custom logo 1`] = `
|
|
|
27
27
|
class="PicassoDropdown-anchor"
|
|
28
28
|
>
|
|
29
29
|
<button
|
|
30
|
-
|
|
30
|
+
aria-disabled="false"
|
|
31
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)] bg-transparent"
|
|
31
32
|
data-component-type="button"
|
|
33
|
+
role="button"
|
|
32
34
|
tabindex="0"
|
|
33
35
|
type="button"
|
|
34
36
|
>
|
|
35
37
|
<span
|
|
36
|
-
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline
|
|
38
|
+
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
|
|
37
39
|
>
|
|
38
40
|
<svg
|
|
39
|
-
class="PicassoSvgOverview24-root
|
|
41
|
+
class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
|
|
40
42
|
style="min-width: 24px; min-height: 24px;"
|
|
41
43
|
viewBox="0 0 24 24"
|
|
42
44
|
>
|
|
@@ -124,16 +126,18 @@ exports[`Page.TopBar render with link 1`] = `
|
|
|
124
126
|
class="PicassoDropdown-anchor"
|
|
125
127
|
>
|
|
126
128
|
<button
|
|
127
|
-
|
|
129
|
+
aria-disabled="false"
|
|
130
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)] bg-transparent"
|
|
128
131
|
data-component-type="button"
|
|
132
|
+
role="button"
|
|
129
133
|
tabindex="0"
|
|
130
134
|
type="button"
|
|
131
135
|
>
|
|
132
136
|
<span
|
|
133
|
-
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline
|
|
137
|
+
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
|
|
134
138
|
>
|
|
135
139
|
<svg
|
|
136
|
-
class="PicassoSvgOverview24-root
|
|
140
|
+
class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
|
|
137
141
|
style="min-width: 24px; min-height: 24px;"
|
|
138
142
|
viewBox="0 0 24 24"
|
|
139
143
|
>
|
|
@@ -247,16 +251,18 @@ exports[`Page.TopBar renders 1`] = `
|
|
|
247
251
|
class="PicassoDropdown-anchor"
|
|
248
252
|
>
|
|
249
253
|
<button
|
|
250
|
-
|
|
254
|
+
aria-disabled="false"
|
|
255
|
+
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)] bg-transparent"
|
|
251
256
|
data-component-type="button"
|
|
257
|
+
role="button"
|
|
252
258
|
tabindex="0"
|
|
253
259
|
type="button"
|
|
254
260
|
>
|
|
255
261
|
<span
|
|
256
|
-
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline
|
|
262
|
+
class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
|
|
257
263
|
>
|
|
258
264
|
<svg
|
|
259
|
-
class="PicassoSvgOverview24-root
|
|
265
|
+
class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
|
|
260
266
|
style="min-width: 24px; min-height: 24px;"
|
|
261
267
|
viewBox="0 0 24 24"
|
|
262
268
|
>
|