ui/ux: styling input validation (#12585)

eclipse-theia · Jun 29, 2023 · d2f091a · d2f091a
1 parent dc7d9f3
commit d2f091a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/examples/playwright/src/theia-dialog.ts b/examples/playwright/src/theia-dialog.ts
@@ -25,6 +25,7 @@ export class TheiaDialog extends TheiaPageObject {
     protected titleSelector = this.titleBarSelector + ' > div';
     protected contentSelector = this.blockSelector + ' .dialogContent > div';
     protected controlSelector = this.blockSelector + ' .dialogControl';
+    protected errorSelector = this.blockSelector + ' .dialogContent';
 
     async waitForVisible(): Promise<void> {
         await this.page.waitForSelector(`${this.blockSelector}`, { state: 'visible' });
@@ -64,7 +65,7 @@ export class TheiaDialog extends TheiaPageObject {
     }
 
     protected async validationElement(): Promise<ElementHandle<SVGElement | HTMLElement>> {
-        return this.page.waitForSelector(`${this.controlSelector} div.error`);
+        return this.page.waitForSelector(`${this.errorSelector} div.error`, { state: 'attached' });
     }
 
     async getValidationText(): Promise<string | null> {

diff --git a/packages/core/src/browser/dialogs.ts b/packages/core/src/browser/dialogs.ts
@@ -528,7 +528,10 @@ export class SingleTextInputDialog extends AbstractDialog<string> {
         } else {
             this.inputField.select();
         }
+
         this.contentNode.appendChild(this.inputField);
+        this.controlPanel.removeChild(this.errorMessageNode);
+        this.contentNode.appendChild(this.errorMessageNode);
 
         this.appendAcceptButton(props.confirmButtonLabel);
     }

diff --git a/packages/keymaps/src/browser/keybindings-widget.tsx b/packages/keymaps/src/browser/keybindings-widget.tsx
@@ -640,7 +640,7 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget {
             const binding = { command, keybinding };
             KeySequence.parse(keybinding);
             if (oldKeybinding === keybinding) {
-                return ' '; // if old and new keybindings match, quietly reject update
+                return ''; // if old and new keybindings match, quietly reject update
             }
             if (this.keybindingRegistry.containsKeybindingInScope(binding)) {
                 return nls.localize('theia/keymaps/keybindingCollidesValidation', 'keybinding currently collides');

diff --git a/packages/preferences/src/browser/style/index.css b/packages/preferences/src/browser/style/index.css
@@ -384,7 +384,7 @@
 
 .theia-settings-container .theia-input[type="checkbox"]:focus,
 .theia-settings-container .theia-input[type="number"]:focus {
-  outline-width: 2px;
+  outline-width: 1px;
 }
 
 .theia-settings-container .theia-input[type="checkbox"] {
@@ -404,12 +404,10 @@
   margin: 0;
 }
 
-.theia-settings-container
-  .pref-content-container
-  .pref-input
-  .pref-input-container
-  .pref-error-notification {
+.dialogContent .error:not(:empty),
+.theia-settings-container .pref-content-container .pref-input .pref-input-container .pref-error-notification {
   border-style: solid;
+  border-width: 1px;
   border-color: var(--theia-inputValidation-errorBorder);
   background-color: var(--theia-inputValidation-errorBackground);
   width: 100%;