remove horizontal form variant

atelier-saulx · Nov 13, 2024 · b315983 · b315983
1 parent 8742f15
commit b315983
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 109 deletions.
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -115,7 +115,7 @@ export const Component = () => {
         isDirty,
       }) => (
         <>
-          <Form.Fields horizontal />
+          <Form.Fields />
           <div
             style={{
               display: 'flex',

diff --git a/src/components/Form/FormField.stories.tsx b/src/components/Form/FormField.stories.tsx
@@ -7,15 +7,15 @@ export default {
   component: FormField,
 }
 
-export const Vertical = () => {
+export const Default = () => {
   return (
     <FormField label="Label" description="Description text" error="Error text">
       <TextInput error onChange={() => {}} />
     </FormField>
   )
 }
 
-export const VerticalNote = () => {
+export const WithNote = () => {
   return (
     <FormField
       label="Label"
@@ -25,28 +25,3 @@ export const VerticalNote = () => {
     </FormField>
   )
 }
-
-export const Horizontal = () => {
-  return (
-    <FormField
-      horizontal
-      label="Label"
-      description="Description text"
-      error="Error text"
-    >
-      <TextInput error onChange={() => {}} />
-    </FormField>
-  )
-}
-
-export const HorizontalNote = () => {
-  return (
-    <FormField
-      horizontal
-      label="Label"
-      note={{ title: 'Title', description: 'Description' }}
-    >
-      <TextInput error onChange={() => {}} />
-    </FormField>
-  )
-}
diff --git a/src/components/Form/FormField.tsx b/src/components/Form/FormField.tsx
@@ -18,62 +18,8 @@ function FormField({
   label,
   description,
   error,
-  horizontal = false,
   note,
 }: FormFieldProps) {
-  if (horizontal) {
-    return (
-      <div
-        style={{
-          flex: 1,
-          width: '100%',
-          display: 'flex',
-          gap: 16,
-          minHeight: 36,
-        }}
-      >
-        <div style={{ width: 160, paddingTop: 9.5 }}>
-          <Text variant="display-regular" color="neutral60">
-            {label}
-          </Text>
-        </div>
-        <div
-          style={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-            alignItems: 'start',
-            justifyContent: 'center',
-          }}
-        >
-          {children}
-          {error && (
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 4,
-                color: colors.red100,
-              }}
-            >
-              <Icon variant="error-filled" />
-              <Text color="inherit" variant="display-medium">
-                {error}
-              </Text>
-            </div>
-          )}
-          {description && (
-            <Text variant="display-regular" color="neutral60">
-              {description}
-            </Text>
-          )}
-          {note && <Note {...note} />}
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div
       style={{

diff --git a/src/components/Form/FormFieldGroup.stories.tsx b/src/components/Form/FormFieldGroup.stories.tsx
@@ -30,27 +30,3 @@ export const Vertical = () => {
     </FormFieldGroup>
   )
 }
-
-export const Horizontal = () => {
-  return (
-    <FormFieldGroup label="Group title">
-      <FormField horizontal label="Label">
-        <TextInput onChange={() => {}} />
-      </FormField>
-      <FormField horizontal label="Label" description="Description text">
-        <TextInput onChange={() => {}} />
-      </FormField>
-      <FormField horizontal label="Label" error="Error text">
-        <TextInput error onChange={() => {}} />
-      </FormField>
-      <FormField
-        horizontal
-        label="Label"
-        description="Description text"
-        error="Error text"
-      >
-        <TextInput error onChange={() => {}} />
-      </FormField>
-    </FormFieldGroup>
-  )
-}
diff --git a/src/components/Form/FormFields.tsx b/src/components/Form/FormFields.tsx
@@ -18,11 +18,10 @@ import { RichTextEditor } from '../RichTextEditor/index.js'
 import { getByPath, Path } from '@saulx/utils'
 
 type FormFieldsProps = {
-  horizontal?: boolean
   fullScreen?: boolean
 }
 
-function FormFields({ horizontal, fullScreen }: FormFieldsProps) {
+function FormFields({ fullScreen }: FormFieldsProps) {
   const ctx = useContext(FormContext)
 
   if (!ctx) {
@@ -35,7 +34,6 @@ function FormFields({ horizontal, fullScreen }: FormFieldsProps) {
     return (
       <FormField
         key={path.toString()}
-        horizontal={horizontal}
         label={field.label}
         description={field.description}
         error={getByPath(form.errors, path)}