search

nhsuk / nhsuk-frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
https://nhsuk.github.io/nhsuk-frontend/
MIT License
619 stars 107 forks source link

Warning button variant #976

Closed paulrobertlloyd closed 2 months ago

paulrobertlloyd commented 3 months ago

Description

On our staff facing service, we use interruption screens that warn a user before they proceed to undertake an action that is destructive and/or cannot be undone. On these pages, we use also a red warning button to further indicate that a destructive action will take place:

Screenshot of a screen asking if a user wants to delete a vaccine.

This follows a similar pattern from the GOV.UK Design System:

Warning buttons

Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.

This PR proposes adding an equivalent --warning variant to nhsuk-button. In the corresponding Service Manual guidance for this component, we can start by using the same guidance as that used in the GOV.UK Design System.

Technical note

The SCSS for each button variant currently includes a lot of repeated properties that shouldn’t need redeclaring given each modifier inherits from the base class. That’s a separate issue, so for this PR, I’ve maintained the same implementation and redeclared properties for this variant.

Checklist

anandamaryon1 commented 2 months ago

Thanks @paulrobertlloyd this helpful. We'll need to hold this until we can add the guidance to the design system: https://github.com/nhsuk/nhsuk-service-manual/issues/1995

Should be able to use the gov.uk guidance, I don't think there's anything else specific we'd need to add/amend?

frankieroberto commented 2 months ago

Guidance added in this PR: https://github.com/nhsuk/nhsuk-service-manual/pull/1999

@anandamaryon1 I think this is un-blocked now?

anandamaryon1 commented 2 months ago

Ah, one small thing, do you mind if I/we change the example button label to align with the design system documentation? @paulrobertlloyd @frankieroberto

(It's something we want to do moving forward, to ensure both are aligned to avoid confusion).

frankieroberto commented 2 months ago

@anandamaryon1 ah do you mean change from "Delete account" to "Yes, delete this vaccine"?

frankieroberto commented 2 months ago

Merged, thanks @paulrobertlloyd and @anandamaryon1!