Invalid versions

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 {
                 <option
                   selected={{eq version this.fromVersion}}
                   value={{version}}
+                  class={{if
+                    (isFromVersionInvalid version this.toVersion)
+                    "is-invalid"
+                  }}
                 >
                   {{version}}
                 </option>
@@ -102,6 +114,10 @@ export default class EmberVersionsFormComponent extends Component {
                 <option
                   selected={{eq version this.toVersion}}
                   value={{version}}
+                  class={{if
+                    (isToVersionInvalid version this.fromVersion)
+                    "is-invalid"
+                  }}
                 >
                   {{version}}
                 </option>
@@ -119,11 +135,11 @@ export default class EmberVersionsFormComponent extends Component {
         class="mt-2"
       />
 
-      <div role="alert">
-        {{#unless this.areVersionsValid}}
-          <p class="mt-2">To version should be higher than From version</p>
-        {{/unless}}
-      </div>
+      {{#unless this.areVersionsValid}}
+        <div role="alert" class="well mt-2 p-2">
+          To version should be higher than From version
+        </div>
+      {{/unless}}
     </form>
   </template>
 }

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;
+    }
   }
 }

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;

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(<template><EmberVersionsForm /></template>);
+
+    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');
+  });
 });