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}}
+
+ To version should be higher than From version
+
+ {{/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');
+ });
});