Add two new size variants for Valo, tiny and huge

Available as additional style names for buttons, text fields/text
areas, combo boxes, date fields and labels.

Change-Id: I12f36935a690f5bf3f12333f5bd4ac986d4efd1f

13 files changed, 205 insertions, 6 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index ec74f70eaf..42953ea610 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -45,6 +45,10 @@
       @include valo-link-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-button-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--tiny, $font-weight: null);
+    }
+
     .#{$primary-stylename}-small {
       @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null);
     }
@@ -53,6 +57,10 @@
       @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null);
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-button-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--huge, $font-weight: null);
+    }
+
     .#{$primary-stylename}-icon-align-right {
       @include valo-button-icon-align-right-style;
     }
@@ -65,6 +73,10 @@
       width: $v-unit-size;
       padding: 0;
 
+      &.#{$primary-stylename}-tiny {
+        width: $v-unit-size--tiny;
+      }
+
       &.#{$primary-stylename}-small {
         width: $v-unit-size--small;
       }
@@ -73,6 +85,10 @@
         width: $v-unit-size--large;
       }
 
+      &.#{$primary-stylename}-huge {
+        width: $v-unit-size--huge;
+      }
+
       .#{$primary-stylename}-caption {
         display: none;
       }
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 4e5cd5bbac..538a5e2694 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -78,6 +78,11 @@
       text-align: center;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-combobox-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
@@ -87,6 +92,11 @@
       @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
+
+    .#{$primary-stylename}-huge {
+      @include valo-combobox-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--huge;
+    }
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 1538681740..8854992032 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -59,6 +59,11 @@
       text-align: center;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-datefield-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
@@ -68,6 +73,11 @@
       @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
+
+    .#{$primary-stylename}-huge {
+      @include valo-datefield-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--huge;
+    }
   }
 
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 29d811fc9a..51e7026834 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -112,6 +112,14 @@ $v-letter-spacing--h4:    0               !default;
       font-size: $v-font-size--small;
     }
 
+    .#{$primary-stylename}-tiny {
+      font-size: $v-font-size--tiny;
+    }
+
+    .#{$primary-stylename}-huge {
+      font-size: $v-font-size--huge;
+    }
+
     .#{$primary-stylename}-bold {
       font-weight: $v-font-weight + 200;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 4c5d99b8e2..5e524bfb9e 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -19,6 +19,11 @@
       @include valo-textfield-borderless-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-textarea-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
       font-size: $v-font-size--small;
@@ -29,6 +34,11 @@
       font-size: $v-font-size--large;
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-textarea-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--huge;
+    }
+
     .#{$primary-stylename}-align-right {
       text-align: right;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 75cfc5ef85..dc516048e7 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -30,6 +30,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       @include valo-textfield-borderless-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-textfield-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
       font-size: $v-font-size--small;
@@ -40,9 +45,16 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       font-size: $v-font-size--large;
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-textfield-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--huge;
+    }
+
     @include valo-textfield-inline-icon($stylenames: inline-icon);
+    @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny);
     @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
     @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
+    @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge);
 
     .#{$primary-stylename}-align-right {
       text-align: right;
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
index b1c113b2cc..7dd3827298 100644
--- a/WebContent/VAADIN/themes/valo/shared/_variables.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -60,14 +60,20 @@ $v-required-field-indicator-color : $v-error-indicator-color
 $v-friendly-color                 : #2c9720                                     !default;
 
 
-$v-scaling-factor--small          : 0.8                                         !default;
+$v-scaling-factor--tiny           : 0.75                                        !default;
+$v-scaling-factor--small          : 0.85                                        !default;
 $v-scaling-factor--large          : 1.2                                         !default;
+$v-scaling-factor--huge           : 1.6                                         !default;
 
+$v-unit-size--tiny                : round($v-unit-size * $v-scaling-factor--tiny)  !default;
 $v-unit-size--small               : round($v-unit-size * $v-scaling-factor--small) !default;
 $v-unit-size--large               : round($v-unit-size * $v-scaling-factor--large) !default;
+$v-unit-size--huge                : round($v-unit-size * $v-scaling-factor--huge)  !default;
 
-$v-font-size--small               : round($v-font-size * $v-scaling-factor--small) !default;
-$v-font-size--large               : round($v-font-size * $v-scaling-factor--large) !default;
+$v-font-size--tiny                : ceil($v-font-size * $v-scaling-factor--tiny)  !default;
+$v-font-size--small               : ceil($v-font-size * $v-scaling-factor--small) !default;
+$v-font-size--large               : ceil($v-font-size * $v-scaling-factor--large) !default;
+$v-font-size--huge                : ceil($v-font-size * $v-scaling-factor--huge)  !default;
 
 
 
