Input/textarea styles

alexbaumgertner · alexbaumgertner · commit cc8e14acec51 · 2025-07-30T18:01:30.000+03:00
diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
@@ -1,4 +1,4 @@
-.fieldset {
+.component {
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -22,7 +22,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const helperId = `${checkboxId}-helper`
 
     return (
-      <fieldset className={classes.fieldset}>
+      <div className={classes.component}>
         <div className={classes.checkboxContainer}>
           <input
             ref={ref}
@@ -51,7 +51,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             {helperText}
           </span>
         )}
-      </fieldset>
+      </div>
     )
   }
 )
diff --git a/src/components/Document/DocumentBlockForm.tsx b/src/components/Document/DocumentBlockForm.tsx
@@ -154,7 +154,7 @@ export const DocumentBlockForm = ({
         {!isCollapsed && (
           <>
             {!currentBlockData.id && (
-              <fieldset>
+              <fieldset className={classes.fieldset}>
                 <label htmlFor="block_type">Type</label>
                 <select
                   name="type"
@@ -172,41 +172,47 @@ export const DocumentBlockForm = ({
               </fieldset>
             )}
             {['heading2', 'heading3'].includes(currentBlockData.type) && (
-              <Input
-                id={`title_${currentBlockData.id}`}
-                label="Title"
-                name="title"
-                type="text"
-                value={currentBlockData.title || ''}
-                onChange={handleChange}
-                required
-              />
+              <fieldset className={classes.fieldset}>
+                <Input
+                  id={`title_${currentBlockData.id}`}
+                  label="Title"
+                  name="title"
+                  type="text"
+                  value={currentBlockData.title || ''}
+                  onChange={handleChange}
+                  required
+                />
+              </fieldset>
             )}
             {['paragraph', 'list', 'quote'].includes(currentBlockData.type) && (
-              <TextArea
-                id={`content_${currentBlockData.id}`}
-                label="Content"
-                name="content"
-                rows={10}
-                value={currentBlockData.content}
-                onChange={(e) => {
-                  setCurrentBlockData({
-                    ...currentBlockData,
-                    [e.target.name]: e.target.value,
-                  })
-                }}
-              />
+              <fieldset className={classes.fieldset}>
+                <TextArea
+                  id={`content_${currentBlockData.id}`}
+                  label="Content"
+                  name="content"
+                  rows={10}
+                  value={currentBlockData.content}
+                  onChange={(e) => {
+                    setCurrentBlockData({
+                      ...currentBlockData,
+                      [e.target.name]: e.target.value,
+                    })
+                  }}
+                />
+              </fieldset>
             )}
             {['youtube', 'image', 'quote'].includes(currentBlockData.type) && (
-              <Input
-                id={`url_${currentBlockData.id}`}
-                label="URL"
-                name="url"
-                type="url"
-                value={currentBlockData.url || ''}
-                onChange={handleChange}
-                placeholder="https://example.com"
-              />
+              <fieldset className={classes.fieldset}>
+                <Input
+                  id={`url_${currentBlockData.id}`}
+                  label="URL"
+                  name="url"
+                  type="url"
+                  value={currentBlockData.url || ''}
+                  onChange={handleChange}
+                  placeholder="https://example.com"
+                />
+              </fieldset>
             )}
             <div className={classes.blockActions}>
               <Button type="submit">
diff --git a/src/components/Document/DocumentForm.tsx b/src/components/Document/DocumentForm.tsx
@@ -221,33 +221,37 @@ const DocumentForm = ({
   return (
     <div className={classes.documentFormContainer}>
       <form className={classes.documentForm} onSubmit={handleSubmit}>
-        <Input
-          id="title"
-          label="Title"
-          name="title"
-          type="text"
-          required
-          value={currentDocument.title}
-          onChange={(e) => {
-            setCurrentDocument({
-              ...currentDocument,
-              title: e.target.value,
-            })
-          }}
-        />
-        <TextArea
-          id="description"
-          label="Description"
-          name="description"
-          rows={5}
-          value={currentDocument.description}
-          onChange={(e) => {
-            setCurrentDocument({
-              ...currentDocument,
-              description: e.target.value,
-            })
-          }}
-        />
+        <fieldset className={classes.fieldset}>
+          <Input
+            id="title"
+            label="Title"
+            name="title"
+            type="text"
+            required
+            value={currentDocument.title}
+            onChange={(e) => {
+              setCurrentDocument({
+                ...currentDocument,
+                title: e.target.value,
+              })
+            }}
+          />
+        </fieldset>
+        <fieldset className={classes.fieldset}>
+          <TextArea
+            id="description"
+            label="Description"
+            name="description"
+            rows={5}
+            value={currentDocument.description}
+            onChange={(e) => {
+              setCurrentDocument({
+                ...currentDocument,
+                description: e.target.value,
+              })
+            }}
+          />
+        </fieldset>
         <Checkbox
           id="is_published"
           label="Is published"
@@ -260,34 +264,36 @@ const DocumentForm = ({
             })
           }}
         />
-        <div style={{ marginTop: '1rem' }}>
+        <div className={classes.actions}>
           <Button type="submit">Save document</Button>
           <Button type="button" variant="secondary">
             Cancel
           </Button>
         </div>
       </form>
-      <div style={{ marginTop: '1rem' }}>
-        <h3>Blocks:</h3>
-        <div style={{ display: 'flex', gap: '1rem' }}>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => {
-              setIsCollapsed(true)
-            }}
-          >
-            Collapse all
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => setIsCollapsed(false)}
-          >
-            Expand all
-          </Button>
-        </div>
-        <div className={classes.blocksContainer}>
+      <div className={classes.blocksContainer}>
+        {blocksData.length > 0 && <h3>Document blocks:</h3>}
+        {blocksData.length > 0 && (
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                setIsCollapsed(true)
+              }}
+            >
+              Collapse all
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => setIsCollapsed(false)}
+            >
+              Expand all
+            </Button>
+          </div>
+        )}
+        <div className={classes.blocks}>
           {currentDocument.id && (
             <>
               {/* Drop zone at the beginning */}
diff --git a/src/components/Document/document.module.css b/src/components/Document/document.module.css
@@ -1,39 +1,24 @@
 .documentFormContainer {
+  margin-top: 4rem;
   display: block;
 }
 
 .documentForm {
   display: block;
   width: 100%;
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-  }
-
-  input,
-  textarea {
-    padding: 0.5rem 0.5rem;
-    box-sizing: border-box;
-    width: 100%;
-  }
 }
 
 .container {
   display: block;
   width: 100%;
+  box-sizing: border-box;
+}
 
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-  }
-
-  input,
-  textarea {
-    padding: 0.5rem 0.5rem;
-    box-sizing: border-box;
-    width: 100%;
-  }
+.fieldset {
+  display: block;
+  border: none;
+  padding: 0;
+  margin-bottom: 2rem;
 }
 
 .deleteButton {
@@ -93,6 +78,7 @@
 .container {
   position: relative;
   transition: all 0.2s ease;
+  padding: 20px;
 }
 
 .container.dragging {
@@ -103,7 +89,6 @@
 
 .form {
   display: block;
-  width: 100%;
 }
 
 .dragging .blockHeader {
@@ -176,6 +161,13 @@
   position: relative;
 }
 
+.blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+
 /* Collapsed content during dragging */
 .collapsedContent {
   padding: 10px;
@@ -326,3 +318,9 @@
     }
   }
 }
+
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 2rem;
+}
diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css
@@ -1,4 +1,4 @@
-.fieldset {
+.component {
   display: flex;
   flex-direction: column;
   gap: 10px;
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -21,7 +21,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const helperId = `${inputId}-helper`
 
     return (
-      <fieldset className={classes.fieldset}>
+      <div className={classes.component}>
         <label htmlFor={inputId} className={classes.label}>
           {label}
           {required && <span className={classes.required}>*</span>}
@@ -45,7 +45,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             {helperText}
           </div>
         )}
-      </fieldset>
+      </div>
     )
   }
 )
