Panel

[bameyrick]

Use this place to discuss the panel component in the ONS Design System

[bameyrick]

Links within panels should not have their colour modified. Links should always be the same blue everywhere.

[jrbarnes9]

Panels need a default bottom margin parameter

[bameyrick]

Maybe we should address all all of these issues when we look at spacing: https://trello.com/c/h0RbO4UV/99-spacing

[bameyrick]

Theres no classes parameter so adding custom spacing via utility classes isn't possible

[bameyrick]

We need a parameter to customise the tag used within the header element, e.g. to use a h1 for the title.

[jrbarnes9]

Reintroduce a 'warning' panel when the consequences of the users action could have a negative effect. e.g. The EQ 'remove person' confirmation message:

[jrbarnes9]

Remove border-left from warning panel

[trevorsaint]

Remove border-left from warning panel

Yeah I’ve spotted this bug and need it removed.

[jrbarnes9]

Warning panel text should be bold by default

[jrbarnes9]

Wrapping issue with error summary panel

[jrbarnes9]

Need to be able to define a panel icon size

[jrbarnes9]

Wrapping issue in error summary panel...

[jrbarnes9]

Remove border-left from panel--bare

panel--bare should have no left border, so e.g. icons in these panels can be left-aligned with the page container.

[jrbarnes9]

Remove top and bottom padding from panel--bare so spacing is dictated by bottom margins

[jrbarnes9]

Adjust panel icon vertical alignment

[jrbarnes9]

Remove unnecessary padding from panel--warn

[trevorsaint]

Spotted a little bug in the Information Panel example.

We are wrapping the UL inside a P tag.

[trevorsaint]

The panel announcement will need to change to be more inline with GOV.

Large

Small

[rmccar]

Do we want all success panels to have the tick icon hardcoded? Because at the moment it is possible to not specify an icon for a success panel like this:

It is also possible to add an icon to the information panel for example and it is not coloured specifically for that panel, like this:

[jrbarnes9]

#2340

[LaurenDowling]

There doesn't appear to be a success/confirmation page within the patterns section of the design system yet. I was just wondering whether it is advised that this component sit on a success/confirmation page? The example below shows a case management system mockup where 'confirm and send email' has been clicked on a previous page, ending that particular journey and returning the user to the respondent case page. So it behaves more like a notification banner.

If this use is fine, has the potential to close the banner been considered?

I noticed that the Scottish Government design system seem to have both a notification banner (that can be closed) and a notification panel. https://designsystem.gov.scot/components/notification-banner/

[jrbarnes9]

Hi @LaurenDowling. This is on our radar. We do have a ticket on our community backlog to publish the confirmation page pattern that was used ending linear transactional journeys, however, we do need more research undertaken/shared for applications like this, where there is repetitive use, to understand if the confirmation page would work in these cases. I would imagine the journey to return via a call to action may not work so well here.

If anyone has any research they could share, please do. If you feel a close button is required, please test it and propose a change.

We also plan to do a design spike on notifications ourselves in the future, as we are aware they are becoming more widely used within services using the DS now, but we encourage all designers to contribute to the DS where possible.

[Al-Davies]

Panel warning - UR findings
tested most recently as part of end-to-end testing Feb-Dec 2021 of Census

• Users have clearly noted panels used for confirmation messages as part of 2021 Census testing
• Users have clearly noted blue warning panels used on 2021 Census home page (displaying information on fines for non-completion), blue banners described as 'striking'
• Users notice panels and warnings, but content must to be the point and relevant, if they aren't they 'get in the way'