Grafana-UI: Refactor legacy inline form components (#27660)

* Move styles to emotion

* Move FormLabel to forms

* Add mdx file

* Setup InlineField

* Add InlineField docs

* Add grow prop

* Add isKeyword prop

* Add filled Field

* Keep legacy form label

* InlineFormLabel => InlineLabel

* Update references

* Add multiple elements example

* Revert label

* Add InlineFieldRow

* Adjust label width

* Export InlineFieldRow

* Expand props from base components

* Remove isKeyword prop

* Remove fill prop

* Update docs

* Update docs [2]

public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx

@@ -3,7 +3,7 @@ import React, { memo } from 'react';
 
 // Types
 import { AbsoluteTimeRange, QueryEditorProps } from '@grafana/data';
-import { FormLabel } from '@grafana/ui/src/components/FormLabel/FormLabel';
+import { InlineFormLabel } from '@grafana/ui';
 import { CloudWatchDatasource } from '../datasource';
 import { CloudWatchLogsQuery, CloudWatchQuery } from '../types';
 import { CloudWatchLogsQueryField } from './LogsQueryField';
@@ -56,9 +56,9 @@ export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor
       syntax={syntax}
       allowCustomValue={allowCustomValue}
       ExtraFieldElement={
-        <FormLabel className={`gf-form-label--btn ${labelClass}`} width="auto" tooltip="Link to Graph in AWS">
+        <InlineFormLabel className={`gf-form-label--btn ${labelClass}`} width="auto" tooltip="Link to Graph in AWS">
           <CloudWatchLink query={query as CloudWatchLogsQuery} panelData={data} datasource={datasource} />
-        </FormLabel>
+        </InlineFormLabel>
       }
     />
   );