Deprecate .nhsuk-table-responsive

Author: anandamaryon1

CHANGELOG.md

@@ -206,9 +206,9 @@ You can now reduce the vertical padding of table cells by setting `compact: true
 }) }}
 ```
 
-If you are not using Nunjucks macros, add the `nhsuk-table--compact` class to your table, or `nhsuk-table-responsive--compact` to a responsive table.
+If you are not using Nunjucks macros, add the `nhsuk-table--compact` class to your table, or `nhsuk-table-responsive--compact` to a responsive table. Note the class `nhsuk-table-responsive--compact` is deprecated, see below for details.
 
-### :wastebasket: **Deprecated features**
+This change was introduced in [pull request #1998: Add compact option for tables](https://github.com/nhsuk/nhsuk-frontend/pull/1998).
 
 #### Rename checkboxes "none" options
 
@@ -303,6 +303,18 @@ The previous names are deprecated and will be removed in a future release.
 
 This change was introduced in [pull request #1962: Add code and monospace font utilities](https://github.com/nhsuk/nhsuk-frontend/pull/1962).
 
+#### Replace `nhsuk-table-responsive` CSS class
+
+The `nhsuk-table-responsive` class is deprecated and will be removed in a future major release. Use `nhsuk-table--responsive` instead.
+
+If you use the Nunjucks `table` macro with `responsive: true`, this is handled automatically.
+
+If you use HTML, replace `nhsuk-table-responsive` with `nhsuk-table nhsuk-table--responsive`.
+
+The `nhsuk-table-responsive--reverse` and `nhsuk-table-responsive--compact` modifier classes are also deprecated. Use `nhsuk-table--reverse` and `nhsuk-table--compact` instead.
+
+This change was introduced in [pull request #1998: Add compact option for tables](https://github.com/nhsuk/nhsuk-frontend/pull/1998).
+
 ### :wrench: **Fixes**
 
 In [pull request #1962: Add code and monospace font utilities](https://github.com/nhsuk/nhsuk-frontend/pull/1962) we've added missing Sass mixins and HTML classes. You can now style codes and sequences (such as NHS numbers) by adding the `nhsuk-u-font-code` HTML class, or by including the Sass mixin for custom components:

packages/nhsuk-frontend/src/nhsuk/components/tables/_index.scss

@@ -34,6 +34,7 @@
   }
 
   .nhsuk-table,
+  // Deprecated, to be removed in v11.0
   .nhsuk-table-responsive {
     box-sizing: border-box;
     width: 100%;
@@ -45,6 +46,7 @@
   }
 
   .nhsuk-table--reverse,
+  // Deprecated, to be removed in v11.0
   .nhsuk-table-responsive--reverse {
     color: $nhsuk-reverse-text-colour;
 
@@ -55,6 +57,7 @@
   }
 
   .nhsuk-table--compact,
+  // Deprecated, to be removed in v11.0
   .nhsuk-table-responsive--compact {
     th,
     td {
@@ -103,6 +106,7 @@
 
     .nhsuk-table,
     .nhsuk-table-container,
+    // Deprecated, to be removed in v11.0
     .nhsuk-table-responsive {
       margin: 0; // [1]
     }
@@ -125,7 +129,9 @@
   // 8. Hiding mobile specific header from desktop view
   // 9. Adding a display block value due to IE 11 not having full flex support
 
-  .nhsuk-table-responsive {
+  // Deprecated, to be removed in v11.0
+  .nhsuk-table-responsive,
+  .nhsuk-table--responsive {
     thead {
       @media #{nhsuk-until-breakpoint(desktop)} {
         @include nhsuk-visually-hidden; // [1]

packages/nhsuk-frontend/src/nhsuk/components/tables/template.njk

@@ -5,7 +5,7 @@
 {%- set variant = params.variant -%}
 
 {#- Set classes for this component #}
-{%- set classNames = "nhsuk-table" if not params.responsive else "nhsuk-table-responsive" -%}
+{%- set classNames = "nhsuk-table" if not params.responsive else "nhsuk-table nhsuk-table--responsive" -%}
 {%- set classNamesCaption = "nhsuk-table__caption" -%}
 
 {%- if variant == "reverse" and (
@@ -14,7 +14,7 @@
     not "nhsuk-table-responsive--reverse" in params.classes
   )
 ) %}
-  {% set classNames = classNames ~ (" nhsuk-table--" ~ variant if not params.responsive else " nhsuk-table-responsive--" ~ variant) %}
+  {% set classNames = classNames ~ " nhsuk-table--" ~ variant %}
 {% endif %}
 
 {%- if params.compact and (
@@ -23,7 +23,7 @@
     not "nhsuk-table-responsive--compact" in params.classes
   )
 ) %}
-  {% set classNames = classNames ~ (" nhsuk-table--compact" if not params.responsive else " nhsuk-table-responsive--compact") %}
+  {% set classNames = classNames ~ " nhsuk-table--compact" %}
 {% endif %}
 
 {%- if params.captionSize and