Chore: Remove gf-forms from SubMenuItems and RangeMatcherEditor (#87633)

.betterer.results

@@ -5495,9 +5495,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/features/datasources/components/BasicSettings.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
@@ -5543,11 +5540,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
@@ -5577,7 +5569,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
     "public/app/features/variables/pickers/shared/VariableInput.tsx:5381": [

public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx

@@ -24,11 +24,7 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
   return (
     <>
       {visibleVariables.map((variable) => (
-        <div
-          key={variable.id}
-          className="submenu-item gf-form-inline"
-          data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}
-        >
+        <div key={variable.id} className="submenu-item" data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>
           <PickerRenderer variable={variable} readOnly={readOnly} />
         </div>
       ))}

public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 
 import { ValueMatcherID, RangeValueMatcherOptions, VariableOrigin } from '@grafana/data';
 import { getTemplateSrv, config as cfg } from '@grafana/runtime';
-import { Input } from '@grafana/ui';
+import { InlineLabel, Input } from '@grafana/ui';
 
 import { SuggestionsInput } from '../../suggestionsInput/SuggestionsInput';
 import { numberOrVariableValidator } from '../../utils';
@@ -84,7 +84,7 @@ export function rangeMatcherEditor<T = any>(
             onChange={(val) => onChangeOptionsSuggestions(val, 'from')}
             suggestions={variables}
           />
-          <div className="gf-form-label">and</div>
+          <InlineLabel>and</InlineLabel>
           <SuggestionsInput
             invalid={isInvalid.to}
             error={'Value needs to be an integer or a variable'}
@@ -99,16 +99,14 @@ export function rangeMatcherEditor<T = any>(
     return (
       <>
         <Input
-          className="flex-grow-1 gf-form-spacing"
           invalid={isInvalid['from']}
           defaultValue={String(options.from)}
           placeholder="From"
           onChange={(event) => onChangeValue(event, 'from')}
           onBlur={(event) => onChangeOptions(event, 'from')}
         />
-        <div className="gf-form-label">and</div>
+        <InlineLabel>and</InlineLabel>
         <Input
-          className="flex-grow-1"
           invalid={isInvalid['to']}
           defaultValue={String(options.to)}
           placeholder="To"

public/app/features/variables/pickers/PickerRenderer.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactElement, useMemo } from 'react';
 
 import { TypedVariableModel, VariableHide } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Tooltip } from '@grafana/ui';
+import { Stack, Tooltip } from '@grafana/ui';
 
 import { variableAdapters } from '../adapters';
 import { VARIABLE_PREFIX } from '../constants';
@@ -20,12 +20,12 @@ export const PickerRenderer = (props: Props) => {
   }
 
   return (
-    <div className="gf-form">
+    <Stack gap={0}>
       <PickerLabel variable={props.variable} />
       {props.variable.hide !== VariableHide.hideVariable && PickerToRender && (
         <PickerToRender variable={props.variable} readOnly={props.readOnly ?? false} />
       )}
-    </div>
+    </Stack>
   );
 };