Use an unordered list for the FileList since it's more semantic then …

…nested <section> tags
mavenlink · Aug 20, 2019 · 07b8b2f · 07b8b2f
1 parent e4404e6
commit 07b8b2f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/components/file-picker/file-picker.css b/src/components/file-picker/file-picker.css
@@ -70,6 +70,11 @@
   flex-direction: column;
 }
 
+.file-ul {
+  margin: 0;
+  padding: 0;
+}
+
 .file-list-button {
   display: flex;
   flex-direction: row;

diff --git a/src/components/file-picker/file-picker.jsx b/src/components/file-picker/file-picker.jsx
@@ -95,15 +95,16 @@ const FilePicker = (props) => {
 
   const getFilesList = () => {
     if (files.length) {
-      return files.map((file) => {
-        return (
-          <section className={styles['file-list-button']} key={file.name}>
-            <Icon className={styles.icon} name={iconFileDefault.id} size="medium" stroke="grey-base" fill="none" title="Upload file icon" />
-            <span className={styles.filename}>{file.name}</span>
-            <button onClick={e => onRemoveFile(e, file)} className={styles.remove}>&times;</button>
-          </section>
-        );
-      });
+      const listItems = files.map((file) =>
+        <li className={styles['file-list-button']} key={file.name}>
+          <Icon className={styles.icon} name={iconFileDefault.id} size="medium" stroke="grey-base" fill="none" title="Upload file icon" />
+          <span className={styles.filename}>{file.name}</span>
+          <button onClick={e => onRemoveFile(e, file)} className={styles.remove}>&times;</button>
+        </li>
+      );
+      return (
+        <ul className={styles['file-ul']}>{listItems}</ul>
+      );
     }
     return '';
   };