Fix: Icon and Tooltip on Variables editor (#26086)

packages/grafana-ui/src/components/FormLabel/FormLabel.tsx

@@ -34,7 +34,7 @@ export const FormLabel: FunctionComponent<Props> = ({
       {tooltip && (
       {tooltip && (
         <Tooltip placement="top" content={tooltip} theme={'info'}>
         <Tooltip placement="top" content={tooltip} theme={'info'}>
           <div className="gf-form-help-icon gf-form-help-icon--right-normal">
           <div className="gf-form-help-icon gf-form-help-icon--right-normal">
-            <Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
+            <Icon name="info-circle" size="sm" style={{ marginLeft: '10px' }} />
           </div>
           </div>
         </Tooltip>
         </Tooltip>
       )}
       )}

packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import uniqueId from 'lodash/uniqueId';
 import uniqueId from 'lodash/uniqueId';
 import { Tooltip } from '../../../Tooltip/Tooltip';
 import { Tooltip } from '../../../Tooltip/Tooltip';
 import * as PopperJS from 'popper.js';
 import * as PopperJS from 'popper.js';
+import { Icon } from '../../..';
 
 
 export interface Props {
 export interface Props {
   label: string;
   label: string;
@@ -54,7 +55,7 @@ export class Switch extends PureComponent<Props, State> {
               {tooltip && (
               {tooltip && (
                 <Tooltip placement={tooltipPlacement ? tooltipPlacement : 'auto'} content={tooltip} theme={'info'}>
                 <Tooltip placement={tooltipPlacement ? tooltipPlacement : 'auto'} content={tooltip} theme={'info'}>
                   <div className="gf-form-help-icon gf-form-help-icon--right-normal">
                   <div className="gf-form-help-icon gf-form-help-icon--right-normal">
-                    <i className="fa fa-info-circle" />
+                    <Icon name="info-circle" size="sm" style={{ marginLeft: '10px' }} />
                   </div>
                   </div>
                 </Tooltip>
                 </Tooltip>
               )}
               )}

public/app/features/variables/editor/SelectionOptionsEditor.tsx

@@ -53,7 +53,7 @@ export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorPro
             labelClass="width-10"
             labelClass="width-10"
             checked={props.variable.includeAll}
             checked={props.variable.includeAll}
             onChange={onIncludeAllChanged}
             onChange={onIncludeAllChanged}
-            tooltip={'Enables multiple values to be selected at the same time'}
+            tooltip={'Enables an option to include all variables'}
           />
           />
         </div>
         </div>
       </div>
       </div>