From 701d1b135e18fb0814007a62e3af2479b5a1bc0a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 30 Nov 2022 10:30:06 +0000 Subject: [PATCH] Update dependency rc-drawer to v6 (#58237) * Update dependency rc-drawer to v6 * updates for rc-drawer v6 * move aria-label to an inner child to fix e2e tests Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Ashley Harrison --- package.json | 2 +- .../src/selectors/components.ts | 2 +- packages/grafana-ui/package.json | 2 +- .../src/components/Drawer/Drawer.tsx | 88 ++++++++++++------- yarn.lock | 52 ++++++++--- 5 files changed, 101 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 98fbcb97bea..77c1594db5e 100644 --- a/package.json +++ b/package.json @@ -348,7 +348,7 @@ "prop-types": "15.8.1", "pseudoizer": "^0.1.0", "rc-cascader": "3.7.0", - "rc-drawer": "4.4.3", + "rc-drawer": "6.0.1", "rc-slider": "10.0.1", "rc-time-picker": "3.7.3", "rc-tree": "5.7.0", diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 724c15d6c2b..28df5e9f7fe 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -107,7 +107,7 @@ export const Components = { expand: 'Drawer expand', contract: 'Drawer contract', close: 'Drawer close', - rcContentWrapper: () => '.drawer-content-wrapper', + rcContentWrapper: () => '.rc-drawer-content-wrapper', }, }, PanelEditor: { diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index bc938f89625..18302142bd1 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -79,7 +79,7 @@ "ol": "7.1.0", "prismjs": "1.29.0", "rc-cascader": "3.7.0", - "rc-drawer": "4.4.3", + "rc-drawer": "6.0.1", "rc-slider": "10.0.1", "rc-time-picker": "^3.7.3", "rc-tooltip": "5.2.2", diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index 9eabed2d788..7c5efda7ba7 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -74,24 +74,37 @@ export function Drawer({ return ( -
+
{typeof title === 'string' && (
@@ -145,33 +158,46 @@ const getStyles = (theme: GrafanaTheme2) => { flex: 1 1 0; `, drawer: css` - .drawer-content { - background-color: ${theme.colors.background.primary}; - display: flex; - flex-direction: column; - overflow: hidden; - } - &.drawer-open .drawer-mask { - background-color: ${theme.components.overlay.background}; - backdrop-filter: blur(1px); - opacity: 1; - } - .drawer-mask { - background-color: ${theme.components.overlay.background}; - backdrop-filter: blur(1px); - } - .drawer-open .drawer-content-wrapper { + .rc-drawer-content-wrapper { box-shadow: ${theme.shadows.z3}; - } - z-index: ${theme.zIndex.dropdown}; - - ${theme.breakpoints.down('sm')} { - .drawer-content-wrapper { + ${theme.breakpoints.down('sm')} { width: 100% !important; } } `, + drawerContent: css` + background-color: ${theme.colors.background.primary} !important; + display: flex; + flex-direction: column; + overflow: hidden; + z-index: ${theme.zIndex.dropdown}; + `, + drawerMotion: css` + &-appear { + transform: translateX(100%); + transition: none !important; + + &-active { + transition: ${theme.transitions.create('transform')} !important; + transform: translateX(0); + } + } + `, + mask: css` + background-color: ${theme.components.overlay.background} !important; + backdrop-filter: blur(1px); + `, + maskMotion: css` + &-appear { + opacity: 0; + + &-active { + opacity: 1; + transition: ${theme.transitions.create('opacity')}; + } + } + `, header: css` background-color: ${theme.colors.background.canvas}; flex-grow: 0; diff --git a/yarn.lock b/yarn.lock index 8718f167344..0f43ddfc7cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2967,7 +2967,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:7.20.1": +"@babel/runtime@npm:7.20.1, @babel/runtime@npm:^7.18.0": version: 7.20.1 resolution: "@babel/runtime@npm:7.20.1" dependencies: @@ -4777,7 +4777,7 @@ __metadata: prismjs: 1.29.0 process: ^0.11.10 rc-cascader: 3.7.0 - rc-drawer: 4.4.3 + rc-drawer: 6.0.1 rc-slider: 10.0.1 rc-time-picker: ^3.7.3 rc-tooltip: 5.2.2 @@ -7496,6 +7496,20 @@ __metadata: languageName: node linkType: hard +"@rc-component/portal@npm:^1.0.0-6": + version: 1.0.3 + resolution: "@rc-component/portal@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.18.0 + classnames: ^2.3.2 + rc-util: ^5.24.4 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: e25a72042c4a7dfe8a25526972e1d024a8f5aac29963bed63ecdb356b238ae882575b2dc27de9f003618638c758dc669d5684549cf09125fce95d9227d78a75e + languageName: node + linkType: hard + "@reach/observe-rect@npm:^1.1.0": version: 1.2.0 resolution: "@reach/observe-rect@npm:1.2.0" @@ -15478,7 +15492,7 @@ __metadata: languageName: node linkType: hard -"classnames@npm:2.3.2": +"classnames@npm:2.3.2, classnames@npm:^2.3.2": version: 2.3.2 resolution: "classnames@npm:2.3.2" checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e @@ -21713,7 +21727,7 @@ __metadata: prop-types: 15.8.1 pseudoizer: ^0.1.0 rc-cascader: 3.7.0 - rc-drawer: 4.4.3 + rc-drawer: 6.0.1 rc-slider: 10.0.1 rc-time-picker: 3.7.3 rc-tree: 5.7.0 @@ -31664,17 +31678,19 @@ __metadata: languageName: node linkType: hard -"rc-drawer@npm:4.4.3": - version: 4.4.3 - resolution: "rc-drawer@npm:4.4.3" +"rc-drawer@npm:6.0.1": + version: 6.0.1 + resolution: "rc-drawer@npm:6.0.1" dependencies: "@babel/runtime": ^7.10.1 + "@rc-component/portal": ^1.0.0-6 classnames: ^2.2.6 - rc-util: ^5.7.0 + rc-motion: ^2.6.1 + rc-util: ^5.21.2 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: bb0b3932dbe351f67c21221d08612272854166d84c4425beda365e17d89c356aecfd964f7f6451a19eb31034c4b22e515939bef1319a067c2a669541e1658084 + checksum: ce4a0b2ac3a96a203a1038f1c30df079e34359f821db9bcab39a87bdc62e62dd681d3b37354d9e1c77b44e3954b4f583d3b16ed021bcd1851dea0f62b888f6a8 languageName: node linkType: hard @@ -31692,6 +31708,20 @@ __metadata: languageName: node linkType: hard +"rc-motion@npm:^2.6.1": + version: 2.6.2 + resolution: "rc-motion@npm:2.6.2" + dependencies: + "@babel/runtime": ^7.11.1 + classnames: ^2.2.1 + rc-util: ^5.21.0 + peerDependencies: + react: ">=16.9.0" + react-dom: ">=16.9.0" + checksum: e91ec8a9f8748ae34d6f9c0380d4587729453c7c8afe23c026ff096905b5a24672b050e04789061c833994e05ed18fec02919bc0e27c1e05b06fe7a0c0b75532 + languageName: node + linkType: hard + "rc-overflow@npm:^1.0.0": version: 1.2.2 resolution: "rc-overflow@npm:1.2.2" @@ -31889,7 +31919,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.18.1, rc-util@npm:^5.19.2": +"rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.21.0, rc-util@npm:^5.21.2, rc-util@npm:^5.24.4": version: 5.24.4 resolution: "rc-util@npm:5.24.4" dependencies: @@ -31903,7 +31933,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.2.1, rc-util@npm:^5.3.0, rc-util@npm:^5.5.0, rc-util@npm:^5.7.0": +"rc-util@npm:^5.2.1, rc-util@npm:^5.3.0, rc-util@npm:^5.5.0": version: 5.14.0 resolution: "rc-util@npm:5.14.0" dependencies: