Release v2.11.0 #1296

aliuk2012 · 2019-04-25T10:29:26Z

Changelog

🆕 New features:

Add new secondary and warning button variants

(PR #1207)
Add new govuk-shade and govuk-tint functions for creating shades and tints of
colours.

(PR #1207)
Add support for custom row classes on the summary list component (including support for some rows without action links)

(PR #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" and raised by issue #1264

(PR #1269)

🔧 Fixes:

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)

36degrees · 2019-04-25T12:35:09Z

Changes to dist/govuk-frontend-[*].min.css

diff --git a/dist/govuk-frontend-2.10.0.min.css b/dist/govuk-frontend-2.11.0.min.css
similarity index 28%
rename from dist/govuk-frontend-2.10.0.min.css
rename to dist/govuk-frontend-2.11.0.min.css
index b405e1f0..c56adc7d 100644
--- a/dist/govuk-frontend-2.10.0.min.css
+++ b/dist/govuk-frontend-2.11.0.min.css
@@ -1475,7 +1475,7 @@
     border-radius: 0;
     color: #fff;
     background-color: #00823b;
-    box-shadow: 0 2px 0 #003618;
+    box-shadow: 0 2px 0 #003418;
     text-align: center;
     vertical-align: top;
     cursor: pointer;
@@ -1530,7 +1530,7 @@
 
 .govuk-button:focus,
 .govuk-button:hover {
-    background-color: #00692f
+    background-color: #00682f
 }
 
 .govuk-button:active {
@@ -1577,7 +1577,43 @@
 .govuk-button[disabled=disabled]:active,
 .govuk-button[disabled]:active {
     top: 0;
-    box-shadow: 0 2px 0 #003618
+    box-shadow: 0 2px 0 #003418
+}
+
+.govuk-button--secondary {
+    background-color: #dee0e2;
+    box-shadow: 0 2px 0 #858688
+}
+
+.govuk-button--secondary,
+.govuk-button--secondary:active,
+.govuk-button--secondary:hover,
+.govuk-button--secondary:link,
+.govuk-button--secondary:visited {
+    color: #0b0c0c
+}
+
+.govuk-button--secondary:focus,
+.govuk-button--secondary:hover {
+    background-color: #c8cacb
+}
+
+.govuk-button--warning {
+    background-color: #b10e1e;
+    box-shadow: 0 2px 0 #47060c
+}
+
+.govuk-button--warning,
+.govuk-button--warning:active,
+.govuk-button--warning:hover,
+.govuk-button--warning:link,
+.govuk-button--warning:visited {
+    color: #fff
+}
+
+.govuk-button--warning:focus,
+.govuk-button--warning:hover {
+    background-color: #8e0b18
 }
 
 .govuk-button--start {
@@ -1608,7 +1644,6 @@
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio:2),
-only screen and (min--moz-device-pixel-ratio:2),
 only screen and (min-device-pixel-ratio:2),
 only screen and (min-resolution:2dppx),
 only screen and (min-resolution:192dpi) {
@@ -1660,6 +1695,7 @@ only screen and (min-resolution:192dpi) {
 }
 
 .govuk-fieldset {
+    min-width: 0;
     margin: 0;
     padding: 0;
     border: 0
@@ -1671,6 +1707,14 @@ only screen and (min-resolution:192dpi) {
     clear: both
 }
 
+@supports not (caret-color:auto) {
+
+    .govuk-fieldset,
+    x:-moz-any-link {
+        display: table-cell
+    }
+}
+
 .govuk-fieldset__legend {
     font-family: nta, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -2411,6 +2455,12 @@ only screen and (min-resolution:192dpi) {
     }
 }
 
+@media (min-width:40.0625em) {
+    .govuk-summary-list__value:last-child {
+        width: 70%
+    }
+}
+
 .govuk-summary-list__value>p {
     margin-bottom: 10px
 }
@@ -2441,11 +2491,36 @@ only screen and (min-resolution:192dpi) {
     border: 0
 }
 
-.govuk-summary-list--no-border .govuk-summary-list__actions,
-.govuk-summary-list--no-border .govuk-summary-list__key,
-.govuk-summary-list--no-border .govuk-summary-list__row,
-.govuk-summary-list--no-border .govuk-summary-list__value {
-    border: 0
+@media (max-width:40.0525em) {
+    .govuk-summary-list--no-border .govuk-summary-list__row {
+        border: 0
+    }
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-summary-list--no-border .govuk-summary-list__actions,
+    .govuk-summary-list--no-border .govuk-summary-list__key,
+    .govuk-summary-list--no-border .govuk-summary-list__value {
+        padding-bottom: 11px;
+        border: 0
+    }
+}
+
+@media (max-width:40.0525em) {
+    .govuk-summary-list__row--no-border {
+        border: 0
+    }
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-summary-list__row--no-border .govuk-summary-list__actions,
+    .govuk-summary-list__row--no-border .govuk-summary-list__key,
+    .govuk-summary-list__row--no-border .govuk-summary-list__value {
+        padding-bottom: 11px;
+        border: 0
+    }
 }
 
 .govuk-input {
@@ -2999,7 +3074,6 @@ only screen and (min-resolution:192dpi) {
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio:2),
-only screen and (min--moz-device-pixel-ratio:2),
 only screen and (min-device-pixel-ratio:2),
 only screen and (min-resolution:2dppx),
 only screen and (min-resolution:192dpi) {
@@ -3091,17 +3165,20 @@ only screen and (min-resolution:192dpi) {
     padding: 0;
     list-style: none;
     -webkit-column-gap: 30px;
+    -moz-column-gap: 30px;
     column-gap: 30px
 }
 
 @media (min-width:48.0625em) {
     .govuk-footer__list--columns-2 {
         -webkit-column-count: 2;
+        -moz-column-count: 2;
         column-count: 2
     }
 
     .govuk-footer__list--columns-3 {
         -webkit-column-count: 3;
+        -moz-column-count: 3;
         column-count: 3
     }
 }

Changes to dist/govuk-frontend-ie8-[*].min.css

diff --git a/dist/govuk-frontend-ie8-2.10.0.min.css b/dist/govuk-frontend-ie8-2.11.0.min.css
similarity index 29%
rename from dist/govuk-frontend-ie8-2.10.0.min.css
rename to dist/govuk-frontend-ie8-2.11.0.min.css
index abb63c90..3acc3c9f 100644
--- a/dist/govuk-frontend-ie8-2.10.0.min.css
+++ b/dist/govuk-frontend-ie8-2.11.0.min.css
@@ -857,13 +857,13 @@
     border-radius: 0;
     color: #fff;
     background-color: #00823b;
-    box-shadow: 0 2px 0 #003618;
+    box-shadow: 0 2px 0 #003418;
     text-align: center;
     vertical-align: top;
     cursor: pointer;
     -webkit-appearance: none;
     border: 2px solid transparent;
-    border-bottom-color: #003618;
+    border-bottom-color: #003418;
     width: auto
 }
 
@@ -887,7 +887,7 @@
 
 .govuk-button:focus,
 .govuk-button:hover {
-    background-color: #00692f
+    background-color: #00682f
 }
 
 .govuk-button:active {
@@ -936,8 +936,44 @@
 .govuk-button[disabled=disabled]:active,
 .govuk-button[disabled]:active {
     top: 0;
-    box-shadow: 0 2px 0 #003618;
-    border-bottom: 2px solid #003618
+    box-shadow: 0 2px 0 #003418;
+    border-bottom: 2px solid #003418
+}
+
+.govuk-button--secondary {
+    background-color: #dee0e2;
+    box-shadow: 0 2px 0 #858688
+}
+
+.govuk-button--secondary,
+.govuk-button--secondary:active,
+.govuk-button--secondary:hover,
+.govuk-button--secondary:link,
+.govuk-button--secondary:visited {
+    color: #0b0c0c
+}
+
+.govuk-button--secondary:focus,
+.govuk-button--secondary:hover {
+    background-color: #c8cacb
+}
+
+.govuk-button--warning {
+    background-color: #b10e1e;
+    box-shadow: 0 2px 0 #47060c
+}
+
+.govuk-button--warning,
+.govuk-button--warning:active,
+.govuk-button--warning:hover,
+.govuk-button--warning:link,
+.govuk-button--warning:visited {
+    color: #fff
+}
+
+.govuk-button--warning:focus,
+.govuk-button--warning:hover {
+    background-color: #8e0b18
 }
 
 .govuk-button--start {
@@ -978,6 +1014,7 @@
 }
 
 .govuk-fieldset {
+    min-width: 0;
     margin: 0;
     padding: 0;
     border: 0
@@ -989,6 +1026,14 @@
     clear: both
 }
 
+@supports not (caret-color:auto) {
+
+    .govuk-fieldset,
+    x:-moz-any-link {
+        display: table-cell
+    }
+}
+
 .govuk-fieldset__legend {
     font-family: nta, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -1418,6 +1463,10 @@
     width: 50%
 }
 
+.govuk-summary-list__value:last-child {
+    width: 70%
+}
+
 .govuk-summary-list__value>p {
     margin-bottom: 10px
 }
@@ -1450,8 +1499,11 @@
 
 .govuk-summary-list--no-border .govuk-summary-list__actions,
 .govuk-summary-list--no-border .govuk-summary-list__key,
-.govuk-summary-list--no-border .govuk-summary-list__row,
-.govuk-summary-list--no-border .govuk-summary-list__value {
+.govuk-summary-list--no-border .govuk-summary-list__value,
+.govuk-summary-list__row--no-border .govuk-summary-list__actions,
+.govuk-summary-list__row--no-border .govuk-summary-list__key,
+.govuk-summary-list__row--no-border .govuk-summary-list__value {
+    padding-bottom: 11px;
     border: 0
 }
 
@@ -1892,16 +1944,19 @@
     padding: 0;
     list-style: none;
     -webkit-column-gap: 30px;
+    -moz-column-gap: 30px;
     column-gap: 30px
 }
 
 .govuk-footer__list--columns-2 {
     -webkit-column-count: 2;
+    -moz-column-count: 2;
     column-count: 2
 }
 
 .govuk-footer__list--columns-3 {
     -webkit-column-count: 3;
+    -moz-column-count: 3;
     column-count: 3
 }

36degrees

LGTM, thanks @aliuk2012 👍

colinrotherham · 2019-04-25T13:20:58Z

Good work 😊

@36degrees Looking at that CSS output, maybe we should look at combining all those duplicate media queries with a tool like https://www.npmjs.com/package/postcss-extract-media-query?

Before

@media (max-width:40.0525em) {
  .rule-1 {}
}

@media (max-width:40.0525em) {
  .rule-2 {}
}

@media (max-width:40.0525em) {
  .rule-3 {}
}

After

@media (max-width:40.0525em) {
  .rule-1 {}
  .rule-2 {}
  .rule-3 {}
}

36degrees · 2019-04-25T13:29:38Z

I'm not too concerned about filesize at the moment, and gzip does a pretty good job of compressing that duplication out:

@media (max-width:40.0525em) {
    .govuk-summary-list--no-border .govuk-summary-list__row {
        border: 0
    }
}

@media (min-width:40.0625em) {

    .govuk-summary-list--no-border .govuk-summary-list__actions,
    .govuk-summary-list--no-border .govuk-summary-list__key,
    .govuk-summary-list--no-border .govuk-summary-list__value {
        padding-bottom: 11px;
        border: 0
    }
}

@media (max-width:40.0525em) {
    .govuk-summary-list__row--no-border {
        border: 0
    }
}

@media (min-width:40.0625em) {

    .govuk-summary-list__row--no-border .govuk-summary-list__actions,
    .govuk-summary-list__row--no-border .govuk-summary-list__key,
    .govuk-summary-list__row--no-border .govuk-summary-list__value {
        padding-bottom: 11px;
        border: 0
    }
}

= 791 bytes, 190 bytes compressed

@media (max-width:40.0525em) {
    .govuk-summary-list--no-border .govuk-summary-list__row {
        border: 0
    }

    .govuk-summary-list__row--no-border {
        border: 0
    }
}

@media (min-width:40.0625em) {

    .govuk-summary-list--no-border .govuk-summary-list__actions,
    .govuk-summary-list--no-border .govuk-summary-list__key,
    .govuk-summary-list--no-border .govuk-summary-list__value {
        padding-bottom: 11px;
        border: 0
    }

    .govuk-summary-list__row--no-border .govuk-summary-list__actions,
    .govuk-summary-list__row--no-border .govuk-summary-list__key,
    .govuk-summary-list__row--no-border .govuk-summary-list__value {
        padding-bottom: 11px;
        border: 0
    }
}

= 724 bytes, 186 bytes compressed

So we're talking about a 67 byte saving, but when taking gzip into account it's only 4 bytes…

(tested using pbpaste | wc -c vs pbpaste | gzip | wc -c)

colinrotherham · 2019-04-25T14:01:05Z

You know I like a challenge!

That's 10KB (but yeah only 112 bytes gzipped) across the whole CSS file.

36degrees · 2019-04-26T07:30:56Z

Feel free to open another issue to track this, so this doesn't get lost.

One thing to bear in mind is we only have control over a couple of transformations:

those involved in building the CSS for the dist version (where this is relevant, but we think most people will opt to use the package)
those involved in building the Sass for the package version – at the minute these are fairly lightweight, we basically just run autoprefixer. Whatever transformations run here, the output still needs to be Sass (so that e.g. someone using package can still adjust the breakpoints)

For that reason, I think the sort of transformations you're suggesting are better run in the build pipeline of the service using GOV.UK Frontend, so they also get the benefits applied to their own code.

We could definitely provide better guidance on what that build pipeline should look like though.

Thoughts?

colinrotherham · 2019-04-26T07:33:02Z

Yeah that sounds fab. I'd start in this repo, as people will copy the way it's done here ☺️

Release v2.11.0

64feb20

govuk-design-system-ci deployed to govuk-frontend-review-pr-1296 April 25, 2019 10:29 View deployment

aliuk2012 added this to the Next milestone Apr 25, 2019

36degrees approved these changes Apr 25, 2019

View reviewed changes

aliuk2012 merged commit 8370f97 into master Apr 25, 2019

aliuk2012 deleted the release-2.11.0 branch April 25, 2019 12:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release v2.11.0 #1296

Release v2.11.0 #1296

aliuk2012 commented Apr 25, 2019

36degrees commented Apr 25, 2019

36degrees left a comment

colinrotherham commented Apr 25, 2019

36degrees commented Apr 25, 2019

colinrotherham commented Apr 25, 2019 •

edited

Loading

36degrees commented Apr 26, 2019

colinrotherham commented Apr 26, 2019

Release v2.11.0 #1296

Release v2.11.0 #1296

Conversation

aliuk2012 commented Apr 25, 2019

Changelog

🆕 New features:

🔧 Fixes:

36degrees commented Apr 25, 2019

36degrees left a comment

Choose a reason for hiding this comment

colinrotherham commented Apr 25, 2019

Before

After

36degrees commented Apr 25, 2019

colinrotherham commented Apr 25, 2019 • edited Loading

36degrees commented Apr 26, 2019

colinrotherham commented Apr 26, 2019

colinrotherham commented Apr 25, 2019 •

edited

Loading