PanelChrome: Styling issues (#62466)

* all panel icons are 16x16 in size; allow ToolbarButton to have its icon size set from outside; * use TitleItem for streaming too, so that the style of focus-visible is the same * allow menu icon to be visible when panel is focused * remove some styling of title icons in panel header * panel alert notices are too big * PanelHeaderNotice: Fix styling issue with background and hover when feature toggle is not enable --------- Co-authored-by: Alexandra Vargas <alexa1866@gmail.com>
2 years ago · d48a8fd227
parent 6c02c7079f
commit d48a8fd227
8 changed files with 28 additions and 27 deletions
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@ -13,6 +13,7 @@ import { Tooltip } from '../Tooltip';

 import { PanelDescription } from './PanelDescription';
 import { PanelStatus } from './PanelStatus';
+import { TitleItem } from './TitleItem';

 /**
 * @internal
@ -101,11 +102,6 @@ export function PanelChrome({
    cursor: dragClass ? 'move' : 'auto',
  };

-  const itemStyles: CSSProperties = {
-    minHeight: headerHeight,
-    minWidth: headerHeight,
-  };
-
  const containerStyles: CSSProperties = { width, height };
  const ariaLabel = title ? selectors.components.Panels.Panel.containerByTitle(title) : 'Panel';

@ -133,11 +129,11 @@ export function PanelChrome({
        )}

        {loadingState === LoadingState.Streaming && (
-          <div className={styles.item} style={itemStyles} data-testid="panel-streaming">
-            <Tooltip content="Streaming">
-              <Icon name="circle-mono" size="sm" className={styles.streaming} />
-            </Tooltip>
-          </div>
+          <Tooltip content="Streaming">
+            <TitleItem className={dragClassCancel} data-testid="panel-streaming">
+              <Icon name="circle-mono" size="md" className={styles.streaming} />
+            </TitleItem>
+          </Tooltip>
        )}

        <div className={styles.rightAligned}>
@ -147,6 +143,7 @@ export function PanelChrome({
                aria-label={`Menu for panel with ${title ? `title ${title}` : 'no title'}`}
                title="Menu"
                icon="ellipsis-v"
+                iconSize="md"
                narrow
                data-testid="panel-menu-button"
                className={cx(styles.menuItem, dragClassCancel, 'menu-icon')}
@ -224,7 +221,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      flexDirection: 'column',
      flex: '1 1 0',

-      '&:focus-visible, &:hover': {
+      '&:focus-within, &:hover': {
        // only show menu icon on hover or focused panel
        '.menu-icon': {
          visibility: 'visible',
@ -265,6 +262,7 @@ const getStyles = (theme: GrafanaTheme2) => {
    title: css({
      label: 'panel-title',
      marginBottom: 0, // override default h6 margin-bottom
+      paddingRight: theme.spacing(1),
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
@ -298,9 +296,6 @@ const getStyles = (theme: GrafanaTheme2) => {
    }),
    titleItems: css({
      display: 'flex',
-      alignItems: 'center',
-      overflow: 'hidden',
-      padding: theme.spacing(1),
    }),
  };
 };
--- a/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx
@ -28,7 +28,7 @@ export function PanelDescription({ description, className }: Props) {
  return description !== '' ? (
    <Tooltip interactive content={getDescriptionContent}>
      <TitleItem className={cx(className, styles.description)}>
-        <Icon name="info-circle" size="lg" title="description" />
+        <Icon name="info-circle" size="md" title="description" />
      </TitleItem>
    </Tooltip>
  ) : null;
--- a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
@ -22,6 +22,7 @@ export function PanelStatus({ className, message, onClick, ariaLabel = 'status'
      onClick={onClick}
      variant={'destructive'}
      icon="exclamation-triangle"
+      iconSize="md"
      tooltip={message || ''}
      aria-label={ariaLabel}
    />
--- a/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx
@ -55,7 +55,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      border: 'none',
      borderRadius: `${theme.shape.borderRadius()}`,
      padding: `${theme.spacing(0, 1)}`,
-      height: `${theme.spacing(theme.components.height.md)}`,
+      height: `${theme.spacing(theme.components.panel.headerHeight)}`,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
@ -6,6 +6,7 @@ import { selectors } from '@grafana/e2e-selectors';

 import { styleMixins, useStyles2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
+import { IconSize } from '../../types/icon';
 import { getPropertiesForVariant } from '../Button';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip';
@ -13,6 +14,8 @@ import { Tooltip } from '../Tooltip';
 type CommonProps = {
  /** Icon name */
  icon?: IconName | React.ReactNode;
+  /** Icon size */
+  iconSize?: IconSize;
  /** Tooltip */
  tooltip?: string;
  /** For image icons */
@ -42,6 +45,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
    {
      tooltip,
      icon,
+      iconSize,
      className,
      children,
      imgSrc,
@ -83,7 +87,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
        aria-expanded={isOpen}
        {...rest}
      >
-        {renderIcon(icon)}
+        {renderIcon(icon, iconSize)}
        {imgSrc && <img className={styles.img} src={imgSrc} alt={imgAlt ?? ''} />}
        {children && !iconOnly && <div className={contentStyles}>{children}</div>}
        {isOpen === false && <Icon name="angle-down" />}
@ -108,13 +112,13 @@ function getButtonAriaLabel(ariaLabel: string | undefined, tooltip: string | und
  return ariaLabel ? ariaLabel : tooltip ? selectors.components.PageToolbar.item(tooltip) : undefined;
 }

-function renderIcon(icon: IconName | React.ReactNode) {
+function renderIcon(icon: IconName | React.ReactNode, iconSize?: IconSize) {
  if (!icon) {
    return null;
  }

  if (isIconName(icon)) {
-    return <Icon name={icon} size="lg" />;
+    return <Icon name={icon} size={`${iconSize ? iconSize : 'lg'}`} />;
  }

  return icon;
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx
@ -21,6 +21,7 @@ export const PanelHeaderNotice: FC<Props> = ({ notice, onClick }) => {
      <ToolbarButton
        className={styles.notice}
        icon={iconName}
+        iconSize="md"
        key={notice.severity}
        tooltip={notice.text}
        onClick={(e) => onClick(e, notice.inspect!)}
@ -31,7 +32,7 @@ export const PanelHeaderNotice: FC<Props> = ({ notice, onClick }) => {
  if (notice.link) {
    return (
      <a className={styles.notice} aria-label={notice.text} href={notice.link} target="_blank" rel="noreferrer">
-        <Icon name={iconName} style={{ marginRight: '8px' }} />
+        <Icon name={iconName} style={{ marginRight: '8px' }} size="md" />
      </a>
    );
  }
@ -39,7 +40,7 @@ export const PanelHeaderNotice: FC<Props> = ({ notice, onClick }) => {
  return (
    <Tooltip key={notice.severity} content={notice.text}>
      <span className={styles.iconTooltip}>
-        <Icon name={iconName} size="lg" />
+        <Icon name={iconName} size="md" />
      </span>
    </Tooltip>
  );
@ -47,12 +48,13 @@ export const PanelHeaderNotice: FC<Props> = ({ notice, onClick }) => {

 const getStyles = (theme: GrafanaTheme2) => ({
  notice: css({
+    background: 'inherit',
    border: 'none',
    borderRadius: theme.shape.borderRadius(),
  }),
  iconTooltip: css({
    color: `${theme.colors.text.secondary}`,
-    backgroundColor: `${theme.colors.background.primary}`,
+    backgroundColor: 'inherit',
    cursor: 'auto',
    border: 'none',
    borderRadius: `${theme.shape.borderRadius()}`,
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderTitleItems.tsx
@ -30,7 +30,7 @@ export function PanelHeaderTitleItems(props: Props) {
          [styles.alerting]: alertState === AlertState.Alerting,
        })}
      >
-        <Icon name={alertState === 'alerting' ? 'heart-break' : 'heart'} className="panel-alert-icon" />
+        <Icon name={alertState === 'alerting' ? 'heart-break' : 'heart'} className="panel-alert-icon" size="md" />
      </PanelChrome.TitleItem>
    </Tooltip>
  );
@ -40,8 +40,7 @@ export function PanelHeaderTitleItems(props: Props) {
      {data.request && data.request.timeInfo && (
        <Tooltip content={<TimePickerTooltip timeRange={data.request?.range} timeZone={data.request?.timezone} />}>
          <PanelChrome.TitleItem className={styles.timeshift}>
-            <Icon name="clock-nine" />
-            {data.request?.timeInfo}
+            <Icon name="clock-nine" size="md" /> {data.request?.timeInfo}
          </PanelChrome.TitleItem>
        </Tooltip>
      )}
--- a/public/app/features/dashboard/dashgrid/PanelLinks.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelLinks.tsx
@ -32,13 +32,13 @@ export function PanelLinks({ panelLinks, onShowPanelLinks }: Props) {
        target={linkModel.target}
        title={linkModel.title}
      >
-        <Icon name="external-link-alt" size="lg" />
+        <Icon name="external-link-alt" size="md" />
      </PanelChrome.TitleItem>
    );
  } else {
    return (
      <Dropdown overlay={getLinksContent}>
-        <ToolbarButton icon="external-link-alt" aria-label="panel links" className={styles.menuTrigger} />
+        <ToolbarButton icon="external-link-alt" iconSize="md" aria-label="panel links" className={styles.menuTrigger} />
      </Dropdown>
    );
  }