diff --git a/src/components/TextArea/TextArea.module.css b/src/components/TextArea/TextArea.module.css
@@ -1,4 +1,4 @@
-.fieldset {
+.component {
   display: flex;
   flex-direction: column;
   gap: 10px;
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
@@ -32,7 +32,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     const helperId = `${textareaId}-helper`
 
     return (
-      <fieldset className={classes.fieldset}>
+      <div className={classes.component}>
         <label htmlFor={textareaId} className={classes.label}>
           {label}
           {required && <span className={classes.required}>*</span>}
@@ -57,7 +57,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             {helperText}
           </div>
         )}
-      </fieldset>
+      </div>
     )
   }
 )

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.fieldset {`
	`1`	`+.component {`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-direction: row;`
`4`	`4`	`align-items: center;`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(`
`22`	`22`	const helperId = `${checkboxId}-helper`
`23`	`23`
`24`	`24`	`return (`
`25`		`- <fieldset className={classes.fieldset}>`
	`25`	`+ <div className={classes.component}>`
`26`	`26`	`<div className={classes.checkboxContainer}>`
`27`	`27`	`<input`
`28`	`28`	`ref={ref}`
`@@ -51,7 +51,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(`
`51`	`51`	`{helperText}`
`52`	`52`	`</span>`
`53`	`53`	`)}`
`54`		`- </fieldset>`
	`54`	`+ </div>`
`55`	`55`	`)`
`56`	`56`	`}`
`57`	`57`	`)`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(`
`21`	`21`	const helperId = `${inputId}-helper`
`22`	`22`
`23`	`23`	`return (`
`24`		`- <fieldset className={classes.fieldset}>`
	`24`	`+ <div className={classes.component}>`
`25`	`25`	`<label htmlFor={inputId} className={classes.label}>`
`26`	`26`	`{label}`
`27`	`27`	`{required && <span className={classes.required}>*</span>}`
`@@ -45,7 +45,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(`
`45`	`45`	`{helperText}`
`46`	`46`	`</div>`
`47`	`47`	`)}`
`48`		`- </fieldset>`
	`48`	`+ </div>`
`49`	`49`	`)`
`50`	`50`	`}`
`51`	`51`	`)`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(`
`32`	`32`	const helperId = `${textareaId}-helper`
`33`	`33`
`34`	`34`	`return (`
`35`		`- <fieldset className={classes.fieldset}>`
	`35`	`+ <div className={classes.component}>`
`36`	`36`	`<label htmlFor={textareaId} className={classes.label}>`
`37`	`37`	`{label}`
`38`	`38`	`{required && <span className={classes.required}>*</span>}`
`@@ -57,7 +57,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(`
`57`	`57`	`{helperText}`
`58`	`58`	`</div>`
`59`	`59`	`)}`
`60`		`- </fieldset>`
	`60`	`+ </div>`
`61`	`61`	`)`
`62`	`62`	`}`
`63`	`63`	`)`