From e179f0562f578ce198edf249ceff5703fa394f44 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sun, 17 Sep 2023 02:43:16 +0200
Subject: [PATCH 1/2] Docs(web-react): Add TextField demo #DS-913

- TextField demo in web-react is now same as demo in web and web-twig
---
 .../components/TextField/demo/TextField.tsx   | 16 ------
 .../TextField/demo/TextFieldDefault.tsx       | 21 ++++++++
 .../TextField/demo/TextFieldDisabled.tsx      | 23 ++++-----
 .../TextField/demo/TextFieldFluid.tsx         |  8 +--
 .../TextField/demo/TextFieldHelperText.tsx    | 24 ++++-----
 .../TextField/demo/TextFieldHiddenLabel.tsx   | 14 ++++++
 .../TextField/demo/TextFieldInline.tsx        | 44 +++++++++++++++++
 .../TextField/demo/TextFieldInputWidth.tsx    | 15 ++++--
 .../TextField/demo/TextFieldLabelHidden.tsx   | 10 ----
 .../demo/TextFieldPasswordToggle.tsx          | 30 ++++++++----
 .../TextField/demo/TextFieldRequired.tsx      |  8 ++-
 .../TextField/demo/TextFieldType.tsx          | 18 -------
 .../TextField/demo/TextFieldValidation.tsx    | 49 +++++++++++++++++++
 .../demo/TextFieldValidationState.tsx         | 32 ------------
 .../src/components/TextField/demo/index.tsx   | 46 ++++++++---------
 15 files changed, 210 insertions(+), 148 deletions(-)
 delete mode 100644 packages/web-react/src/components/TextField/demo/TextField.tsx
 create mode 100644 packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx
 create mode 100644 packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx
 create mode 100644 packages/web-react/src/components/TextField/demo/TextFieldInline.tsx
 delete mode 100644 packages/web-react/src/components/TextField/demo/TextFieldLabelHidden.tsx
 delete mode 100644 packages/web-react/src/components/TextField/demo/TextFieldType.tsx
 create mode 100644 packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx
 delete mode 100644 packages/web-react/src/components/TextField/demo/TextFieldValidationState.tsx

