Add 'secondary' and 'warning' action buttons #1207

dashouse · 2019-02-20T09:08:31Z

This PR:

Adds a tint and shade mix function - This is more controllable than darken and lighten
Converts existing button to use shade (Therefore a slight change to the hover colour)
Adds a secondary button modifier
Adds a warning button modifier

Secondary
I need to consult with this design regarding WCAG 2.1 non-text contrast. The text and the shadow meet contrast which I believe will be enough (the background of the button does not).

Warning

joelanman · 2019-02-20T09:10:50Z

Related discussion on secondary buttons:

alphagov/govuk-design-system-backlog#154

edwardhorsford · 2019-02-21T11:17:28Z

Looks good @dashouse.

I'd probably aim for the border bottom on the grey button to meet 4.5:1 contrast - so possibly using $govuk-secondary-text-colour. Right now using a picker on the image gives me 3.4:1.

soniaturcotte · 2019-02-26T10:02:03Z

Here is the code for the buttons we use on GOV.UK
https://govuk-publishing-components.herokuapp.com/component-guide/button

soniaturcotte · 2019-03-08T14:42:31Z

Tiny nitpick but I don't think the outlined buttons need to have the thicker bottom border. On Content Publisher, we increased the height of the button so the total height would be the same as the filled version. And then had the same border all the way around.

dashouse · 2019-03-11T09:14:04Z

Hey @soniaturcotte, there was some concern that against our text input style the only signifiers of the button were colour and centred text. This was an attempt to differentiate them a bit further but it's also just a best guess on our part.

fofr · 2019-03-11T09:38:13Z

@dashouse Do you have a screenshot of how these alternative buttons look alongside text inputs?

Edited: Screenshot from alphagov/govuk-design-system-backlog#154

soniaturcotte · 2019-03-12T11:57:59Z

@dashouse that seems quite speculative. We haven't not seen this be a problem in any of our research. I would push to start simple and just add other signifiers if it shows as a problem.

The last screenshot on my comment (last comment) in the backlog shows it with a text input @fofr

alphagov/govuk-design-system-backlog#154

36degrees

These look ace @dashouse.

I've added a few comments. Apart from fixing the secondary button styles for links, they're mostly just suggestions 🙂

src/components/button/_button.scss

src/components/button/button.yaml

src/helpers/_shade.scss

src/helpers/_tint.scss

src/helpers/_shade.scss

aliuk2012 · 2019-04-18T07:12:40Z

src/components/button/_button.scss

-  $govuk-button-hover-colour: darken($govuk-button-colour, 5%);
-  $govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
+  // Primary button variables
+  $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals


Just wondered why we were using colour literals here? Should it not be a green from the colour platte?

Nope, the buttons have been their own 'button colour' green for a long time. It's something we're planning to fix with the palette change, but it shouldn't change in this PR.

36degrees · 2019-04-18T14:02:21Z

I think this is ready for review now – top work @dashouse 👍

aliuk2012

Awesome work and I like how the new shade/tint mixins are name-spaced.

36degrees · 2019-04-24T09:52:55Z

Dangit, changelog.

aliuk2012 · 2019-04-24T14:34:19Z

Relates to alphagov/govuk-design-system-backlog#154

