diff --git a/addon/components/au-button.gts b/addon/components/au-button.gts index b59f03c82..88648dcab 100644 --- a/addon/components/au-button.gts +++ b/addon/components/au-button.gts @@ -1,4 +1,5 @@ import Component from '@glimmer/component'; +import { deprecate } from '@ember/debug'; import AuIcon, { type AuIconSignature } from './au-icon'; import { LoadingAnimation } from '../private/components/loading-animation'; @@ -71,8 +72,31 @@ export default class AuButton extends Component { } get loadingMessage() { - if (this.args.loadingMessage) return this.args.loadingMessage; - else return 'Aan het laden'; + if (this.args.loadingMessage) { + return this.args.loadingMessage; + } + + deprecate( + `[AuButton] Not providing \`@loadingMessage\` when setting \`@loading\` to \`true\` is deprecated. Add the \`@loadingMessage\` argument explicitly. + +Use \`@loadingMessage="Aan het laden"\` to the component to get the same behavior as before. + +More info in the migration guide: https://github.com/appuniversum/ember-appuniversum/pull/497 + +`, + false, + { + id: '@appuniversum/ember-appuniversum.au-button-loading-message', + until: '4.0.0', + for: '@appuniversum/ember-appuniversum', + since: { + available: '3.5.0', + enabled: '3.5.0', + }, + }, + ); + + return 'Aan het laden'; } get isIconLeft() { diff --git a/tests/integration/components/au-button-test.gts b/tests/integration/components/au-button-test.gts index 29a8d5a57..b7747dea8 100644 --- a/tests/integration/components/au-button-test.gts +++ b/tests/integration/components/au-button-test.gts @@ -3,10 +3,12 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, settled } from '@ember/test-helpers'; import AuButton from '@appuniversum/ember-appuniversum/components/au-button'; import { tracked } from '@glimmer/tracking'; +import { hasDeprecationStartingWith } from 'dummy/tests/helpers/deprecations'; class TestState { @tracked isDisabled?: boolean; @tracked isLoading?: boolean; + @tracked loadingMessage?: string; } module('Integration | Component | au-button', function (hooks) { @@ -65,4 +67,47 @@ module('Integration | Component | au-button', function (hooks) { await settled(); assert.dom('[data-test-button]').isDisabled(); }); + + test('the default loading message is deprecated', async function (assert) { + const state = new TestState(); + state.isLoading = false; + + await render( + , + ); + + assert.false( + showsDeprecationMessage(), + "it does't show the deprecation if @loading isn't true", + ); + + state.isLoading = true; + state.loadingMessage = 'Loading'; + await settled(); + assert.false( + showsDeprecationMessage(), + "it does't show the deprecation if @loadingMessage is set", + ); + + state.loadingMessage = undefined; + await settled(); + assert.true( + showsDeprecationMessage(), + "it shows the deprecation message if @loadingMessage isn't set", + ); + }); }); + +function showsDeprecationMessage() { + return hasDeprecationStartingWith( + '[AuButton] Not providing `@loadingMessage` when setting `@loading` to `true` is deprecated.', + ); +}