Merge pull request #3557 from alphagov/remove-button-disabled-class

Remove deprecated `.govuk-button--disabled` class
alphagov · Apr 27, 2023 · a53c6a4 · a53c6a4
2 parents a8d4ae5 + 704a617
commit a53c6a4
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,7 +20,17 @@ If you are using `$button.getAttribute('disabled')` to check for the disabled at
 
 Instead we recommend checking for the disabled attribute using [`$button.hasAttribute('disabled')`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute) or the [`$button.disabled` IDL attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/disabled).
 
-This change was made in [pull request #2830: Set the boolean disabled attribute consistently in the button component](https://github.com/alphagov/govuk-frontend/pull/2830).
+This change was introduced in [pull request #2830: Set the boolean disabled attribute consistently in the button component](https://github.com/alphagov/govuk-frontend/pull/2830).
+
+#### Remove deprecated `.govuk-button--disabled` class
+
+We've removed the `.govuk-button--disabled` class that we deprecated in [GOV.UK Frontend v4.6.0](https://github.com/alphagov/govuk-frontend/releases/tag/v4.6.0).
+
+Use the `disabled` attribute to mark `<button>` and `<input>` elements as being disabled instead.
+
+We no longer support link buttons being disabled or using disabled styles.
+
+This change was introduced in [pull request #3557: Remove deprecated `.govuk-button--disabled` class](https://github.com/alphagov/govuk-frontend/pull/3557).
 
 ## 4.6.0 (Feature release)
 

diff --git a/src/govuk/components/button/_index.scss b/src/govuk/components/button/_index.scss
@@ -172,10 +172,6 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     }
   }
 
-  // @deprecated Disabling buttons using the .govuk-button--disabled class is
-  // deprecated and will be removed in the next major version.
-  .govuk-button--disabled,
-  .govuk-button[disabled="disabled"],
   .govuk-button[disabled] {
     opacity: (.5);
 

diff --git a/src/govuk/components/button/button.yaml b/src/govuk/components/button/button.yaml
@@ -26,7 +26,7 @@ params:
   - name: disabled
     type: boolean
     required: false
-    description: Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.
+    description: Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically. This has no effect on `a` elements.
   - name: href
     type: string
     required: false
@@ -64,11 +64,6 @@ examples:
     data:
       text: Link button
       href: '/'
-  - name: link disabled
-    data:
-      text: Disabled link button
-      href: '/'
-      disabled: true
   - name: start
     data:
       text: Start now button

diff --git a/src/govuk/components/button/template.njk b/src/govuk/components/button/template.njk
@@ -4,9 +4,6 @@
 {%- if params.classes %}
   {% set classNames = classNames + " " + params.classes %}
 {% endif %}
-{% if params.disabled %}
-  {% set classNames = classNames + " govuk-button--disabled" %}
-{% endif -%}
 
 {# Determine type of element to use, if not explicitly set #}
 {%- if params.element %}

diff --git a/src/govuk/components/button/template.test.js b/src/govuk/components/button/template.test.js
@@ -40,7 +40,6 @@ describe('Button', () => {
       const $component = $('.govuk-button')
       expect($component.attr('aria-disabled')).toEqual('true')
       expect($component.attr('disabled')).toEqual('disabled')
-      expect($component.hasClass('govuk-button--disabled')).toBeTruthy()
     })
 
     it('renders with name', () => {
@@ -134,13 +133,6 @@ describe('Button', () => {
       const $component = $('.govuk-button')
       expect($component.hasClass('app-button--custom-modifier')).toBeTruthy()
     })
-
-    it('renders with disabled', () => {
-      const $ = render('button', examples['link disabled'])
-
-      const $component = $('.govuk-button')
-      expect($component.hasClass('govuk-button--disabled')).toBeTruthy()
-    })
   })
 
   describe('with explicit input button set by "element"', () => {
@@ -173,7 +165,6 @@ describe('Button', () => {
       const $component = $('.govuk-button')
       expect($component.attr('aria-disabled')).toEqual('true')
       expect($component.attr('disabled')).toEqual('disabled')
-      expect($component.hasClass('govuk-button--disabled')).toBeTruthy()
     })
 
     it('renders with name', () => {