enhancement! : remove all field label, field hint, field errors from all possible inputs

docs/stories/Checkbox.mdx

@@ -51,12 +51,6 @@ to pursue another action first.
 
 <Canvas of={CheckboxStories.Disabled} />
 
-### Hint
-
-Use hint state to give more information about the purpose of a checkbox.
-
-<Canvas of={CheckboxStories.Hint} />
-
 ### Error
 
 Display an error message.

docs/stories/Checkbox.stories.tsx

@@ -104,57 +104,3 @@ export const Disabled = {
     },
   },
 } satisfies Story;
-
-export const Hint = {
-  render: () => {
-    const [val, setValue] = React.useState(false);
-
-    return (
-      <Checkbox
-        hint="Description line lorem ipsum"
-        name="default"
-        onValueChange={(value) => setValue(value)}
-        value={val}
-      >
-        Label
-      </Checkbox>
-    );
-  },
-
-  name: 'hint',
-
-  parameters: {
-    docs: {
-      source: {
-        code: '<Checkbox hint="Description line lorem ipsum">Label</Checkbox>',
-      },
-    },
-  },
-} satisfies Story;
-
-export const Error = {
-  render: () => {
-    const [val, setValue] = React.useState(false);
-
-    return (
-      <Checkbox
-        error="Description line lorem ipsum"
-        name="default"
-        onValueChange={(value) => setValue(value)}
-        value={val}
-      >
-        Label
-      </Checkbox>
-    );
-  },
-
-  name: 'error',
-
-  parameters: {
-    docs: {
-      source: {
-        code: '<Checkbox error="Description line lorem ipsum">Label</Checkbox>',
-      },
-    },
-  },
-} satisfies Story;

docs/stories/Combobox.stories.tsx

