diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index c357135b7fe..97a4b2ae1ab 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -34,7 +34,7 @@ export const Button = React.forwardRef( }); return ( - @@ -74,7 +74,7 @@ export const LinkButton = React.forwardRef( const linkButtonStyles = cx(styles.button, { [styles.disabled]: disabled }, className); return ( - + {icon && } {children && {children}} diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index cd6aa283c9c..b7a5bfa397c 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -3,14 +3,16 @@ import { GrafanaTheme } from '@grafana/data'; import { stylesFactory } from '../../themes'; export const getModalStyles = stylesFactory((theme: GrafanaTheme) => { - const backdropBackground = theme.colors.bg3; + const backdropBackground = 'rgba(0, 0, 0, 0.5)'; + const borderRadius = theme.v2.shape.borderRadius(2); return { modal: css` position: fixed; - z-index: ${theme.zIndex.modal}; - background: ${theme.colors.bodyBg}; - box-shadow: 0 0 20px ${theme.colors.dropdownShadow}; + z-index: ${theme.v2.zIndex.modal}; + background: ${theme.v2.palette.layer1}; + box-shadow: ${theme.v2.shadows.z4}; + border-radius: ${borderRadius}; background-clip: padding-box; outline: none; width: 750px; @@ -27,14 +29,14 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => { right: 0; bottom: 0; left: 0; - z-index: ${theme.zIndex.modalBackdrop}; + z-index: ${theme.v2.zIndex.modalBackdrop}; background-color: ${backdropBackground}; - opacity: 0.7; `, modalHeader: css` label: modalHeader; background: ${theme.colors.bg2}; border-bottom: 1px solid ${theme.colors.pageHeaderBorder}; + border-radius: ${borderRadius} ${borderRadius} 0 0; display: flex; height: 42px; `, diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index 9acd51fa3cb..4021eb462ac 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css'; import uniqueId from 'lodash/uniqueId'; import { GrafanaTheme, deprecationWarning } from '@grafana/data'; import { stylesFactory, useTheme } from '../../themes'; -import { focusCss } from '../../themes/mixins'; +import { focusCss, getMouseFocusStyles } from '../../themes/mixins'; export interface Props extends Omit, 'value'> { value?: boolean; @@ -69,15 +69,15 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea position: absolute; &:disabled + label { - background: ${theme.colors.formSwitchBgDisabled}; + background: ${theme.v2.palette.action.disabledBackground}; cursor: not-allowed; } &:checked + label { - background: ${theme.colors.formSwitchBgActive}; + background: ${theme.v2.palette.primary.main}; &:hover { - background: ${theme.colors.formSwitchBgActiveHover}; + background: ${theme.v2.palette.primary.shade}; } &::after { @@ -85,8 +85,13 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea } } - &:focus + label { - ${focusCss(theme)}; + &:focus + label, + &:focus-visible + label { + ${focusCss(theme)} + } + + &:focus:not(:focus-visible) + label { + ${getMouseFocusStyles(theme.v2)} } } @@ -96,11 +101,11 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea cursor: pointer; border: none; border-radius: 50px; - background: ${theme.colors.formSwitchBg}; + background: ${theme.v2.palette.secondary.main}; transition: all 0.3s ease; &:hover { - background: ${theme.colors.formSwitchBgHover}; + background: ${theme.v2.palette.secondary.shade}; } &::after { @@ -110,7 +115,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea width: 12px; height: 12px; border-radius: 6px; - background: ${theme.colors.formSwitchDot}; + background: ${theme.v2.palette.text.primary}; top: 50%; transform: translate3d(2px, -50%, 0); transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1); @@ -118,13 +123,13 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea } `, inlineContainer: css` - padding: 0 ${theme.spacing.sm}; - height: ${theme.spacing.formInputHeight}px; + padding: ${theme.v2.spacing(0, 1)}; + height: ${theme.v2.spacing(theme.v2.components.height.md)}; display: flex; align-items: center; - background: ${transparent ? 'transparent' : theme.colors.formInputBg}; - border: 1px solid ${transparent ? 'transparent' : theme.colors.formInputBorder}; - border-radius: ${theme.border.radius.md}; + background: ${transparent ? 'transparent' : theme.v2.components.form.background}; + border: 1px solid ${transparent ? 'transparent' : theme.v2.components.form.border}; + border-radius: ${theme.v2.shape.borderRadius()}; `, }; }); diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index 6c8a027ab1c..76b7736ad2f 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -8,18 +8,18 @@ import { IconName } from '../../types'; import { stylesFactory, useTheme } from '../../themes'; import { Counter } from './Counter'; -export interface TabProps extends HTMLProps { +export interface TabProps extends HTMLProps { label: string; active?: boolean; /** When provided, it is possible to use the tab as a hyperlink. Use in cases where the tabs update location. */ href?: string; icon?: IconName; - onChangeTab?: (event?: React.MouseEvent) => void; + onChangeTab?: (event?: React.MouseEvent) => void; /** A number rendered next to the text. Usually used to display the number of items in a tab's view. */ counter?: number | null; } -export const Tab = React.forwardRef( +export const Tab = React.forwardRef( ({ label, active, icon, onChangeTab, counter, className, href, ...otherProps }, ref) => { const theme = useTheme(); const tabsStyles = getTabStyles(theme); @@ -31,27 +31,20 @@ export const Tab = React.forwardRef( ); - const itemClass = cx( - tabsStyles.tabItem, - active ? tabsStyles.activeStyle : tabsStyles.notActive, - !href && tabsStyles.padding - ); + const linkClass = cx(tabsStyles.link, active ? tabsStyles.activeStyle : tabsStyles.notActive); return ( -
  • - {href ? ( - - {content()} - - ) : ( - <>{content()} - )} +
  • + + {content()} +
    • ); } @@ -61,12 +54,14 @@ Tab.displayName = 'Tab'; const getTabStyles = stylesFactory((theme: GrafanaTheme) => { return { - tabItem: css` + item: css` list-style: none; position: relative; - display: block; + display: flex; + `, + link: css` color: ${theme.v2.palette.text.secondary}; - cursor: pointer; + padding: ${theme.v2.spacing(1.5, 2, 1)}; svg { margin-right: ${theme.v2.spacing(1)}; @@ -97,9 +92,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => { } } `, - padding: css` - padding: ${theme.v2.spacing(1.5, 2, 1)}; - `, activeStyle: css` label: activeTabStyle; color: ${theme.v2.palette.text.primary}; diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx index e8abc693a75..e4b78d7d663 100644 --- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx +++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx @@ -52,15 +52,11 @@ export const TagsInput: FC = ({ placeholder = 'New tag (enter key to add) value={newTagName} onKeyUp={onKeyboardAdd} suffix={ - + newTagName.length > 0 && ( + + ) } /> diff --git a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx index e886cc8d6cd..b5c611fc1cb 100644 --- a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -1,6 +1,7 @@ import React, { FC, ReactNode, PureComponent } from 'react'; import classNames from 'classnames'; import { Tooltip } from '../Tooltip/Tooltip'; +import { deprecationWarning } from '@grafana/data'; interface ToggleButtonGroupProps { label?: string; @@ -9,6 +10,7 @@ interface ToggleButtonGroupProps { width?: number; } +/** @deprecated */ export class ToggleButtonGroup extends PureComponent { render() { const { children, label, transparent, width } = this.props; @@ -21,6 +23,8 @@ export class ToggleButtonGroup extends PureComponent { 'toggle-button-group--padded': width, // Add extra padding to compensate for buttons border }); + deprecationWarning('ToggleButtonGroup', 'ToggleButtonGroup', 'RadioButtonGroup'); + return (
    {label && } diff --git a/public/app/features/plugins/AppRootPage.test.tsx b/public/app/features/plugins/AppRootPage.test.tsx index 4fb856e71e3..d4614f28f73 100644 --- a/public/app/features/plugins/AppRootPage.test.tsx +++ b/public/app/features/plugins/AppRootPage.test.tsx @@ -91,8 +91,8 @@ describe('AppRootPage', () => { // check that plugin and nav links were rendered, and plugin is mounted only once expect(await screen.findByText('my great plugin')).toBeVisible(); - expect(await screen.findByRole('link', { name: 'A page' })).toBeVisible(); - expect(await screen.findByRole('link', { name: 'Another page' })).toBeVisible(); + expect(await screen.findByLabelText('Tab A page')).toBeVisible(); + expect(await screen.findByLabelText('Tab Another page')).toBeVisible(); expect(RootComponent.timesMounted).toEqual(1); }); diff --git a/scripts/ci-reference-docs-lint.sh b/scripts/ci-reference-docs-lint.sh index 00db95f2039..04ed9773a00 100755 --- a/scripts/ci-reference-docs-lint.sh +++ b/scripts/ci-reference-docs-lint.sh @@ -29,7 +29,7 @@ if [ ! -d "$REPORT_PATH" ]; then fi WARNINGS_COUNT="$(find "$REPORT_PATH" -type f -name \*.log -print0 | xargs -0 grep -o "Warning: " | wc -l | xargs)" -WARNINGS_COUNT_LIMIT=1071 +WARNINGS_COUNT_LIMIT=1072 if [ "$WARNINGS_COUNT" -gt $WARNINGS_COUNT_LIMIT ]; then echo -e "API Extractor warnings/errors $WARNINGS_COUNT exceeded $WARNINGS_COUNT_LIMIT so failing build.\n"