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>

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