Fix and document small theme variant (#188)

demo/demos.json

@@ -32,6 +32,16 @@
         "description": "",
         "image": ""
       }
+    },
+    {
+      "name": "Theme Variants",
+      "url": "select-theme-variants-demos",
+      "src": "select-theme-variants-demos.html",
+      "meta": {
+        "title": "vaadin-select Theme Variants",
+        "description": "",
+        "image": ""
+      }
     }
   ]
 }

demo/select-styling-demos.html

@@ -55,39 +55,6 @@ <h3>Customizing the Template Content</h3>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Custom Theme Variant</h3>
-    <vaadin-demo-snippet id="select-custom-theme-variant">
-      <template preserve-content>
-        <dom-module id="custom-select" theme-for="vaadin-text-field vaadin-item">
-          <template>
-            <style>
-              :host([theme~="custom"]) {
-                font-family: monospace;
-              }
-            </style>
-          </template>
-        </dom-module>
-        <dom-module id="custom-select-overlay" theme-for="vaadin-text-field vaadin-select-overlay">
-          <template>
-            <style>
-              :host([theme~="custom"]) [part~="overlay"] {
-                background: linear-gradient(hsla(214, 61%, 25%, 0.05), hsla(214, 61%, 25%, 0.05)) #fff;
-              }
-            </style>
-          </template>
-        </dom-module>
-        <vaadin-select label="Name" theme="custom">
-          <template>
-            <vaadin-list-box>
-              <vaadin-item theme="custom">Jose</vaadin-item>
-              <vaadin-item theme="custom">Manolo</vaadin-item>
-              <vaadin-item theme="custom">Pedro</vaadin-item>
-            </vaadin-list-box>
-          </template>
-        </vaadin-select>
-      </template>
-    </vaadin-demo-snippet>
-
   </template>
   <script>
     class SelectStylingDemos extends DemoReadyEventEmitter(SelectDemo(Polymer.Element)) {

demo/select-theme-variants-demos.html

@@ -0,0 +1,66 @@
+<dom-module id="select-theme-variants-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <h3>Small Size</h3>
+    <vaadin-demo-snippet id="select-theme-variants-demos-sizes">
+      <template preserve-content>
+        <vaadin-select label="Name" theme="small">
+          <template>
+            <vaadin-list-box>
+              <vaadin-item>Jose</vaadin-item>
+              <vaadin-item>Manolo</vaadin-item>
+              <vaadin-item>Pedro</vaadin-item>
+            </vaadin-list-box>
+          </template>
+        </vaadin-select>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Custom Theme Variant</h3>
+    <vaadin-demo-snippet id="select-theme-variants-demos-custom">
+      <template preserve-content>
+        <dom-module id="custom-select" theme-for="vaadin-text-field vaadin-item">
+          <template>
+            <style>
+              :host([theme~="custom"]) {
+                font-family: monospace;
+              }
+            </style>
+          </template>
+        </dom-module>
+        <dom-module id="custom-select-overlay" theme-for="vaadin-text-field vaadin-select-overlay">
+          <template>
+            <style>
+              :host([theme~="custom"]) [part~="overlay"] {
+                background: linear-gradient(hsla(214, 61%, 25%, 0.05), hsla(214, 61%, 25%, 0.05)) #fff;
+              }
+            </style>
+          </template>
+        </dom-module>
+        <vaadin-select label="Name" theme="custom">
+          <template>
+            <vaadin-list-box>
+              <vaadin-item theme="custom">Jose</vaadin-item>
+              <vaadin-item theme="custom">Manolo</vaadin-item>
+              <vaadin-item theme="custom">Pedro</vaadin-item>
+            </vaadin-list-box>
+          </template>
+        </vaadin-select>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class SelectThemeVariantsDemos extends DemoReadyEventEmitter(SelectDemo(Polymer.Element)) {
+      static get is() {
+        return 'select-theme-variants-demos';
+      }
+    }
+    customElements.define(SelectThemeVariantsDemos.is, SelectThemeVariantsDemos);
+  </script>
+</dom-module>

test/visual/select.html

@@ -27,7 +27,7 @@
     .capture-block {
       display: inline-block;
       width: 800px;
-      height: 270px;
+      height: 350px;
     }
   </style>
 
@@ -53,6 +53,19 @@
 
     <br/>
 
+    <vaadin-select label="small" theme="small">
+    </vaadin-select>
+
+    <vaadin-select label="small & selected" theme="small" value="Item one">
+      <template>
+        <vaadin-list-box>
+          <vaadin-item>Item one</vaadin-item>
+        </vaadin-list-box>
+      </template>
+    </vaadin-select>
+
+    <br/>
+
     <vaadin-select label="Item as value" placeholder="Placeholder" value="Html&nbsp;as&nbsp;Content">
       <template>
         <vaadin-list-box>

theme/lumo/vaadin-select-styles.html

@@ -23,6 +23,11 @@
         padding-right: 0;
       }
 
+      :host([theme~="small"]) [selected] {
+        padding: 0;
+        min-height: var(--lumo-size-s);
+      }
+
       [part="toggle-button"]::before {
         content: var(--lumo-icons-dropdown);
       }