Hide button caption overflow in reindeer and valo. (#11864)

Change-Id: Iaeb9cd571dd4b7a37cdc89f9d291365aef96c9e1

diff --git a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
index 632340f228d4b5efd837ae41dcc8fdaf7a53f5cc..4809611442345b71272a98cdf62c447e2696bc8e 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
@@ -42,6 +42,8 @@
        background-repeat: no-repeat;
        background-position: right top;
        background-image: url(img/right.png);  /** sprite-ref: buttons; sprite-alignment: right */
+       overflow: hidden;
+       text-overflow: ellipsis;
        }
 
 .#{$primaryStyleName}-caption {

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index 3a4bca615d0049217c4a5a98f8fe3e8748c49c96..673a55a97a013417b9f2231d55b0646359a8a993 100644 (file)
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -119,6 +119,8 @@
     text-align: center;
     white-space: nowrap;
     outline: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
     @include valo-tappable;
     @if $vertical-centering {
       @include valo-button-vertical-centering;

diff --git a/uitest/src/com/vaadin/tests/themes/ButtonTextOverflow.java b/uitest/src/com/vaadin/tests/themes/ButtonTextOverflow.java
new file mode 100644 (file)
index 0000000..6cf8b79
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/ButtonTextOverflow.java
@@ -0,0 +1,27 @@
+package com.vaadin.tests.themes;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+
+public class ButtonTextOverflow extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        Button button = new Button("Button Button Button");
+
+        button.setWidth("100px");
+
+        addComponent(button);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Overflowing button caption should be hidden with ellipsis.";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 11864;
+    }
+}

diff --git a/uitest/src/com/vaadin/tests/themes/ButtonTextOverflowTest.java b/uitest/src/com/vaadin/tests/themes/ButtonTextOverflowTest.java
new file mode 100644 (file)
index 0000000..e31e98a
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/ButtonTextOverflowTest.java
@@ -0,0 +1,25 @@
+package com.vaadin.tests.themes;
+
+import java.io.IOException;
+
+import org.junit.Test;
+
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class ButtonTextOverflowTest extends MultiBrowserTest {
+
+    @Test
+    public void captionOverflowIsHiddenInReindeer() throws IOException {
+        openTestURL("theme=reindeer");
+
+        compareScreen("reindeer");
+    }
+
+    @Test
+    public void captionOverflowIsHiddenInValo() throws IOException {
+        openTestURL("theme=valo");
+
+        compareScreen("valo");
+    }
+
+}
\ No newline at end of file