Merge pull request #134 from ConduitIO/jj/light-mode-form-fields-4

feat(mox:select): add light mode to mox/select components

.changeset/great-comics-own.md

@@ -0,0 +1,5 @@
+---
+"mx-ui-components": minor
+---
+
+feat(mox): add light mode to mox/select + mox/typeahead components

addon/components/mox/input.hbs

@@ -1,20 +1,22 @@
 {{#if @label}}
   <Mox::Label for={{@id}} @isRequired={{@isRequired}}>{{@label}}</Mox::Label>
 {{/if}}
-<input
-  id={{@id}}
-  type="text"
-  class="px-4 py-2 w-full text-gray-800 dark:text-white text-sm rounded bg-white dark:bg-gray-800
-    read-only:text-gray-800 dark:read-only:text-white disabled:text-gray-600 dark:disabled:text-gray-500
-    disabled:bg-gray-200 read-only:bg-gray-50 disabled:border-gray-200 read-only:border-gray-400
-    dark:disabled:bg-gray-700 dark:read-only:bg-gray-700 dark:disabled:border-gray-700 dark:read-only:border-gray-700 disabled:cursor-not-allowed
-    read-only:focus:border-cyan-500 dark:read-only:focus:border-white dark:ready-only:focus:ring-white
-    {{if this.isValid 'border-gray-400 dark:border-gray-500 focus:border-cyan-500 focus:ring-cyan-500'
-    'border-red-500 dark:border-red-800 active:border-red-500 dark:active:border-red-900 focus:border-red-500 dark:focus:border-red-900 focus:ring-red-500 dark:focus:ring-red-900'}}"
-  value={{@value}}
-  placeholder={{@placeholder}}
-  aria-invalid={{not this.isValid}} {{on "input" this.onInput}}
-  data-test-mox-input
-  ...attributes
-/>
-<Mox::FormError @error={{@error}} id={{concat @id "-error-message"}} data-test-mox-input-error />
+<div class="flex flex-col justify-center space-y-1">
+  <input
+    id={{@id}}
+    type="text"
+    class="px-4 py-2 w-full text-gray-800 dark:text-white text-sm rounded bg-white dark:bg-gray-800
+      read-only:text-gray-800 dark:read-only:text-white disabled:text-gray-600 dark:disabled:text-gray-500
+      disabled:bg-gray-200 read-only:bg-gray-50 disabled:border-gray-200 read-only:border-gray-400
+      dark:disabled:bg-gray-700 dark:read-only:bg-gray-700 dark:disabled:border-gray-700 dark:read-only:border-gray-700 disabled:cursor-not-allowed
+      read-only:focus:border-cyan-500 dark:read-only:focus:border-white dark:ready-only:focus:ring-white
+      {{if this.isValid 'border-gray-400 dark:border-gray-500 focus:border-cyan-500 focus:ring-cyan-500'
+      'border-red-500 dark:border-red-800 active:border-red-500 dark:active:border-red-900 focus:border-red-500 dark:focus:border-red-900 focus:ring-red-500 dark:focus:ring-red-900'}}"
+    value={{@value}}
+    placeholder={{@placeholder}}
+    aria-invalid={{not this.isValid}} {{on "input" this.onInput}}
+    data-test-mox-input
+    ...attributes
+  />
+  <Mox::FormError @error={{@error}} id={{concat @id "-error-message"}} data-test-mox-input-error />
+</div>

addon/components/mox/search-input.hbs

@@ -1,7 +1,7 @@
 <div class="relative" ...attributes>
   <label
     for="mox-search-input"
-    class="absolute top-0.5 -mt-2 left-0 flex items-center h-full"
+    class="absolute top-0 -mt-2 left-0 flex items-center h-full"
     data-test-mox-search-input-label
   >
     <svg class="text-gray-800 dark:text-white fill-current h-4 w-4 ml-3" data-test-mox-search-input-icon>

addon/components/mox/select.hbs

@@ -5,12 +5,10 @@
       disabled={{@isDisabled}}
       aria-haspopup="listbox"
       aria-expanded="true"
-      aria-labelledby="listbox-label" class="relative w-full border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none sm:text-sm focus:ring-1 bg-gray-800 text-white
-      disabled:bg-gray-700 disabled:text-gray-500 disabled:border-gray-700 disabled:cursor-not-allowed
-      {{if this.isValid
-        'border-gray-500 focus:border-cyan-500 focus:ring-cyan-500'
-        'border-red-800 active:border-red-900 focus:border-red-900 focus:ring-red-900'
-      }}"
+      aria-label={{@label}}
+      class="relative w-full border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none sm:text-sm focus:ring-1 disabled:cursor-not-allowed
+        {{this.themeClasses}}
+        {{if this.isValid this.validThemeClasses this.invalidThemeClasses}}"
       data-test-select-button
       ...attributes
       {{on "click" this.toggleOptions}}
@@ -38,14 +36,14 @@
     </button>
     {{#if this.isShowingOptions}}
       <div
-        class="absolute mt-1 min-w-min w-full rounded-md bg-gray-800 shadow-lg z-10"
+        class="absolute mt-1 min-w-min w-full rounded-md bg-gray-50 dark:bg-gray-800 shadow-lg z-10"
         {{on-click-outside (fn (mut this.isShowingOptions) false) "document" capture=true}}
       >
         <ul
           tabindex="-1"
           role="listbox"
-          aria-labelledby="listbox-label"
-          class="max-h-52 rounded-md py-1 text-base border border-gray-500 overflow-auto focus:outline-none sm:text-sm"
+          aria-label={{concat @label " options"}}
+          class="max-h-52 rounded-md py-1 text-base border-gray-300 dark:border-gray-500 overflow-auto focus:outline-none sm:text-sm"
         >
           {{#if (has-block)}}
             {{yield
@@ -67,4 +65,4 @@
     {{/if}}
   </div>
   <Mox::FormError @error={{@error}} id={{concat @id "-error-message"}} data-test-mox-select-error />
-</div>
+</div>

addon/components/mox/select.js

@@ -28,6 +28,26 @@ export default class MoxSelectComponent extends Component {
     return get(this.args.selectedOption, optionNameKey);
   }
 
+  get themeClasses() {
+    let lightMode = `bg-gray-50 text-gray-800 disabled:bg-gray-200 disabled:text-gray-600 disabled:border-gray-200`;
+    let darkMode = `dark:bg-gray-800 dark:text-white dark:disabled:bg-gray-700 dark:disabled:text-gray-500 dark:disabled:border-gray-700`;
+    return `${lightMode} ${darkMode}`;
+  }
+
+  get validThemeClasses() {
+    let lightMode = `border-gray-300 focus:border-cyan-500 focus:ring-cyan-500`;
+    let darkMode =
+      'dark:border-gray-500 dark:focus:border-cyan-500 dark:focus:ring-cyan-500';
+    return `${lightMode} ${darkMode}`;
+  }
+
+  get invalidThemeClasses() {
+    let lightMode = `border-red-600 active:border-red-700 focus:border-red-500 focus:ring-red-500`;
+    let darkMode =
+      'dark:border-red-800 dark:active:border-red-900 dark:focus:border-red-900 dark:focus:ring-red-900';
+    return `${lightMode} ${darkMode}`;
+  }
+
   @action
   toggleOptions() {
     if (this.args.isDisabled) {

addon/components/mox/select/option.hbs

@@ -1,13 +1,17 @@
-{{!-- template-lint-disable require-presentational-children --}}
+{{! template-lint-disable require-presentational-children }}
 <li
-  id="listbox-item-0"
+  id="listbox-item-{{this.optionValue}}"
   aria-selected={{eq this.optionValue this.selectedOptionValue}}
   role="option"
-  class="cursor-default select-none relative hover:bg-gray-700
-    {{if @isDisabled "text-gray-500 bg-gray-700" "text-white"}}"
+  class="cursor-default select-none relative hover:bg-gray-200 dark:hover:bg-gray-700
+    {{if
+      @isDisabled
+      'text-gray-600 dark:text-gray-500 bg-gray-200 dark:bg-gray-700'
+      'text-gray-800 dark:text-white'
+    }}"
   data-test-select-option
 >
-  {{!-- template-lint-disable no-invalid-interactive --}}
+  {{! template-lint-disable no-invalid-interactive }}
   <div
     class="flex items-center cursor-pointer py-2 pl-4 pr-9 mr-2"
     data-test-select-option-button={{this.optionName}}
@@ -24,7 +28,7 @@
       </span>
     {{/if}}
   </div>
-  {{!-- template-lint-enable no-invalid-interactive --}}
+  {{! template-lint-enable no-invalid-interactive }}
 
   {{#if (eq this.optionValue this.selectedOptionValue)}}
     <span
@@ -47,4 +51,4 @@
     </span>
   {{/if}}
 </li>
-{{!-- template-lint-enable require-presentational-children --}}
+{{! template-lint-enable require-presentational-children }}

addon/components/mox/typeahead-select.hbs

@@ -3,7 +3,7 @@
     <Mox::Label for={{@id}} @isRequired={{@isRequired}}>{{@label}}</Mox::Label>
   {{/if}}
   <div
-    class="flex items-center w-full" aria-owns={{@id}}
+    class="flex items-center w-full relative" aria-owns={{@id}}
   >
     <Mox::Input
       @id={{@id}}
@@ -25,9 +25,9 @@
       {{on-key "ArrowUp" this.previousMatch}}
       {{on-key "Enter" (fn this.enterMatch this.internalSelectedOption)}}
     />
-    <span class="ml-3 absolute right-0 flex items-center pr-2 pointer-events-none">
+    <span class="ml-3 absolute top-3 right-0 flex items-center pr-2 pointer-events-none">
       <svg
-        class="h-5 w-5 text-gray-400"
+        class="h-4 w-4 text-gray-600 dark:text-gray-400"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
@@ -43,7 +43,7 @@
   </div>
 
   <div
-    class="absolute mt-1 w-full rounded-md bg-gray-800 z-10
+    class="absolute -mt-4 w-full rounded-md bg-white dark:bg-gray-800 z-10
       {{if (or (not this.isShowingMatches) (eq this.matches.length 0)) "hidden"}}"
     data-test-typeahead-matches
   >
@@ -52,21 +52,22 @@
       id={{concat "typeaheadselectlistbox" @id}}
       tabindex="1"
       role="listbox"
-      class="max-h-56 rounded-md text-base overflow-auto focus:outline-none sm:text-sm border border-gray-500"
+      class="max-h-56 rounded-md text-base overflow-auto focus:outline-none sm:text-sm border border-gray-300 dark:border-gray-500"
     >
     {{!-- template-lint-enable no-positive-tabindex --}}
       {{#each this.matches as |match idx|}}
         {{!-- template-lint-disable require-presentational-children --}}
         <li
           id={{concat "listbox-item-" idx}}
           role="option"
-          class="text-white cursor-default select-none relative hover:bg-gray-700
+          class="text-gray-800 dark:text-white cursor-default select-none relative hover:bg-gray-200 dark:hover:bg-gray-700
             {{if
               (eq
                 (get match this.optionValueKey)
                 (get this.internalSelectedOption this.optionValueKey)
               )
-              "bg-gray-700"
+              "bg-gray-200 dark:bg-gray-700"
+              "bg-white dark:bg-gray-800"
             }}"
           data-test-select-option
           aria-selected={{eq

addon/components/mxa/select/option/category.hbs

@@ -1,4 +1,4 @@
 <div class="flex flex-col gap-y-1" data-test-select-option-category>
   <span>{{@name}}</span>
-  <span class="text-xs text-gray-500">{{@category}}</span>
+  <span class="text-xs text-gray-600 dark:text-gray-300">{{@category}}</span>
 </div>

package.json

@@ -91,6 +91,7 @@
     "ember-concurrency": "^3.0.0",
     "ember-keyboard": "8.2.0",
     "ember-load-initializers": "^2.1.2",
+    "ember-modifier": "^4.1.0",
     "ember-page-title": "^7.0.0",
     "ember-qunit": "^6.2.0",
     "ember-resolver": "^10.1.0",