Feat/750 drawer component by GCHQ-Developer-847 · Pull Request #4248 · mi6/ic-ui-kit

GCHQ-Developer-847 · 2026-02-06T20:32:21Z

Summary of the changes

Created drawer component.

Also added focus trap helper functions in both canary and core helpers.ts files, and updated dialog component to use them. I initially did this thinking they could both share functions from the same file but that's not possible with drawer being canary 😅 Decided to just do it anyway as the functions may be useful for future components that need focus traps, and it will also make moving the drawer out of canary easier in future.

I know there is an issue with VoiceOver stuttering when you open and close the drawer with the chevron button. Tried everything to fix this but no luck - if anyone has any ideas, let me know!

There are also a few small changes in other auto-generated files from running npm run build:all. Happy to remove these if we want.

Related issue

#750

Checklist

General

Changes to docs package checked and committed.
All acceptance criteria reviewed and met.

Testing

Relevant unit tests and visual regression tests added.
Visual testing against Figma component specification completed.
Playground stories in React Storybook up to date, with any prop changes and additions addressed.
Compare performance of modified components against develop using Performance addon in React Storybook.

Accessibility

Accessibility Insights FastPass performed.
A11y unit test added and yields no issues.
A11y plug-in on Storybook yields no issues.
Manual screen reader testing performed using NVDA and VoiceOver.
Manual keyboard testing for keyboard controls and logical focus order.
Correct roles used and ARIA attributes used correctly where required.
Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

Page can be zoomed to 400% with no loss of content.
Screen magnifier used with no issues.
Text resized to 200% with no loss of content.
Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
Windows High Contrast mode tested with no loss of content.
System light and dark mode tested with no loss of content.
Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

Min/max content examples tested with no loss of content or overflow.
All prop combinations work without issue.
Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
Controlled and uncontrolled input components tested.
Props/slots can be updated after initial render.

github-actions · 2026-02-06T20:32:44Z

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/feat/750-drawer-component-final/web-components
View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/feat/750-drawer-component-final/react

github-actions · 2026-02-06T20:32:45Z

View your canary branch deployment here: https://mi6.github.io/ic-ui-kit/branches/feat/750-drawer-component-final/canary-web-components
View your canary React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/feat/750-drawer-component-final/canary-react

GCHQ-Developer-299

Requesting changes about those autogenerated files

I think the drawer is looking good tho!

GCHQ-Developer-530

Looks really good - I ran the tests locally and they all pass, all the functionality looks good to me and all the styles match Figma (including HCM looking correct). Just a couple of tiny comments from me 😊

GCHQ-Developer-299 · 2026-02-16T12:41:06Z

@GCHQ-Developer-847 conflicts created by the recent readme fix merge, once those are fixed i'll give it a look :)

Update cspell file with words used in drawer changes. . #750

Update canary-docs file following addition of drawer component to canary package. . #750

GCHQ-Developer-847 · 2026-02-16T13:07:14Z

@GCHQ-Developer-847 conflicts created by the recent readme fix merge, once those are fixed i'll give it a look :)

Thank you - sorted!

GCHQ-Developer-299

Other than the slotted content story on react needing fixing (and I don't think it's a drawer problem) i'm happy! Once that's fixed i'll approve

Also, it looks like you fixed the issue with dialogs and tabbing backwards on tabs! your storybook vs develop

…mponent Add React stories and Cypress tests with images for drawer component. . #750

…y for better clarity Small adjustments to dialog show / hide content story to make it clearer what the story is showing. . #750

…og component to use them Update dialog to use new focus trap helper functions (which make it easier to re-use focus trap functionality and will make move of drawer out of canary easier in future). Update tooltip to make it render correctly in both dialog and drawer components. Also add small changes from running a build. . #750

…ap helper functions Create drawer component and add focus trap helper functions - for use in drawer component, and also in case of any future components that may need focus trap, and to help for future move of drawer out of canary. . #750

GCHQ-Developer-847 · 2026-02-16T16:10:08Z

Other than the slotted content story on react needing fixing (and I don't think it's a drawer problem) i'm happy! Once that's fixed i'll approve

Also, it looks like you fixed the issue with dialogs and tabbing backwards on tabs! your storybook vs develop

Sorted 👍

The tabbing backwards issue still seems to be happening when I try it 😅

GCHQ-Developer-530

Checked through it all again and this looks great now! Amazing work 😊

GCHQ-Developer-847 force-pushed the feat/750-drawer-component-final branch 6 times, most recently from 010610a to 8518b02 Compare February 7, 2026 15:16

GCHQ-Developer-847 changed the title ~~Feat/750 drawer component final~~ Feat/750 drawer component Feb 7, 2026

