Merge pull request #782 from alphagov/remove-circle-object

Remove the ‘circle shape’ object

CHANGELOG.md

@@ -134,6 +134,11 @@ Note: We're not following semantic versioning yet, we are going to talk about th
   - `mellow-red` → `bright-red`
   - `grass-green` → `light-green`
 
+- The 'circle shape' object (`.govuk-circle`) which was used by the warning text
+  component's '!' icon has been removed and the `govuk-warning-text__icon` class
+  has been updated to make it circular without the need for another class.
+
+  ([PR #782](https://github.com/alphagov/govuk-frontend/pull/782))
 
 🔧 Fixes:
 

src/components/warning-text/README.md

@@ -17,7 +17,7 @@ Find out when to use the Warning text component in your service in the [GOV.UK D
 #### Markup
 
     <div class="govuk-warning-text">
-      <span class="govuk-warning-text__icon govuk-circle" aria-hidden="true">!</span>
+      <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
       <strong class="govuk-warning-text__text">
         <span class="govuk-warning-text__assistive">Warning</span>
         You can be fined up to £5,000 if you don’t register.

src/components/warning-text/_warning-text.scss

@@ -2,8 +2,6 @@
 @import "../../tools/all";
 @import "../../helpers/all";
 
-@import "../../objects/shapes";
-
 @include govuk-exports("govuk/component/warning-text") {
 
   .govuk-warning-text {
@@ -33,8 +31,15 @@
     margin-top: -20px; // Half the height of the 38px circle (adjusted for NTA)
     padding-top: 3px;
 
+    border-radius: 50%;
+
+    color: govuk-colour("white");
+    background: govuk-colour("black");
+
     font-size: 1.6em;
     line-height: 35px;
+
+    text-align: center;
   }
 
   .govuk-warning-text__text {

src/components/warning-text/template.njk

@@ -1,7 +1,7 @@
 <div class="govuk-warning-text {{- ' ' + params.classes if params.classes}}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor -%}
   >
-  <span class="govuk-warning-text__icon govuk-circle" aria-hidden="true">!</span>
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
   <strong class="govuk-warning-text__text">
     <span class="govuk-warning-text__assistive">{{ params.iconFallbackText }}</span>
     {{ params.html | safe if params.html else params.text }}

src/objects/_all.scss

@@ -1,5 +1,4 @@
 @import "form-group";
 @import "grid";
 @import "main-wrapper";
-@import "shapes";
 @import "width-container";