ControlsLabel: style: use info icons for description (#654)

packages/scenes/src/utils/ControlsLabel.tsx

@@ -47,6 +47,15 @@ export function ControlsLabel(props: ControlsLabelProps) {
     );
   }
 
+  let descriptionIndicator = null;
+  if (props.description) {
+    descriptionIndicator = (
+      <Tooltip content={props.description} placement={isVertical ? 'top' : 'bottom'}>
+        <Icon className={styles.normalIcon} name="info-circle" />
+      </Tooltip>
+    );
+  }
+
   const testId =
     typeof props.label === 'string' ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : '';
   let labelElement: JSX.Element;
@@ -57,6 +66,7 @@ export function ControlsLabel(props: ControlsLabelProps) {
     labelElement = (
       <label className={styles.verticalLabel} data-testid={testId} htmlFor={props.htmlFor}>
         {props.label}
+        {descriptionIndicator}
         {errorIndicator}
         {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}
         {loadingIndicator}
@@ -71,19 +81,12 @@ export function ControlsLabel(props: ControlsLabelProps) {
         {errorIndicator}
         {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}
         {props.label}
+        {descriptionIndicator}
         {loadingIndicator}
       </label>
     );
   }
 
-  if (props.description) {
-    return (
-      <Tooltip content={props.description} placement={isVertical ? 'top' : 'bottom'}>
-        {labelElement}
-      </Tooltip>
-    );
-  }
-
   return labelElement;
 }