From 065195fe7aea7338277e6bda6aecb97367b667ef Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Wed, 26 Apr 2023 17:12:43 +0100 Subject: [PATCH 1/3] Remove deprecated govuk-button--disabled class --- src/govuk/components/button/_index.scss | 3 --- src/govuk/components/button/button.yaml | 7 +------ src/govuk/components/button/template.njk | 3 --- src/govuk/components/button/template.test.js | 9 --------- 4 files changed, 1 insertion(+), 21 deletions(-) diff --git a/src/govuk/components/button/_index.scss b/src/govuk/components/button/_index.scss index cf0ea025e5..f59e04a9d1 100644 --- a/src/govuk/components/button/_index.scss +++ b/src/govuk/components/button/_index.scss @@ -166,9 +166,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 index 55c359e059..3b005519bc 100644 --- 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 index 90c185cf4b..3cc223bf7f 100644 --- 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 index eafbd34c8e..7549f77c46 100644 --- 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', () => { From 4b7355f51612466b197f4fea9427b37ce2de67bf Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Wed, 26 Apr 2023 17:35:48 +0100 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index af38452a0b..397dfd8e50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,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 `