root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 236 Packages Projects Releases Wiki Activity

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 <ashley.harrison@grafana.com>
This commit is contained in:
renovate[bot] 2022-11-30 10:30:06 +00:00 committed by GitHub
parent eaa4d19ed0
commit 701d1b135e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 101 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

2
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -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: {

2
packages/grafana-ui/package.json
View File

@ -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",

88
packages/grafana-ui/src/components/Drawer/Drawer.tsx
View File

@ -74,24 +74,37 @@ export function Drawer({
return (
<RcDrawer
level={null}
handler={false}
open={isOpen}
onClose={onClose}
maskClosable={closeOnMaskClick}
placement="right"
width={currentWidth}
getContainer={inline ? undefined : 'body'}
style={style}
className={drawerStyles.drawer}
aria-label={
typeof title === 'string'
? selectors.components.Drawer.General.title(title)
: selectors.components.Drawer.General.title('no title')
}
className={drawerStyles.drawerContent}
rootClassName={drawerStyles.drawer}
motion={{
motionAppear: true,
motionName: drawerStyles.drawerMotion,
}}
maskClassName={drawerStyles.mask}
maskClosable={closeOnMaskClick}
maskMotion={{
motionAppear: true,
motionName: drawerStyles.maskMotion,
}}
>
<FocusScope restoreFocus contain autoFocus>
<div className={drawerStyles.container} {...overlayProps} {...dialogProps} ref={overlayRef}>
<div
aria-label={
typeof title === 'string'
? selectors.components.Drawer.General.title(title)
: selectors.components.Drawer.General.title('no title')
}
className={drawerStyles.container}
{...overlayProps}
{...dialogProps}
ref={overlayRef}
>
{typeof title === 'string' && (
<div className={drawerStyles.header}>
<div className={drawerStyles.actions}>
@ -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;

52
yarn.lock
View File

@ -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: