v5 component refactor: DataList

[HollyJoyPhillips]

Abstract

As part of the v5 Elements release, each component will be reviewed and refactored to ensure best practice and design system alignment

Specification

• Is new component or existing? New
• Is the component being re-named? No
• Is the component design signed off by product and design? Yes
• Guide to component structure & documentation in storybook
• Link to DS in Figma
• Link to Elements Audit in Figma
• Link to Elements

Developer Checklist

• [ ] Styles alignment between Design System and Elements
• [ ] Check design tokens in Figma and implement CSS variable tokens if available for relevant component
• [ ] Align with accessibility standards / spec as per above
• [ ] If relevant, break down component into Styles Only and React component structures
• [ ] Ensure all variants of components are documented as appropriate
• [ ] Ensure unit test coverage is adequate for component
• [ ] Update documentation in MDX file as per guidelines
• [ ] Changelog updated to reflect a single beta version per component ideally

Release Checklist

• [ ] Approved PR merged to main
• [ ] Design & product review and feedback addressed by developer
• [ ] Beta release by product / engineering lead to next beta version

Additional Context or Information

• Should be wrapped in an anchor if used for navigation (best practices https://webreference.com/html/tags/a/) and treated as a link.
• Images should follow best practices (https://www.w3.org/WAI/tutorials/images/informative/)
• As well as the standard image, text pairing from the spec, the component should also support rendering children if supplied to allow for maximum flexibility eg if a list of items or larger block of text is to be rendered as per a design.

[kurtdoherty]

note: The DataList component described by the Design System is not a replacement for a Card component. A DataList may involve a list of Cards, but they are not the same the thing. I could also be worthwhile getting Design to comment on whether they see the DataList as an organism or a pattern, as that will influence its implementation.

[willmcvay]

@HollyJoyPhillips Can we get some clarity on this from the design team please? There isn't a card component in the DS so maybe we just deprecate card and add data list. @kurtdoherty FYI, don't know if you have any thoughts?

[kurtdoherty]

@willmcvay A few thoughts:

• I would be surprised if there will not be a Card component in the DS eventually; I wonder if it's just one that the team haven't had a chance to define yet. If will be, it will be a separate component than DataList.
• I suspect we'll need a good conversation with the Design team about what the DataList actually is; it may well be a convenience component for designers OR it could be something they've just picked up from the Console component library (we have some high-level components in our lib, DataTable and DataList, that make creating data-driven tables/lists easier for devs so they don't have to deal with table atoms).
• Whether DataList (or DataTable) should translate to explicit components in Elements feels unclear to me at the moment; we could take a similar approach to what we have done in the Console component lib, but we'd want to discuss the API design we took to make sure others were happy to take the same approach.

[willmcvay]

Thanks @kurtdoherty , so we know that DataList is signed off for dev - suggest we just build this as requested and re-visit the Card component at a later date?

[kurtdoherty]

@willmcvay Karmen has marked this component for review. While there's a case to be made for both Dev and Design to have a convenience component like DataList, it's more of a pattern than an individual component. The design team originally included DataList as a component because it was something they inherited from the Console component library; so as I mentioned above, I think there's some conversation that needs to happen with Design before we add a DataList to Elements.

suggestion: Instead of have devs try to tackle the implementation of a pattern via one or more React components, I'd recommend they focus on the other atomic components that need work done to them.