Additional OUTLINED Type.

Fixed IE11 and Safari Issues (WIP)

Author: kevzlou7979

gwt-material/src/main/java/gwt/material/design/client/base/HasRawValue.java

@@ -0,0 +1,8 @@
+package gwt.material.design.client.base;
+
+public interface HasRawValue {
+
+    void setRawValue(String rawValue);
+
+    String getRawValue();
+}

gwt-material/src/main/java/gwt/material/design/client/constants/ButtonType.java

@@ -31,6 +31,7 @@ public enum ButtonType implements CssType {
     LINK(""),
     RAISED("btn"),
     FLAT("btn-flat"),
+    OUTLINED("btn btn-outlined"),
     FLOATING("btn-floating");
 
     private final String cssClass;

gwt-material/src/main/java/gwt/material/design/client/constants/ChipType.java

@@ -0,0 +1,48 @@
+/*
+ * #%L
+ * GwtMaterial
+ * %%
+ * Copyright (C) 2015 - 2017 GwtMaterialDesign
+ * %%
+ * 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.
+ * #L%
+ */
+package gwt.material.design.client.constants;
+
+import gwt.material.design.client.base.helper.EnumHelper;
+
+/**
+ * Types of Chip.<br>
+ *
+ * @author kevzlou7979
+ * @author Ben Dol
+ */
+public enum ChipType implements CssType {
+    DEFAULT(""),
+    OUTLINED("outlined");
+
+    private final String cssClass;
+
+    ChipType(final String cssClass) {
+        this.cssClass = cssClass;
+    }
+
+    @Override
+    public String getCssName() {
+        return cssClass;
+    }
+
+    public static ChipType fromStyleName(final String styleName) {
+        return EnumHelper.fromStyleName(styleName, ChipType.class, DEFAULT);
+    }
+}

gwt-material/src/main/java/gwt/material/design/client/ui/MaterialChip.java

@@ -26,12 +26,10 @@
 import com.google.gwt.event.logical.shared.HasCloseHandlers;
 import com.google.gwt.event.shared.HandlerRegistration;
 import com.google.gwt.resources.client.ImageResource;
+import com.google.gwt.safehtml.shared.SafeHtmlUtils;
 import com.google.gwt.user.client.ui.HasValue;
-import com.google.gwt.user.client.ui.Image;
-import gwt.material.design.client.base.AbstractValueWidget;
-import gwt.material.design.client.base.HasIcon;
-import gwt.material.design.client.base.HasImage;
-import gwt.material.design.client.base.HasLetter;
+import gwt.material.design.client.base.*;
+import gwt.material.design.client.base.mixin.CssTypeMixin;
 import gwt.material.design.client.base.mixin.ImageMixin;
 import gwt.material.design.client.base.mixin.LetterMixin;
 import gwt.material.design.client.constants.*;
@@ -62,14 +60,16 @@
  * @see <a href="https://material.io/guidelines/components/chips.html">Material Design Specification</a>
  */
 //@formatter:on
-public class MaterialChip extends AbstractValueWidget<String> implements HasImage, HasIcon, HasLetter, HasValue<String>, HasCloseHandlers {
+public class MaterialChip extends AbstractTextWidget implements HasImage, HasIcon, HasLetter,
+        HasValue<String>, HasCloseHandlers, HasType<ChipType> {
 
     private MaterialIcon icon = new MaterialIcon(IconType.CLOSE);
     private Span chipLabel = new Span();
     private MaterialImage image = new MaterialImage();
 
     private ImageMixin<MaterialImage> imageMixin;
     private LetterMixin<MaterialChip> letterMixin;
+    private CssTypeMixin<ChipType, MaterialChip> typeMixin;
 
     public MaterialChip() {
         super(Document.get().createDivElement(), CssName.CHIP);
@@ -132,7 +132,7 @@ public void setValue(String value, boolean fireEvents) {
 
     @Override
     public String getValue() {
-        return chipLabel.getElement().getInnerText();
+        return SafeHtmlUtils.fromString(chipLabel.getElement().getInnerText()).asString();
     }
 
     @Override
@@ -228,6 +228,16 @@ public void setLetterBackgroundColor(Color letterBackgroundColor) {
         getLetterMixin().setLetterBackgroundColor(letterBackgroundColor);
     }
 
+    @Override
+    public void setType(ChipType type) {
+        getTypeMixin().setType(type);
+    }
+
+    @Override
+    public ChipType getType() {
+        return getTypeMixin().getType();
+    }
+
     public MaterialImage getImage() {
         return image;
     }
@@ -258,4 +268,11 @@ protected ImageMixin<MaterialImage> getImageMixin() {
         }
         return imageMixin;
     }
+
+    public CssTypeMixin<ChipType, MaterialChip> getTypeMixin() {
+        if (typeMixin == null) {
+            typeMixin = new CssTypeMixin<>(this);
+        }
+        return typeMixin;
+    }
 }

gwt-material/src/main/java/gwt/material/design/client/ui/html/Code.java

@@ -40,6 +40,6 @@ public Code(final String text) {
 
     @Override
     public void setHTML(String html) {
-        this.getElement().setInnerHTML(CodeHelper.parseCode(html).asString());
+        this.getElement().setInnerHTML(html);
     }
 }

gwt-material/src/main/java/gwt/material/design/client/ui/html/Pre.java

@@ -41,6 +41,6 @@ public Pre(final String text) {
 
     @Override
     public void setHTML(String html) {
-        getElement().setInnerSafeHtml(SafeHtmlUtils.fromString(html));
+        getElement().setInnerHTML(html);
     }
 }

gwt-material/src/main/resources/gwt/material/design/public/css/overridecss.css

@@ -52,6 +52,7 @@ nav ul a span.badge {
 
 .side-nav .badge {
     float: right;
+    top: 22px;
 }
 
 .sideBarBadge {
@@ -231,6 +232,15 @@ i.disabled:hover {
     text-align: center;
 }
 
+/** Outlined Chips (MD2) **/
+.chip.outlined,
+.chip.outlined:hover,
+.chip.outlined:active,
+.chip.outlined:focus {
+    border: 1px solid #0000001e;
+    background-color: transparent;
+}
+
 /** Collapsible **/
 .collapsible-body {
     margin: 0;
@@ -361,6 +371,10 @@ table .gwt-CheckBox label {
     padding: 0 !important;
 }
 
+.picker .picker__select--year.browser-default {
+    width: 26%;
+}
+
 /** Dropdown **/
 ul.dropdown-content {
     max-height: 70vh !important;
@@ -424,6 +438,21 @@ ul.dropdown-content {
     box-shadow: 0 1px 0 0 #4CAF50 !important;
 }
 
+/** Outlined Button (MD2) **/
+button.btn-outlined,
+button.btn-outlined:hover,
+button.btn-outlined:focus,
+button.btn-outlined:active {
+    border: 1px solid #0000001e;
+    box-shadow: none;
+    background-color: white;
+    color: #000;
+}
+
+button.btn-outlined.disabled {
+    background-color: transparent !important;
+}
+
 /** Floating Action Button **/
 .horizontal.fixed-action-btn ul {
     left: auto;
@@ -496,6 +525,19 @@ footer.fixed {
     left: 0px;
 }
 
+.row .col.input-field {
+    min-height: 72px;
+    margin-bottom: 0px;
+}
+
+.row .col.input-field textarea {
+    margin-bottom: 4px;
+}
+
+.row .col.input-field input {
+    margin-bottom: 8px;
+}
+
 .row > .input-field label {
     left: 0.75rem !important;
 }
@@ -506,6 +548,11 @@ footer.fixed {
     }
 }
 
+/** IE Fixed for having the huge clear button **/
+.input-field input::-ms-clear {
+    display: none;
+}
+
 /** Autofill fixed layout **/
 input:-webkit-autofill + label {
     font-size: 0.8rem !important;
@@ -597,8 +644,11 @@ input:-webkit-autofill {
     padding-top: 18px;
 }
 
-.input-field.filled textarea {
+.input-field.filled textarea,
+.input-field.outlined textarea {
     padding-left: 12px;
+    width: calc(100% - 24px);
+    padding-right: 12px;
 }
 
 .input-field.filled input:focus {
@@ -639,16 +689,12 @@ input:-webkit-autofill {
     border: 1px solid rgba(0, 0, 0, 0.12);
 }
 
-.input-field.outlined textarea {
-    padding-left: 12px;
-}
-
 .input-field.outlined input.select-dropdown {
     padding-left: 12px;
 }
 
 .input-field.outlined .select-wrapper + label {
-    top: -12px;
+    top: -10px;
     background: white;
     padding-left: 4px;
     padding-right: 4px;
@@ -692,14 +738,12 @@ input:-webkit-autofill {
 .input-field.outlined input.valid.picker__input--active {
     border: 2px solid #4caf50;
     box-shadow: none;
-    margin-bottom: 8px;
 }
 
 .input-field.outlined .field-error-label,
 .input-field.outlined .field-success-label,
-.input-field.outlined .field-helper-label{
+.input-field.outlined .field-helper-label {
     margin-left: 14px;
-    margin-bottom: 12px;
 }
 
 .input-field.field-error.listbox-wrapper.outlined input.select-dropdown {
@@ -723,6 +767,32 @@ input:-webkit-autofill {
     transform: translateY(0);
 }
 
+.input-field .select-wrapper.gwt-ListBox .caret:before {
+    content: "";
+    position: absolute;
+    right: 8px;
+    bottom: 12px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 0 12px 12px;
+    border-color: transparent transparent #9c9c9c transparent;
+}
+
+.input-field.aligned-label .select-wrapper.gwt-ListBox .caret:before {
+    bottom: 26px;
+}
+
+.input-field .select-wrapper.gwt-ListBox .caret.disabled:before {
+    border-color: transparent transparent #c7c7c7 transparent;
+}
+
+.input-field .select-wrapper.gwt-ListBox .caret.disabled,
+.input-field .select-wrapper .caret {
+    color: transparent;
+    bottom: 0;
+}
+
 .input-field.listbox-wrapper {
     border-bottom: none !important;
     box-shadow: none !important;

gwt-material/src/main/resources/gwt/material/design/public/css/overridecss.min.css

@@ -73,6 +73,12 @@ public void testType() {
         widget.setType(ButtonType.FLOATING);
         assertEquals(ButtonType.FLOATING, widget.getType());
 
+        widget.setType(ButtonType.RAISED);
+        assertEquals(ButtonType.RAISED, widget.getType());
+
+        widget.setType(ButtonType.OUTLINED);
+        assertEquals(ButtonType.OUTLINED, widget.getType());
+
         // Standard
         // given
         attachWidget();
@@ -81,9 +87,15 @@ public void testType() {
         final Element element = widget.getElement();
         widget.setType(ButtonType.FLAT);
         assertTrue(element.hasClassName(ButtonType.FLAT.getCssName()));
+
         widget.setType(ButtonType.FLOATING);
         assertTrue(element.hasClassName(ButtonType.FLOATING.getCssName()));
-        assertFalse(element.hasClassName(ButtonType.FLAT.getCssName()));
+
+        widget.setType(ButtonType.RAISED);
+        assertTrue(element.hasClassName(ButtonType.RAISED.getCssName()));
+
+        widget.setType(ButtonType.OUTLINED);
+        assertTrue(element.hasClassName(ButtonType.OUTLINED.getCssName()));
     }
 
     public void testActivates() {