diff --git a/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java
index ad949c6a32..ea6b9082f8 100644
--- a/server/src/com/vaadin/ui/themes/ValoTheme.java
+++ b/server/src/com/vaadin/ui/themes/ValoTheme.java
@@ -25,9 +25,10 @@ import com.vaadin.ui.Table.ColumnHeaderMode;
  * </p>
  * 
  * <p>
- * These styles are only available if the Valo theme (or any of it's variants)
- * is built with the <code>$valo-include-common-stylenames</code> Sass variable
- * set to <code>true</code>.
+ * These styles are only available if the
+ * <code>$v-included-additional-styles</code> Sass list variable contains the
+ * name of the component for that additional style name (e.g.
+ * <code>button, textfield, table</code>).
  * </p>
  * 
  * <p>
@@ -149,6 +150,12 @@ public class ValoTheme {
     public static final String LABEL_NO_MARGIN = "no-margin";
 
     /**
+     * Tiny font size. Suitable for additional/supplementary UI text. Can be
+     * combined with any other Label style.
+     */
+    public static final String LABEL_TINY = "tiny";
+
+    /**
      * Small font size. Suitable for additional/supplementary UI text. Can be
      * combined with any other Label style.
      */
@@ -161,6 +168,12 @@ public class ValoTheme {
     public static final String LABEL_LARGE = "large";
 
     /**
+     * Huge font size. Suitable for important/prominent UI text. Can be combined
+     * with any other Label style.
+     */
+    public static final String LABEL_HUGE = "huge";
+
+    /**
      * Lighter font weight. Suitable for additional/supplementary UI text. Can
      * be combined with any other Label style.
      */
@@ -252,6 +265,11 @@ public class ValoTheme {
     public static final String BUTTON_LINK = "link";
 
     /**
+     * Tiny size button. Can be combined with any other Button style.
+     */
+    public static final String BUTTON_TINY = "tiny";
+
+    /**
      * Small size button. Can be combined with any other Button style.
      */
     public static final String BUTTON_SMALL = "small";
@@ -262,6 +280,11 @@ public class ValoTheme {
     public static final String BUTTON_LARGE = "large";
 
     /**
+     * Huge size button. Can be combined with any other Button style.
+     */
+    public static final String BUTTON_HUGE = "huge";
+
+    /**
      * Align the icon to the right side of the button caption. Can be combined
      * with any other Button style.
      */
@@ -301,6 +324,11 @@ public class ValoTheme {
      **************************************************************************/
 
     /**
+     * Tiny size text field. Can be combined with any other TextField style.
+     */
+    public static final String TEXTFIELD_TINY = "tiny";
+
+    /**
      * Small size text field. Can be combined with any other TextField style.
      */
     public static final String TEXTFIELD_SMALL = "small";
@@ -311,6 +339,11 @@ public class ValoTheme {
     public static final String TEXTFIELD_LARGE = "large";
 
     /**
+     * Huge size text field. Can be combined with any other TextField style.
+     */
+    public static final String TEXTFIELD_HUGE = "huge";
+
+    /**
      * Removes the border and background from the text field. Can be combined
      * with any other TextField style.
      */
@@ -341,6 +374,11 @@ public class ValoTheme {
      **************************************************************************/
 
     /**
+     * Tiny size text area. Can be combined with any other TextArea style.
+     */
+    public static final String TEXTAREA_TINY = "tiny";
+
+    /**
      * Small size text area. Can be combined with any other TextArea style.
      */
     public static final String TEXTAREA_SMALL = "small";
@@ -351,6 +389,11 @@ public class ValoTheme {
     public static final String TEXTAREA_LARGE = "large";
 
     /**
+     * Huge size text area. Can be combined with any other TextArea style.
+     */
+    public static final String TEXTAREA_HUGE = "huge";
+
+    /**
      * Removes the border and background from the text area. Can be combined
      * with any other TextArea style.
      */
@@ -375,6 +418,11 @@ public class ValoTheme {
      **************************************************************************/
 
     /**
+     * Tiny size date field. Can be combined with any other DateField style.
+     */
+    public static final String DATEFIELD_TINY = "tiny";
+
+    /**
      * Small size date field. Can be combined with any other DateField style.
      */
     public static final String DATEFIELD_SMALL = "small";
@@ -385,6 +433,11 @@ public class ValoTheme {
     public static final String DATEFIELD_LARGE = "large";
 
     /**
+     * Huge size date field. Can be combined with any other DateField style.
+     */
+    public static final String DATEFIELD_HUGE = "huge";
+
+    /**
      * Removes the border and background from the date field. Can be combined
      * with any other DateField style.
      */
@@ -409,6 +462,11 @@ public class ValoTheme {
      **************************************************************************/
 
     /**
+     * Tiny size combo box. Can be combined with any other ComboBox style.
+     */
+    public static final String COMBOBOX_TINY = "tiny";
+
+    /**
      * Small size combo box. Can be combined with any other ComboBox style.
      */
     public static final String COMBOBOX_SMALL = "small";
@@ -419,6 +477,11 @@ public class ValoTheme {
     public static final String COMBOBOX_LARGE = "large";
 
     /**
+     * Huge size combo box. Can be combined with any other ComboBox style.
+     */
+    public static final String COMBOBOX_HUGE = "huge";
+
+    /**
      * Removes the border and background from the combo box. Can be combined
      * with any other ComboBox style.
      */
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java
index 758d2de200..e66cd2668b 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java
@@ -136,6 +136,14 @@ public class ButtonsAndLinks extends VerticalLayout implements View {
         button = new Button("Three");
         group.addComponent(button);
 
+        button = new Button("Tiny");
+        button.addStyleName("tiny");
+        row.addComponent(button);
+
+        button = new Button("Huge");
+        button.addStyleName("huge");
+        row.addComponent(button);
+
         NativeButton nbutton = new NativeButton("Native");
         row.addComponent(nbutton);
 
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
index 1b8b290d91..98a9cad83c 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
@@ -162,6 +162,22 @@ public class ComboBoxes extends VerticalLayout implements View {
         combo.addItem("Option Three");
         combo.addStyleName("borderless");
         row.addComponent(combo);
+
+        combo = new ComboBox("Tiny");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(ValoThemeUI.generateContainer(200, false));
+        combo.setItemCaptionPropertyId(ValoThemeUI.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeUI.ICON_PROPERTY);
+        combo.addStyleName("tiny");
+        row.addComponent(combo);
+
+        combo = new ComboBox("Huge");
+        combo.setInputPrompt("You can type here");
+        combo.setContainerDataSource(ValoThemeUI.generateContainer(200, false));
+        combo.setItemCaptionPropertyId(ValoThemeUI.CAPTION_PROPERTY);
+        combo.setItemIconPropertyId(ValoThemeUI.ICON_PROPERTY);
+        combo.addStyleName("huge");
+        row.addComponent(combo);
     }
 
     @Override
diff --git a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
index 41aa287f9f..bdc0dc5983 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
@@ -172,6 +172,18 @@ public class DateFields extends VerticalLayout implements View {
         date.setDateFormat("E dd/MM/yyyy");
         row.addComponent(date);
 
+        date = new DateField("Tiny");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("tiny");
+        row.addComponent(date);
+
+        date = new DateField("Huge");
+        date.setValue(new Date());
+        date.setResolution(Resolution.DAY);
+        date.addStyleName("huge");
+        row.addComponent(date);
+
         date = new InlineDateField("Date picker");
         setDate(date);
         row.addComponent(date);
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
index 08378ad9e6..63c138093c 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/Labels.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java
@@ -45,6 +45,10 @@ public class Labels extends VerticalLayout implements View {
         left.setMargin(new MarginInfo(false, true, false, false));
         split.addComponent(left);
 
+        Label huge = new Label("Huge type for display text.");
+        huge.addStyleName("huge");
+        left.addComponent(huge);
+
         Label large = new Label(
                 "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.");
         large.addStyleName("large");
@@ -68,6 +72,10 @@ public class Labels extends VerticalLayout implements View {
         small.addStyleName("small");
         left.addComponent(small);
 
+        Label tiny = new Label("Tiny type for minor text.");
+        tiny.addStyleName("tiny");
+        left.addComponent(tiny);
+
         Label h4 = new Label("Section Title");
         h4.addStyleName("h4");
         left.addComponent(h4);
diff --git a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
index f8606bb7c9..347a683673 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
@@ -182,6 +182,16 @@ public class TextFields extends VerticalLayout implements View {
         pwf.setIcon(FontAwesome.LOCK);
         row.addComponent(pwf);
 
+        tf = new TextField("Tiny");
+        tf.setValue("Field value");
+        tf.addStyleName("tiny");
+        row.addComponent(tf);
+
+        tf = new TextField("Huge");
+        tf.setValue("Field value");
+        tf.addStyleName("huge");
+        row.addComponent(tf);
+
         h1 = new Label("Text Areas");
         h1.addStyleName("h1");
         addComponent(h1);
@@ -242,6 +252,16 @@ public class TextFields extends VerticalLayout implements View {
         ta.setValue("Field value, spanning multiple lines of text");
         row.addComponent(ta);
 
+        ta = new TextArea("Tiny");
+        ta.addStyleName("tiny");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
+        ta = new TextArea("Huge");
+        ta.addStyleName("huge");
+        ta.setInputPrompt("Write your comment…");
+        row.addComponent(ta);
+
         RichTextArea rta = new RichTextArea();
         rta.setValue("<b>Some</b> <i>rich</i> content");
         row.addComponent(rta);