Theme: More theme updates (#33076)

* Theme: More theme updates * Updated so Switch design * increase limit
4 years ago · c46f992bfb
parent 7d5a46ffda
commit c46f992bfb
8 changed files with 61 additions and 62 deletions
--- 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<HTMLButtonElement, ButtonProps>(
    });

    return (
-      <button className={cx(styles.button, className)} {...otherProps}>
+      <button className={cx(styles.button, className)} {...otherProps} ref={ref}>
        {icon && <Icon name={icon} size={size} className={styles.icon} />}
        {children && <span className={styles.content}>{children}</span>}
      </button>
@ -74,7 +74,7 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
    const linkButtonStyles = cx(styles.button, { [styles.disabled]: disabled }, className);

    return (
-      <a className={linkButtonStyles} {...otherProps} tabIndex={disabled ? -1 : 0}>
+      <a className={linkButtonStyles} {...otherProps} tabIndex={disabled ? -1 : 0} ref={ref}>
        {icon && <Icon name={icon} size={size} className={styles.icon} />}
        {children && <span className={styles.content}>{children}</span>}
      </a>
--- 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;
    `,
--- 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<HTMLProps<HTMLInputElement>, '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()};
    `,
  };
 });
--- 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<HTMLLIElement> {
+export interface TabProps extends HTMLProps<HTMLAnchorElement> {
  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<HTMLLIElement>) => void;
+  onChangeTab?: (event?: React.MouseEvent<HTMLAnchorElement>) => 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<HTMLLIElement, TabProps>(
+export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
  ({ 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<HTMLLIElement, TabProps>(
      </>
    );

-    const itemClass = cx(
-      tabsStyles.tabItem,
-      active ? tabsStyles.activeStyle : tabsStyles.notActive,
-      !href && tabsStyles.padding
-    );
+    const linkClass = cx(tabsStyles.link, active ? tabsStyles.activeStyle : tabsStyles.notActive);

    return (
-      <li
-        {...otherProps}
-        className={itemClass}
-        onClick={onChangeTab}
-        aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
-        ref={ref}
-      >
-        {href ? (
-          <a href={href} className={tabsStyles.padding}>
-            {content()}
-          </a>
-        ) : (
-          <>{content()}</>
-        )}
+      <li className={tabsStyles.item}>
+        <a
+          href={href}
+          className={linkClass}
+          {...otherProps}
+          onClick={onChangeTab}
+          aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
+          ref={ref}
+        >
+          {content()}
+        </a>
      </li>
    );
  }
@ -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};
--- 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<Props> = ({ placeholder = 'New tag (enter key to add)
          value={newTagName}
          onKeyUp={onKeyboardAdd}
          suffix={
-            <Button
-              variant="link"
-              className={styles.addButtonStyle}
-              onClick={onAdd}
-              size="md"
-              disabled={newTagName.length === 0}
-            >
-              Add
-            </Button>
+            newTagName.length > 0 && (
+              <Button variant="link" className={styles.addButtonStyle} onClick={onAdd} size="md">
+                Add
+              </Button>
+            )
          }
        />
      </div>
--- 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<ToggleButtonGroupProps> {
  render() {
    const { children, label, transparent, width } = this.props;
@ -21,6 +23,8 @@ export class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
      'toggle-button-group--padded': width, // Add extra padding to compensate for buttons border
    });

+    deprecationWarning('ToggleButtonGroup', 'ToggleButtonGroup', 'RadioButtonGroup');
+
    return (
      <div className="gf-form gf-form--align-center">
        {label && <label className={labelClasses}>{label}</label>}
--- 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);
  });

--- 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"