axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
125 stars 18 forks source link

Better typing for error messages (FileUpload) #2386

Closed corsin-ragettli closed 1 year ago

corsin-ragettli commented 1 year ago

Currently for react users, managing errors on the FileUpload is made with document.querySelector(). However, this isn't really the most react-friendly way, so I would propose some new changes which make things easier for react devs

Per file error message

My suggestion would be to add a prop to tell the FileUpload which files are invalid, the typing could - for example - be: invalidFiles?: Array<{id: string, errorMessage: string}> where id would be the id of the file which has an error. This way, React devs can better work with state which in my opinion makes things easier.

Global error message

My proposal would be to just add globalErrorMessage?: string to the props of FileUpload.

Ref

Another way we can simplify things is by adding a ref prop so that React users can use useRef() to call methods like invalidate() or reset()