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>

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),
     }),
   };
 };

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;

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

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',

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;

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()}`,

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

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