- Add new secondary and warning button variants ([PR #1207](alphagov/govuk-frontend#1207)) - Add new govuk-shade and govuk-tint functions for creating shades and tints of colours. ([PR #1207](alphagov/govuk-frontend#1207)) - Add support for custom row classes on the summary list component (including support for some rows without action links) ([PR #1259](alphagov/govuk-frontend#1259)) - Ensure fieldset never exceeds max-width This fix ensures that both WebKit/Blink and Firefox are prevented from expanding their fieldset widths to the content's minimum size. This was preventing `max-width: 100%` from being applied to select menus inside a fieldset. See discussion in ["Reset your fieldset"](https://thatemil.com/blog/2015/01/03/reset-your-fieldset/) and raised by [issue #1264](alphagov/govuk-frontend#1264) ([PR #1269](alphagov/govuk-frontend#1269)) - Add various fixes to the summary list component: 1. Fixes the 1px row height change when borders are removed Padding is now adjusted by 1px instead 2. Fixes the text alignment when the actions column isn't added So the key column always stays at 30% width ([PR #1259](alphagov/govuk-frontend#1259)) https://github.com/alphagov/govuk-frontend/releases/tag/v2.11.0

https://design-system.service.gov.uk/components/button/#warning-buttons alphagov/govuk-frontend#1207

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 February 20, 2019 09:08 Inactive

dashouse added the awaiting triage Needs triaging by team label Feb 20, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 February 20, 2019 10:15 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 February 20, 2019 10:46 Inactive

dashouse mentioned this pull request Feb 20, 2019

Alternative button styles alphagov/govuk-design-system-backlog#154

Open

timpaul added 🕔 hours A well understood issue which we expect to take less than a day to resolve. Priority: Low and removed awaiting triage Needs triaging by team labels Feb 20, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 February 26, 2019 13:12 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 February 26, 2019 13:43 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 March 4, 2019 15:27 Inactive

kellylee-gds added the Blocked label Mar 6, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 March 12, 2019 13:15 Inactive

kellylee-gds removed the Blocked label Mar 18, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 April 3, 2019 14:44 Inactive

kellylee-gds requested a review from aliuk2012 April 5, 2019 09:06

dashouse force-pushed the secondary-action-buttons branch from dbdae8d to 1a61f96 Compare April 17, 2019 10:34

dashouse changed the title ~~Contribution - 'Secondary' and 'Destructive' action buttons~~ Contribution - 'Secondary' and 'Warning' action buttons Apr 17, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 April 17, 2019 10:35 Inactive

dashouse added ⚠️ high priority Used by the team when triaging and removed Priority: low labels Apr 17, 2019

36degrees reviewed Apr 17, 2019

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 April 17, 2019 14:27 Inactive

aliuk2012 reviewed Apr 18, 2019

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 April 18, 2019 13:22 Inactive

36degrees force-pushed the secondary-action-buttons branch from aed472c to b09c925 Compare April 18, 2019 13:37

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 April 18, 2019 13:37 Inactive

36degrees force-pushed the secondary-action-buttons branch from b09c925 to 4eb4940 Compare April 18, 2019 13:39

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1207 April 18, 2019 13:39 Inactive

Dave House and others added 3 commits April 18, 2019 14:55

Add tint and shade mixins

a7b74f1

Add modifiers for secondary and warning buttons

94b76fd

Include ‘compatibility mode’ fix

afb9b18

36degrees force-pushed the secondary-action-buttons branch from 4eb4940 to afb9b18 Compare April 18, 2019 13:57

govuk-design-system-ci deployed to govuk-frontend-review-pr-1207 April 18, 2019 13:57 View deployment

36degrees marked this pull request as ready for review April 18, 2019 14:02

36degrees changed the title ~~Contribution - 'Secondary' and 'Warning' action buttons~~ Add 'secondary' and 'warning' action buttons Apr 18, 2019

aliuk2012 approved these changes Apr 23, 2019

View reviewed changes

aliuk2012 added this to the Next milestone Apr 23, 2019

36degrees merged commit 799299f into master Apr 24, 2019

36degrees deleted the secondary-action-buttons branch April 24, 2019 09:52

36degrees mentioned this pull request Apr 24, 2019

Document button changes in CHANGELOG #1283

Merged

aliuk2012 mentioned this pull request Apr 25, 2019

Release v2.11.0 #1296

Merged

aliuk2012 mentioned this pull request Apr 25, 2019

Bump govuk-frontend from v2.10.0 to v2.11.0 alphagov/govuk-prototype-kit#741

Merged

amyhupe mentioned this pull request Apr 25, 2019

Add guidance for secondary and warning buttons alphagov/govuk-design-system#865

Merged

jonheslop added a commit to alphagov/pay-selfservice that referenced this pull request Apr 29, 2019

BAU - This has been superceeded by new GOV.UK Frontend classes

a349396

https://design-system.service.gov.uk/components/button/#warning-buttons alphagov/govuk-frontend#1207

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add 'secondary' and 'warning' action buttons #1207

Add 'secondary' and 'warning' action buttons #1207

dashouse commented Feb 20, 2019 •

edited

Loading

joelanman commented Feb 20, 2019

edwardhorsford commented Feb 21, 2019

soniaturcotte commented Feb 26, 2019

soniaturcotte commented Mar 8, 2019

dashouse commented Mar 11, 2019

fofr commented Mar 11, 2019 •

edited

Loading

soniaturcotte commented Mar 12, 2019

36degrees left a comment

aliuk2012 Apr 18, 2019

36degrees Apr 18, 2019

36degrees commented Apr 18, 2019

aliuk2012 left a comment

36degrees commented Apr 24, 2019

aliuk2012 commented Apr 24, 2019

Add 'secondary' and 'warning' action buttons #1207

Add 'secondary' and 'warning' action buttons #1207

Conversation

dashouse commented Feb 20, 2019 • edited Loading

joelanman commented Feb 20, 2019

edwardhorsford commented Feb 21, 2019

soniaturcotte commented Feb 26, 2019

soniaturcotte commented Mar 8, 2019

dashouse commented Mar 11, 2019

fofr commented Mar 11, 2019 • edited Loading

soniaturcotte commented Mar 12, 2019

36degrees left a comment

Choose a reason for hiding this comment

aliuk2012 Apr 18, 2019

Choose a reason for hiding this comment

36degrees Apr 18, 2019

Choose a reason for hiding this comment

36degrees commented Apr 18, 2019

aliuk2012 left a comment

Choose a reason for hiding this comment

36degrees commented Apr 24, 2019

aliuk2012 commented Apr 24, 2019

dashouse commented Feb 20, 2019 •

edited

Loading

fofr commented Mar 11, 2019 •

edited

Loading