IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-29 15:59:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

Theme: Updates Alert design and licence warning hook (#32930)

Browse Source 
* Theme: Updates Alert design and licence warning hook

* Updated snapshot

* Updated design

* Updated
This commit is contained in:
Torkel Ödegaard
2021-04-13 18:00:55 +02:00
committed by GitHub
parent 12ceff407b
commit b0c6cad637
18 changed files with 194 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/themes/createPalette.ts
+7 -5
View File
@@ -1,5 +1,5 @@
import { merge } from 'lodash'; import { merge } from 'lodash';
import { darken, emphasize, getContrastRatio, lighten } from './colorManipulator'; import { alpha, darken, emphasize, getContrastRatio, lighten } from './colorManipulator';
import { colors } from './colors'; import { colors } from './colors';
import { DeepPartial, ThemePaletteColor } from './types'; import { DeepPartial, ThemePaletteColor } from './types';
@@ -75,8 +75,8 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
mode: ThemePaletteMode = 'dark'; mode: ThemePaletteMode = 'dark';
text = { text = {
primary: 'rgba(255, 255, 255, 0.75)', primary: 'rgba(255, 255, 255, 0.77)',
secondary: 'rgba(255, 255, 255, 0.50)', secondary: 'rgba(255, 255, 255, 0.55)',
disabled: 'rgba(255, 255, 255, 0.35)', disabled: 'rgba(255, 255, 255, 0.35)',
link: colors.blueDarkText, link: colors.blueDarkText,
maxContrast: colors.white, maxContrast: colors.white,
@@ -188,7 +188,6 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
divider = 'rgba(0, 2, 78, 0.07)'; divider = 'rgba(0, 2, 78, 0.07)';
border0 = this.layer1; border0 = this.layer1;
border1 = 'rgba(0, 2, 78, 0.20)'; border1 = 'rgba(0, 2, 78, 0.20)';
border2 = 'rgba(0, 2, 78, 0.30)'; border2 = 'rgba(0, 2, 78, 0.30)';
@@ -246,11 +245,14 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
color.text = color.main; color.text = color.main;
} }
if (!color.border) { if (!color.border) {
color.text = color.text; color.border = color.text;
} }
if (!color.shade) { if (!color.shade) {
color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset); color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset);
} }
if (!color.transparent) {
color.transparent = base.mode === 'light' ? alpha(color.main, 0.08) : alpha(color.main, 0.15);
}
if (!color.contrastText) { if (!color.contrastText) {
color.contrastText = getContrastText(color.main); color.contrastText = getContrastText(color.main);
} }
packages/grafana-data/src/themes/createShadows.ts
+4 -4
View File
@@ -22,9 +22,9 @@ function createDarkShadow(...px: number[]) {
} }
function createLightShadow(...px: number[]) { function createLightShadow(...px: number[]) {
const shadowKeyUmbraOpacity = 0.2; const shadowKeyUmbraOpacity = 0.15;
const shadowKeyPenumbraOpacity = 0.14; const shadowKeyPenumbraOpacity = 0.1;
const shadowAmbientShadowOpacity = 0.12; const shadowAmbientShadowOpacity = 0.1;
return [ return [
`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`,
@@ -50,6 +50,6 @@ export function createShadows(palette: ThemePalette): ThemeShadows {
z1: createLightShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0), z1: createLightShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0),
z2: createLightShadow(0, 2, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), z2: createLightShadow(0, 2, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0),
z3: createLightShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), z3: createLightShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0),
z4: createLightShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), z4: createLightShadow(0, 5, 5, -5, 0, 8, 10, 1, 0, 3, 14, 2),
}; };
} }
packages/grafana-ui/src/components/Alert/Alert.story.tsx
+6 -1
View File
@@ -36,12 +36,17 @@ export const Examples: Story<Props> = ({ severity, title, buttonContent }) => {
buttonContent={<span>{buttonContent}</span>} buttonContent={<span>{buttonContent}</span>}
onRemove={action('Remove button clicked')} onRemove={action('Remove button clicked')}
> >
Child content that includes some alert details, like maybe what actually happened. <VerticalGroup>
<div>Child content that includes some alert details, like maybe what actually happened.</div>
</VerticalGroup>
</Alert> </Alert>
</StoryExample> </StoryExample>
<StoryExample name="No dismiss"> <StoryExample name="No dismiss">
<Alert title={title} severity={severity} /> <Alert title={title} severity={severity} />
</StoryExample> </StoryExample>
<StoryExample name="Elevated alert used for absolute positioned alerts">
<Alert title={title} severity={severity} elevated />
</StoryExample>
<StoryExample name="Severities"> <StoryExample name="Severities">
<VerticalGroup> <VerticalGroup>
{severities.map((severity) => ( {severities.map((severity) => (
packages/grafana-ui/src/components/Alert/Alert.tsx
+54 -45
View File
@@ -5,7 +5,8 @@ import { selectors } from '@grafana/e2e-selectors';
import { useTheme } from '../../themes'; import { useTheme } from '../../themes';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
import { IconName } from '../../types/icon'; import { IconName } from '../../types/icon';
import { getColorsFromSeverity } from '../../utils/colors'; import { IconButton } from '../IconButton/IconButton';
import { Button } from '../Button/Button';
export type AlertVariant = 'success' | 'warning' | 'error' | 'info'; export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
@@ -15,14 +16,8 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
onRemove?: (event: React.MouseEvent) => void; onRemove?: (event: React.MouseEvent) => void;
severity?: AlertVariant; severity?: AlertVariant;
children?: ReactNode; children?: ReactNode;
/** Custom component or text for alert button */ elevated?: boolean;
buttonContent?: ReactNode | string; buttonContent?: React.ReactNode | string;
/** @deprecated */
/** Deprecated use onRemove instead */
onButtonClick?: (event: React.MouseEvent) => void;
/** @deprecated */
/** Deprecated use buttonContent instead */
buttonText?: string;
} }
function getIconFromSeverity(severity: AlertVariant): string { function getIconFromSeverity(severity: AlertVariant): string {
@@ -40,9 +35,9 @@ function getIconFromSeverity(severity: AlertVariant): string {
} }
export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>( export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
({ title, buttonText, onButtonClick, onRemove, children, buttonContent, severity = 'error', ...restProps }, ref) => { ({ title, onRemove, children, buttonContent, elevated, severity = 'error', ...restProps }, ref) => {
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme, severity, !!buttonContent); const styles = getStyles(theme, severity, elevated);
return ( return (
<div ref={ref} className={styles.alert} aria-label={selectors.components.Alert.alert(severity)} {...restProps}> <div ref={ref} className={styles.alert} aria-label={selectors.components.Alert.alert(severity)} {...restProps}>
@@ -54,15 +49,18 @@ export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
{children && <div>{children}</div>} {children && <div>{children}</div>}
</div> </div>
{/* If onRemove is specified, giving preference to onRemove */} {/* If onRemove is specified, giving preference to onRemove */}
{onRemove ? ( {onRemove && !buttonContent && (
<button type="button" className={styles.close} onClick={onRemove}> <div className={styles.close}>
{buttonContent || <Icon name="times" size="lg" />} <IconButton name="times" onClick={onRemove} size="lg" />
</button> </div>
) : onButtonClick ? ( )}
<button type="button" className="btn btn-outline-danger" onClick={onButtonClick}> {onRemove && buttonContent && (
{buttonText} <div className={styles.buttonWrapper}>
</button> <Button variant="secondary" onClick={onRemove}>
) : null} {buttonContent}
</Button>
</div>
)}
</div> </div>
); );
} }
@@ -70,54 +68,65 @@ export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
Alert.displayName = 'Alert'; Alert.displayName = 'Alert';
const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean) => { const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boolean) => {
const { white } = theme.palette; const color = theme.v2.palette[severity];
const severityColors = getColorsFromSeverity(severity, theme);
const background = css`
background: linear-gradient(90deg, ${severityColors[0]}, ${severityColors[0]});
`;
return { return {
alert: css` alert: css`
flex-grow: 1; flex-grow: 1;
padding: 15px 20px; margin-bottom: ${theme.v2.spacing(0.5)};
margin-bottom: ${theme.spacing.xs};
position: relative; position: relative;
color: ${white}; border-radius: ${theme.v2.shape.borderRadius()};
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
border-radius: ${theme.border.radius.md};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: stretch;
${background} background: ${theme.v2.palette.layer2};
box-shadow: ${elevated ? theme.v2.shadows.z4 : theme.v2.shadows.z1};
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: ${theme.v2.palette.layer1};
z-index: -1;
}
`, `,
icon: css` icon: css`
padding: 0 ${theme.spacing.md} 0 0; padding: ${theme.v2.spacing(2, 3)};
background: ${color.main};
color: ${color.contrastText};
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 35px;
`, `,
title: css` title: css`
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.v2.typography.fontWeightMedium};
color: ${theme.v2.palette.text.primary};
`, `,
body: css` body: css`
color: ${theme.v2.palette.text.secondary};
padding: ${theme.v2.spacing(2)};
flex-grow: 1; flex-grow: 1;
margin: 0 ${theme.spacing.md} 0 0; display: flex;
flex-direction: column;
justify-content: center;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
a {
color: ${white};
text-decoration: underline;
}
`, `,
close: css` buttonWrapper: css`
padding: ${theme.v2.spacing(1)};
background: none; background: none;
display: flex; display: flex;
align-items: center; align-items: center;
border: ${outline ? `1px solid ${white}` : 'none'}; `,
border-radius: ${theme.border.radius.sm}; close: css`
padding: ${theme.v2.spacing(1)};
background: none;
align-items: center;
display: flex;
`, `,
}; };
}; };
packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
+4 -4
View File
@@ -17,13 +17,13 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
const styles = cx( const styles = cx(
className, className,
css` css`
background: linear-gradient(to bottom, ${theme.palette.blue85}, ${theme.palette.blue77}); background: ${theme.v2.palette.primary.transparent};
color: ${theme.palette.gray7}; color: ${theme.v2.palette.text.secondary};
white-space: nowrap; white-space: nowrap;
border-radius: 3px; border-radius: 3px;
text-shadow: none; text-shadow: none;
font-size: 13px; font-size: ${theme.v2.typography.size.sm};
padding: 4px 8px; padding: 0 8px;
cursor: help; cursor: help;
display: inline-block; display: inline-block;
` `
packages/grafana-ui/src/components/IconButton/IconButton.tsx
+5
View File
@@ -7,6 +7,7 @@ import { useTheme } from '../../themes/ThemeContext';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { Tooltip } from '../Tooltip/Tooltip'; import { Tooltip } from '../Tooltip/Tooltip';
import { TooltipPlacement } from '../Tooltip/PopoverController'; import { TooltipPlacement } from '../Tooltip/PopoverController';
import { focusCss } from '../../themes/mixins';
export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> { export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Name of the icon **/ /** Name of the icon **/
@@ -97,6 +98,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => {
transition-property: transform, opacity; transition-property: transform, opacity;
} }
&:focus {
${focusCss(theme)}
}
&:hover { &:hover {
color: ${theme.colors.linkHover}; color: ${theme.colors.linkHover};
packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
+57 -53
View File
@@ -8,7 +8,6 @@ import { AlertVariant } from '../Alert/Alert';
import panelArtDark from './panelArt_dark.svg'; import panelArtDark from './panelArt_dark.svg';
import panelArtLight from './panelArt_light.svg'; import panelArtLight from './panelArt_light.svg';
import { stylesFactory, useTheme } from '../../themes'; import { stylesFactory, useTheme } from '../../themes';
import { getColorsFromSeverity } from '../../utils/colors';
export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> { export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
children: React.ReactNode; children: React.ReactNode;
@@ -57,61 +56,66 @@ export const InfoBox = React.memo(
); );
InfoBox.displayName = 'InfoBox'; InfoBox.displayName = 'InfoBox';
const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme, severity: AlertVariant) => ({ const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme, severity: AlertVariant) => {
wrapper: css` const color = theme.v2.palette[severity];
position: relative;
padding: ${theme.spacing.md};
background-color: ${theme.colors.bg2};
border-top: 3px solid ${getColorsFromSeverity(severity, theme)[0]};
margin-bottom: ${theme.spacing.md};
flex-grow: 1;
color: ${theme.colors.textSemiWeak};
code { return {
font-size: ${theme.typography.size.sm}; wrapper: css`
background-color: ${theme.colors.bg1}; position: relative;
color: ${theme.colors.text}; padding: ${theme.spacing.md};
border: 1px solid ${theme.colors.border2}; background-color: ${theme.colors.bg2};
border-radius: 4px; border-left: 3px solid ${color.border};
} margin-bottom: ${theme.spacing.md};
flex-grow: 1;
color: ${theme.colors.textSemiWeak};
box-shadow: ${theme.v2.shadows.z1};
p:last-child { code {
margin-bottom: 0; font-size: ${theme.typography.size.sm};
} background-color: ${theme.colors.bg1};
color: ${theme.colors.text};
border: 1px solid ${theme.colors.border2};
border-radius: 4px;
}
&--max-lg { p:last-child {
max-width: ${theme.breakpoints.lg}; margin-bottom: 0;
} }
`,
wrapperBranded: css`
padding: ${theme.spacing.md};
border-radius: ${theme.border.radius.md};
position: relative;
z-index: 0;
&:before { &--max-lg {
content: ''; max-width: ${theme.breakpoints.lg};
position: absolute; }
top: 0; `,
left: 0; wrapperBranded: css`
width: 100%; padding: ${theme.spacing.md};
height: 100%;
background-image: url(${theme.isLight ? panelArtLight : panelArtDark});
border-radius: ${theme.border.radius.md}; border-radius: ${theme.border.radius.md};
background-position: 50% 50%; position: relative;
background-size: cover; z-index: 0;
filter: saturate(80%);
z-index: -1;
}
p:last-child { &:before {
margin-bottom: 0; content: '';
} position: absolute;
`, top: 0;
docsLink: css` left: 0;
display: inline-block; width: 100%;
margin-top: ${theme.spacing.md}; height: 100%;
font-size: ${theme.typography.size.sm}; background-image: url(${theme.isLight ? panelArtLight : panelArtDark});
color: ${theme.colors.textSemiWeak}; border-radius: ${theme.border.radius.md};
`, background-position: 50% 50%;
})); background-size: cover;
filter: saturate(80%);
z-index: -1;
}
p:last-child {
margin-bottom: 0;
}
`,
docsLink: css`
display: inline-block;
margin-top: ${theme.spacing.md};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textSemiWeak};
`,
};
});
packages/grafana-ui/src/utils/colors.ts
-22
View File
@@ -6,8 +6,6 @@ import zip from 'lodash/zip';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import lightTheme from '../themes/light'; import lightTheme from '../themes/light';
import darkTheme from '../themes/dark'; import darkTheme from '../themes/dark';
import { GrafanaTheme } from '@grafana/data';
import { AlertVariant } from '../components/Alert/Alert';
const PALETTE_ROWS = 4; const PALETTE_ROWS = 4;
@@ -126,23 +124,3 @@ export function getTextColorForBackground(color: string) {
} }
export let sortedColors = sortColorsByHue(colors); export let sortedColors = sortColorsByHue(colors);
/**
* Returns colors used for severity color coding. Use for single color retrievel(0 index) or gradient definition
* @internal
**/
export function getColorsFromSeverity(severity: AlertVariant, theme: GrafanaTheme): [string, string] {
switch (severity) {
case 'error':
return [theme.palette.redBase, theme.palette.redShade];
case 'warning':
return [theme.palette.queryOrange, theme.palette.orange];
case 'info':
case 'info':
return [theme.palette.blue80, theme.palette.blue77];
case 'success':
return [theme.palette.greenBase, theme.palette.greenShade];
default:
return [theme.palette.blue80, theme.palette.blue77];
}
}
public/app/AppWrapper.tsx
+11 -1
View File
@@ -1,4 +1,4 @@
import React from 'react'; import React, { ComponentType } from 'react';
import { Router, Route, Redirect, Switch } from 'react-router-dom'; import { Router, Route, Redirect, Switch } from 'react-router-dom';
import { config, locationService, navigationLogger } from '@grafana/runtime'; import { config, locationService, navigationLogger } from '@grafana/runtime';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
@@ -22,6 +22,13 @@ interface AppWrapperState {
ngInjector: any; ngInjector: any;
} }
/** Used by enterprise */
let bodyRenderHooks: ComponentType[] = [];
export function addBodyRenderHook(fn: ComponentType) {
bodyRenderHooks.push(fn);
}
export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState> { export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState> {
container = React.createRef<HTMLDivElement>(); container = React.createRef<HTMLDivElement>();
@@ -98,6 +105,9 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
<AppNotificationList /> <AppNotificationList />
<SearchWrapper /> <SearchWrapper />
{this.state.ngInjector && this.container && this.renderRoutes()} {this.state.ngInjector && this.container && this.renderRoutes()}
{bodyRenderHooks.map((Hook, index) => (
<Hook key={index.toString()} />
))}
</div> </div>
</Router> </Router>
</div> </div>
public/app/core/components/AppNotifications/AppNotificationItem.tsx
+1
View File
@@ -27,6 +27,7 @@ export default class AppNotificationItem extends Component<Props> {
severity={appNotification.severity} severity={appNotification.severity}
title={appNotification.title} title={appNotification.title}
onRemove={() => onClearNotification(appNotification.id)} onRemove={() => onClearNotification(appNotification.id)}
elevated
> >
{appNotification.component || appNotification.text} {appNotification.component || appNotification.text}
</Alert> </Alert>
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+2 -2
View File
@@ -8,7 +8,7 @@ exports[`Render should render component 1`] = `
onCancel={[Function]} onCancel={[Function]}
styles={ styles={
Object { Object {
"actionsRow": "css-7gkft9", "actionsRow": "css-sxfls",
"actionsWrapper": "css-gxxmom", "actionsWrapper": "css-gxxmom",
"backButton": "css-1cdxa9p", "backButton": "css-1cdxa9p",
"headerRow": "css-3sdqvi", "headerRow": "css-3sdqvi",
@@ -25,7 +25,7 @@ exports[`Render should render component 1`] = `
className="css-gxxmom" className="css-gxxmom"
> >
<div <div
className="css-7gkft9" className="css-sxfls"
> >
<div <div
aria-label="Add new panel" aria-label="Add new panel"
public/app/features/datasources/settings/ButtonRow.tsx
+11 -10
View File
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import config from 'app/core/config'; import config from 'app/core/config';
import { Button, LinkButton } from '@grafana/ui';
export interface Props { export interface Props {
isReadOnly: boolean; isReadOnly: boolean;
@@ -14,33 +15,33 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
return ( return (
<div className="gf-form-button-row"> <div className="gf-form-button-row">
{!isReadOnly && ( {!isReadOnly && (
<button <Button
type="submit" type="submit"
className="btn btn-primary" variant="primary"
disabled={isReadOnly} disabled={isReadOnly}
onClick={(event) => onSubmit(event)} onClick={(event) => onSubmit(event)}
aria-label={selectors.pages.DataSource.saveAndTest} aria-label={selectors.pages.DataSource.saveAndTest}
> >
Save &amp; test Save &amp; test
</button> </Button>
)} )}
{isReadOnly && ( {isReadOnly && (
<button type="submit" className="btn btn-success" onClick={onTest}> <Button type="submit" variant="primary" onClick={onTest}>
Test Test
</button> </Button>
)} )}
<button <Button
type="button" type="button"
className="btn btn-danger" variant="destructive"
disabled={isReadOnly} disabled={isReadOnly}
onClick={onDelete} onClick={onDelete}
aria-label={selectors.pages.DataSource.delete} aria-label={selectors.pages.DataSource.delete}
> >
Delete Delete
</button> </Button>
<a className="btn btn-inverse" href={`${config.appSubUrl}/datasources`}> <LinkButton variant="link" href={`${config.appSubUrl}/datasources`}>
Back Back
</a> </LinkButton>
</div> </div>
); );
}; };
public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+1 -1
View File
@@ -233,7 +233,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
/> />
)} )}
<div className="gf-form-group"> <div className="gf-form-group p-t-2">
{testingStatus?.message && ( {testingStatus?.message && (
<Alert <Alert
severity={testingStatus.status === 'error' ? 'error' : 'success'} severity={testingStatus.status === 'error' ? 'error' : 'success'}
public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
+18 -18
View File
@@ -4,28 +4,28 @@ exports[`Render should render component 1`] = `
<div <div
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <Button
className="btn btn-success"
onClick={[MockFunction]} onClick={[MockFunction]}
type="submit" type="submit"
variant="primary"
> >
Test Test
</button> </Button>
<button <Button
aria-label="Data source settings page Delete button" aria-label="Data source settings page Delete button"
className="btn btn-danger"
disabled={true} disabled={true}
onClick={[MockFunction]} onClick={[MockFunction]}
type="button" type="button"
variant="destructive"
> >
Delete Delete
</button> </Button>
<a <LinkButton
className="btn btn-inverse"
href="/datasources" href="/datasources"
variant="link"
> >
Back Back
</a> </LinkButton>
</div> </div>
`; `;
@@ -33,29 +33,29 @@ exports[`Render should render with buttons enabled 1`] = `
<div <div
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <Button
aria-label="Data source settings page Save and Test button" aria-label="Data source settings page Save and Test button"
className="btn btn-primary"
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
type="submit" type="submit"
variant="primary"
> >
Save & test Save & test
</button> </Button>
<button <Button
aria-label="Data source settings page Delete button" aria-label="Data source settings page Delete button"
className="btn btn-danger"
disabled={false} disabled={false}
onClick={[MockFunction]} onClick={[MockFunction]}
type="button" type="button"
variant="destructive"
> >
Delete Delete
</button> </Button>
<a <LinkButton
className="btn btn-inverse"
href="/datasources" href="/datasources"
variant="link"
> >
Back Back
</a> </LinkButton>
</div> </div>
`; `;
public/app/features/plugins/PluginStateInfo.tsx
+1 -10
View File
@@ -1,7 +1,6 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { AlphaNotice } from '@grafana/ui'; import { AlphaNotice } from '@grafana/ui';
import { PluginState } from '@grafana/data'; import { PluginState } from '@grafana/data';
import { css } from '@emotion/css';
interface Props { interface Props {
state?: PluginState; state?: PluginState;
@@ -24,15 +23,7 @@ const PluginStateinfo: FC<Props> = (props) => {
return null; return null;
} }
return ( return <AlphaNotice state={props.state} text={text} />;
<AlphaNotice
state={props.state}
text={text}
className={css`
margin-left: 16px;
`}
/>
);
}; };
export default PluginStateinfo; export default PluginStateinfo;
public/sass/_variables.dark.generated.scss
+7 -7
View File
@@ -99,8 +99,8 @@ $page-bg: #181b1f;
$dashboard-bg: #0d0f16; $dashboard-bg: #0d0f16;
$text-color-strong: #fff; $text-color-strong: #fff;
$text-color: rgba(255, 255, 255, 0.75); $text-color: rgba(255, 255, 255, 0.77);
$text-color-semi-weak: rgba(255, 255, 255, 0.50); $text-color-semi-weak: rgba(255, 255, 255, 0.55);
$text-color-weak: rgba(255, 255, 255, 0.35); $text-color-weak: rgba(255, 255, 255, 0.35);
$text-color-faint: rgba(255, 255, 255, 0.35); $text-color-faint: rgba(255, 255, 255, 0.35);
$text-color-emphasis: #fff; $text-color-emphasis: #fff;
@@ -122,7 +122,7 @@ $external-link-color: #33a2e5;
// Typography // Typography
// ------------------------- // -------------------------
$headings-color: rgba(255, 255, 255, 0.75); $headings-color: rgba(255, 255, 255, 0.77);
$abbr-border-color: $gray-2 !default; $abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak; $text-muted: $text-color-weak;
@@ -258,7 +258,7 @@ $side-menu-border: none;
$side-menu-item-hover-bg: #22252b; $side-menu-item-hover-bg: #22252b;
$side-menu-shadow: 0 0 20px black; $side-menu-shadow: 0 0 20px black;
$side-menu-icon-color: #9fa7b3; $side-menu-icon-color: #9fa7b3;
$side-menu-header-color: rgba(255, 255, 255, 0.75); $side-menu-header-color: rgba(255, 255, 255, 0.77);
// Menu dropdowns // Menu dropdowns
// ------------------------- // -------------------------
@@ -288,13 +288,13 @@ $tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1; $graph-tooltip-bg: $dark-1;
$tooltipBackground: #22252b; $tooltipBackground: #22252b;
$tooltipColor: rgba(255, 255, 255, 0.75); $tooltipColor: rgba(255, 255, 255, 0.77);
$tooltipArrowColor: #22252b; $tooltipArrowColor: #22252b;
$tooltipBackgroundError: #D10E5C; $tooltipBackgroundError: #D10E5C;
$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.5),0px 2px 2px 0px rgba(0,0,0,0.4),0px 1px 5px 0px rgba(0,0,0,0.3); $tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.5),0px 2px 2px 0px rgba(0,0,0,0.4),0px 1px 5px 0px rgba(0,0,0,0.3);
$popover-bg: #22252b; $popover-bg: #22252b;
$popover-color: rgba(255, 255, 255, 0.75); $popover-color: rgba(255, 255, 255, 0.77);
$popover-border-color: rgba(218,224,254,0.15); $popover-border-color: rgba(218,224,254,0.15);
$popover-header-bg: #22252b; $popover-header-bg: #22252b;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5),0px 8px 10px 1px rgba(0,0,0,0.4),0px 3px 14px 2px rgba(0,0,0,0.3); $popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5),0px 8px 10px 1px rgba(0,0,0,0.4),0px 3px 14px 2px rgba(0,0,0,0.3);
@@ -339,7 +339,7 @@ $diff-group-bg: #22252b;
$diff-arrow-color: $white; $diff-arrow-color: $white;
$diff-json-bg: #22252b; $diff-json-bg: #22252b;
$diff-json-fg: rgba(255, 255, 255, 0.75); $diff-json-fg: rgba(255, 255, 255, 0.77);
$diff-json-added: $blue-shade; $diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade; $diff-json-deleted: $red-shade;
public/sass/_variables.light.generated.scss
+4 -4
View File
@@ -127,7 +127,7 @@ $hr-border-color: $gray-4 !default;
$panel-bg: #fff; $panel-bg: #fff;
$panel-border: #fff; $panel-border: #fff;
$panel-header-hover-bg: rgba(0, 0, 0, 0.04); $panel-header-hover-bg: rgba(0, 0, 0, 0.04);
$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); $panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.1);
$panel-corner: $panel-bg; $panel-corner: $panel-bg;
// Page header // Page header
@@ -260,7 +260,7 @@ $side-menu-header-color: #e9edf2;
// ------------------------- // -------------------------
$menu-dropdown-bg: #F7F7F8; $menu-dropdown-bg: #F7F7F8;
$menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04); $menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04);
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); $menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1);
// Tabs // Tabs
// ------------------------- // -------------------------
@@ -282,13 +282,13 @@ $tooltipBackground: #F7F7F8;
$tooltipColor: rgba(0, 0, 0, 0.75); $tooltipColor: rgba(0, 0, 0, 0.75);
$tooltipArrowColor: #F7F7F8; $tooltipArrowColor: #F7F7F8;
$tooltipBackgroundError: #E0226E; $tooltipBackgroundError: #E0226E;
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); $tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1);
$popover-bg: #F7F7F8; $popover-bg: #F7F7F8;
$popover-color: rgba(0, 0, 0, 0.75); $popover-color: rgba(0, 0, 0, 0.75);
$popover-border-color: rgba(0, 2, 78, 0.20); $popover-border-color: rgba(0, 2, 78, 0.20);
$popover-header-bg: #F7F7F8; $popover-header-bg: #F7F7F8;
$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); $popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1);
$graph-tooltip-bg: $gray-5; $graph-tooltip-bg: $gray-5;
public/sass/components/_infobox.scss
+1 -1
View File
@@ -2,7 +2,7 @@
position: relative; position: relative;
padding: $space-lg; padding: $space-lg;
background-color: $empty-list-cta-bg; background-color: $empty-list-cta-bg;
border-top: 3px solid $info-box-border-color; border-left: 3px solid $info-box-border-color;
margin-bottom: $space-md; margin-bottom: $space-md;
margin-right: $space-xs; margin-right: $space-xs;
box-shadow: $card-shadow; box-shadow: $card-shadow;