Merge pull request #232 from smartive-education/feature/input-textare…

…a-improvements fix: input field and textarea needs unique id for label reference
ost-cas-fee-adv-22-23 · Mar 4, 2023 · 19df964 · 19df964
2 parents c7160c7 + 0f9a78b
commit 19df964
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/button/CommentButton.tsx b/packages/design-system-component-library-yeahyeahyeah/components/button/CommentButton.tsx
@@ -69,7 +69,7 @@ interface IInteractionSvgStyles {
   $count?: number;
 }
 
-const StyledCommentButton = styled.button(({ $count }: IInteractionButtonStyles) => [
+const StyledCommentButton = styled.a(({ $count }: IInteractionButtonStyles) => [
   tw`
     font-semibold
     leading-normal

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/form/InputForm.tsx b/packages/design-system-component-library-yeahyeahyeah/components/form/InputForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 import tw, { styled } from 'twin.macro';
 import { Eye, Cancel } from '../icon/index';
 
@@ -30,6 +30,7 @@ export const InputForm: React.FC<IFormInputProps> = ({
   onPressEnter,
 }) => {
   const [buttonType, setbuttonType] = useState(type);
+  const id = useId();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setInputValue && setInputValue(e.target.value);
@@ -54,11 +55,11 @@ export const InputForm: React.FC<IFormInputProps> = ({
   return (
     <>
       {editType === 'input' ? (
-        <FormLabel htmlFor={label} labelSize={labelSize}>
+        <FormLabel htmlFor={id} labelSize={labelSize}>
           {label}
           <FormInlineWrapperStyles>
             <InputStyles
-              id={label.toLowerCase()}
+              id={id}
               placeholder={placeholder}
               type={buttonType}
               required={required}
@@ -78,10 +79,10 @@ export const InputForm: React.FC<IFormInputProps> = ({
           <FormFieldError>{errorMessage}</FormFieldError>
         </FormLabel>
       ) : (
-        <FormLabel htmlFor={label} labelSize={labelSize}>
+        <FormLabel htmlFor={id} labelSize={labelSize}>
           {label}
           <TextArea
-            id={label}
+            id={id}
             placeholder={placeholder}
             required={required}
             maxLength={500}