feat(FormField): add boldLabel prop for InputPromo (#1495)

livechat · Jan 24, 2025 · df33d0d · df33d0d
1 parent 34efe9a
commit df33d0d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/packages/react-components/src/components/FormField/FormField.module.scss b/packages/react-components/src/components/FormField/FormField.module.scss
@@ -17,7 +17,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    margin-bottom: 4px;
+    margin-bottom: var(--spacing-1);
 
     label {
       margin-bottom: 0;

diff --git a/packages/react-components/src/components/FormField/FormField.stories.tsx b/packages/react-components/src/components/FormField/FormField.stories.tsx
@@ -2,7 +2,7 @@ import { Info } from '@livechat/design-system-icons';
 import { Meta, StoryFn } from '@storybook/react';
 
 import { Icon } from '../Icon';
-import { Input } from '../Input';
+import { Input, InputPromo } from '../Input';
 import { IInputProps } from '../Input/types';
 
 import { FormField as FormFieldComponent, FormFieldProps } from './FormField';
@@ -23,13 +23,21 @@ export default {
     labelRightNode: {
       control: false,
     },
+    parameters: {
+      controls: {
+        exclude: ['boldLabel'],
+      },
+    },
   },
 } as Meta<typeof FormFieldComponent>;
 
 const ExampleIcon = () => <Icon source={Info} />;
 const ExampleInput = ({ ...args }: IInputProps) => (
   <Input placeholder="Placeholder text" {...args} />
 );
+const ExampleInputPromo = ({ ...args }: IInputProps) => (
+  <InputPromo placeholder="Placeholder text" {...args} />
+);
 const LabelText = 'Email';
 const DescriptionText = 'Enter your email address';
 const PlaceholderText = 'e.g., [email protected]';
@@ -93,3 +101,9 @@ export const TextFieldWithError: StoryFn<FormFieldProps> = () => (
     <ExampleInput error />
   </FormFieldComponent>
 );
+
+export const BoldLabelWithPromoInput: StoryFn<FormFieldProps> = () => (
+  <FormFieldComponent labelText="Username" boldLabel>
+    <ExampleInputPromo />
+  </FormFieldComponent>
+);
diff --git a/packages/react-components/src/components/FormField/FormField.tsx b/packages/react-components/src/components/FormField/FormField.tsx
@@ -23,6 +23,10 @@ export interface FormFieldProps {
    * Define to associate the label with the field
    */
   labelFor?: string;
+  /**
+   * Makes the label text bold. Note: This prop should only be used together with PromoInput.
+   */
+  boldLabel?: boolean;
   /**
    * The CSS class for field container
    */
@@ -59,6 +63,7 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
   labelFor,
   children,
   labelRightNode,
+  boldLabel = false,
 }) => {
   const childrenRef = React.useRef<HTMLDivElement>(null);
   const [labelHeight, setLabelHeight] = React.useState('auto');
@@ -125,7 +130,7 @@ export const FormField: React.FC<React.PropsWithChildren<FormFieldProps>> = ({
                   className={styles[`${baseClass}__label-left-node`]}
                   htmlFor={labelFor}
                 >
-                  <Text as="span" size="sm">
+                  <Text as="span" size="sm" bold={boldLabel}>
                     {labelText}
                   </Text>
                 </label>