Replace FontAwesome with Vaadin Icons (#8208)

* Include FontAwesome by default for easier migration
* Fix JSComponentLoadingIndicatorTest

Fixes #7979
Addresses part of #8219

5 files changed, 39 insertions, 69 deletions

diff --git a/documentation/themes/img/builtin-runo.png b/documentation/themes/img/builtin-runo.png
deleted file mode 100644
index 039a34137b..0000000000
--- a/documentation/themes/img/builtin-runo.png
+++ /dev/null
diff --git a/documentation/themes/img/fonticons-basic.png b/documentation/themes/img/fonticons-basic.png
index 66ed207cf7..338ca35e6f 100644
--- a/documentation/themes/img/fonticons-basic.png
+++ b/documentation/themes/img/fonticons-basic.png
diff --git a/documentation/themes/img/fonticons-html.png b/documentation/themes/img/fonticons-html.png
index b9d8a2a9c6..11107acc55 100644
--- a/documentation/themes/img/fonticons-html.png
+++ b/documentation/themes/img/fonticons-html.png
diff --git a/documentation/themes/themes-creating.asciidoc b/documentation/themes/themes-creating.asciidoc
index 4040bcf5ca..98fba272da 100644
--- a/documentation/themes/themes-creating.asciidoc
+++ b/documentation/themes/themes-creating.asciidoc
@@ -7,8 +7,6 @@ layout: page
 [[themes.creating]]
 = Creating and Using Themes
 
-*_This section has not yet been updated for Vaadin Framework 8._*
-
 Custom themes are placed in the [filename]#VAADIN/themes# folder of the web
 application, in an Eclipse project under the [filename]#WebContent# folder or
 [filename]#src/main/webapp# in Maven projects, as was illustrated in
@@ -31,7 +29,7 @@ on-the-fly when the theme is requested by a browser.
 
 We recommend that you organize the theme in at least two SCSS files so that you
 import the actual theme from a Sass file that is named more uniquely than the
-[filename]#styles.scss#, to make it distinquishable in the editor. This
+[filename]#styles.scss#, to make it distinguishable in the editor. This
 organization is how the Vaadin Plugin for Eclipse creates a new theme.
 
 If you use Vaadin add-ons that contain themes, Vaadin Plugin for Eclipse and
@@ -123,17 +121,16 @@ generated by the Vaadin Plugin for Eclipse or Maven.
 == Plain Old CSS Themes
 
 In addition to Sass themes, you can create plain old CSS themes. CSS theme are
-more restricted than Sass styles - you can't parameterize CSS themes in any way,
-unlike you can Valo, for example. Further, an application can only have one CSS
-theme while you can have multiple Sass themes.
+more restricted than Sass styles - you can't parameterize CSS themes in any way.
+Further, an application can only have one CSS theme while you can have multiple Sass themes.
 
 A CSS theme is defined in a [filename]#styles.css# file in the
 [filename]#VAADIN/themes/mytheme# folder. You need to import the
-[filename]#legacy-styles.css# of the built-in theme as follows:
+[filename]#styles.css# of Valo theme as follows:
 
 
 ----
-@import "../reindeer/legacy-styles.css";
+@import "../valo/styles.css";
 
 .v-app {
     background: yellow;
@@ -156,8 +153,6 @@ of the style names are determined in the client-side widget of each component.
 The easiest way to find out the styles of the elements is to use a HTML
 inspector such as FireBug.
 
-//TODO add reference to a Firebug section when available
-
 Some client-side components or component styles can be shared by different
 server-side components. For example, [literal]#++v-textfield++# style is used
 for all text input boxes in components, in addition to [classname]#TextField#.
@@ -166,17 +161,19 @@ for all text input boxes in components, in addition to [classname]#TextField#.
 [[themes.creating.builtin]]
 == Built-in Themes
 
-Vaadin currently includes the following built-in themes:
+Since version 8.0, Vaadin Framework includes only one built-in theme:
 
 * [literal]#++valo++#, the primary theme since Vaadin 7.3
+
+The following legacy themes can be found in the [filename]#vaadin-compability-themes.jar# package
+for easier migrating from framework version 7 to 8:
+
 * [literal]#++reindeer++#, the primary theme in Vaadin 6 and 7
 * [literal]#++chameleon++#, an easily customizable theme
 * [literal]#++runo++#, the default theme in IT Mill Toolkit 5
+* [literal]#++base++#, which was never to be used directly, but is the base for other legacy themes
 
-In addition, there is the [literal]#++base++# theme, which should not be used
-directly, but is extended by the other built-in themes, except valo.
-
-The built-in themes are provided in the respective
+The themes are provided in the respective
 [filename]#VAADIN/themes/<theme>/styles.scss# stylesheets in the
 [filename]#vaadin-themes# JAR. Also the precompiled CSS files are included, in
 case you want to use the themes directly.
@@ -187,34 +184,26 @@ style names for specific components.
 
 
 ----
-@Theme("runo")
 public class MyUI extends UI {
     @Override
     protected void init(VaadinRequest request) {
         ...
-        Panel panel = new Panel("Regular Panel in the Runo Theme");
-        panel.addComponent(new Button("Regular Runo Button"));
+        Panel panel = new Panel("Regular Panel in the Valo Theme");
+        panel.addComponent(new Button("Regular Valo Button"));
 
         // A button with the "small" style
-        Button smallButton = new Button("Small Runo Button");
-        smallButton.addStyleName(Runo.BUTTON_SMALL);
+        Button smallButton = new Button("Small Valo Button");
+        smallButton.addStyleName(ValoTheme.BUTTON_SMALL);
 
-        Panel lightPanel = new Panel("Light Panel");
-        lightPanel.addStyleName(Runo.PANEL_LIGHT);
+        Panel lightPanel = new Panel("Borderless Panel");
+        lightPanel.addStyleName(ValoTheme.PANEL_BORDERLESS);
         lightPanel.addComponent(
             new Label("With addStyleName(\"light\")"));
         ...
 ----
 
-The example with the Runo theme is shown in
-<<figure.themes.creating.builtin.runo>>.
-
-[[figure.themes.creating.builtin.runo]]
-.Runo Theme
-image::img/builtin-runo.png[]
-
-The built-in themes come with a custom icon font, FontAwesome, which is used for
-icons in the theme, and which you can use as font icons, as described in
+The Valo theme comes with a custom icon font, VaadinIcons,
+which you can use as font icons, as described in
 <<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font
 Icons">>.
 
diff --git a/documentation/themes/themes-fonticon.asciidoc b/documentation/themes/themes-fonticon.asciidoc
index c1d1ce2341..9131a004f8 100644
--- a/documentation/themes/themes-fonticon.asciidoc
+++ b/documentation/themes/themes-fonticon.asciidoc
@@ -7,7 +7,6 @@ layout: page
 [[themes.fonticon]]
 = Font Icons
 
-*_This section has not yet been updated for Vaadin Framework 8._*
 
 Font icons are icons included in a font. Fonts have many advantages over bitmap
 images. Browsers are usually faster in rendering fonts than loading image files.
@@ -18,18 +17,11 @@ property.
 [[themes.fonticon.enabling]]
 == Loading Icon Fonts
 
-Vaadin currently comes with one custom icon font: FontAwesome. It is
-automatically enabled in the Valo theme. For other themes, you need to include
-it with the following line in your project theme, after importing the base
-theme:
+Vaadin currently comes with one custom icon font: [literal]#++Vaadin Icons++#. It is
+automatically included in the Valo theme.
 
-----
-@include fonticons;
-----
-
-If you use other icon fonts, as described in <<themes.fonticon.custom>>, and the
-font is not loaded by a base theme, you need to load it with a
-`font` mixin in Sass, as described in
+If you use other icon fonts, as described in <<themes.fonticon.custom>>,
+ you need to load it with a `font` mixin in Sass, as described in
 <<themes-fonts#themes.fonts.loading,"Loading Local Fonts">>.
 
 
@@ -40,20 +32,22 @@ Font icons are resources of type [classname]#FontIcon#, which implements the
 [interfacename]#Resource# interface. You can use these special resources for
 component icons and such, but not as embedded images, for example.
 
-Each icon has a Unicode codepoint, by which you can use it. Vaadin includes an
-awesome icon font, [literal]#++FontAwesome++#, which comes with an enumeration
-of all the icons included in the font.
+Each icon has a Unicode codepoint, by which you can use it. Vaadin Framework includes its
+own icon font, [literal]#++Vaadin Icons++#, which comes with an enumeration [classname]#VaadinIcons# with all the icons included in the font.
 
 Most typically, you set a component icon as follows:
 
+////
+This code and rest of examples in this file are in uitest/src/main/.../VaadinIconUI.java
+////
 [source, Java]
 ----
 TextField name = new TextField("Name");
-name.setIcon(FontAwesome.USER);
+name.setIcon(VaadinIcons.USER);
 layout.addComponent(name);
 
 // Button allows specifying icon resource in constructor
-Button ok = new Button("OK", FontAwesome.CHECK);
+Button ok = new Button("OK", VaadinIcons.CHECK);
 layout.addComponent(ok);
 ----
 
@@ -73,7 +67,7 @@ HTML elements that display icons in Vaadin have the [literal]#++v-icon++# style
 name.
 
 ----
-.v-icon {
+.blueicon .v-icon {
     color: blue;
 }
 ----
@@ -91,20 +85,11 @@ generating the HTML to display the icon with the [methodname]#getHtml()# method.
 [source, Java]
 ----
 Label label = new Label("I " +
-    FontAwesome.HEART.getHtml() + " Vaadin",
+    VaadinIcons.HEART.getHtml() + Vaadin",
     ContentMode.HTML);
 label.addStyleName("redicon");
-layout.addComponent(label);
 ----
 
-The HTML code has the [stylename]#v-icon# style, which you can modify in CSS:
-
-[source, css]
-----
-.redicon .v-icon {
-    color: red;
-}
-----
 
 The result is illustrated in <<figure.themes.fonticon-html.label>>, with the color
 styling described next.
@@ -137,15 +122,15 @@ public String getHtml() {
 You can include a font icon in any text by its Unicode codepoint, which you can
 get with the [methodname]#getCodePoint()# method. In such case, however, you
 need to use the same font for other text in the same string as well. The
-FontAwesome provided in Vaadin includes a basic character set.
+VaadinIcons provided with Valo theme includes a basic character set.
 
 
 ----
 TextField amount = new TextField("Amount (in " +
    new String(Character.toChars(
-           FontAwesome.BTC.getCodepoint())) +
+           VaadinIcons.DOLLAR.getCodepoint())) +
    ")");
-amount.addStyleName("awesomecaption");
+amount.addStyleName("amount");
 layout.addComponent(amount);
 ----
 
@@ -153,8 +138,8 @@ You need to set the font family in CSS.
 
 
 ----
-.v-caption-awesomecaption .v-captiontext {
-    font-family: FontAwesome;
+.v-caption-amount .v-captiontext {
+    font-family: Vaadin-Icons;
 }
 ----
 
@@ -172,10 +157,6 @@ fonts. Here, we give basic instructions for using the
 link:http://icomoon.io/app/[IcoMoon] service, where you can pick icons from a
 large library of well-designed icons.
 
-Font Awesome is included in IcoMoon's selection of icon libraries. Note that the
-codepoints of the icons are not fixed, so the [classname]#FontAwesome# enum is
-not compatible with such custom icon fonts.
-
 After you have selected the icons that you want in your font, you can download
 them in a ZIP package. The package contains the icons in multiple formats,
 including WOFF, TTF, EOT, and SVG. Not all browsers support any one of them, so
@@ -193,7 +174,7 @@ ifdef::web[]
 You can define a font icon for any font available in the browser by implementing
 the [interfacename]#FontIcon# interface. The normal pattern for implementing it
 is to implement an enumeration for all the symbols available in the font. See
-the implementation of [classname]#FontAwesome# for more details.
+the implementation of [classname]#VaadinIcons# for more details.
 
 You need a FontIcon API for the icons. In the following, we define a font icon
 using a normal sans-serif font built-in in the browser.