Grafana UI: Add FieldSet component (#25348)

* Grafana UI: Add FieldSet

* Grafana UI: Add story

* Grafana UI: Add docs

* Grafana UI: Export FieldSet

* Grafana UI: Fix issues

packages/grafana-toolkit/src/cli/templates/component.tsx.template.ts

@@ -1,6 +1,6 @@
 export const componentTpl = `import React, { FC } from 'react';
 
-interface Props {};
+export interface Props {};
 
 export const <%= name %>: FC<Props> = (props) => {
   return (

packages/grafana-ui/src/components/Forms/FieldSet.mdx

@@ -0,0 +1,42 @@
+import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { FieldSet } from './FieldSet';
+
+# FieldSet
+
+Component used to group form elements inside a form, equivalent to HTML's [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) tag.
+Accepts optional label, which, if provided, is used as a text for the set's legend.
+
+
+### Usage
+
+```jsx
+import { FieldSet } from '@grafana/ui';
+
+<Form onSubmit={() => console.log('Submit')}>
+  {() => (
+    <>
+      <FieldSet label="Details">
+        <Field label="Name">
+          <Input name="name" />
+        </Field>
+        <Field label="Email">
+          <Input name="email" />
+        </Field>
+      </FieldSet>
+
+      <FieldSet label="Preferences">
+        <Field label="Color">
+          <Input name="color" />
+        </Field>
+        <Field label="Font size">
+          <Input name="fontsize" />
+        </Field>
+      </FieldSet>
+      <Button variant="primary">Save</Button>
+    </>
+  )}
+</Form>
+```
+
+### Props
+<Props of={FieldSet} />

packages/grafana-ui/src/components/Forms/FieldSet.story.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { FieldSet } from './FieldSet';
+import { Form } from './Form';
+import { Field } from './Field';
+import { Input } from '../Input/Input';
+import mdx from './FieldSet.mdx';
+import { Button } from '../Button';
+
+export default {
+  title: 'Forms/FieldSet',
+  component: FieldSet,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  return (
+    <Form onSubmit={() => console.log('Submit')}>
+      {() => (
+        <>
+          <FieldSet label="Details">
+            <Field label="Name">
+              <Input name="name" />
+            </Field>
+            <Field label="Email">
+              <Input name="email" />
+            </Field>
+          </FieldSet>
+
+          <FieldSet label="Preferences">
+            <Field label="Color">
+              <Input name="color" />
+            </Field>
+            <Field label="Font size">
+              <Input name="fontsize" />
+            </Field>
+          </FieldSet>
+          <Button variant="primary">Save</Button>
+        </>
+      )}
+    </Form>
+  );
+};

packages/grafana-ui/src/components/Forms/FieldSet.tsx

@@ -0,0 +1,31 @@
+import React, { FC, HTMLProps } from 'react';
+import { css, cx } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
+import { stylesFactory, useTheme } from '../../themes';
+import { Legend } from './Legend';
+
+export interface Props extends HTMLProps<HTMLFieldSetElement> {
+  children: React.ReactNode[] | React.ReactNode;
+  /** Text for the fieldset's legend */
+  label?: string;
+}
+
+export const FieldSet: FC<Props> = ({ label, children, className, ...rest }) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <fieldset className={cx(styles.wrapper, className)} {...rest}>
+      {label && <Legend>{label}</Legend>}
+      {children}
+    </fieldset>
+  );
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    wrapper: css`
+      margin-bottom: ${theme.spacing.formSpacingBase * 4}px;
+    `,
+  };
+});

packages/grafana-ui/src/components/index.ts

@@ -134,6 +134,7 @@ export { getFormStyles } from './Forms/getFormStyles';
 export { Label } from './Forms/Label';
 export { Field } from './Forms/Field';
 export { Legend } from './Forms/Legend';
+export { FieldSet } from './Forms/FieldSet';
 
 export { default as resetSelectStyles } from './Select/resetSelectStyles';
 export * from './Select/Select';