diff --git a/packages/web-react/src/components/TextField/demo/TextField.tsx b/packages/web-react/src/components/TextField/demo/TextField.tsx
deleted file mode 100644
index 3d6c8e6970..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextField.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import { SpiritTextFieldProps } from '../../../types';
-import TextField from '../TextField';
-
-const Story: ComponentStory<typeof TextField> = (args: SpiritTextFieldProps) => <TextField {...args} />;
-
-Story.args = {
-  id: 'textfield-example',
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx b/packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx
new file mode 100644
index 0000000000..0dec683971
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldDefault.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldDefault = () => (
+  <>
+    <TextField id="textfieldDefault" label="Label" name="textfieldDefault" placeholder="Placeholder" />
+
+    <TextField id="textfieldFilled" label="Label" name="textfieldFilled" placeholder="Placeholder" value="Filled" />
+
+    <TextField
+      id="textfieldPassword"
+      label="Label"
+      name="textfieldPassword"
+      placeholder="Placeholder"
+      value="Filled"
+      type="password"
+    />
+  </>
+);
+
+export default TextFieldDefault;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx b/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx
index de04aefa4a..4edcc1916e 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldDisabled.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextField id="textfield-disabled" label="Disabled" name="textfield-disabled" isDisabled />
+const TextFieldDisabled = () => (
+  <>
+    <TextField id="textfieldDisabled" label="Label" name="textfieldDisabled" placeholder="Placeholder" isDisabled />
+
     <TextField
-      id="textfield-disabled-filled"
-      label="Disabled filled"
-      name="textfield-disabled-filled"
-      value="TextField value"
+      id="textfieldDisabledFilled"
+      label="Label"
+      name="textfieldDisabledFilled"
+      placeholder="Placeholder"
+      value="Filled"
       isDisabled
+      isRequired
     />
-  </div>
+  </>
 );
 
-export default Story;
+export default TextFieldDisabled;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx b/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx
index d7133bcb75..473ffdd5d3 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldFluid.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => <TextField id="textfield-fluid" label="Fluid" name="textfield-fluid" isFluid />;
+const TextFieldFluid = () => (
+  <TextField id="textfieldFluid" isFluid label="Label" name="textfieldFluid" placeholder="Placeholder" value="Filled" />
+);
 
-export default Story;
+export default TextFieldFluid;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx b/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx
index 9f1b5bacd7..74467481fb 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldHelperText.tsx
@@ -1,18 +1,14 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
-import { ComponentStory } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import { SpiritTextFieldProps } from '../../../types';
 import TextField from '../TextField';
 
-const Story: ComponentStory<typeof TextField> = (args: SpiritTextFieldProps) => <TextField {...args} />;
+const TextFieldHelperText = () => (
+  <TextField
+    helperText="Helper text"
+    id="textfieldHelperText"
+    label="Label"
+    name="textfieldHelperText"
+    placeholder="Placeholder"
+  />
+);
 
-Story.args = {
-  id: 'textfield-helper-text-example',
-  label: 'Label with helper text',
-  helperText: 'Custom helper text',
-};
-
-export default Story;
+export default TextFieldHelperText;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx b/packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx
new file mode 100644
index 0000000000..cd86358452
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldHiddenLabel.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldHiddenLabel = () => (
+  <TextField
+    id="textfieldHiddenLabel"
+    label="Label"
+    name="textfieldHiddenLabel"
+    placeholder="Placeholder"
+    isLabelHidden
+  />
+);
+
+export default TextFieldHiddenLabel;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldInline.tsx b/packages/web-react/src/components/TextField/demo/TextFieldInline.tsx
new file mode 100644
index 0000000000..a26671d985
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldInline.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button } from '../../Button';
+import TextField from '../TextField';
+
+const TextFieldInline = () => (
+  <>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', maxWidth: '320px' }}>
+      <TextField
+        id="textfieldInline"
+        isLabelHidden
+        label="Hidden Label"
+        name="textfieldInline"
+        placeholder="Placeholder"
+        value="Filled"
+      />
+      <Button>Button</Button>
+    </div>
+
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', maxWidth: '320px' }}>
+      <TextField
+        id="textfieldInlineFirst"
+        isLabelHidden
+        label="Hidden Label"
+        name="textfieldInlineFirst"
+        placeholder="Placeholder"
+        value="Filled"
+      />
+      <TextField
+        id="textfieldInlinePassword"
+        isLabelHidden
+        label="Hidden Label"
+        hasPasswordToggle
+        name="textfieldInlinePassword"
+        validationState="danger"
+        validationText="Too short"
+        placeholder="Placeholder"
+        value="1234"
+      />
+      <Button>Button</Button>
+    </div>
+  </>
+);
+
+export default TextFieldInline;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx b/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx
index 649f63ebdb..ffd72e64e7 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldInputWidth.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-with-input-width" label="Width 10 em" name="textfield-with-size" inputWidth={10} />
+const TextFieldInputWidth = () => (
+  <TextField
+    id="textfieldSize"
+    isFluid
+    label="4000 (in Roman numerals)"
+    name="textfieldSize"
+    placeholder="Placeholder"
+    inputWidth={4}
+  />
 );
 
-export default Story;
+export default TextFieldInputWidth;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldLabelHidden.tsx b/packages/web-react/src/components/TextField/demo/TextFieldLabelHidden.tsx
deleted file mode 100644
index e83c5370d6..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextFieldLabelHidden.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import TextField from '../TextField';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-label-hidden" label="Hidden label" name="textfield-label-hidden" isLabelHidden />
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx b/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx
index 72d75974ec..6be5b714c2 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldPasswordToggle.tsx
@@ -1,15 +1,25 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField
-    id="textfield-password-toggle"
-    label="Password toggle"
-    name="textfield-password-toggle"
-    hasPasswordToggle
-  />
+const TextFieldPasswordToggle = () => (
+  <>
+    <TextField
+      id="textfieldPasswordToggle"
+      label="Password Toggle"
+      hasPasswordToggle
+      name="textfieldPasswordToggle"
+      placeholder="Password must be at least 6 characters long"
+    />
+
+    <TextField
+      id="textfieldPasswordToggleDisabled"
+      label="Password Toggle"
+      hasPasswordToggle
+      isDisabled
+      name="textfieldPasswordToggleDisabled"
+      placeholder="Password must be at least 6 characters long"
+    />
+  </>
 );
 
