Merge pull request #1308 from nhsuk/deprecate-mixins-functions

Deprecate remaining utility mixins/functions

Author: colinrotherham

CHANGELOG.md

@@ -2,6 +2,63 @@
 
 ## Unreleased
 
+:wastebasket: **Deprecated features**
+
+#### Add nhsuk namespace to Sass mixins and functions
+
+We've completed changes to prefix all Sass mixins and functions with the `nhsuk` namespace. You can still use the previous names but we'll remove them in a future breaking release.
+
+**Sass mixins**
+
+The following mixins have been renamed:
+
+- `care-card` renamed to `nhsuk-care-card`
+- `clearfix` renamed to `nhsuk-clearfix`
+- `flex` renamed to `nhsuk-flex`
+- `flex-item` renamed to `nhsuk-flex-item`
+- `heading-label` renamed to `nhsuk-heading-label`
+- `panel` renamed to `nhsuk-panel`
+- `panel-with-label` renamed to `nhsuk-panel-with-label`
+- `print-color` renamed to `nhsuk-print-color`
+- `print-hide` renamed to `nhsuk-print-hide`
+- `reading-width` renamed to `nhsuk-reading-width`
+- `remove-margin-mobile` renamed to `nhsuk-remove-margin-mobile`
+- `top-and-bottom` renamed to `nhsuk-top-and-bottom`
+- `visually-hidden` renamed to `nhsuk-visually-hidden`
+- `visually-hidden-focusable` renamed to `nhsuk-visually-hidden-focusable`
+
+Except for `visually-shown` which will be removed entirely. You must selectively apply `nhsuk-visually-hidden` using media queries instead.
+
+Before:
+
+```scss
+// Hide by default
+@include visually-hidden;
+
+// Show from desktop
+@include nhsuk-media-query($from: desktop) {
+  @include visually-shown;
+}
+```
+
+After:
+
+```scss
+// Hide until desktop only
+@include nhsuk-media-query($until: desktop) {
+  @include nhsuk-visually-hidden;
+}
+```
+
+See https://github.com/nhsuk/nhsuk-frontend/issues/1168 for more details.
+
+**Sass functions**
+
+The following functions have been renamed:
+
+- `tint` renamed to `nhsuk-tint`
+- `shade` renamed to `nhsuk-shade`
+
 :wrench: **Fixes**
 
 We've made fixes to NHS.UK frontend in the following pull requests:

docs/contributing/linting.md

@@ -161,7 +161,7 @@ Bad:
 Good:
 
 ```scss
-@include clearfix;
+@include nhsuk-clearfix;
 ```
 
 ### Allow max 3-rule property shorthand if possible

packages/components/action-link/_index.scss

@@ -65,7 +65,7 @@
     top: -3px;
     width: 36px;
 
-    @include print-color($nhsuk-print-text-color);
+    @include nhsuk-print-color($nhsuk-print-text-color);
 
     @include nhsuk-media-query($until: tablet) {
       height: 24px;

packages/components/breadcrumb/_index.scss

@@ -16,7 +16,7 @@
 
 .nhsuk-breadcrumb {
   margin-top: nhsuk-spacing(3);
-  @include print-hide; // [1]
+  @include nhsuk-print-hide; // [1]
 
   @include nhsuk-media-query($from: tablet) {
     margin-top: nhsuk-spacing(4);

packages/components/card/_index.scss

@@ -48,11 +48,11 @@ $card-border-hover-color: $color_nhsuk-grey-3;
   display: block;
   width: 100%;
 
-  @include print-hide;
+  @include nhsuk-print-hide;
 }
 
 .nhsuk-card__content {
-  @include top-and-bottom;
+  @include nhsuk-top-and-bottom;
   @include nhsuk-responsive-padding(5);
 }
 
@@ -96,7 +96,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
   margin-bottom: nhsuk-spacing(3);
   padding: 0;
 
-  @include flex;
+  @include nhsuk-flex;
 
   @include nhsuk-media-query($until: desktop) {
     margin-bottom: nhsuk-spacing(6);
@@ -114,7 +114,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
   list-style-type: none;
   margin-bottom: 0;
 
-  @include flex-item;
+  @include nhsuk-flex-item;
 
   .nhsuk-card {
     margin-bottom: nhsuk-spacing(5);
@@ -164,7 +164,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
 /// Care card
 
 .nhsuk-card--care {
-  @include care-card($color_nhsuk-blue, $color_nhsuk-white, 4px); // [8]
+  @include nhsuk-care-card($color_nhsuk-blue, $color_nhsuk-white, 4px); // [8]
   @include nhsuk-responsive-margin(7, "top");
 }
 
@@ -182,7 +182,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
   padding-top: 0; // [13]
 
   @include nhsuk-font(26, $weight: bold);
-  @include print-color($nhsuk-print-text-color);
+  @include nhsuk-print-color($nhsuk-print-text-color);
 }
 
 .nhsuk-card--care__arrow {
@@ -194,7 +194,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
   position: absolute;
   transform: rotate(45deg);
   width: 20px; // [9]
-  @include print-hide;
+  @include nhsuk-print-hide;
 
   @include nhsuk-media-query($from: tablet) {
     left: 38px; // [10]
@@ -214,7 +214,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
 }
 
 .nhsuk-card--care--urgent {
-  @include care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
+  @include nhsuk-care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
 
   .nhsuk-card--care__arrow {
     &::before,
@@ -225,7 +225,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
 }
 
 .nhsuk-card--care--emergency {
-  @include care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
+  @include nhsuk-care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
 
   .nhsuk-card--care__arrow {
     &::before,

packages/components/date-input/_index.scss

@@ -11,7 +11,7 @@
 .nhsuk-date-input {
   font-size: 0; // [1]
 
-  @include clearfix;
+  @include nhsuk-clearfix;
 }
 
 .nhsuk-date-input__item {

packages/components/details/_index.scss

@@ -79,7 +79,7 @@
   margin-top: nhsuk-spacing(2);
   padding: nhsuk-spacing(3);
   padding-left: 20px; // [6]
-  @include top-and-bottom;
+  @include nhsuk-top-and-bottom;
 }
 
 /// Expander variation.

packages/components/do-dont-list/_index.scss

@@ -14,10 +14,10 @@
 ////
 
 .nhsuk-do-dont-list {
-  @include panel-with-label($color_nhsuk-white, $nhsuk-text-color, $color_nhsuk-grey-4); // [1]
+  @include nhsuk-panel-with-label($color_nhsuk-white, $nhsuk-text-color, $color_nhsuk-grey-4); // [1]
 }
 
 .nhsuk-do-dont-list__label {
-  @include heading-label($color_nhsuk-blue, $color_nhsuk-white); // [2]
-  @include print-color($nhsuk-print-text-color);
+  @include nhsuk-heading-label($color_nhsuk-blue, $color_nhsuk-white); // [2]
+  @include nhsuk-print-color($nhsuk-print-text-color);
 }

packages/components/fieldset/_index.scss

@@ -19,7 +19,7 @@
   margin: 0;
   padding: 0;
 
-  @include clearfix;
+  @include nhsuk-clearfix;
 }
 
 .nhsuk-fieldset__legend {

packages/components/footer/_index.scss

@@ -12,8 +12,8 @@
   background-color: $color_nhsuk-grey-4;
   border-top: nhsuk-spacing(1) solid $color_nhsuk-blue;
 
-  @include clearfix;
-  @include print-hide;
+  @include nhsuk-clearfix;
+  @include nhsuk-print-hide;
   @include nhsuk-responsive-padding(5, bottom);
   @include nhsuk-responsive-padding(5, top);
 }