adding id prop for label and hint tag (#448)

* adding id prop for label and hint tag * updating documentation for new properties added
Capgemini · Mar 23, 2023 · a511277 · a511277
1 parent e0eebf9
commit a511277
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/src/autocomplete/Autocomplete.tsx b/src/autocomplete/Autocomplete.tsx
@@ -70,6 +70,10 @@ type autocompleteProps = {
    * you can style the look and feel of your hint text
    */
   hintClass?: string;
+  /**
+   * if you want to pass an id to the hint
+   */
+  hintId?: string;
   /**
    * if you want to pass an id to the result UL list
    */
@@ -154,6 +158,10 @@ type autocompleteProps = {
    * if a label is provided, it will provide the ability to style it
    */
   labelClassName?: string;
+  /**
+   * allow to customise the label with all the properties needed
+   **/
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
   /**
    * it will pass an id to the input or select element(in case of progressive enhancement)
    */
@@ -231,6 +239,7 @@ export const Autocomplete = ({
   defaultValue = '',
   hintText,
   hintClass,
+  hintId,
   multiSelect = false,
   notFoundText,
   resultId,
@@ -253,6 +262,7 @@ export const Autocomplete = ({
   containerClassName,
   labelText,
   labelClassName,
+  labelProps,
   id,
   errorPosition,
   errorMessageText = '',
@@ -492,7 +502,7 @@ export const Autocomplete = ({
           />
         )}
       {labelText && (
-        <label htmlFor={id} className={labelClassName}>
+        <label htmlFor={id} className={labelClassName} {...labelProps}>
           {labelText}
         </label>
       )}
@@ -506,7 +516,7 @@ export const Autocomplete = ({
           />
         )}
       {hintText && (
-        <Hint text={hintText} className={hintClass} useLabel={false} />
+        <Hint text={hintText} className={hintClass} id={hintId} useLabel={false} />
       )}
       {errorPosition &&
         errorPosition === AutoCompleteErrorPosition.AFTER_HINT && (
@@ -534,7 +544,7 @@ export const Autocomplete = ({
   return (
     <>
       {multiSelect && hintText && (
-        <Hint text={hintText} className={hintClass} useLabel={false} />
+        <Hint text={hintText} className={hintClass} id={hintId} useLabel={false} />
       )}
       <div className={containerClassName} style={{ ...searchContainerStyle }}>
         {searchEl}

diff --git a/src/autocomplete/__tests__/Autocomplete.test.tsx b/src/autocomplete/__tests__/Autocomplete.test.tsx
@@ -113,6 +113,19 @@ describe('Autocomplete', () => {
     expect(label).toBeInTheDocument();
   });
 
+  it('should allow to specify a label id', () => {
+    render(
+      <Autocomplete
+        options={['abc', 'xyz']}
+        labelText="labelText"
+        labelClassName="labelClass"
+        labelProps={{id:'labelid'}}
+      />
+    );
+    const label: any = screen.getByText('labelText');
+    expect(label.id).toBe('labelid');
+  });
+
   it('should display an error', () => {
     render(
       <Autocomplete
@@ -424,6 +437,19 @@ describe('Autocomplete', () => {
     expect(hint).not.toBeNull();
   });
 
+  it('should display an hint id if specified', () => {
+    render(
+      <Autocomplete
+        options={['abc', 'xyz']}
+        hintText="search names"
+        hintClass="hintclass"
+        hintId="hintid"
+      />
+    );
+    const hint: any = screen.getByText('search names');
+    expect(hint.id).toBe('hintid');
+  });
+
   it('should display the results after typing 2 character', async () => {
     const user = userEvent.setup();
     const { container } = render(

diff --git a/stories/Autocomplete/Documentation.stories.mdx b/stories/Autocomplete/Documentation.stories.mdx
@@ -42,6 +42,7 @@ An example with all the available properties is (the only mandatory property is
   debounceMs={2000}
   hintText="search the list of fruits"
   hintClass="hintClass"
+  hintId="hintId"
   resultUlClass="resultUlClass"
   resultlLiClass="resultlLiClass"
   resultNoOptionClass="resultNoOptionClass"
@@ -52,6 +53,7 @@ An example with all the available properties is (the only mandatory property is
   containerClassName=""
   labelText=""
   labelClassName=""
+  labelProps={{id:'labelid'}}
   id=""
   errorPosition={AutoCompleteErrorPosition.TOP}
   errorMessageText=""

diff --git a/stories/liveEdit/AutocompleteLive.tsx b/stories/liveEdit/AutocompleteLive.tsx
@@ -37,6 +37,7 @@ function AutocompleteDemo() {
       debounceMs={100}
       hintText="search the list of fruits"
       hintClass=""
+      hintId="hintid"
       prefix={<></>}
       suffix={<></>}
       resultUlClass=""
@@ -48,6 +49,7 @@ function AutocompleteDemo() {
       containerClassName=""
       labelText=""
       labelClassName=""
+      labelProps={{id:'labelid'}}
       id=""
       errorPosition='below'
       errorMessageText=""