-export default Story;
+export default TextFieldPasswordToggle;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx b/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx
index b5be91612e..cb8855bf69 100644
--- a/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx
+++ b/packages/web-react/src/components/TextField/demo/TextFieldRequired.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import TextField from '../TextField';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextField id="textfield-required" label="Required" name="textfield-required" isRequired />
+const TextFieldRequired = () => (
+  <TextField id="textfieldRequired" label="Label" name="textfieldRequired" placeholder="Placeholder" isRequired />
 );
 
-export default Story;
+export default TextFieldRequired;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldType.tsx b/packages/web-react/src/components/TextField/demo/TextFieldType.tsx
deleted file mode 100644
index c46e7dca52..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextFieldType.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import TextField from '../TextField';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextField id="textfield-email" label="Type email" name="textfield-email" type="email" />
-    <TextField id="textfield-number" label="Type number" name="textfield-number" type="number" />
-    <TextField id="textfield-password" label="Type password" name="textfield-password" type="password" />
-    <TextField id="textfield-search" label="Type search" name="textfield-search" type="search" />
-    <TextField id="textfield-tel" label="Type tel" name="textfield-tel" type="tel" />
-    <TextField id="textfield-text" label="Type text" name="textfield-text" type="text" />
-    <TextField id="textfield-url" label="Type url" name="textfield-url" type="url" />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx b/packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx
new file mode 100644
index 0000000000..4e6c68e95e
--- /dev/null
+++ b/packages/web-react/src/components/TextField/demo/TextFieldValidation.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import TextField from '../TextField';
+
+const TextFieldValidation = () => (
+  <>
+    <TextField
+      id="textfieldSuccess"
+      label="Label"
+      name="textfieldSuccess"
+      placeholder="Placeholder"
+      validationState="success"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldWarning"
+      label="Label"
+      validationText="Validation text"
+      name="textfieldWarning"
+      placeholder="Placeholder"
+      validationState="warning"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldDanger"
+      label="Label"
+      validationText={['Validation text', 'Second validation text']}
+      name="textfieldDanger"
+      placeholder="Placeholder"
+      validationState="danger"
+      value="Filled"
+    />
+
+    <TextField
+      id="textfieldDangerHelper"
+      isRequired
+      label="Label"
+      helperText="This is helper text"
+      validationText="Danger validation text"
+      validationState="danger"
+      name="textfieldDangerHelper"
+      placeholder="Placeholder"
+      value="Filled"
+    />
+  </>
+);
+
+export default TextFieldValidation;
diff --git a/packages/web-react/src/components/TextField/demo/TextFieldValidationState.tsx b/packages/web-react/src/components/TextField/demo/TextFieldValidationState.tsx
deleted file mode 100644
index 770c8ffd6a..0000000000
--- a/packages/web-react/src/components/TextField/demo/TextFieldValidationState.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import TextField from '../TextField';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextField
-      id="textfield-success"
-      label="Validation success"
-      name="textfield-success"
-      validationState="success"
-      validationText="Validation text"
-    />
-    <TextField
-      id="textfield-warning"
-      label="Validation warning"
-      name="textfield-warning"
-      validationState="warning"
-      validationText="Validation text"
-    />
-    <TextField
-      id="textfield-danger"
-      label="Validation danger"
-      name="textfield-danger"
-      validationState="danger"
-      validationText={['Validation text', 'Second validation text']}
-    />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextField/demo/index.tsx b/packages/web-react/src/components/TextField/demo/index.tsx
index d6734753c9..9b2d66e158 100644
--- a/packages/web-react/src/components/TextField/demo/index.tsx
+++ b/packages/web-react/src/components/TextField/demo/index.tsx
@@ -5,52 +5,52 @@ import ReactDOM from 'react-dom/client';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
 // @ts-ignore: No declaration file
 import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import TextField from './TextField';