GCHQ-Developer-847 force-pushed the feat/750-drawer-component-final branch from 8518b02 to 7999f4f Compare February 7, 2026 16:23

GCHQ-Developer-847 marked this pull request as ready for review February 7, 2026 17:48

GCHQ-Developer-299 reviewed Feb 9, 2026

View reviewed changes

Comment thread packages/canary-react/cypress-image-diff-screenshots/baseline/IcDrawer.cy.tsx/long-content.png

GCHQ-Developer-299 reviewed Feb 9, 2026

View reviewed changes

Comment thread packages/canary-web-components/src/components/ic-drawer/ic-drawer.tsx

GCHQ-Developer-299 requested changes Feb 9, 2026

View reviewed changes

Comment thread packages/web-components/src/components/ic-side-navigation/readme.md

GCHQ-Developer-530 reviewed Feb 9, 2026

View reviewed changes

Comment thread packages/canary-web-components/src/components/ic-drawer/ic-drawer.tsx Outdated

Comment thread packages/canary-web-components/src/components/ic-drawer/ic-drawer.tsx Outdated

Comment thread packages/canary-web-components/src/components/ic-drawer/ic-drawer.css Outdated

GCHQ-Developer-847 marked this pull request as draft February 9, 2026 14:13

GCHQ-Developer-847 force-pushed the feat/750-drawer-component-final branch from 7999f4f to 91b98e9 Compare February 9, 2026 15:13

This comment was marked as outdated.

Sign in to view

GCHQ-Developer-847 force-pushed the feat/750-drawer-component-final branch 5 times, most recently from 4487249 to 1543ccf Compare February 12, 2026 15:49

GCHQ-Developer-847 marked this pull request as ready for review February 12, 2026 16:04

GCHQ-Developer-847 requested review from GCHQ-Developer-299 and GCHQ-Developer-530 February 16, 2026 11:22

GCHQ-Developer-847 added 2 commits February 16, 2026 12:43

chore(root): update cspell file with words used in drawer changes

8ab6a40

Update cspell file with words used in drawer changes. . #750

docs(canary-docs): update canary-docs file following drawer changes

9d96b4f

Update canary-docs file following addition of drawer component to canary package. . #750

GCHQ-Developer-847 force-pushed the feat/750-drawer-component-final branch from 1543ccf to 2ea922f Compare February 16, 2026 13:05

GCHQ-Developer-847 force-pushed the feat/750-drawer-component-final branch from 2ea922f to a5e2fd4 Compare February 16, 2026 14:00

GCHQ-Developer-299 reviewed Feb 16, 2026

View reviewed changes

Comment thread packages/canary-react/src/stories/ic-drawer.stories.jsx

GCHQ-Developer-299 requested changes Feb 16, 2026

View reviewed changes

GCHQ-Developer-847 added 4 commits February 16, 2026 16:07

feat(canary-react): add React stories and Cypress tests for drawer co…

a99a81c

…mponent Add React stories and Cypress tests with images for drawer component. . #750

refactor(react): small adjustments to dialog show / hide content stor…

8a0c76c

…y for better clarity Small adjustments to dialog show / hide content story to make it clearer what the story is showing. . #750

GCHQ-Developer-847 force-pushed the feat/750-drawer-component-final branch from a5e2fd4 to 9c93b27 Compare February 16, 2026 16:07

GCHQ-Developer-530 approved these changes Feb 17, 2026

View reviewed changes

GCHQ-Developer-299 approved these changes Feb 17, 2026

View reviewed changes

GCHQ-Developer-299 merged commit ae0d7ac into develop Feb 17, 2026
6 checks passed

GCHQ-Developer-847 deleted the feat/750-drawer-component-final branch March 26, 2026 13:58

Conversation

GCHQ-Developer-847 commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of the changes

Related issue

Checklist

General

Testing

Accessibility

Resize/zoom behaviour

System modes

Testing content extremes

Uh oh!

github-actions Bot commented Feb 6, 2026

Uh oh!

github-actions Bot commented Feb 6, 2026

Uh oh!

Uh oh!

Uh oh!

GCHQ-Developer-299 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

GCHQ-Developer-530 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

GCHQ-Developer-299 commented Feb 16, 2026

Uh oh!

GCHQ-Developer-847 commented Feb 16, 2026

Uh oh!

Uh oh!

GCHQ-Developer-299 left a comment

Choose a reason for hiding this comment

Uh oh!

GCHQ-Developer-847 commented Feb 16, 2026

Uh oh!

GCHQ-Developer-530 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

GCHQ-Developer-847 commented Feb 6, 2026 •

edited

Loading