diff --git a/changelog.txt b/changelog.txt index 62b39fe6..4a314439 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,3 +1,6 @@ +Version x.x.x - x x, x +- Fixed - Asterisk missing on required input label. + Version 1.2.2 - 4th December, 2024 - Improvement - Removed margin and added new props to the Line Chart component for customizability. diff --git a/src/components/input/input.stories.tsx b/src/components/input/input.stories.tsx index c97c38b9..4fee7533 100644 --- a/src/components/input/input.stories.tsx +++ b/src/components/input/input.stories.tsx @@ -79,3 +79,13 @@ WithPrefixSuffix.args = { suffix: '#', defaultValue: '', }; + +// Required Input with Label +export const Required = Template.bind( {} ); +Required.args = { + type: 'text', + size: 'sm', + required: true, + label: 'Required Input', + defaultValue: 'Required Input', +}; diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index 839ffe40..50974e47 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -5,10 +5,12 @@ import React, { forwardRef, useRef, type ReactNode, + LabelHTMLAttributes, } from 'react'; import { nanoid } from 'nanoid'; import { cn } from '@/utilities/functions'; import { Upload, X } from 'lucide-react'; +import Label from '../label'; export declare interface InputProps { /** Unique identifier for the input element. */ @@ -52,6 +54,9 @@ export declare interface InputProps { /** Placeholder text for the input field. */ placeholder?: string; + + /** Indicates whether the input is required. */ + required?: boolean; } export const InputComponent = ( @@ -245,12 +250,13 @@ export const InputComponent = ( return null; } return ( - + ); }, [ label, size, inputId ] ); diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx index b9fd168e..7a261cad 100644 --- a/src/components/label/label.tsx +++ b/src/components/label/label.tsx @@ -17,7 +17,7 @@ export interface LabelProps { } const Label = forwardRef( - ( + ( { children = null, tag: Tag = 'label', @@ -26,7 +26,7 @@ const Label = forwardRef( variant = 'neutral', // neutral, help, error, disabled required = false, ...props - }: LabelProps, + }: LabelProps & T, ref: React.Ref ) => { // Base classes. - Mandatory classes. @@ -78,4 +78,7 @@ const Label = forwardRef( } ); -export default Label; +export default Label as ( + props: LabelProps & T, + ref: React.Ref +) => React.ReactNode;