+import { IconsProvider } from '../../../context';
+import TextFieldDefault from './TextFieldDefault';
+import TextFieldRequired from './TextFieldRequired';
+import TextFieldHiddenLabel from './TextFieldHiddenLabel';
+import TextFieldHelperText from './TextFieldHelperText';
 import TextFieldDisabled from './TextFieldDisabled';
+import TextFieldValidation from './TextFieldValidation';
 import TextFieldFluid from './TextFieldFluid';
 import TextFieldInputWidth from './TextFieldInputWidth';
-import TextFieldLabelHidden from './TextFieldLabelHidden';
+import TextFieldInline from './TextFieldInline';
 import TextFieldPasswordToggle from './TextFieldPasswordToggle';
-import TextFieldLabelRequired from './TextFieldRequired';
-import TextFieldType from './TextFieldType';
-import TextFieldValidationState from './TextFieldValidationState';
-import TextFieldHelperText from './TextFieldHelperText';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
       <DocsSection title="Default">
-        <TextField {...TextField.args} />
+        <TextFieldDefault />
+      </DocsSection>
+      <DocsSection title="Required">
+        <TextFieldRequired />
+      </DocsSection>
+      <DocsSection title="Hidden Label">
+        <TextFieldHiddenLabel />
+      </DocsSection>
+      <DocsSection title="Helper Text">
+        <TextFieldHelperText />
       </DocsSection>
       <DocsSection title="Disabled">
         <TextFieldDisabled />
       </DocsSection>
+      <DocsSection title="Validation State with Validation Text">
+        <TextFieldValidation />
+      </DocsSection>
       <DocsSection title="Fluid">
         <TextFieldFluid />
       </DocsSection>
-      <DocsSection title="Input Width">
+      <DocsSection title="Size">
         <TextFieldInputWidth />
       </DocsSection>
-      <DocsSection title="Label Hidden">
-        <TextFieldLabelHidden />
+      <DocsSection title="Inline">
+        <TextFieldInline />
       </DocsSection>
       <DocsSection title="Password Toggle">
         <TextFieldPasswordToggle />
       </DocsSection>
-      <DocsSection title="Required">
-        <TextFieldLabelRequired />
-      </DocsSection>
-      <DocsSection title="Field Type">
-        <TextFieldType />
-      </DocsSection>
-      <DocsSection title="Validation State">
-        <TextFieldValidationState />
-      </DocsSection>
-      <DocsSection title="Helper Text">
-        <TextFieldHelperText {...TextFieldHelperText.args} />
-      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );

From 2fed992b3e2b657483cba2e9aa9b15ccfba4f9d2 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sun, 17 Sep 2023 02:44:08 +0200
Subject: [PATCH 2/2] Docs(web): Add TextField demo #DS-913

- TextField demo in web is now same as demo in web-react and web-twig
---
 .../src/scss/components/TextField/index.html  | 70 +++++++++++++++----
 1 file changed, 56 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/scss/components/TextField/index.html b/packages/web/src/scss/components/TextField/index.html
