Theme: More theme updates (#33076)

* Theme: More theme updates

* Updated so Switch design

* increase limit

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>

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};
+      z-index: ${theme.v2.zIndex.modal};
-      background: ${theme.colors.bodyBg};
+      background: ${theme.v2.palette.layer1};
-      box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
+      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;
     `,

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 {
+        &:focus + label,
-          ${focusCss(theme)};
+        &: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};
+      padding: ${theme.v2.spacing(0, 1)};
-      height: ${theme.spacing.formInputHeight}px;
+      height: ${theme.v2.spacing(theme.v2.components.height.md)};
       display: flex;
       align-items: center;
-      background: ${transparent ? 'transparent' : theme.colors.formInputBg};
+      background: ${transparent ? 'transparent' : theme.v2.components.form.background};
-      border: 1px solid ${transparent ? 'transparent' : theme.colors.formInputBorder};
+      border: 1px solid ${transparent ? 'transparent' : theme.v2.components.form.border};
-      border-radius: ${theme.border.radius.md};
+      border-radius: ${theme.v2.shape.borderRadius()};
     `,
   };
 });

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(
+    const linkClass = cx(tabsStyles.link, active ? tabsStyles.activeStyle : tabsStyles.notActive);
-      tabsStyles.tabItem,
-      active ? tabsStyles.activeStyle : tabsStyles.notActive,
-      !href && tabsStyles.padding
-    );
 
     return (
-      <li
+      <li className={tabsStyles.item}>
-        {...otherProps}
+        <a
-        className={itemClass}
+          href={href}
-        onClick={onChangeTab}
+          className={linkClass}
-        aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
+          {...otherProps}
-        ref={ref}
+          onClick={onChangeTab}
-      >
+          aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
-        {href ? (
+          ref={ref}
-          <a href={href} className={tabsStyles.padding}>
+        >
-            {content()}
+          {content()}
-          </a>
+        </a>
-        ) : (
-          <>{content()}</>
-        )}
       </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};

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
+            newTagName.length > 0 && (
-              variant="link"
+              <Button variant="link" className={styles.addButtonStyle} onClick={onAdd} size="md">
-              className={styles.addButtonStyle}
+                Add
-              onClick={onAdd}
+              </Button>
-              size="md"
+            )
-              disabled={newTagName.length === 0}
-            >
-              Add
-            </Button>
           }
         />
       </div>

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

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.findByLabelText('Tab A page')).toBeVisible();
-    expect(await screen.findByRole('link', { name: 'Another page' })).toBeVisible();
+    expect(await screen.findByLabelText('Tab Another page')).toBeVisible();
     expect(RootComponent.timesMounted).toEqual(1);
   });
 

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"