diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fcf6b5122..62a2fdb1eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,19 @@ Note: We're not following semantic versioning yet, we are going to talk about th ## Unreleased +Breaking change: + +- Remove -c -o -h layer prefixes + ([PR #644](https://github.com/alphagov/govuk-frontend/pull/644)) + In user research and in feedback from Private Beta partners we + learned that users didn't really understand what -o, -c and -h prefixes + stand for or why they're useful. + + They also introduced additional cognitive load when composing classes, + having to remember which suffix the classname contains. + + As a result of this, we're removing these prefixes from our codebase. + Fixes: - Remove redundant font-family declaration from the button component – this will @@ -11,11 +24,12 @@ Fixes: falling back to the print stack as expected. (PR [#650](https://github.com/alphagov/govuk-frontend/pull/650)) +Internal: -Internal - Update publishing docs (PR [#651](https://github.com/alphagov/govuk-frontend/pull/651)) - Wrap `app.css` in conditional comments in review app layout (PR [#653](https://github.com/alphagov/govuk-frontend/pull/653)) + ## 0.0.27-alpha (Breaking release) Breaking changes: diff --git a/README.md b/README.md index ef3e72ff27..c365f0752f 100644 --- a/README.md +++ b/README.md @@ -148,7 +148,7 @@ Add the CSS and JavaScript code to your HTML template: - + diff --git a/app/assets/scss/partials/_app.scss b/app/assets/scss/partials/_app.scss index f2d865f766..9ae74a34cf 100644 --- a/app/assets/scss/partials/_app.scss +++ b/app/assets/scss/partials/_app.scss @@ -17,14 +17,14 @@ body { display: inline; } -.app-c-component-preview { +.app-component-preview { position: relative; margin-top: -15px; margin-bottom: 15px; width: 100%; } -.app-c-component-preview__iframe { +.app-component-preview__iframe { z-index: 20; display: block; position: relative; @@ -35,8 +35,8 @@ body { // Highlight the whitespace around a component, so you can see without having to // inspect it. .app-iframe-in-component-preview { - .app-c-whitespace-highlight { - @include govuk-h-clearfix; + .app-whitespace-highlight { + @include govuk-clearfix; content: " "; display: table; diff --git a/app/views/examples/all-components/index.njk b/app/views/examples/all-components/index.njk index a0409d38eb..c1d0b8156d 100644 --- a/app/views/examples/all-components/index.njk +++ b/app/views/examples/all-components/index.njk @@ -8,7 +8,7 @@ "text": "Back" }) }} -
+
{% include "back-link/back-link.njk" %} {% include "breadcrumbs/breadcrumbs.njk" %} {% include "button/button.njk" %} diff --git a/app/views/examples/error-messages/index.njk b/app/views/examples/error-messages/index.njk index dddd732575..1b322e922d 100644 --- a/app/views/examples/error-messages/index.njk +++ b/app/views/examples/error-messages/index.njk @@ -37,7 +37,7 @@ "text": "Back" }) }} -
+
{% from "fieldset/macro.njk" import govukFieldset %} {% from "label/macro.njk" import govukLabel %} @@ -197,7 +197,7 @@ items:[ { name: 'day', - classes: 'govuk-c-input--error' + classes: 'govuk-input--error' }, { name: 'month' diff --git a/app/views/examples/error-summary-with-messages/index.njk b/app/views/examples/error-summary-with-messages/index.njk index 0b7b624e4f..b76e0527fa 100644 --- a/app/views/examples/error-summary-with-messages/index.njk +++ b/app/views/examples/error-summary-with-messages/index.njk @@ -13,7 +13,7 @@ "text": "Back" }) }} -
+
diff --git a/app/views/examples/error-summary-with-one-thing-per-page/index.njk b/app/views/examples/error-summary-with-one-thing-per-page/index.njk index 50c58ad71b..38369f3a96 100644 --- a/app/views/examples/error-summary-with-one-thing-per-page/index.njk +++ b/app/views/examples/error-summary-with-one-thing-per-page/index.njk @@ -12,7 +12,7 @@ "text": "Back" }) }} -
+
diff --git a/app/views/examples/form-alignment/index.njk b/app/views/examples/form-alignment/index.njk index f8012fbe43..d3af34f741 100644 --- a/app/views/examples/form-alignment/index.njk +++ b/app/views/examples/form-alignment/index.njk @@ -38,7 +38,7 @@ "text": "Back" }) }} -
+
{% from "fieldset/macro.njk" import govukFieldset %} {% from "label/macro.njk" import govukLabel %} @@ -55,11 +55,11 @@ {% call govukFieldset() %} {{ govukLabel({ "text": "National Insurance number", - "for": "govuk-c-input-a" + "for": "govuk-input-a" }) }}
{{ govukInput({ - id: "govuk-c-input-a", + id: "govuk-input-a", name: "national-insurance-number" }) }}
diff --git a/app/views/examples/form-elements/index.njk b/app/views/examples/form-elements/index.njk index 3932847a72..412c32b6e5 100644 --- a/app/views/examples/form-elements/index.njk +++ b/app/views/examples/form-elements/index.njk @@ -9,7 +9,7 @@ "text": "Back" }) }} -
+
{% from "fieldset/macro.njk" import govukFieldset %} {% from "input/macro.njk" import govukInput %} @@ -37,7 +37,7 @@ {% call govukFieldset() %} {{ govukInput({ - id: "govuk-c-input-a", + id: "govuk-input-a", label: { text: "National Insurance number" } @@ -51,8 +51,8 @@ {% from "textarea/macro.njk" import govukTextarea %} {{ govukTextarea({ - id: "govuk-c-textarea-a", - name: "govuk-c-textarea-a", + id: "govuk-textarea-a", + name: "govuk-textarea-a", rows: "5", label: { text: "Why can't you provide a National Insurance number?" @@ -86,7 +86,7 @@ {{ govukRadios({ "fieldset": {}, - "classes": "govuk-c-radio--inline", + "classes": "govuk-radio--inline", "idPrefix": "radio-inline", "name": "radio-inline", "items": [ diff --git a/app/views/examples/grid/index.njk b/app/views/examples/grid/index.njk index 2e6c7f6d7c..fc24118291 100644 --- a/app/views/examples/grid/index.njk +++ b/app/views/examples/grid/index.njk @@ -9,70 +9,70 @@ "text": "Back" }) }} -
+

Example: Grid layout

-
-
+
+

Two thirds

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One third

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One third

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One third

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One third

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One half

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One half

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One quarter

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One quarter

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One quarter

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.

-
+

One quarter

This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data. diff --git a/app/views/examples/links/index.njk b/app/views/examples/links/index.njk index 566f36fa52..46940c6ae4 100644 --- a/app/views/examples/links/index.njk +++ b/app/views/examples/links/index.njk @@ -27,10 +27,10 @@ 'Focussed active link': ':focus :active' } %} -

+
-
-
+
+

Links diff --git a/app/views/examples/prose-scope/index.njk b/app/views/examples/prose-scope/index.njk index b124d5572a..a6aa129b65 100644 --- a/app/views/examples/prose-scope/index.njk +++ b/app/views/examples/prose-scope/index.njk @@ -9,10 +9,10 @@ "text": "Back" }) }} -
+
-
-
+
+

Prose scope

diff --git a/app/views/examples/typography/index.njk b/app/views/examples/typography/index.njk index 250609c52d..390aee8e54 100644 --- a/app/views/examples/typography/index.njk +++ b/app/views/examples/typography/index.njk @@ -11,10 +11,10 @@ {% from 'table/macro.njk' import govukTable %} -
+
-
-
+
+

Typography diff --git a/app/views/layouts/component-preview.njk b/app/views/layouts/component-preview.njk index 162bfec9ac..689369f345 100644 --- a/app/views/layouts/component-preview.njk +++ b/app/views/layouts/component-preview.njk @@ -5,7 +5,7 @@ {% endblock %} {% block content %} -
+
{{ componentView | safe }}
diff --git a/app/views/layouts/component.njk b/app/views/layouts/component.njk index f66e20501b..41c3aa8f9b 100644 --- a/app/views/layouts/component.njk +++ b/app/views/layouts/component.njk @@ -11,7 +11,7 @@ {% endset %} {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} -
+
{{ govukBreadcrumbs({ "items": [ { text: 'GOV.UK Frontend', href: '/' }, @@ -20,8 +20,8 @@ }) }}
-
-
+
+

{% block componentName %} {{ componentNameHuman }} diff --git a/app/views/layouts/http-error.njk b/app/views/layouts/http-error.njk index c0181d52b3..3de2e299d0 100644 --- a/app/views/layouts/http-error.njk +++ b/app/views/layouts/http-error.njk @@ -1,7 +1,7 @@ {% extends "layout-debug.njk" %} {% block content %} -
+

{{ error }}

{{ message }}

diff --git a/app/views/layouts/index.njk b/app/views/layouts/index.njk index a28f58cc72..3fa6c28c1d 100644 --- a/app/views/layouts/index.njk +++ b/app/views/layouts/index.njk @@ -1,14 +1,14 @@ {% extends "layout-debug.njk" %} {% block content %} -
+

GOV.UK Frontend

-
+
-
+

Components

    @@ -18,7 +18,7 @@
-
+

Examples

    diff --git a/app/views/layouts/layout-debug.njk b/app/views/layouts/layout-debug.njk index 94e8cb9a03..8955c960b4 100644 --- a/app/views/layouts/layout-debug.njk +++ b/app/views/layouts/layout-debug.njk @@ -9,9 +9,9 @@ language-markup