Implement error level on client side (#9817)

Add additional class names and style to components and error indicators to distinguish different error levels.

Vaadin 8 implementation of #9816. Cherry picked changes and added compatibility package component changes and tests.

Resolves #3139

24 files changed, 578 insertions, 171 deletions

diff --git a/client/src/main/java/com/vaadin/client/StyleConstants.java b/client/src/main/java/com/vaadin/client/StyleConstants.java
index 3b587ce233..13549b4938 100644
--- a/client/src/main/java/com/vaadin/client/StyleConstants.java
+++ b/client/src/main/java/com/vaadin/client/StyleConstants.java
@@ -44,4 +44,9 @@ public class StyleConstants {
     public static final String REQUIRED_EXT = "-required";
 
     public static final String ERROR_EXT = "-error";
+
+    /**
+     * Style name and style name prefix for the error indicator element.
+     */
+    public static final String STYLE_NAME_ERROR_INDICATOR = "v-errorindicator";
 }
diff --git a/client/src/main/java/com/vaadin/client/TooltipInfo.java b/client/src/main/java/com/vaadin/client/TooltipInfo.java
index a84e45e988..1f01dab811 100644
--- a/client/src/main/java/com/vaadin/client/TooltipInfo.java
+++ b/client/src/main/java/com/vaadin/client/TooltipInfo.java
@@ -16,8 +16,13 @@
 package com.vaadin.client;
 
 import com.vaadin.shared.ui.ContentMode;
+import com.vaadin.shared.ui.ErrorLevel;
 import com.vaadin.shared.util.SharedUtil;
 
+/**
+ * An object that contains information about a tooltip, such as the tooltip's
+ * title, error message, error level and an ID.
+ */
 public class TooltipInfo {
 
     private String title;
@@ -26,14 +31,25 @@ public class TooltipInfo {
 
     private String errorMessageHtml;
 
+    private ErrorLevel errorLevel;
+
     // Contains the tooltip's identifier. If a tooltip's contents and this
     // identifier haven't changed, the tooltip won't be updated in subsequent
     // events.
     private Object identifier;
 
+    /**
+     * Constructs a new tooltip info instance.
+     */
     public TooltipInfo() {
     }
 
+    /**
+     * Constructs a new tooltip info instance.
+     *
+     * @param tooltip
+     *         tooltip title
+     */
     public TooltipInfo(String tooltip) {
         this(tooltip, ContentMode.PREFORMATTED);
     }
@@ -41,12 +57,12 @@ public class TooltipInfo {
     /**
      * Constructs a new instance using the {@code tooltip} for the title and
      * {@code errorMessage} as a description.
-     * 
+     *
      * @param tooltip
      *            tooltip title
      * @param errorMessage
      *            error description
-     * 
+     *
      * @deprecated use {@link #TooltipInfo(String, ContentMode, String)} instead
      */
     @Deprecated
@@ -57,13 +73,14 @@ public class TooltipInfo {
     /**
      * Constructs a new instance using the {@code tooltip} for the title,
      * {@code errorMessage} as a description and {@code identifier} as its id.
-     * 
+     *
      * @param tooltip
      *            tooltip title
      * @param errorMessage
      *            error description
      * @param identifier
-     * 
+     *            the tooltip's identifier
+     *
      * @deprecated use {@link #TooltipInfo(String, ContentMode, String, Object)}
      *             instead
      */
@@ -72,56 +89,195 @@ public class TooltipInfo {
         this(tooltip, ContentMode.HTML, errorMessage, identifier);
     }
 
+    /**
+     * Constructs a new instance using the {@code tooltip} for the title,
+     * {@code errorMessage} as a description, {@code identifier} as its id and
+     * {@code errorLevel} as the error level.
+     *
+     * @param tooltip
+     *            tooltip title
+     * @param errorMessage
+     *            error description
+     * @param identifier
+     *            the tooltip's identifier
+     * @param errorLevel
+     *            error level
+     *
+     * @deprecated use {@link #TooltipInfo(String, ContentMode, String, Object,
+     *             ErrorLevel)} instead
+     * @since 8.2
+     */
+    @Deprecated
+    public TooltipInfo(String tooltip, String errorMessage, Object identifier,
+            ErrorLevel errorLevel) {
+        this(tooltip, ContentMode.HTML, errorMessage, identifier, errorLevel);
+    }
+
+    /**
+     * Constructs a new tooltip info instance.
+     *
+     * @param tooltip
+     *         tooltip title
+     * @param mode
+     *         content mode
+     */
     public TooltipInfo(String tooltip, ContentMode mode) {
         setTitle(tooltip);
         setContentMode(mode);
     }
 
+    /**
+     * Constructs a new tooltip info instance.
+     *
+     * @param tooltip
+     *         tooltip title
+     * @param mode
+     *         content mode
+     * @param errorMessage
+     *         error message
+     */
     public TooltipInfo(String tooltip, ContentMode mode, String errorMessage) {
         this(tooltip, mode, errorMessage, null);
     }
 
+    /**
+     * Constructs a new tooltip info instance.
+     *
+     * @param tooltip
+     *         tooltip title
+     * @param mode
+     *         content mode
+     * @param errorMessage
+     *         error message
+     * @param identifier
+     *         the tooltip's identifier
+     */
     public TooltipInfo(String tooltip, ContentMode mode, String errorMessage,
             Object identifier) {
+        this(tooltip, mode, errorMessage, identifier, null);
+    }
+
+    /**
+     * Constructs a new tooltip info instance.
+     *
+     * @param tooltip
+     *         tooltip title
+     * @param mode
+     *         content mode
+     * @param errorMessage
+     *         error message
+     * @param identifier
+     *         the tooltip's identifier
+     * @param errorLevel
+     *         error level
+     */
+    public TooltipInfo(String tooltip, ContentMode mode, String errorMessage,
+            Object identifier, ErrorLevel errorLevel) {
         setIdentifier(identifier);
         setTitle(tooltip);
         setContentMode(mode);
         setErrorMessage(errorMessage);
+        setErrorLevel(errorLevel);
     }
 
+    /**
+     * Sets the tooltip's identifier.
+     *
+     * @param identifier
+     *         the identifier to set
+     */
     public void setIdentifier(Object identifier) {
         this.identifier = identifier;
     }
 
+    /**
+     * Gets the tooltip's identifier.
+     *
+     * @return the identifier
+     */
     public Object getIdentifier() {
         return identifier;
     }
 
+    /**
+     * Gets the tooltip title.
+     *
+     * @return the title
+     */
     public String getTitle() {
         return title;
     }
 
+    /**
+     * Sets the tooltip title.
+     *
+     * @param title
+     *         the title to set
+     */
     public void setTitle(String title) {
         this.title = title;
     }
 
+    /**
+     * Gets the error message.
+     *
+     * @return the error message
+     */
     public String getErrorMessage() {
         return errorMessageHtml;
     }
 
+    /**
+     * Sets the error message.
+     *
+     * @param errorMessage
+     *         the error message to set
+     */
     public void setErrorMessage(String errorMessage) {
         errorMessageHtml = errorMessage;
     }
 
+    /**
+     * Gets the tooltip title's content mode.
+     *
+     * @return the content mode
+     */
     public ContentMode getContentMode() {
         return contentMode;
     }
 
+    /**
+     * Sets the tooltip title's content mode.
+     *
+     * @param contentMode
+     *         the content mode to set
+     */
     public void setContentMode(ContentMode contentMode) {
         this.contentMode = contentMode;
     }
 
     /**
+     * Gets the error level.
+     *
+     * @return the error level
+     * @since
+     */
+    public ErrorLevel getErrorLevel() {
+        return errorLevel;
+    }
+
+    /**
+     * Sets the error level.
+     *
+     * @param errorLevel
+     *         the error level to set
+     * @since
+     */
+    public void setErrorLevel(ErrorLevel errorLevel) {
+        this.errorLevel = errorLevel;
+    }
+
+    /**
      * Checks is a message has been defined for the tooltip.
      *
      * @return true if title or error message is present, false if both are
@@ -132,9 +288,19 @@ public class TooltipInfo {
                 || (errorMessageHtml != null && !errorMessageHtml.isEmpty());
     }
 
+    /**
+     * Indicates whether another tooltip info instance is equal to this one. Two
+     * instances are equal if their title, error message, error level and
+     * identifier are equal.
+     *
+     * @param other
+     *         the reference tooltip info instance with which to compare
+     * @return {@code true} if the instances are equal, {@code false} otherwise
+     */
     public boolean equals(TooltipInfo other) {
         return (other != null && SharedUtil.equals(other.title, title)
                 && SharedUtil.equals(other.errorMessageHtml, errorMessageHtml)
+                && SharedUtil.equals(other.errorLevel, errorLevel)
                 && other.identifier == identifier);
     }
 }
diff --git a/client/src/main/java/com/vaadin/client/VCaption.java b/client/src/main/java/com/vaadin/client/VCaption.java
index 1bff175d7e..f7d7d55ffe 100644
--- a/client/src/main/java/com/vaadin/client/VCaption.java
+++ b/client/src/main/java/com/vaadin/client/VCaption.java
@@ -25,8 +25,10 @@ import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.HasHTML;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.client.ui.HasErrorIndicator;
+import com.vaadin.client.ui.HasErrorIndicatorElement;
 import com.vaadin.client.ui.HasRequiredIndicator;
 import com.vaadin.client.ui.Icon;
 import com.vaadin.client.ui.ImageIcon;
@@ -34,8 +36,9 @@ import com.vaadin.client.ui.aria.AriaHelper;
 import com.vaadin.shared.AbstractComponentState;
 import com.vaadin.shared.ComponentConstants;
 import com.vaadin.shared.ui.ComponentStateUtil;
+import com.vaadin.shared.ui.ErrorLevel;
 
-public class VCaption extends HTML {
+public class VCaption extends HTML implements HasErrorIndicatorElement {
 
     public static final String CLASSNAME = "v-caption";
 
@@ -259,23 +262,17 @@ public class VCaption extends HTML {
         AriaHelper.handleInputInvalid(owner.getWidget(), showError);
 
         if (showError) {
-            if (errorIndicatorElement == null) {
-                errorIndicatorElement = DOM.createDiv();
-                DOM.setInnerHTML(errorIndicatorElement, " ");
-                DOM.setElementProperty(errorIndicatorElement, "className",
-                        "v-errorindicator");
+            setErrorIndicatorElementVisible(true);
 
-                DOM.insertChild(getElement(), errorIndicatorElement,
-                        getInsertPosition(InsertPosition.ERROR));
+            // Hide error indicator from assistive devices
+            Roles.getTextboxRole()
+                    .setAriaHiddenState(errorIndicatorElement, true);
 
-                // Hide error indicator from assistive devices
-                Roles.getTextboxRole().setAriaHiddenState(errorIndicatorElement,
-                        true);
-            }
-        } else if (errorIndicatorElement != null) {
-            // Remove existing
-            getElement().removeChild(errorIndicatorElement);
-            errorIndicatorElement = null;
+            ErrorUtil.setErrorLevelStyle(errorIndicatorElement,
+                    StyleConstants.STYLE_NAME_ERROR_INDICATOR,
+                    owner.getState().errorLevel);
+        } else {
+            setErrorIndicatorElementVisible(false);
         }
 
         return (wasPlacedAfterComponent != placedAfterComponent);
@@ -322,6 +319,14 @@ public class VCaption extends HTML {
     public boolean updateCaptionWithoutOwner(String caption, boolean disabled,
             boolean hasDescription, boolean hasError, String iconURL,
             String iconAltText) {
+        return updateCaptionWithoutOwner(caption, disabled, hasDescription,
+                hasError, null, iconURL, iconAltText);
+    }
+
+    @Deprecated
+    public boolean updateCaptionWithoutOwner(String caption, boolean disabled,
+            boolean hasDescription, boolean hasError, ErrorLevel errorLevel,
+            String iconURL, String iconAltText) {
         boolean wasPlacedAfterComponent = placedAfterComponent;
 
         // Caption is placed after component unless there is some part which
@@ -401,19 +406,11 @@ public class VCaption extends HTML {
         }
 
         if (hasError) {
-            if (errorIndicatorElement == null) {
-                errorIndicatorElement = DOM.createDiv();
-                DOM.setInnerHTML(errorIndicatorElement, " ");
-                DOM.setElementProperty(errorIndicatorElement, "className",
-                        "v-errorindicator");
-
-                DOM.insertChild(getElement(), errorIndicatorElement,
-                        getInsertPosition(InsertPosition.ERROR));
-            }
-        } else if (errorIndicatorElement != null) {
-            // Remove existing
-            getElement().removeChild(errorIndicatorElement);
-            errorIndicatorElement = null;
+            setErrorIndicatorElementVisible(true);
+            ErrorUtil.setErrorLevelStyle(errorIndicatorElement,
+                    StyleConstants.STYLE_NAME_ERROR_INDICATOR, errorLevel);
+        } else {
+            setErrorIndicatorElementVisible(false);
         }
 
         return (wasPlacedAfterComponent != placedAfterComponent);
@@ -775,4 +772,23 @@ public class VCaption extends HTML {
     private static Logger getLogger() {
         return Logger.getLogger(VCaption.class.getName());
     }
+
+    @Override
+    public Element getErrorIndicatorElement() {
+        return errorIndicatorElement;
+    }
+
+    @Override
+    public void setErrorIndicatorElementVisible(boolean visible) {
+        if (visible) {
+            if (errorIndicatorElement == null) {
+                errorIndicatorElement = ErrorUtil.createErrorIndicatorElement();
+                DOM.insertChild(getElement(), errorIndicatorElement,
+                        getInsertPosition(InsertPosition.ERROR));
+            }
+        } else if (errorIndicatorElement != null) {
+            getElement().removeChild(errorIndicatorElement);
+            errorIndicatorElement = null;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/VErrorMessage.java b/client/src/main/java/com/vaadin/client/VErrorMessage.java
index 0baa1baff1..7caffa1275 100644
--- a/client/src/main/java/com/vaadin/client/VErrorMessage.java
+++ b/client/src/main/java/com/vaadin/client/VErrorMessage.java
@@ -22,6 +22,8 @@ import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.client.ui.VOverlay;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
+import com.vaadin.shared.ui.ErrorLevel;
 
 public class VErrorMessage extends FlowPanel {
     public static final String CLASSNAME = "v-errormessage";
@@ -58,6 +60,18 @@ public class VErrorMessage extends FlowPanel {
     }
 
     /**
+     * Sets the correct error level style name for the error message and removes
+     * all previous style names.
+     *
+     * @param errorLevel
+     *         error level
+     * @since
+     */
+    public void updateErrorLevel(ErrorLevel errorLevel) {
+        ErrorUtil.setErrorLevelStyle(getStyleElement(), CLASSNAME, errorLevel);
+    }
+
+    /**
      * Shows this error message next to given element.
      *
      * @param indicatorElement
diff --git a/client/src/main/java/com/vaadin/client/VTooltip.java b/client/src/main/java/com/vaadin/client/VTooltip.java
index 74da680c66..84647abf9a 100644
--- a/client/src/main/java/com/vaadin/client/VTooltip.java
+++ b/client/src/main/java/com/vaadin/client/VTooltip.java
@@ -138,6 +138,7 @@ public class VTooltip extends VOverlay {
                 && !info.getErrorMessage().isEmpty()) {
             em.setVisible(true);
             em.updateMessage(info.getErrorMessage());
+            em.updateErrorLevel(info.getErrorLevel());
         } else {
             em.setVisible(false);
         }
@@ -459,6 +460,7 @@ public class VTooltip extends VOverlay {
     @Override
     public void hide() {
         em.updateMessage("");
+        em.updateErrorLevel(null);
         description.setHTML("");
 
         updatePosition(null, true);
diff --git a/client/src/main/java/com/vaadin/client/WidgetUtil.java b/client/src/main/java/com/vaadin/client/WidgetUtil.java
index 0aced86b03..fed9320edc 100644
--- a/client/src/main/java/com/vaadin/client/WidgetUtil.java
+++ b/client/src/main/java/com/vaadin/client/WidgetUtil.java
@@ -44,6 +44,7 @@ import com.google.gwt.user.client.EventListener;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.shared.ui.ErrorLevel;
 import com.vaadin.shared.util.SharedUtil;
 
 /**
@@ -790,7 +791,7 @@ public class WidgetUtil {
             com.google.gwt.dom.client.Element el, String p)
     /*-{
         try {
-    
+
         if (el.currentStyle) {
             // IE
             return el.currentStyle[p];
@@ -805,7 +806,7 @@ public class WidgetUtil {
         } catch (e) {
             return "";
         }
-    
+
      }-*/;
 
     /**
@@ -819,7 +820,7 @@ public class WidgetUtil {
         try {
             el.focus();
         } catch (e) {
-    
+
         }
     }-*/;
 
@@ -1172,7 +1173,7 @@ public class WidgetUtil {
        if ($wnd.document.activeElement) {
            return $wnd.document.activeElement;
        }
-    
+
        return null;
      }-*/;
 
@@ -1243,11 +1244,11 @@ public class WidgetUtil {
     /*-{
         var top = elem.offsetTop;
         var height = elem.offsetHeight;
-    
+
         if (elem.parentNode != elem.offsetParent) {
           top -= elem.parentNode.offsetTop;
         }
-    
+
         var cur = elem.parentNode;
         while (cur && (cur.nodeType == 1)) {
           if (top < cur.scrollTop) {
@@ -1256,12 +1257,12 @@ public class WidgetUtil {
           if (top + height > cur.scrollTop + cur.clientHeight) {
             cur.scrollTop = (top + height) - cur.clientHeight;
           }
-    
+
           var offsetTop = cur.offsetTop;
           if (cur.parentNode != cur.offsetParent) {
             offsetTop -= cur.parentNode.offsetTop;
           }
-    
+
           top += offsetTop - cur.scrollTop;
           cur = cur.parentNode;
         }
@@ -1710,7 +1711,7 @@ public class WidgetUtil {
             }
             var heightWithoutBorder = cloneElement.offsetHeight;
             parentElement.removeChild(cloneElement);
-    
+
             return heightWithBorder - heightWithoutBorder;
         }
     }-*/;
@@ -1866,4 +1867,48 @@ public class WidgetUtil {
         int relativeTop = element.getAbsoluteTop() - Window.getScrollTop();
         return WidgetUtil.getTouchOrMouseClientY(event) - relativeTop;
     }
+
+    /**
+     * Utility methods for displaying error message on components.
+     *
+     * @since 8.2
+     */
+    public static class ErrorUtil {
+
+        /**
+         * Sets the error level style name for the given element and removes all
+         * previously applied error level style names. The style name has the
+         * {@code prefix-errorLevel} format.
+         *
+         * @param element
+         *         element to apply the style name to
+         * @param prefix
+         *         part of the style name before the error level string
+         * @param errorLevel
+         *         error level for which the style will be applied
+         */
+        public static void setErrorLevelStyle(Element element, String prefix,
+                ErrorLevel errorLevel) {
+            for (ErrorLevel errorLevelValue : ErrorLevel.values()) {
+                String className =
+                        prefix + "-" + errorLevelValue.toString().toLowerCase();
+                if (errorLevel == errorLevelValue) {
+                    element.addClassName(className);
+                } else {
+                    element.removeClassName(className);
+                }
+            }
+        }
+
+        /**
+         * Creates an element to use by widgets as an error indicator.
+         *
+         * @return the error indicator element
+         */
+        public static Element createErrorIndicatorElement() {
+            Element indicator = DOM.createSpan();
+            indicator.setClassName(StyleConstants.STYLE_NAME_ERROR_INDICATOR);
+            return indicator;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/AbstractComponentConnector.java b/client/src/main/java/com/vaadin/client/ui/AbstractComponentConnector.java
index 7ce3e5c9b7..d3b595b55a 100644
--- a/client/src/main/java/com/vaadin/client/ui/AbstractComponentConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/AbstractComponentConnector.java
@@ -46,6 +46,7 @@ import com.vaadin.client.UIDL;
 import com.vaadin.client.Util;
 import com.vaadin.client.VConsole;
 import com.vaadin.client.WidgetUtil;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.annotations.OnStateChange;
 import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.client.extensions.DragSourceExtensionConnector;
@@ -489,6 +490,27 @@ public abstract class AbstractComponentConnector extends AbstractConnector
         Profiler.leave("AbstractComponentConnector.onStateChanged");
     }
 
+    @OnStateChange({"errorMessage", "errorLevel"})
+    private void setErrorLevel() {
+        // Add or remove the widget's error level style name
+        ErrorUtil.setErrorLevelStyle(getWidget().getElement(),
+                getWidget().getStylePrimaryName() + StyleConstants.ERROR_EXT,
+                getState().errorLevel);
+
+        // Add or remove error indicator element
+        if (getWidget() instanceof HasErrorIndicatorElement) {
+            HasErrorIndicatorElement widget = (HasErrorIndicatorElement) getWidget();
+            if (getState().errorMessage != null) {
+                widget.setErrorIndicatorElementVisible(true);
+                ErrorUtil.setErrorLevelStyle(widget.getErrorIndicatorElement(),
+                        StyleConstants.STYLE_NAME_ERROR_INDICATOR,
+                        getState().errorLevel);
+            } else {
+                widget.setErrorIndicatorElementVisible(false);
+            }
+        }
+    }
+
     @Override
     public void setWidgetEnabled(boolean widgetEnabled) {
         // add or remove v-disabled style name from the widget
@@ -764,7 +786,8 @@ public abstract class AbstractComponentConnector extends AbstractConnector
     @Override
     public TooltipInfo getTooltipInfo(Element element) {
         return new TooltipInfo(getState().description,
-                getState().descriptionContentMode, getState().errorMessage);
+                getState().descriptionContentMode, getState().errorMessage,
+                null, getState().errorLevel);
     }
 
     @Override
diff --git a/client/src/main/java/com/vaadin/client/ui/HasErrorIndicatorElement.java b/client/src/main/java/com/vaadin/client/ui/HasErrorIndicatorElement.java
new file mode 100644
index 0000000000..8ee0e5e757
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/HasErrorIndicatorElement.java
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui;
+
+import com.google.gwt.dom.client.Element;
+
+/**
+ * Implemented by widgets supporting an error indicator.
+ *
+ * @since 8.2
+ */
+public interface HasErrorIndicatorElement {
+
+    /**
+     * Gets the error indicator element.
+     *
+     * @return the error indicator element
+     */
+    Element getErrorIndicatorElement();
+
+    /**
+     * Sets the visibility of the error indicator element.
+     *
+     * @param visible
+     *         {@code true} to show the error indicator element, {@code false}
+     *         to hide it
+     */
+    void setErrorIndicatorElementVisible(boolean visible);
+}
diff --git a/client/src/main/java/com/vaadin/client/ui/VAccordion.java b/client/src/main/java/com/vaadin/client/ui/VAccordion.java
index 16c16935d0..642c647a62 100644
--- a/client/src/main/java/com/vaadin/client/ui/VAccordion.java
+++ b/client/src/main/java/com/vaadin/client/ui/VAccordion.java
@@ -364,8 +364,10 @@ public class VAccordion extends VTabsheetBase {
             caption.updateCaptionWithoutOwner(tabState.caption,
                     !tabState.enabled, hasAttribute(tabState.description),
                     hasAttribute(tabState.componentError),
+                    tabState.componentErrorLevel,
                     connector.getResourceUrl(
-                            ComponentConstants.ICON_RESOURCE + tabState.key));
+                            ComponentConstants.ICON_RESOURCE + tabState.key),
+                    tabState.iconAltText);
         }
 
         private boolean hasAttribute(String string) {
diff --git a/client/src/main/java/com/vaadin/client/ui/VButton.java b/client/src/main/java/com/vaadin/client/ui/VButton.java
index 0e738032b5..725931008e 100644
--- a/client/src/main/java/com/vaadin/client/ui/VButton.java
+++ b/client/src/main/java/com/vaadin/client/ui/VButton.java
@@ -30,8 +30,10 @@ import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.Util;
 import com.vaadin.client.WidgetUtil;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 
-public class VButton extends FocusWidget implements ClickHandler {
+public class VButton extends FocusWidget implements ClickHandler,
+        HasErrorIndicatorElement {
 
     public static final String CLASSNAME = "v-button";
     private static final String CLASSNAME_PRESSED = "v-pressed";
@@ -48,7 +50,7 @@ public class VButton extends FocusWidget implements ClickHandler {
     public final Element wrapper = DOM.createSpan();
 
     /** For internal use only. May be removed or replaced in the future. */
-    public Element errorIndicatorElement;
+    private Element errorIndicatorElement;
 
     /** For internal use only. May be removed or replaced in the future. */
     public final Element captionElement = DOM.createSpan();
@@ -481,4 +483,21 @@ public class VButton extends FocusWidget implements ClickHandler {
         return ret;
     }-*/;
 
+    @Override
+    public Element getErrorIndicatorElement() {
+        return errorIndicatorElement;
+    }
+
+    @Override
+    public void setErrorIndicatorElementVisible(boolean visible) {
+        if (visible) {
+            if (errorIndicatorElement == null) {
+                errorIndicatorElement = ErrorUtil.createErrorIndicatorElement();
+                wrapper.insertFirst(errorIndicatorElement);
+            }
+        } else if (errorIndicatorElement != null) {
+            wrapper.removeChild(errorIndicatorElement);
+            errorIndicatorElement = null;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/VCheckBox.java b/client/src/main/java/com/vaadin/client/ui/VCheckBox.java
index b2f78dce31..18140c203d 100644
--- a/client/src/main/java/com/vaadin/client/ui/VCheckBox.java
+++ b/client/src/main/java/com/vaadin/client/ui/VCheckBox.java
@@ -25,12 +25,14 @@ import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.Util;
 import com.vaadin.client.VTooltip;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.ui.aria.AriaHelper;
 import com.vaadin.client.ui.aria.HandlesAriaInvalid;
 import com.vaadin.client.ui.aria.HandlesAriaRequired;
 
 public class VCheckBox extends com.google.gwt.user.client.ui.CheckBox
-        implements Field, HandlesAriaInvalid, HandlesAriaRequired {
+        implements Field, HandlesAriaInvalid, HandlesAriaRequired,
+        HasErrorIndicatorElement {
 
     public static final String CLASSNAME = "v-checkbox";
 
@@ -41,7 +43,7 @@ public class VCheckBox extends com.google.gwt.user.client.ui.CheckBox
     public ApplicationConnection client;
 
     /** For internal use only. May be removed or replaced in the future. */
-    public Element errorIndicatorElement;
+    private Element errorIndicatorElement;
 
     /** For internal use only. May be removed or replaced in the future. */
     public Icon icon;
@@ -101,4 +103,24 @@ public class VCheckBox extends com.google.gwt.user.client.ui.CheckBox
     public void setAriaInvalid(boolean invalid) {
         AriaHelper.handleInputInvalid(getCheckBoxElement(), invalid);
     }
+
+    @Override
+    public Element getErrorIndicatorElement() {
+        return errorIndicatorElement;
+    }
+
+    @Override
+    public void setErrorIndicatorElementVisible(boolean visible) {
+        if (visible) {
+            if (errorIndicatorElement == null) {
+                errorIndicatorElement = ErrorUtil.createErrorIndicatorElement();
+                getElement().appendChild(errorIndicatorElement);
+                DOM.sinkEvents(errorIndicatorElement,
+                        VTooltip.TOOLTIP_EVENTS | Event.ONCLICK);
+            }
+        } else if (errorIndicatorElement != null) {
+            getElement().removeChild(errorIndicatorElement);
+            errorIndicatorElement = null;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/VFormLayout.java b/client/src/main/java/com/vaadin/client/ui/VFormLayout.java
index a8a43a2d8d..5704dc497d 100644
--- a/client/src/main/java/com/vaadin/client/ui/VFormLayout.java
+++ b/client/src/main/java/com/vaadin/client/ui/VFormLayout.java
@@ -34,10 +34,12 @@ import com.vaadin.client.ComponentConnector;
 import com.vaadin.client.Focusable;
 import com.vaadin.client.StyleConstants;
 import com.vaadin.client.VTooltip;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.ui.aria.AriaHelper;
 import com.vaadin.shared.AbstractComponentState;
 import com.vaadin.shared.ComponentConstants;
 import com.vaadin.shared.ui.ComponentStateUtil;
+import com.vaadin.shared.ui.ErrorLevel;
 import com.vaadin.shared.ui.MarginInfo;
 
 /**
@@ -201,10 +203,10 @@ public class VFormLayout extends SimplePanel {
         }
 
         public void updateError(Widget widget, String errorMessage,
-                boolean hideErrors) {
+                ErrorLevel errorLevel, boolean hideErrors) {
             final ErrorFlag e = widgetToError.get(widget);
             if (e != null) {
-                e.updateError(errorMessage, hideErrors);
+                e.updateError(errorMessage, errorLevel, hideErrors);
             }
 
         }
@@ -340,7 +342,7 @@ public class VFormLayout extends SimplePanel {
     }
 
     /** For internal use only. May be removed or replaced in the future. */
-    public class ErrorFlag extends HTML {
+    public class ErrorFlag extends HTML implements HasErrorIndicatorElement {
         private static final String CLASSNAME = VFormLayout.CLASSNAME
                 + "-error-indicator";
         Element errorIndicatorElement;
@@ -361,7 +363,8 @@ public class VFormLayout extends SimplePanel {
             return owner;
         }
 
-        public void updateError(String errorMessage, boolean hideErrors) {
+        public void updateError(String errorMessage, ErrorLevel errorLevel,
+                boolean hideErrors) {
             boolean showError = null != errorMessage;
             if (hideErrors) {
                 showError = false;
@@ -370,24 +373,37 @@ public class VFormLayout extends SimplePanel {
             AriaHelper.handleInputInvalid(owner.getWidget(), showError);
 
             if (showError) {
-                if (errorIndicatorElement == null) {
-                    errorIndicatorElement = DOM.createDiv();
-                    DOM.setInnerHTML(errorIndicatorElement, "&nbsp;");
-                    DOM.setElementProperty(errorIndicatorElement, "className",
-                            "v-errorindicator");
-                    DOM.appendChild(getElement(), errorIndicatorElement);
+                setErrorIndicatorElementVisible(true);
 
-                    // Hide the error indicator from screen reader, as this
-                    // information is set directly at the input field
-                    Roles.getFormRole()
-                            .setAriaHiddenState(errorIndicatorElement, true);
-                }
+                // Hide the error indicator from screen reader, as this
+                // information is set directly at the input field
+                Roles.getFormRole()
+                        .setAriaHiddenState(errorIndicatorElement, true);
+
+                ErrorUtil.setErrorLevelStyle(errorIndicatorElement,
+                        StyleConstants.STYLE_NAME_ERROR_INDICATOR, errorLevel);
+            } else {
+                setErrorIndicatorElementVisible(false);
+            }
+        }
+
+        @Override
+        public Element getErrorIndicatorElement() {
+            return errorIndicatorElement;
+        }
 
+        @Override
+        public void setErrorIndicatorElementVisible(boolean visible) {
+            if (visible) {
+                if (errorIndicatorElement == null) {
+                    errorIndicatorElement = ErrorUtil
+                            .createErrorIndicatorElement();
+                    getElement().appendChild(errorIndicatorElement);
+                }
             } else if (errorIndicatorElement != null) {
-                DOM.removeChild(getElement(), errorIndicatorElement);
+                getElement().removeChild(errorIndicatorElement);
                 errorIndicatorElement = null;
             }
         }
-
     }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/VLink.java b/client/src/main/java/com/vaadin/client/ui/VLink.java
index 84aac0f17e..28e262b110 100644
--- a/client/src/main/java/com/vaadin/client/ui/VLink.java
+++ b/client/src/main/java/com/vaadin/client/ui/VLink.java
@@ -25,9 +25,11 @@ import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.HasEnabled;
 import com.vaadin.client.Util;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.shared.ui.BorderStyle;
 
-public class VLink extends HTML implements ClickHandler, HasEnabled {
+public class VLink extends HTML implements ClickHandler, HasEnabled,
+        HasErrorIndicatorElement {
 
     public static final String CLASSNAME = "v-link";
 
@@ -59,7 +61,7 @@ public class VLink extends HTML implements ClickHandler, HasEnabled {
     public int targetHeight;
 
     /** For internal use only. May be removed or replaced in the future. */
-    public Element errorIndicatorElement;
+    private Element errorIndicatorElement;
 
     /** For internal use only. May be removed or replaced in the future. */
     public final Element anchor = DOM.createAnchor();
@@ -145,4 +147,21 @@ public class VLink extends HTML implements ClickHandler, HasEnabled {
         this.enabled = enabled;
     }
 
+    @Override
+    public Element getErrorIndicatorElement() {
+        return errorIndicatorElement;
+    }
+
+    @Override
+    public void setErrorIndicatorElementVisible(boolean visible) {
+        if (visible) {
+            if (errorIndicatorElement == null) {
+                errorIndicatorElement = ErrorUtil.createErrorIndicatorElement();
+                getElement().insertFirst(errorIndicatorElement);
+            }
+        } else if (errorIndicatorElement != null) {
+            getElement().removeChild(errorIndicatorElement);
+            errorIndicatorElement = null;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/VNativeButton.java b/client/src/main/java/com/vaadin/client/ui/VNativeButton.java
index ec95a28755..db8e820b82 100644
--- a/client/src/main/java/com/vaadin/client/ui/VNativeButton.java
+++ b/client/src/main/java/com/vaadin/client/ui/VNativeButton.java
@@ -27,10 +27,12 @@ import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.MouseEventDetailsBuilder;
 import com.vaadin.client.StyleConstants;
 import com.vaadin.client.Util;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.shared.MouseEventDetails;
 import com.vaadin.shared.ui.button.ButtonServerRpc;
 
-public class VNativeButton extends Button implements ClickHandler {
+public class VNativeButton extends Button implements ClickHandler,
+        HasErrorIndicatorElement {
 
     public static final String CLASSNAME = "v-nativebutton";
 
@@ -44,7 +46,7 @@ public class VNativeButton extends Button implements ClickHandler {
     public ButtonServerRpc buttonRpcProxy;
 
     /** For internal use only. May be removed or replaced in the future. */
-    public Element errorIndicatorElement;
+    private Element errorIndicatorElement;
 
     /** For internal use only. May be removed or replaced in the future. */
     public final Element captionElement = DOM.createSpan();
@@ -159,4 +161,22 @@ public class VNativeButton extends Button implements ClickHandler {
         clickPending = false;
     }
 
+    @Override
+    public Element getErrorIndicatorElement() {
+        return errorIndicatorElement;
+    }
+
+    @Override
+    public void setErrorIndicatorElementVisible(boolean visible) {
+        if (visible) {
+            if (errorIndicatorElement == null) {
+                errorIndicatorElement = ErrorUtil.createErrorIndicatorElement();
+                getElement()
+                        .insertBefore(errorIndicatorElement, captionElement);
+            }
+        } else if (errorIndicatorElement != null) {
+            getElement().removeChild(errorIndicatorElement);
+            errorIndicatorElement = null;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/VPanel.java b/client/src/main/java/com/vaadin/client/ui/VPanel.java
index fa4a939a95..bf41ef1f9e 100644
--- a/client/src/main/java/com/vaadin/client/ui/VPanel.java
+++ b/client/src/main/java/com/vaadin/client/ui/VPanel.java
@@ -24,11 +24,12 @@ import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.ui.SimplePanel;
 import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.Focusable;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.ui.ShortcutActionHandler.ShortcutActionHandlerOwner;
 import com.vaadin.client.ui.TouchScrollDelegate.TouchScrollHandler;
 
-public class VPanel extends SimplePanel
-        implements ShortcutActionHandlerOwner, Focusable {
+public class VPanel extends SimplePanel implements ShortcutActionHandlerOwner,
+        Focusable, HasErrorIndicatorElement {
 
     public static final String CLASSNAME = "v-panel";
 
@@ -134,23 +135,6 @@ public class VPanel extends SimplePanel
     }
 
     /** For internal use only. May be removed or replaced in the future. */
-    public void setErrorIndicatorVisible(boolean showError) {
-        if (showError) {
-            if (errorIndicatorElement == null) {
-                errorIndicatorElement = DOM.createSpan();
-                DOM.setElementProperty(errorIndicatorElement, "className",
-                        "v-errorindicator");
-                DOM.sinkEvents(errorIndicatorElement, Event.MOUSEEVENTS);
-                sinkEvents(Event.MOUSEEVENTS);
-            }
-            DOM.insertBefore(captionNode, errorIndicatorElement, captionText);
-        } else if (errorIndicatorElement != null) {
-            DOM.removeChild(captionNode, errorIndicatorElement);
-            errorIndicatorElement = null;
-        }
-    }
-
-    /** For internal use only. May be removed or replaced in the future. */
     public void setIconUri(String iconUri, ApplicationConnection client) {
         if (icon != null) {
             captionNode.removeChild(icon.getElement());
@@ -201,4 +185,24 @@ public class VPanel extends SimplePanel
         }
         touchScrollHandler.addElement(contentNode);
     }
+
+    @Override
+    public Element getErrorIndicatorElement() {
+        return errorIndicatorElement;
+    }
+
+    @Override
+    public void setErrorIndicatorElementVisible(boolean visible) {
+        if (visible) {
+            if (errorIndicatorElement == null) {
+                errorIndicatorElement = ErrorUtil.createErrorIndicatorElement();
+                DOM.sinkEvents(errorIndicatorElement, Event.MOUSEEVENTS);
+                sinkEvents(Event.MOUSEEVENTS);
+                captionNode.insertBefore(errorIndicatorElement, captionText);
+            }
+        } else if (errorIndicatorElement != null){
+            captionNode.removeChild(errorIndicatorElement);
+            errorIndicatorElement = null;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/VTabsheet.java b/client/src/main/java/com/vaadin/client/ui/VTabsheet.java
index 52b48899dd..44814f9e0a 100644
--- a/client/src/main/java/com/vaadin/client/ui/VTabsheet.java
+++ b/client/src/main/java/com/vaadin/client/ui/VTabsheet.java
@@ -340,7 +340,8 @@ public class VTabsheet extends VTabsheetBase
                     || tabState.componentError != null) {
                 setTooltipInfo(new TooltipInfo(tabState.description,
                         tabState.descriptionContentMode,
-                        tabState.componentError, this));
+                        tabState.componentError, this,
+                        tabState.componentErrorLevel));
             } else {
                 setTooltipInfo(null);
             }
@@ -352,6 +353,7 @@ public class VTabsheet extends VTabsheetBase
             boolean ret = updateCaptionWithoutOwner(captionString,
                     !tabState.enabled, hasAttribute(tabState.description),
                     hasAttribute(tabState.componentError),
+                    tabState.componentErrorLevel,
                     tab.getTabsheet().connector.getResourceUrl(
                             ComponentConstants.ICON_RESOURCE + tabState.key),
                     tabState.iconAltText);
diff --git a/client/src/main/java/com/vaadin/client/ui/button/ButtonConnector.java b/client/src/main/java/com/vaadin/client/ui/button/ButtonConnector.java
index b0d17465bb..eac2ffd11e 100644
--- a/client/src/main/java/com/vaadin/client/ui/button/ButtonConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/button/ButtonConnector.java
@@ -20,7 +20,9 @@ import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.user.client.DOM;
 import com.vaadin.client.MouseEventDetailsBuilder;
+import com.vaadin.client.StyleConstants;
 import com.vaadin.client.VCaption;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.annotations.OnStateChange;
 import com.vaadin.client.ui.AbstractComponentConnector;
 import com.vaadin.client.ui.ConnectorFocusAndBlurHandler;
@@ -50,22 +52,6 @@ public class ButtonConnector extends AbstractComponentConnector
         ConnectorFocusAndBlurHandler.addHandlers(this);
     }
 
-    @OnStateChange("errorMessage")
-    void setErrorMessage() {
-        if (null != getState().errorMessage) {
-            if (getWidget().errorIndicatorElement == null) {
-                getWidget().errorIndicatorElement = DOM.createSpan();
-                getWidget().errorIndicatorElement
-                        .setClassName("v-errorindicator");
-            }
-            getWidget().wrapper.insertFirst(getWidget().errorIndicatorElement);
-
-        } else if (getWidget().errorIndicatorElement != null) {
-            getWidget().wrapper.removeChild(getWidget().errorIndicatorElement);
-            getWidget().errorIndicatorElement = null;
-        }
-    }
-
     @OnStateChange("resources")
     void onResourceChange() {
         if (getWidget().icon != null) {
diff --git a/client/src/main/java/com/vaadin/client/ui/checkbox/CheckBoxConnector.java b/client/src/main/java/com/vaadin/client/ui/checkbox/CheckBoxConnector.java
index cf39e5ee21..c02607790f 100644
--- a/client/src/main/java/com/vaadin/client/ui/checkbox/CheckBoxConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/checkbox/CheckBoxConnector.java
@@ -21,8 +21,10 @@ import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Event;
 import com.vaadin.client.MouseEventDetailsBuilder;
+import com.vaadin.client.StyleConstants;
 import com.vaadin.client.VCaption;
 import com.vaadin.client.VTooltip;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.annotations.OnStateChange;
 import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.client.ui.AbstractFieldConnector;
@@ -66,27 +68,7 @@ public class CheckBoxConnector extends AbstractFieldConnector
     public void onStateChanged(StateChangeEvent stateChangeEvent) {
         super.onStateChanged(stateChangeEvent);
 
-        if (null != getState().errorMessage) {
-            getWidget().setAriaInvalid(true);
-
-            if (getWidget().errorIndicatorElement == null) {
-                getWidget().errorIndicatorElement = DOM.createSpan();
-                getWidget().errorIndicatorElement.setInnerHTML("&nbsp;");
-                DOM.setElementProperty(getWidget().errorIndicatorElement,
-                        "className", "v-errorindicator");
-                DOM.appendChild(getWidget().getElement(),
-                        getWidget().errorIndicatorElement);
-                DOM.sinkEvents(getWidget().errorIndicatorElement,
-                        VTooltip.TOOLTIP_EVENTS | Event.ONCLICK);
-            } else {
-                getWidget().errorIndicatorElement.getStyle().clearDisplay();
-            }
-        } else if (getWidget().errorIndicatorElement != null) {
-            getWidget().errorIndicatorElement.getStyle()
-                    .setDisplay(Display.NONE);
-
-            getWidget().setAriaInvalid(false);
-        }
+        getWidget().setAriaInvalid(getState().errorMessage != null);
 
         getWidget().setAriaRequired(isRequiredIndicatorVisible());
         if (isReadOnly()) {
diff --git a/client/src/main/java/com/vaadin/client/ui/formlayout/FormLayoutConnector.java b/client/src/main/java/com/vaadin/client/ui/formlayout/FormLayoutConnector.java
index ba1d79c776..ea9fd57c26 100644
--- a/client/src/main/java/com/vaadin/client/ui/formlayout/FormLayoutConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/formlayout/FormLayoutConnector.java
@@ -254,7 +254,8 @@ public class FormLayoutConnector extends AbstractLayoutConnector
         }
 
         getWidget().table.updateError(component.getWidget(),
-                component.getState().errorMessage, hideErrors);
+                component.getState().errorMessage,
+                component.getState().errorLevel, hideErrors);
     }
 
     @Override
diff --git a/client/src/main/java/com/vaadin/client/ui/link/LinkConnector.java b/client/src/main/java/com/vaadin/client/ui/link/LinkConnector.java
index e110bbb935..edc5449127 100644
--- a/client/src/main/java/com/vaadin/client/ui/link/LinkConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/link/LinkConnector.java
@@ -18,7 +18,9 @@ package com.vaadin.client.ui.link;
 
 import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.user.client.DOM;
+import com.vaadin.client.StyleConstants;
 import com.vaadin.client.VCaption;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.client.ui.AbstractComponentConnector;
 import com.vaadin.client.ui.Icon;
@@ -70,20 +72,6 @@ public class LinkConnector extends AbstractComponentConnector {
         // Set link caption
         VCaption.setCaptionText(getWidget().captionElement, getState());
 
-        // handle error
-        if (null != getState().errorMessage) {
-            if (getWidget().errorIndicatorElement == null) {
-                getWidget().errorIndicatorElement = DOM.createDiv();
-                DOM.setElementProperty(getWidget().errorIndicatorElement,
-                        "className", "v-errorindicator");
-            }
-            DOM.insertChild(getWidget().getElement(),
-                    getWidget().errorIndicatorElement, 0);
-        } else if (getWidget().errorIndicatorElement != null) {
-            getWidget().errorIndicatorElement.getStyle()
-                    .setDisplay(Display.NONE);
-        }
-
         if (getWidget().icon != null) {
             getWidget().anchor.removeChild(getWidget().icon.getElement());
             getWidget().icon = null;
diff --git a/client/src/main/java/com/vaadin/client/ui/nativebutton/NativeButtonConnector.java b/client/src/main/java/com/vaadin/client/ui/nativebutton/NativeButtonConnector.java
index 18db2cf424..5560e9825c 100644
--- a/client/src/main/java/com/vaadin/client/ui/nativebutton/NativeButtonConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/nativebutton/NativeButtonConnector.java
@@ -16,7 +16,9 @@
 package com.vaadin.client.ui.nativebutton;
 
 import com.google.gwt.user.client.DOM;
+import com.vaadin.client.StyleConstants;
 import com.vaadin.client.VCaption;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.client.ui.AbstractComponentConnector;
 import com.vaadin.client.ui.ConnectorFocusAndBlurHandler;
@@ -55,23 +57,6 @@ public class NativeButtonConnector extends AbstractComponentConnector {
         // Set text
         VCaption.setCaptionText(getWidget(), getState());
 
-        // handle error
-        if (null != getState().errorMessage) {
-            if (getWidget().errorIndicatorElement == null) {
-                getWidget().errorIndicatorElement = DOM.createSpan();
-                getWidget().errorIndicatorElement
-                        .setClassName("v-errorindicator");
-            }
-            getWidget().getElement().insertBefore(
-                    getWidget().errorIndicatorElement,
-                    getWidget().captionElement);
-
-        } else if (getWidget().errorIndicatorElement != null) {
-            getWidget().getElement()
-                    .removeChild(getWidget().errorIndicatorElement);
-            getWidget().errorIndicatorElement = null;
-        }
-
         if (getWidget().icon != null) {
             getWidget().getElement().removeChild(getWidget().icon.getElement());
             getWidget().icon = null;
diff --git a/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java b/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java
index 5ab5f5fcda..ee8438de22 100644
--- a/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/orderedlayout/AbstractOrderedLayoutConnector.java
@@ -275,8 +275,9 @@ public abstract class AbstractOrderedLayoutConnector
             slot.setCaptionResizeListener(null);
         }
 
-        slot.setCaption(caption, icon, styles, error, showError, required,
-                enabled, child.getState().captionAsHtml);
+        slot.setCaption(caption, icon, styles, error,
+                child.getState().errorLevel, showError, required, enabled,
+                child.getState().captionAsHtml);
 
         AriaHelper.handleInputRequired(child.getWidget(), required);
         AriaHelper.handleInputInvalid(child.getWidget(), showError);
diff --git a/client/src/main/java/com/vaadin/client/ui/orderedlayout/Slot.java b/client/src/main/java/com/vaadin/client/ui/orderedlayout/Slot.java
index d8e0544aaf..fb89972d04 100644
--- a/client/src/main/java/com/vaadin/client/ui/orderedlayout/Slot.java
+++ b/client/src/main/java/com/vaadin/client/ui/orderedlayout/Slot.java
@@ -30,16 +30,19 @@ import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.client.LayoutManager;
 import com.vaadin.client.StyleConstants;
 import com.vaadin.client.WidgetUtil;
+import com.vaadin.client.WidgetUtil.ErrorUtil;
 import com.vaadin.client.ui.FontIcon;
+import com.vaadin.client.ui.HasErrorIndicatorElement;
 import com.vaadin.client.ui.Icon;
 import com.vaadin.client.ui.ImageIcon;
 import com.vaadin.client.ui.layout.ElementResizeListener;
 import com.vaadin.shared.ui.AlignmentInfo;
+import com.vaadin.shared.ui.ErrorLevel;
 
 /**
  * Represents a slot which contains the actual widget in the layout.
  */
-public class Slot extends SimplePanel {
+public class Slot extends SimplePanel implements HasErrorIndicatorElement {
 
     private static final String ALIGN_CLASS_PREFIX = "v-align-";
 
@@ -493,6 +496,37 @@ public class Slot extends SimplePanel {
     public void setCaption(String captionText, Icon icon, List<String> styles,
             String error, boolean showError, boolean required, boolean enabled,
             boolean captionAsHtml) {
+        setCaption(captionText, icon, styles, error, null, showError, required,
+                enabled, captionAsHtml);
+    }
+
+    /**
+     * Set the caption of the slot
+     *
+     * @param captionText
+     *            The text of the caption
+     * @param icon
+     *            The icon
+     * @param styles
+     *            The style names
+     * @param error
+     *            The error message
+     * @param errorLevel
+     *            The error level
+     * @param showError
+     *            Should the error message be shown
+     * @param required
+     *            Is the (field) required
+     * @param enabled
+     *            Is the component enabled
+     * @param captionAsHtml
+     *            true if the caption should be rendered as HTML, false
+     *            otherwise
+     * @since 8.2
+     */
+    public void setCaption(String captionText, Icon icon, List<String> styles,
+            String error, ErrorLevel errorLevel, boolean showError,
+            boolean required, boolean enabled, boolean captionAsHtml) {
 
         // TODO place for optimization: check if any of these have changed
         // since last time, and only run those changes
@@ -583,14 +617,11 @@ public class Slot extends SimplePanel {
 
         // Error
         if (error != null && showError) {
-            if (errorIcon == null) {
-                errorIcon = DOM.createSpan();
-                errorIcon.setClassName("v-errorindicator");
-            }
-            caption.appendChild(errorIcon);
-        } else if (errorIcon != null) {
-            errorIcon.removeFromParent();
-            errorIcon = null;
+            setErrorIndicatorElementVisible(true);
+            ErrorUtil.setErrorLevelStyle(getErrorIndicatorElement(),
+                    StyleConstants.STYLE_NAME_ERROR_INDICATOR, errorLevel);
+        } else {
+            setErrorIndicatorElementVisible(false);
         }
 
         if (caption != null) {
@@ -799,4 +830,22 @@ public class Slot extends SimplePanel {
             return hasRelativeWidth();
         }
     }
+
+    @Override
+    public Element getErrorIndicatorElement() {
+        return errorIcon;
+    }
+
+    @Override
+    public void setErrorIndicatorElementVisible(boolean visible) {
+        if (visible) {
+            if (errorIcon == null) {
+                errorIcon = ErrorUtil.createErrorIndicatorElement();
+            }
+            caption.appendChild(errorIcon);
+        } else if (errorIcon != null) {
+            errorIcon.removeFromParent();
+            errorIcon = null;
+        }
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ui/panel/PanelConnector.java b/client/src/main/java/com/vaadin/client/ui/panel/PanelConnector.java
index 84ed73e537..25434e2701 100644
--- a/client/src/main/java/com/vaadin/client/ui/panel/PanelConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/panel/PanelConnector.java
@@ -143,8 +143,6 @@ public class PanelConnector extends AbstractSingleComponentContainerConnector
             getWidget().setIconUri(null, client);
         }
 
-        getWidget().setErrorIndicatorVisible(isErrorIndicatorVisible());
-
         // We may have actions attached to this panel
         if (uidl.getChildCount() > 0) {
             final int cnt = uidl.getChildCount();