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

Feature Highlights: add highlight to toolbar button and add upgrade modal (#44645)

Browse Source 
* Feature Highlights: add highlight to toolbar button and add upgrade modal

* replace hideTitle attribute by making title optional

* update modal design

* remove unused updates
This commit is contained in:
Agnès Toulet 2022-02-07 16:04:15 +01:00 committed by GitHub
parent 05ea825c76
commit bdac6576e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/Button/ToolbarButton.tsx
View File

@ -29,6 +29,8 @@ export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ToolbarButtonVariant; variant?: ToolbarButtonVariant;
/** Hide any children and only show icon */ /** Hide any children and only show icon */
iconOnly?: boolean; iconOnly?: boolean;
/** Show highlight dot */
isHighlighted?: boolean;
} }
export type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active'; export type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active';
@ -48,6 +50,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, Props>(
variant = 'default', variant = 'default',
iconOnly, iconOnly,
'aria-label': ariaLabel, 'aria-label': ariaLabel,
isHighlighted,
...rest ...rest
}, },
ref ref
@ -84,6 +87,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, Props>(
{children && !iconOnly && <div className={contentStyles}>{children}</div>} {children && !iconOnly && <div className={contentStyles}>{children}</div>}
{isOpen === false && <Icon name="angle-down" />} {isOpen === false && <Icon name="angle-down" />}
{isOpen === true && <Icon name="angle-up" />} {isOpen === true && <Icon name="angle-up" />}
{isHighlighted && <div className={styles.highlight} />}
</button> </button>
); );
@ -122,6 +126,7 @@ const getStyles = (theme: GrafanaTheme2) => {
return { return {
button: css` button: css`
label: toolbar-button; label: toolbar-button;
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
height: ${theme.spacing(theme.components.height.md)}; height: ${theme.spacing(theme.components.height.md)};
@ -209,5 +214,15 @@ const getStyles = (theme: GrafanaTheme2) => {
contentWithRightIcon: css` contentWithRightIcon: css`
padding-right: ${theme.spacing(0.5)}; padding-right: ${theme.spacing(0.5)};
`, `,
highlight: css`
background-color: ${theme.colors.success.main};
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute;
top: -3px;
right: -3px;
z-index: 1;
`,
}; };
}; };

18
public/app/core/components/Upgrade/UpgradeModal.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import { Modal } from '@grafana/ui';
import { UpgradeBox } from './UpgradeBox';
export interface Props {
title: string;
text: string;
isOpen?: boolean;
onDismiss?: () => void;
}
export const UpgradeModal = ({ title, text, isOpen, onDismiss }: Props) => {
return (
<Modal title={title} isOpen={isOpen} onDismiss={onDismiss}>
<UpgradeBox text={text} />
</Modal>
);
};