Fix checkbox styling (#10483)

Link label and input

packages/apputils/src/inputdialog.ts

@@ -7,6 +7,8 @@ import { Styling } from './styling';
 
 const INPUT_DIALOG_CLASS = 'jp-Input-Dialog';
 
+const INPUT_BOOLEAN_DIALOG_CLASS = 'jp-Input-Boolean-Dialog';
+
 /**
  * Namespace for input dialogs
  */
@@ -225,13 +227,20 @@ class InputDialogBase<T> extends Widget implements Dialog.IBodyWidget<T> {
     super();
     this.addClass(INPUT_DIALOG_CLASS);
 
+    this._input = document.createElement('input');
+    this._input.classList.add('jp-mod-styled');
+    this._input.id = 'jp-dialog-input-id';
+
     if (label !== undefined) {
       const labelElement = document.createElement('label');
       labelElement.textContent = label;
+      labelElement.htmlFor = this._input.id;
 
       // Initialize the node
       this.node.appendChild(labelElement);
     }
+
+    this.node.appendChild(this._input);
   }
 
   /** Input HTML node */
@@ -249,14 +258,10 @@ class InputBooleanDialog extends InputDialogBase<boolean> {
    */
   constructor(options: InputDialog.IBooleanOptions) {
     super(options.label);
+    this.addClass(INPUT_BOOLEAN_DIALOG_CLASS);
 
-    this._input = document.createElement('input');
-    this._input.classList.add('jp-mod-styled');
     this._input.type = 'checkbox';
     this._input.checked = options.value ? true : false;
-
-    // Initialize the node
-    this.node.appendChild(this._input);
   }
 
   /**
@@ -279,13 +284,8 @@ class InputNumberDialog extends InputDialogBase<number> {
   constructor(options: InputDialog.INumberOptions) {
     super(options.label);
 
-    this._input = document.createElement('input', {});
-    this._input.classList.add('jp-mod-styled');
     this._input.type = 'number';
     this._input.value = options.value ? options.value.toString() : '0';
-
-    // Initialize the node
-    this.node.appendChild(this._input);
   }
 
   /**
@@ -312,16 +312,11 @@ class InputTextDialog extends InputDialogBase<string> {
   constructor(options: InputDialog.ITextOptions) {
     super(options.label);
 
-    this._input = document.createElement('input', {});
-    this._input.classList.add('jp-mod-styled');
     this._input.type = 'text';
     this._input.value = options.text ? options.text : '';
     if (options.placeholder) {
       this._input.placeholder = options.placeholder;
     }
-
-    // Initialize the node
-    this.node.appendChild(this._input);
   }
 
   /**
@@ -344,16 +339,11 @@ class InputPasswordDialog extends InputDialogBase<string> {
   constructor(options: InputDialog.ITextOptions) {
     super(options.label);
 
-    this._input = document.createElement('input', {});
-    this._input.classList.add('jp-mod-styled');
     this._input.type = 'password';
     this._input.value = options.text ? options.text : '';
     if (options.placeholder) {
       this._input.placeholder = options.placeholder;
     }
-
-    // Initialize the node
-    this.node.appendChild(this._input);
   }
 
   /**
@@ -403,18 +393,16 @@ class InputItemsDialog extends InputDialogBase<string> {
       data.id = 'input-dialog-items';
       data.appendChild(this._list);
 
-      this._input = document.createElement('input', {});
-      this._input.classList.add('jp-mod-styled');
       this._input.type = 'list';
       this._input.value = current;
       this._input.setAttribute('list', data.id);
       if (options.placeholder) {
         this._input.placeholder = options.placeholder;
       }
-      this.node.appendChild(this._input);
       this.node.appendChild(data);
     } else {
       /* Use select directly */
+      this._input.remove();
       this.node.appendChild(Styling.wrapSelect(this._list));
     }
   }

packages/apputils/style/base.css

@@ -9,6 +9,7 @@
 @import './dialog.css';
 @import './hoverbox.css';
 @import './iframe.css';
+@import './inputdialog.css';
 @import './mainareawidget.css';
 @import './materialcolors.css';
 @import './spinner.css';

packages/apputils/style/inputdialog.css

@@ -0,0 +1,9 @@
+.jp-Input-Boolean-Dialog {
+  flex-direction: row-reverse;
+  align-items: end;
+  width: 100%;
+}
+
+.jp-Input-Boolean-Dialog > label {
+  flex: 1 1 auto;
+}

packages/apputils/style/styling.css

@@ -35,63 +35,28 @@ input.jp-mod-styled {
   -moz-appearance: none;
 }
 
+input[type='checkbox'].jp-mod-styled {
+  appearance: checkbox;
+  -webkit-appearance: checkbox;
+  -moz-appearance: checkbox;
+  height: auto;
+}
+
 input.jp-mod-styled:focus {
   border: var(--jp-border-width) solid var(--md-blue-500);
   box-shadow: inset 0 0 4px var(--md-blue-300);
 }
 
-input.jp-FileDialog-Checkbox {
-  position: relative;
-  cursor: pointer;
-  background: none;
-  border: none;
-  width: 13px;
-  height: 13px;
+.jp-FileDialog-Checkbox {
   margin-top: 35px;
-  margin-right: 10px;
-  top: 5px;
-  left: 0px;
-}
-
-input.jp-FileDialog-Checkbox:focus {
-  border: none;
-  box-shadow: none;
-}
-
-input.jp-FileDialog-Checkbox:before {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 13px;
-  height: 13px;
-  top: 0;
-  left: 0;
-  background-color: #e9e9e9;
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  width: 100%;
 }
 
-input.jp-FileDialog-Checkbox:checked:before {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 13px;
-  height: 13px;
-  top: 0;
-  left: 0;
-  background-color: #1e80ef;
-}
-input.jp-FileDialog-Checkbox:checked:after {
-  content: '';
-  display: block;
-  width: 3px;
-  height: 7px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-  position: absolute;
-  top: 1px;
-  left: 4px;
+.jp-FileDialog-Checkbox > label {
+  flex: 1 1 auto;
 }
 
 .jp-select-wrapper {

packages/docmanager/src/dialogs.ts

@@ -285,11 +285,13 @@ namespace Private {
     const body = document.createElement('div');
     const name = document.createElement('input');
     const checkbox = document.createElement('input');
+    checkbox.id = 'jp-filedialog-input-id';
     const label = document.createElement('label');
+    label.htmlFor = checkbox.id;
     const div = document.createElement('div');
+    div.classList.add(FILE_DIALOG_CHECKBOX_CLASS);
 
     checkbox.type = 'checkbox';
-    checkbox.classList.add(FILE_DIALOG_CHECKBOX_CLASS);
     checkbox.addEventListener('change', function () {
       manager.nameFileOnSave = !this.checked;
     });