Forms: Remove gf-form appearances in admin, profile and team settings (#74360)

* Accessibility: Added label prop to RadioButtonGroup

* Update packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* Update RadioButtonGroup.tsx

* Update RadioButtonGroup.tsx

* corrected ariaLabel

* fix accessibility

* Forms: Remove gf-form appearances in Grafana

* remove wrong commit

* Remove gf-form from User Profile Edit Form

* AlertRuleList

* to not change anything under AlertRuleList

* removed gf-form-button-row

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -140,6 +140,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
       <Form onSubmit={this.onSubmitForm}>
         {() => {
           return (
+            <>
               <FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
                 <Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
                   <Select
@@ -212,8 +213,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
                     inputId="locale-select"
                   />
                 </Field>
-
-              <div className="gf-form-button-row">
+              </FieldSet>
               <Button
                 type="submit"
                 variant="primary"
@@ -221,8 +221,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
               >
                 <Trans i18nKey="common.save">Save</Trans>
               </Button>
-              </div>
-            </FieldSet>
+            </>
           );
         }}
       </Form>

public/app/features/admin/UserListAdminPage.tsx

@@ -13,6 +13,7 @@ import {
   Tooltip,
   useStyles2,
   FilterInput,
+  InlineField,
 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
@@ -82,13 +83,15 @@ const UserListAdminPageUnConnected = ({
   return (
     <Page.Contents>
       <div className="page-action-bar" data-testid={selectors.container}>
-        <div className="gf-form gf-form--grow">
+        <>
+          <InlineField grow>
             <FilterInput
               placeholder="Search user by login, email, or name."
               autoFocus={true}
               value={query}
               onChange={changeQuery}
             />
+          </InlineField>
           <RadioButtonGroup
             options={[
               { label: 'All users', value: false },
@@ -101,7 +104,7 @@ const UserListAdminPageUnConnected = ({
           {extraFilters.map((FilterComponent, index) => (
             <FilterComponent key={index} filters={filters} onChange={changeFilter} className={styles.filter} />
           ))}
-        </div>
+        </>
         {contextSrv.hasPermission(AccessControlAction.UsersCreate) && (
           <LinkButton href="admin/users/create" variant="primary">
             New user

public/app/features/profile/UserProfileEditForm.tsx

@@ -31,6 +31,7 @@ export const UserProfileEditForm = ({ user, isSavingUser, updateProfile }: Props
     <Form onSubmit={onSubmitProfileUpdate} validateOn="onBlur">
       {({ register, errors }) => {
         return (
+          <>
             <FieldSet>
               <Field
                 label={t('user-profile.fields.name-label', 'Name') + lockMessage}
@@ -71,8 +72,7 @@ export const UserProfileEditForm = ({ user, isSavingUser, updateProfile }: Props
                   suffix={<InputSuffix />}
                 />
               </Field>
-
-            <div className="gf-form-button-row">
+            </FieldSet>
             <Button
               variant="primary"
               disabled={isSavingUser || disabledEdit}
@@ -81,8 +81,7 @@ export const UserProfileEditForm = ({ user, isSavingUser, updateProfile }: Props
             >
               <Trans i18nKey="common.save">Save</Trans>
             </Button>
-            </div>
-          </FieldSet>
+          </>
         );
       }}
     </Form>

public/app/features/teams/CreateTeam.tsx

@@ -46,6 +46,7 @@ export const CreateTeam = (): JSX.Element => {
       <Page.Contents>
         <Form onSubmit={createTeam}>
           {({ register, errors }) => (
+            <>
               <FieldSet>
                 <Field label="Name" required invalid={!!errors.name} error="Team name is required">
                   <Input {...register('name', { required: true })} id="team-name" />
@@ -69,12 +70,12 @@ export const CreateTeam = (): JSX.Element => {
                 >
                   <Input {...register('email')} type="email" id="team-email" placeholder="email@test.com" />
                 </Field>
-              <div className="gf-form-button-row">
+              </FieldSet>
+
               <Button type="submit" variant="primary">
                 Create
               </Button>
-              </div>
-            </FieldSet>
+            </>
           )}
         </Form>
       </Page.Contents>