diff --git a/app/components/ember-versions-form.gjs b/app/components/ember-versions-form.gjs index 8a8ed3f..ac5d112 100644 --- a/app/components/ember-versions-form.gjs +++ b/app/components/ember-versions-form.gjs @@ -21,6 +21,14 @@ const GROUPED_VERSIONS = VERSIONS.reduce((acc, version) => { return acc; }, []); +const isFromVersionInvalid = (version, toVersion) => { + return compare(version, toVersion, '>='); +}; + +const isToVersionInvalid = (version, fromVersion) => { + return compare(version, fromVersion, '<='); +}; + export default class EmberVersionsFormComponent extends Component { versions = VERSIONS; groupedVersions = GROUPED_VERSIONS; @@ -78,6 +86,10 @@ export default class EmberVersionsFormComponent extends Component { @@ -102,6 +114,10 @@ export default class EmberVersionsFormComponent extends Component { @@ -119,11 +135,11 @@ export default class EmberVersionsFormComponent extends Component { class="mt-2" /> -
- {{#unless this.areVersionsValid}} -

To version should be higher than From version

- {{/unless}} -
+ {{#unless this.areVersionsValid}} + + {{/unless}} } diff --git a/app/styles/app.css b/app/styles/app.css index ff175ad..2f12aeb 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -18,5 +18,14 @@ footer.es-footer { main > section.container > form { button.es-button { background-color: #db3122; + + /* NOTE: The styleguide doesn't have a disabled button color, so we are + using a AAA-compliant gray/gray scheme */ + &:disabled { + background-color: var(--color-gray-300); + color: var(--color-gray-700); + opacity: 0.65; + cursor: not-allowed; + } } } diff --git a/app/styles/ember-versions-form.css b/app/styles/ember-versions-form.css index 19d28f2..b55b659 100644 --- a/app/styles/ember-versions-form.css +++ b/app/styles/ember-versions-form.css @@ -48,6 +48,18 @@ color: var(--color-button-secondary-text-hover); } + &.is-invalid { + background-color: var(--color-gray-300); + color: var(--color-gray-700); + opacity: 0.65; + text-decoration: line-through; + + &:hover { + background-color: var(--color-gray-300); + color: var(--color-gray-700); + } + } + display: inline-block; padding: 0.25rem; border-radius: 0.25rem; diff --git a/tests/integration/components/ember-versions-form-test.gjs b/tests/integration/components/ember-versions-form-test.gjs index 09bcb60..ed26ab0 100644 --- a/tests/integration/components/ember-versions-form-test.gjs +++ b/tests/integration/components/ember-versions-form-test.gjs @@ -91,4 +91,31 @@ module('Integration | Component | ember-versions-form', function (hooks) { await fillIn('[data-test-select="To Version"]', '3.15'); assert.dom('[data-test-button="Find Changes"]').isDisabled(); }); + + test('adds is-invalid class to invalid version options', async function (assert) { + await render(); + + await fillIn('[data-test-select="From Version"]', '3.15'); + await fillIn('[data-test-select="To Version"]', '3.18'); + + assert + .dom('[data-test-select="From Version"] option[value="3.15"]') + .doesNotHaveClass('is-invalid'); + + assert + .dom('[data-test-select="From Version"] option[value="3.18"]') + .hasClass('is-invalid'); + + assert + .dom('[data-test-select="To Version"] option[value="3.15"]') + .hasClass('is-invalid'); + + assert + .dom('[data-test-select="To Version"] option[value="3.12"]') + .hasClass('is-invalid'); + + assert + .dom('[data-test-select="To Version"] option[value="3.18"]') + .doesNotHaveClass('is-invalid'); + }); });