enhancement! : remove all field label, field hint, field errors from all possible inputs (#1693)

Co-authored-by: Josh <[email protected]>

Author: madhurisandbhor

.changeset/clean-otters-swim.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+enhancement!: removed field wrapper components from inputs to streamline and inputs stories are moved under `stories/inputs` folder.

.changeset/eight-humans-brake.md

@@ -0,0 +1,7 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: remove CreatableCombobox
+
+Users should instead use `<Combobox createable />`.

.changeset/green-starfishes-retire.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+enhancement!: ToggleInput renamed to just Toggle

BREAKING_CHANGES.md

@@ -44,6 +44,34 @@ This was just a wrapped component around `Flex`. You should use `Flex` instead.
 
 This is the same component as `ToggleInput` and therefore you should use that instead.
 
+### Removed field wrapper components from inputs
+
+We're making inputs more composable by breaking down the pieces from components like labels, hints, and error messages, focusing solely on exporting the inputs themselves. This simplifies the structure and reduces DOM size, especially in cases where only aria-labels are needed. Users can still use Field components they used alongside inputs.
+
+```tsx
+// before
+return <SingleSelect label={label} error={error} required={required} value={value} onChange={handleChange} />;
+
+// after
+return (
+  <Field>
+    <FieldLabel>{label}</FieldLabel>
+    <SingleSelect label={label} error={error} required={required} value={value} onChange={handleChange} />
+    <FieldError />
+    <FieldHint />
+  </Field>
+);
+```
+
+### Components renaming
+
+`ToggleInput` has been renamed to just `Toggle`.
+
+```ts
+- import { ToggleInput } from '@strapi/design-system'
++ import { Toggle } from '@strapi/design-system'
+```
+
 ### Icon Updates
 
 Many of the icons have been updated visually, this will effect snapshot tests. The default size is `1.6rem` for an icon, in the Strapi design-system this equates to 16px. We have also ensured that `paths` do not have any `fill` or `stroke` properties set, this allows the icon to be styled with CSS except for specific use cases we don't expect users to encounter. The default `color` is `currentColor` which means it will inherit the color of the parent element.

docs/.storybook/preview.tsx

@@ -31,6 +31,7 @@ const preview: Preview = {
           ['Overview', 'Icons', ['Overview', '*']],
           'Primitives',
           ['Overview', '*'],
+          'Inputs',
           'Design System',
           ['Technical Components', 'Components'],
           'Utilities',

docs/package.json

@@ -22,6 +22,7 @@
     "@storybook/react-vite": "^7.6.17",
     "@storybook/theming": "7.6.17",
     "eslint-plugin-mdx": "^3.1.5",
+    "outdent": "0.8.0",
     "storybook": "^7.6.17",
     "typescript": "5.4.5",
     "vite": "^5.0.2"

docs/stories/Accordion.stories.tsx

@@ -153,7 +153,7 @@ export const Group = {
               />
               <AccordionContent>
                 <Box padding={3}>
-                  <TextInput label="Name" />
+                  <TextInput aria-label="Name" />
                 </Box>
               </AccordionContent>
             </Accordion>