Merge pull request #126 from abusix/fix-color-of-optional-formfield-l…

…abel
abusix · Jun 7, 2024 · d92a022 · d92a022
2 parents d10f296 + ae82a7c
commit d92a022
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/components/form-field/form-field-label.tsx b/src/components/form-field/form-field-label.tsx
@@ -8,8 +8,8 @@ export interface FormFieldLabelProps {
 
 export const FormFieldLabel = ({ htmlFor, children, optional }: FormFieldLabelProps) => {
     return (
-        <div className="flex items-baseline gap-1">
-            <label htmlFor={htmlFor} className="headline-400 text-neutral-800">
+        <div className="flex items-baseline gap-1 text-neutral-800">
+            <label htmlFor={htmlFor} className="headline-400">
                 {children}
             </label>
 

diff --git a/src/components/form-field/text-input/text-input.stories.tsx b/src/components/form-field/text-input/text-input.stories.tsx
@@ -19,21 +19,27 @@ const TextInputWithHooks = ({
     hasLeftIcon = false,
     readOnly = false,
     value,
+    optional,
 }: {
     error?: boolean;
     disabled?: boolean;
     hasLeftIcon?: boolean;
     readOnly?: boolean;
     value?: string;
+    optional?: boolean;
 }) => {
     const [inputValue, setInputValue] = useState(value);
 
     return (
         <FormField>
             <FormField.LabelGroup>
-                <FormField.Label htmlFor="value">Label</FormField.Label>
+                <FormField.Label htmlFor="value" optional={optional}>
+                    Label
+                </FormField.Label>
+
                 <FormField.Description id="value-description">Description</FormField.Description>
             </FormField.LabelGroup>
+
             <FormField.TextInput
                 id="value"
                 value={inputValue}
@@ -44,6 +50,7 @@ const TextInputWithHooks = ({
                 LeftIcon={hasLeftIcon ? SearchIcon : undefined}
                 readOnly={readOnly}
             />
+
             {error ? <FormField.ErrorMessage>Error message.</FormField.ErrorMessage> : null}
         </FormField>
     );
@@ -88,3 +95,11 @@ export const Disabled: Story = {
         </div>
     ),
 };
+
+export const Optional: Story = {
+    render: () => (
+        <div className="w-72">
+            <TextInputWithHooks optional />
+        </div>
+    ),
+};