v5 component refactor: Drawer

[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? New 'Drawer' component
• Is the component design signed off by product and design? Yes - but UI is still being updated "The UI is ready to be updated - but the usage and behaviour is still being documented. Core UI team are working on this at the moment - i.e. drawer stacking, URLs etc."
• Guide to component structure & documentation in storybook
• Link to DS in Figma
• Link to Elements Audit in Figma
• Accessibility requirements
• Link to Design Guidelines
• See comment from Kurt below for suggested approach

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

[kurtdoherty]

suggestion: It would be great if we could align Element's Drawer component with the Console Cloud team's react-ui-core Drawer, as that will make migration for us much simpler. The component API we have has also been battled tested via 100s of drawers in Console Cloud, so we're pretty confident about it's ability to service the drawer pattern defined by the Design System.

suggestion: Given the a11y requirements around modals, it might be best for us to leverage the built-in dialog element. I recently did a POC demonstrating this is possible for both Drawers and Dialogs.

[willmcvay]

suggestion: It would be great if we could align Element's Drawer component with the Console Cloud team's react-ui-core Drawer, as that will make migration for us much simpler. The component API we have has also been battled tested via 100s of drawers in Console Cloud, so we're pretty confident about it's ability to service the drawer pattern defined by the Design System.

suggestion: Given the a11y requirements around modals, it might be best for us to leverage the built-in dialog element. I recently did a POC demonstrating this is possible for both Drawers and Dialogs.

As per the Dialog, totally agree with this approach