Remove sortable table #14966
Remove sortable table #14966
Conversation
hasAttachment was removed as a field, and the Table component doesn't use `id` or `rowClass` for anything
There is no column for recipientName
There was a problem hiding this comment.
Icon found
Icons can be decorative, but sometimes they are used to convey meaning. If there are any semantics associated with an icon, those semantics should also be conveyed to a screen reader.
What you can do
Review the markup and see if the icon provides information that isn't represented textually, or wait for a VSP review.
src/applications/personalization/dashboard/containers/MessagingWidget.jsx
Show resolved
Hide resolved
|
|
||
| const attachmentIcon = message.attachment ? ( | ||
| <i className="fa fa-paperclip" aria-label="Message has an attachment" /> | ||
| <i | ||
| className="fa fa-paperclip vads-u-flex--auto" |
There was a problem hiding this comment.
vads-u-flex--auto is to shift this icon all the way to the right, since it is now included with the Subject column instead of its own blank one.
| senderName: message.senderName, | ||
| subject: ( | ||
| <div className="vads-u-display--flex"> | ||
| <span className="vads-u-flex--fill">{message.subject}</span> | ||
| {attachmentIcon} | ||
| </div> | ||
| ), | ||
| sentDate: formattedDate(message.sentDate), |
There was a problem hiding this comment.
hasAttachmentis no longer needed since we removed the object with thatvaluefrom thefieldsprop.idandrowClasswere specific to<SortableTable>- We don't need to call
makeMessageLinkwith the new<Table>- all it was doing was outputting content in an empty<a>tag, which looked weird and was useless without thehref
|
|
||
| return { | ||
| attributes, | ||
| loading: msgState.loading, | ||
| messages, | ||
| recipients: msgState.recipients.data, | ||
| sort, |
There was a problem hiding this comment.
The sort prop was only used to pass to <SortableTable>'s currentSort prop. <Table> won't break if currentSort is absent, and the table is configured so that it isn't sortable anyway.
| @@ -14,6 +14,7 @@ | |||
| @import "~@department-of-veterans-affairs/formation/sass/modules/m-additional-info"; | |||
| @import "~@department-of-veterans-affairs/formation/sass/modules/m-hub-page-link-list"; | |||
| @import "~@department-of-veterans-affairs/formation/sass/modules/m-promo-banner"; | |||
| @import "~@department-of-veterans-affairs/formation/sass/modules/m-responsive-tables"; | |||
There was a problem hiding this comment.
Need to make sure we get the CSS for responsive tables into vets-website.
There was a problem hiding this comment.
@tressaellen @callen2563 @Samara-Strauss @mshea0606 should all be made aware of this visual change.
Description
This replaces the one instance of
<SortableTable>with the newly-created responsive<Table>. This will allow<SortableTable>to be removed from the component library.Part of department-of-veterans-affairs/va.gov-team#16429
Testing done
Manual visual testing in browser
Screenshots
Current - Desktop
Current - Mobile
After - Desktop
After - Mobile
Acceptance criteria
Definition of done