Merge pull request #2816 from jasongrout/fa5

Change fontawesome support to work for fontawesome 4 and 5.

Author: vidartf

packages/controls/css/widgets-base.css

@@ -391,27 +391,17 @@
   font-size: var(--jp-widgets-font-size);
 }
 
-.widget-valid i:before {
+.widget-valid i {
   line-height: var(--jp-widgets-inline-height);
   margin-right: var(--jp-widgets-inline-margin);
   margin-left: var(--jp-widgets-inline-margin);
-
-  /* from the fa class in FontAwesome: https://github.com/FortAwesome/Font-Awesome/blob/49100c7c3a7b58d50baa71efef11af41a66b03d3/css/font-awesome.css#L14 */
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-.widget-valid.mod-valid i:before {
-  content: '\f00c';
+.widget-valid.mod-valid i {
   color: green;
 }
 
-.widget-valid.mod-invalid i:before {
-  content: '\f00d';
+.widget-valid.mod-invalid i {
   color: red;
 }
 
@@ -953,6 +943,8 @@
   margin-left: 4px;
 }
 
+/* This font-awesome strategy may not work across FA4 and FA5, but we don't
+actually support closable tabs, so it really doesn't matter */
 .jupyter-widgets.widget-tab
   > .p-TabBar
   .p-mod-closable
@@ -998,20 +990,6 @@
   border-bottom: none;
 }
 
-.p-Collapse .p-Collapse-header::before {
-  content: '\f0da\00A0'; /* caret-right, non-breaking space */
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.p-Collapse-open > .p-Collapse-header::before {
-  content: '\f0d7\00A0'; /* caret-down, non-breaking space */
-}
-
 .p-Collapse-contents {
   padding: var(--jp-widgets-container-padding);
   background-color: var(--jp-layout-color1);

packages/controls/src/lumino/accordion.ts

@@ -40,6 +40,13 @@ export class Collapse extends Widget {
     this._header = new Widget();
     this._header.addClass(COLLAPSE_HEADER_CLASS);
     this._header.node.addEventListener('click', this);
+    // Fontawesome icon for caret
+    const icon = document.createElement('i');
+    icon.classList.add('fa', 'fa-fw', 'fa-caret-right');
+    this._header.node.appendChild(icon);
+    // Label content
+    this._header.node.appendChild(document.createElement('span'));
+
     this._content = new Panel();
     this._content.addClass(COLLAPSE_CONTENTS_CLASS);
 
@@ -111,14 +118,19 @@ export class Collapse extends Widget {
       this._content.hide();
     }
     this.removeClass(COLLAPSE_CLASS_OPEN);
+    this._header.node.children[0].classList.add('fa-caret-right');
+    this._header.node.children[0].classList.remove('fa-caret-down');
     this._collapseChanged.emit(void 0);
   }
+
   private _uncollapse(): void {
     this._collapsed = false;
     if (this._content) {
       this._content.show();
     }
     this.addClass(COLLAPSE_CLASS_OPEN);
+    this._header.node.children[0].classList.add('fa-caret-down');
+    this._header.node.children[0].classList.remove('fa-caret-right');
     this._collapseChanged.emit(void 0);
   }
 
@@ -150,7 +162,7 @@ export class Collapse extends Widget {
    * Handle the `changed` signal of a title object.
    */
   private _onTitleChanged(sender: Title<Widget>): void {
-    this._header.node.textContent = this._widget.title.label;
+    this._header.node.children[1].textContent = this._widget.title.label;
   }
 
   private _onChildDisposed(sender: Widget): void {

packages/controls/src/widget_bool.ts

@@ -306,8 +306,9 @@ export class ValidView extends DescriptionView {
     this.el.classList.add('jupyter-widgets');
     this.el.classList.add('widget-valid');
     this.el.classList.add('widget-inline-hbox');
-    const icon = document.createElement('i');
-    this.el.appendChild(icon);
+    this.icon = document.createElement('i');
+    this.icon.classList.add('fa', 'fa-fw');
+    this.el.appendChild(this.icon);
     this.readout = document.createElement('span');
     this.readout.classList.add('widget-valid-readout');
     this.readout.classList.add('widget-readout');
@@ -324,12 +325,17 @@ export class ValidView extends DescriptionView {
   update(): void {
     this.el.classList.remove('mod-valid');
     this.el.classList.remove('mod-invalid');
+    this.icon.classList.remove('fa-check');
+    this.icon.classList.remove('fa-times');
     this.readout.textContent = this.model.get('readout');
     if (this.model.get('value')) {
       this.el.classList.add('mod-valid');
+      this.icon.classList.add('fa-check');
     } else {
       this.el.classList.add('mod-invalid');
+      this.icon.classList.add('fa-times');
     }
   }
   readout: HTMLSpanElement;
+  icon: HTMLElement;
 }