IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

CollapsableSection: updates component to use the new theme model (#33378)

Browse Source 
* updates component to use the new theme model

* fixes small nit
This commit is contained in:
Uchechukwu Obasi
2021-04-26 15:01:59 +01:00
committed by GitHub
parent e2a90315bd
commit e21d1ccba4
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
View File

@@ -1,8 +1,8 @@
import React, { FC, ReactNode, useState } from 'react';
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { Icon } from '..';
import { GrafanaThemeV2 } from '@grafana/data';
export interface Props {
label: string;
@@ -12,7 +12,7 @@ export interface Props {
export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
const [open, toggleOpen] = useState<boolean>(isOpen);
const styles = useStyles(collapsableSectionStyles);
const styles = useStyles2(collapsableSectionStyles);
const headerStyle = open ? styles.header : styles.headerCollapsed;
const tooltip = `Click to ${open ? 'collapse' : 'expand'}`;
@@ -27,22 +27,22 @@ export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
);
};
const collapsableSectionStyles = (theme: GrafanaTheme) => {
const collapsableSectionStyles = (theme: GrafanaThemeV2) => {
const header = css({
display: 'flex',
justifyContent: 'space-between',
fontSize: theme.typography.size.lg,
padding: `${theme.spacing.xs} 0`,
padding: `${theme.spacing(0.5)} 0`,
cursor: 'pointer',
});
const headerCollapsed = css(header, {
borderBottom: `1px solid ${theme.colors.border2}`,
borderBottom: `1px solid ${theme.colors.border.weak}`,
});
const icon = css({
color: theme.colors.textWeak,
color: theme.colors.text.secondary,
});
const content = css({
padding: `${theme.spacing.md} 0`,
padding: `${theme.spacing(2)} 0`,
});
return { header, headerCollapsed, icon, content };