index b68ff8f943..791e47c8f8 100644
--- a/packages/web/src/scss/components/TextField/index.html
+++ b/packages/web/src/scss/components/TextField/index.html
@@ -1,9 +1,11 @@
 {{#> layout/plain }}
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Default</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldDefault" class="TextField__label">Label</label>
       <input type="text" id="textFieldDefault" class="TextField__input" name="default" placeholder="Placeholder" />
@@ -18,47 +20,63 @@ <h2 class="docs-Heading">Default</h2>
       <label for="textFieldPassword" class="TextField__label">Label</label>
       <input type="password" id="textFieldPassword" class="TextField__input" name="password" placeholder="Placeholder" value="Filled" />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Required</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldRequired" class="TextField__label TextField__label--required">Label</label>
       <input type="text" id="textFieldRequired" class="TextField__input" name="required" placeholder="Placeholder" required />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Hidden Label</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldHiddenLabel" class="TextField__label TextField__label--hidden">Label</label>
       <input type="text" id="textFieldHiddenLabel" class="TextField__input" name="hiddenLabel" placeholder="Placeholder" />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Helper Text</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldHelperText" class="TextField__label">Label</label>
       <input type="text" id="textFieldHelperText" class="TextField__input" name="helperText" placeholder="Placeholder" />
       <div class="TextField__helperText">Helper text</div>
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Disabled</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField TextField--disabled">
       <label for="textFieldDisabled" class="TextField__label">Label</label>
       <input type="text" id="textFieldDisabled" class="TextField__input" name="disabled" placeholder="Placeholder" disabled />
@@ -77,13 +95,17 @@ <h2 class="docs-Heading">Disabled</h2>
         value="Filled"
       />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Validation State with Validation Text</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField TextField--success">
       <label for="textFieldSuccess" class="TextField__label">Label</label>
       <input type="text" id="textFieldSuccess" class="TextField__input" name="success" placeholder="Placeholder" value="Filled" />
@@ -118,35 +140,49 @@ <h2 class="docs-Heading">Validation State with Validation Text</h2>
       <div class="TextField__helperText">This is helper text</div>
       <div class="TextField__validationText">Danger validation text</div>
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Fluid</h2>
 
-  <div class="TextField TextField--fluid">
-    <label for="textFieldFluid" class="TextField__label">Label</label>
-    <input type="text" id="textFieldFluid" class="TextField__input" name="fluid" placeholder="Placeholder" value="Filled" />
+  <div class="docs-Stack docs-Stack--start">
+
+    <div class="TextField TextField--fluid">
+      <label for="textFieldFluid" class="TextField__label">Label</label>
+      <input type="text" id="textFieldFluid" class="TextField__input" name="fluid" placeholder="Placeholder" value="Filled" />
+    </div>
+
   </div>
+
 </section>
 
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Size</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldSize" class="TextField__label">4000 (in Roman numerals)</label>
       <input type="text" size="4" id="textFieldSize" class="TextField__input" name="size" placeholder="Placeholder" />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+  
   <h2 class="docs-Heading">Inline</h2>
 
-  <div class="docs-FormFieldGrid">
-    <div style="display: flex; gap: 1rem; align-items: flex-start">
+  <div class="docs-Stack docs-Stack--start">
+
+    <div style="display: flex; gap: 1rem; align-items: flex-start; max-width: 320px;">
       <div class="TextField">
         <label for="textFieldInline" class="TextField__label TextField__label--hidden">Hidden Label</label>
         <input type="text" id="textFieldInline" class="TextField__input" name="inline" placeholder="Placeholder" value="Filled" />
@@ -154,7 +190,7 @@ <h2 class="docs-Heading">Inline</h2>
       <button type="button" class="Button Button--primary Button--medium">Button</button>
     </div>
 
-    <div style="display: flex; gap: 1rem; align-items: flex-start">
+    <div style="display: flex; gap: 1rem; align-items: flex-start; max-width: 320px;">
       <div class="TextField">
         <label for="textFieldInlineFirst" class="TextField__label TextField__label--hidden">Hidden Label</label>
         <input type="text" id="textFieldInlineFirst" class="TextField__input" name="inlineFirst" placeholder="Placeholder" value="Filled" />
@@ -187,13 +223,17 @@ <h2 class="docs-Heading">Inline</h2>
       </div>
       <button type="button" class="Button Button--primary Button--medium">Button</button>
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Password Toggle</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldPasswordToggle" class="TextField__label">Password Toggle</label>
       <div class="TextField__passwordToggle">
@@ -258,7 +298,9 @@ <h2 class="docs-Heading">Password Toggle</h2>
         </button>
       </div>
     </div>
+
   </div>
+
 </section>
 
 {{/layout/plain }}