@@ -59,13 +59,7 @@ export const Controlled = {
     const [value, setValue] = React.useState('');
 
     return (
-      <Combobox
-        placeholder="My favourite fruit is..."
-        label="Fruits"
-        value={value}
-        onChange={setValue}
-        onClear={() => setValue('')}
-      >
+      <Combobox placeholder="My favourite fruit is..." value={value} onChange={setValue} onClear={() => setValue('')}>
         <ComboboxOption value="apple">Apple</ComboboxOption>
         <ComboboxOption value="avocado">Avocado</ComboboxOption>
         <ComboboxOption value="banana">Banana</ComboboxOption>
@@ -96,13 +90,7 @@ export const Loading = {
     }, [isLoading]);
 
     return (
-      <Combobox
-        label="Async Fruits"
-        placeholder="My favourite fruit is..."
-        loading={isLoading}
-        onLoadMore={handleLoadMore}
-        hasMoreItems
-      >
+      <Combobox placeholder="My favourite fruit is..." loading={isLoading} onLoadMore={handleLoadMore} hasMoreItems>
         <ComboboxOption value="apple">Apple</ComboboxOption>
         <ComboboxOption value="avocado">Avocado</ComboboxOption>
         <ComboboxOption value="banana">Banana</ComboboxOption>
@@ -166,7 +154,7 @@ export const Creatable = {
 
     return (
       <CreatableCombobox
-        label="Fruits"
+        aria-describedby="creatable component description"
         placeholder="My favourite fruit is..."
         value={value}
         onChange={setValue}
@@ -201,7 +189,6 @@ export const Autocomplete = {
       <Flex direction="column" alignItems="stretch" gap={11}>
         <Combobox
           placeholder="My favourite fruit is..."
-          label="Fruits"
           value={value}
           onChange={setValue}
           autocomplete={autocompleteMode}

docs/stories/JSONInput.stories.tsx

@@ -1,5 +1,7 @@
+import * as React from 'react';
+
 import { Meta, StoryObj } from '@storybook/react';
-import { JSONInput } from '@strapi/design-system';
+import { FieldLabel, JSONInput } from '@strapi/design-system';
 
 const meta: Meta<typeof JSONInput> = {
   title: 'Design System/Components/JSONInput',
@@ -19,14 +21,28 @@ export const Base = {
 } satisfies Story;
 
 export const Editable = {
-  render: () => (
-    <JSONInput
-      value={'[\n   {\n      "a":3,\n      "b":4\n   },\n   {\n      "a":5,\n      "b":6\n   }\n]'}
-      label="JSON"
-      hint="Description Text"
-      minHeight="235px"
-    />
-  ),
+  render: () => {
+    const editorRef = React.useRef<HTMLInputElement | null>(null);
+
+    return (
+      <>
+        <FieldLabel
+          onClick={() => {
+            (editorRef.current as HTMLInputElement)?.focus();
+          }}
+        >
+          JSON
+        </FieldLabel>
+        <JSONInput
+          value={'[\n   {\n      "a":3,\n      "b":4\n   },\n   {\n      "a":5,\n      "b":6\n   }\n]'}
+          label="JSON"
+          hint="Description Text"
+          minHeight="235px"
+          ref={editorRef}
+        />
+      </>
+    );
+  },
 
   name: 'editable',
 } satisfies Story;

docs/stories/NumberInput.mdx

@@ -35,24 +35,12 @@ import { NumberInput } from '@strapi/design-system';
 
 <Canvas of={NumberInputStories.Base} />
 
-### Without label
-
-`NumberInput` can be used without a label.
-
-<Canvas of={NumberInputStories.WithoutLabel} />
-
 ### Size S
 
 `NumberInput` can be displayed in a smaller size.
 
 <Canvas of={NumberInputStories.SizeS} />
 
-### Required
-
-`NumberInput` required field.
-
-<Canvas of={NumberInputStories.Required} />
-
 ### Disabled
 
 `NumberInput` disabled field.

docs/stories/NumberInput.stories.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
-import { NumberInput, Box, Tooltip, Typography } from '@strapi/design-system';
-import { Information } from '@strapi/icons';
+import { NumberInput, Box, Typography } from '@strapi/design-system';
 
 const meta: Meta<typeof NumberInput> = {
   title: 'Design System/Components/NumberInput',
@@ -14,48 +13,6 @@ export default meta;
 type Story = StoryObj<typeof NumberInput>;
 
 export const Base = {
-  render: () => {
-    const [content, setContent] = React.useState(3.14159265359);
-
-    return (
-      <Box padding={10}>
-        <NumberInput
-          placeholder="This is a content placeholder"
-          label="Content"
-          name="content"
-          hint="Description line"
-          error={undefined}
-          onValueChange={(value) => setContent(value)}
-          value={content}
-          labelAction={
-            <Tooltip description="Content of the tooltip">
-              <button
-                aria-label="Information about the email"
-                style={{
-                  border: 'none',
-                  padding: 0,
-                  background: 'transparent',
-                }}
-              >
-                <Information aria-hidden />
-              </button>
-            </Tooltip>
-          }
-        />
-        <Box as="p" padding={4} background="neutral100">
-          <Typography>{`The value is ${content}`}</Typography>
-        </Box>
-        <button>
-          <Typography>Escape</Typography>
-        </button>
-      </Box>
-    );
-  },
-
-  name: 'base',
-} satisfies Story;
-
-export const WithoutLabel = {
   render: () => {
     const [content, setContent] = React.useState(0);
 
@@ -69,20 +26,6 @@ export const WithoutLabel = {
           error={undefined}
           onValueChange={(value) => setContent(value)}
           value={content}
-          labelAction={
-            <Tooltip description="Content of the tooltip">
-              <button
-                aria-label="Information about the email"
-                style={{
-                  border: 'none',
-                  padding: 0,
-                  background: 'transparent',
-                }}
-              >
-                <Information aria-hidden />
-              </button>
-            </Tooltip>
-          }
         />
         <Box as="p" padding={4} background="neutral100">
           <Typography>{`The value is ${content}`}</Typography>
@@ -94,7 +37,7 @@ export const WithoutLabel = {
     );
   },
 
-  name: 'withoutLabel',
+  name: 'base',
 } satisfies Story;
 
 export const SizeS = {
@@ -105,27 +48,12 @@ export const SizeS = {
       <Box padding={10}>
         <NumberInput
           placeholder="This is a content placeholder"
-          label="Content"
           name="content"
           hint="Description line"
           error={undefined}
           onValueChange={(value) => setContent(value)}
           value={content}
           size="S"
-          labelAction={
-            <Tooltip description="Content of the tooltip">
-              <button
-                aria-label="Information about the email"
-                style={{
-                  border: 'none',
-                  padding: 0,
-                  background: 'transparent',
-                }}
-              >
-                <Information aria-hidden />
-              </button>
-            </Tooltip>
-          }
         />
         <Box as="p" padding={4} background="neutral100">
           <Typography>{`The value is ${content}`}</Typography>
@@ -140,29 +68,6 @@ export const SizeS = {
   name: 'size S',
 } satisfies Story;
 
-export const Required = {
-  render: () => {
-    const [content, setContent] = React.useState();
-
-    return (
-      <Box padding={10}>
-        <NumberInput
-          placeholder="This is a content placeholder"
-          label="Content"
-          name="content"
-          hint="Description line"
-          error={undefined}
-          onValueChange={(value) => setContent(value)}
-          value={content}
-          required
-        />
-      </Box>
-    );
-  },
-
-  name: 'required',
-} satisfies Story;
-
 export const Disabled = {
   render: () => {
     const [content, setContent] = React.useState();
@@ -171,9 +76,7 @@ export const Disabled = {
       <Box padding={10}>
         <NumberInput
           placeholder="This is a content placeholder"
-          label="Content"
           name="content"
-          hint="Description line"
           error={undefined}
           onValueChange={(value) => setContent(value)}
           value={content}
@@ -186,6 +89,7 @@ export const Disabled = {
   name: 'disabled',
 } satisfies Story;
 
+//TODO: fix error prop, as FieldInput needs to update to reflect error styles
 export const Error = {
   render: () => {
     const [content, setContent] = React.useState();
@@ -194,9 +98,7 @@ export const Error = {
       <Box padding={10}>
         <NumberInput
           placeholder="This is a content placeholder"
-          label="Content"
           name="content"
-          hint="Description line"
           onValueChange={(value) => setContent(value)}
           value={content}
           error="Wrong value"
@@ -216,26 +118,10 @@ export const WithInitialEmpty = {
       <Box padding={10}>
         <NumberInput
           placeholder="This is a content placeholder"
-          label="Content"
           name="content"
-          hint="Description line"
           error={undefined}
           onValueChange={(value) => setContent(value)}
           value={content}
-          labelAction={
-            <Tooltip description="Content of the tooltip">
-              <button
-                aria-label="Information about the email"
-                style={{
-                  border: 'none',
-                  padding: 0,
-                  background: 'transparent',
-                }}
-              >
-                <Information aria-hidden />
-              </button>
-            </Tooltip>
-          }
         />
         <Box as="p" padding={4} background="neutral100">
           <Typography>{`The value is ${content}`}</Typography>
@@ -258,7 +144,6 @@ export const Locale = {
       <Box padding={10}>
         <NumberInput
           placeholder="This is a content placeholder"
-          label="Content"
           name="content"
           locale="de"
           onValueChange={(value) => setContent(value)}