From 826ef9ae132bf97d0188c5de0073208d036a6751 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Fri, 7 Jun 2024 11:08:35 +0200
Subject: [PATCH 1/2] fix: make optional-label color to be text-neutral-800

---
 src/components/form-field/form-field-label.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form-field/form-field-label.tsx b/src/components/form-field/form-field-label.tsx
index 91b8b5f3..d26def3c 100644
--- 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>
 

From ae82a7c7faa05e4261a8263b77fafe9d14e5a8a7 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Fri, 7 Jun 2024 11:08:56 +0200
Subject: [PATCH 2/2] feat: added example for optional field label

---
 .../text-input/text-input.stories.tsx           | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/form-field/text-input/text-input.stories.tsx b/src/components/form-field/text-input/text-input.stories.tsx
index c241552a..4e48e45b 100644
--- 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>
+    ),
+};