-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
#1299 Update FileList component according to DS #1311
Conversation
katarinazaprazna
commented
Jun 28, 2024
•
edited
Loading
edited
- Add border to the list that displays files in rows
- Replace div markup with an unordered list and list items
{fileSection?.files.map((file, fileIndex) => ( | ||
// eslint-disable-next-line react/no-array-index-key | ||
<div key={fileIndex} className="w-full"> | ||
<li key={fileIndex} className="w-full"> | ||
<FileCardWrapper fileItem={file} variant={variantFileList} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here we can show the bottom divider of FIleCard based on whether it is the last child of the list or not.
Unfortunately we cannot simply use the class divide
because the divider doesn't span the full width of the FileCard, so a prop needs to be drilled down through the FileCardWrapper into FileCard.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice work 👍
<FileCardWrapper | ||
fileItem={file} | ||
variant={variantFileList} | ||
hideBottomDivider={fileIndex === (fileSection?.files?.length ?? false) - 1} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hideBottomDivider={fileIndex === (fileSection?.files?.length ?? false) - 1} | |
hideBottomDivider={fileIndex === fileSection.files.length - 1} |
Operators ?.
and ??
are not needed, because the files
array is defined. We use these only when necessary :)
Test build pipeline info 🚀 🔜 next |