Deprecate govuk-grid-column generating class names

The class names generated by the mixin are not flexible enough, as the width is just appended to the class name. In spiking how we might add an extended grid we found the generated class names a little yoda-ish, for example `govuk-grid-column--at-desktop-one-quarter` (bonus points if you actually read that in Yoda’s voice).

Moving the class naming out of the mixin and doing it within the objects layer is also more consistent with the rest of frontend, and means that users who do use the grid mixins directly don’t have to fit with the constraints of our class name structure.

See: alphagov/govuk-frontend#1090

Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>

Author: colinrotherham

packages/core/objects/_grid.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 ////
 /// Grid
 ///
@@ -11,10 +13,9 @@
     margin-left: -($nhsuk-gutter-half);
   }
 
-  @include govuk-grid-column(one-quarter);
-  @include govuk-grid-column(one-third);
-  @include govuk-grid-column(one-half);
-  @include govuk-grid-column(two-thirds);
-  @include govuk-grid-column(three-quarters);
-  @include govuk-grid-column(full);
+  @each $width in map.keys($nhsuk-grid-widths) {
+    .nhsuk-grid-column-#{$width} {
+      @include nhsuk-grid-column($width, $class: false);
+    }
+  }
 }

packages/core/tools/_grid.scss

@@ -34,7 +34,7 @@
 ///
 /// Creates a grid row class with a standardised margin.
 ///
-/// @param {String} $class [govuk-grid-row] CSS class name
+/// @param {String} $class [nhsuk-grid-row] CSS class name
 ///
 /// @example scss - Default
 ///   @include govuk-grid-row;
@@ -47,8 +47,8 @@
 @mixin nhsuk-grid-row($class: "nhsuk-grid-row") {
   .#{$class} {
     @include clearfix;
-    margin-left: -($nhsuk-gutter-half);
     margin-right: -($nhsuk-gutter-half);
+    margin-left: -($nhsuk-gutter-half);
   }
 }
 
@@ -63,42 +63,67 @@
 
 /// Generate grid column styles
 ///
-/// Creates a cross browser grid column with a class of '.govuk-grid-column' by
-/// default, and a standardised gutter between the columns.
+/// Creates a grid column with standard gutter between the columns.
 ///
-/// Common widths are predefined above as keywords in the `$grid-widths` map.
+/// If a `$class` is provided (which is the default, but deprecated behaviour),
+/// the generated rules will be wrapped in a predefined selector in the format
+/// `$class-$width` (e.g. `nhsuk-grid-column-full`). This behaviour is
+/// deprecated and will be removed in v10.0
 ///
-/// By default their width changes from 100% to specified width at the 'tablet'
-/// breakpoint, but that can be configured to be any other breakpoint by using
-/// the `$at` parameter.
+/// Grid widths are defined in the `$nhsuk-grid-widths` map.
 ///
-/// @param {String} $class [govuk-grid-column] CSS class name
-/// @param {String} $width [full] one-quarter | one-third | one-half | two-third | three-quarters | full
+/// By default the column width changes from 100% to specified width at the
+/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
+///
+/// @param {String} $width [full] name of a grid width from $nhsuk-grid-widths
 /// @param {String} $float [left] left | right
-/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint in px or em
+/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+/// @param {String} $class [nhsuk-grid-column] CSS class name (deprecated)
 ///
 /// @example scss - Default
-///   @include govuk-grid-column(two-thirds)
-///
-/// @example scss - Customising the class name
-///   @include govuk-grid-column(one-half, $class: "test-column");
+///   .nhsuk-grid-column-two-thirds {
+///     @include nhsuk-grid-column(two-thirds, $class: false)
+///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
-///   @include govuk-grid-column(one-half, $at: desktop);
+///   .nhsuk-grid-column-one-half-at-desktop {
+///     @include nhsuk-grid-column(one-half, $at: desktop);
+///   }
 ///
 /// @example scss - Customising the float direction
-///   @include govuk-grid-column(one-half, $float: right);
+///   .nhsuk-grid-column-one-half-right {
+///     @include nhsuk-grid-column(two-thirds, $float: right, $class: false);
+///   }
+///
+/// @example scss - Customising the class name (deprecated)
+///   @include nhsuk-grid-column(one-half, $class: "test-column");
+///
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
 
-@mixin govuk-grid-column($width: full, $float: left, $at: desktop, $class: "nhsuk-grid-column") {
-  .#{$class}-#{$width} {
+@mixin nhsuk-grid-column($width: full, $float: left, $at: tablet, $class: "nhsuk-grid-column") {
+  @if $class {
+    .#{$class}-#{$width} {
+      @include nhsuk-grid-column($width, $float, $at, $class: false);
+    }
+  } @else {
     box-sizing: border-box;
-    padding: 0 $nhsuk-gutter-half;
     @if $at != desktop {
       width: 100%;
     }
+    padding: 0 $nhsuk-gutter-half;
     @include nhsuk-media-query($from: $at) {
       width: nhsuk-grid-width($width);
       float: $float;
     }
   }
 }
+
+/// Generate grid column styles (deprecated)
+///
+/// @alias nhsuk-grid-column
+/// @deprecated To be removed in v10.0
+
+@mixin govuk-grid-column($args...) {
+  @include nhsuk-grid-column($args...);
+}