Collapse: Change icon (#46950)

This commit is contained in:
Andres Martinez Gotor 2022-03-29 07:22:06 -07:00 committed by GitHub
parent d1681dcc18
commit 7d2476d045
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,9 +1,9 @@
import React, { FunctionComponent, useState } from 'react';
import { css, cx } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import React, { FunctionComponent, useState } from 'react';
import { useStyles2 } from '../../themes/ThemeContext';
import { Icon } from '../Icon/Icon';
import { GrafanaTheme2 } from '@grafana/data';
const getStyles = (theme: GrafanaTheme2) => ({
collapse: css`
@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
`,
header: css`
label: collapse__header;
padding: ${theme.spacing(1, 2, 0.5, 2)};
padding: ${theme.spacing(1, 2, 1, 2)};
display: flex;
cursor: inherit;
transition: all 0.1s linear;
@ -68,7 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
`,
headerCollapsed: css`
label: collapse__header--collapsed;
padding: ${theme.spacing(1, 2, 0.5, 2)};
padding: ${theme.spacing(1, 2, 1, 2)};
`,
headerLabel: css`
label: collapse__header-label;
@ -137,7 +137,7 @@ export const Collapse: FunctionComponent<Props> = ({
return (
<div className={panelClass}>
<div className={headerClass} onClick={onClickToggle}>
{collapsible && <Icon className={style.icon} name={isOpen ? 'angle-up' : 'angle-down'} />}
{collapsible && <Icon className={style.icon} name={isOpen ? 'angle-down' : 'angle-right'} />}
<div className={cx([style.headerLabel])}>{label}</div>
</div>
{isOpen && (