refactor: update FileList component to use ordered list and improve s…

…tyling
Amsterdam · Nov 29, 2024 · 24dda0b · 24dda0b
1 parent 2ba1aa0
commit 24dda0b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/packages/css/src/components/file-list/file-list.scss b/packages/css/src/components/file-list/file-list.scss
@@ -3,11 +3,21 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
+@mixin reset-ol {
+  margin-block: 0;
+  padding-inline: 0;
+}
+
 .ams-file-list {
   display: flex;
   flex-direction: column;
   gap: var(--ams-file-list-gap);
   padding-block: var(--ams-file-list-padding-block);
+
+  @include text-rendering;
+  @include reset-ol;
 }
 
 .ams-file-list__file {
@@ -31,7 +41,7 @@
   }
 }
 
-.ams-file-list__file-name {
+.ams-file-list__file-info {
   flex: 1;
   gap: var(--ams-file-list-file-gap);
   overflow: hidden;

diff --git a/packages/react/src/FileList/FileList.test.tsx b/packages/react/src/FileList/FileList.test.tsx
@@ -34,7 +34,7 @@ describe('FileList', () => {
   })
 
   it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLDivElement>()
+    const ref = createRef<HTMLOListElement>()
 
     const { container } = render(<FileList files={files} ref={ref} />)
 

diff --git a/packages/react/src/FileList/FileList.tsx b/packages/react/src/FileList/FileList.tsx
@@ -9,27 +9,28 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
-import { formatFileSize, formatFileType } from '../common'
+import { formatFileSize } from '../common/formatFileSize'
+import { formatFileType } from '../common/formatFileType'
 
 export type FileListProps = {
   files: FileList
   // eslint-disable-next-line no-unused-vars
   onDelete?: (index: number) => void
-} & HTMLAttributes<HTMLDivElement>
+} & HTMLAttributes<HTMLOListElement>
 
 export const FileList = forwardRef(
-  ({ files, onDelete, className, ...restProps }: FileListProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('ams-file-list', className)}>
+  ({ files, onDelete, className, ...restProps }: FileListProps, ref: ForwardedRef<HTMLOListElement>) => (
+    <ol {...restProps} ref={ref} className={clsx('ams-file-list', className)}>
       {Array.from(files).map((file, index) => (
-        <div key={index} className="ams-file-list__file">
+        <li key={index} className="ams-file-list__file">
           <div className="ams-file-list__file-preview">
             {file.type.includes('image') ? (
               <img src={URL.createObjectURL(file)} alt={file.name} />
             ) : (
               <Icon svg={DocumentIcon} size="level-3" square />
             )}
           </div>
-          <div className="ams-file-list__file-name">
+          <div className="ams-file-list__file-info">
             {file.name}
             <div className="ams-file-input__file-details">
               ({formatFileType(file.type)}, {formatFileSize(file.size)})
@@ -42,9 +43,9 @@ export const FileList = forwardRef(
               </Button>
             </div>
           )}
-        </div>
+        </li>
       ))}
-    </div>
+    </ol>
   ),
 )
 

diff --git a/packages/react/src/common/index.ts b/packages/react/src/common/index.ts
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -4,7 +4,6 @@
  */
 
 /* Append here */
-export * from './common'
 export * from './FileList'
 export * from './ActionGroup'
 export * from './Breakout'