Fix baseline alignment by aligning css and layout with text-field

vaadin · Jun 27, 2018 · d30630f · d30630f
1 parent cc14f64
commit d30630f
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 7 deletions.
diff --git a/src/vaadin-radio-group.html b/src/vaadin-radio-group.html
@@ -13,11 +13,38 @@
   <template>
     <style>
       :host {
+        display: inline-flex;
+      }
+
+      :host::before {
+        content: "\2003";
+        width: 0;
         display: inline-block;
       }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      .vaadin-group-field-container {
+        display: flex;
+        flex-direction: column;
+      }
+
+      [part="label"]:empty {
+        display: none;
+      }
     </style>
-    <label part="label">[[label]]</label>
-    <slot id="slot"></slot>
+
+    <div class="vaadin-group-field-container">
+      <label part="label">[[label]]</label>
+
+      <div part="group-field">
+        <slot id="slot"></slot>
+      </div>
+
+    </div>
+
   </template>
 
   <script>

diff --git a/theme/lumo/vaadin-radio-group-styles.html b/theme/lumo/vaadin-radio-group-styles.html
@@ -1,15 +1,29 @@
 <dom-module id="lumo-radio-group" theme-for="vaadin-radio-group">
   <template>
     <style>
-      [part="label"] {
-        display: block;
+      :host {
+        --lumo-text-field-size: var(--lumo-size-m);
+        color: var(--lumo-body-text-color);
+        font-size: var(--lumo-font-size-m);
+        font-family: var(--lumo-font-family);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-tap-highlight-color: transparent;
+        padding: var(--lumo-space-xs) 0;
       }
 
-      [part="label"]:empty {
-        display: none;
+      :host::before {
+        height: var(--lumo-text-field-size);
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
       }
 
-      :host([theme~="vertical"]) {
+      [part="label"] {
+        display: block;
+      }
+
+      :host([theme~="vertical"]) [part="group-field"] {
         display: flex;
         flex-direction: column;
       }
@@ -38,6 +52,10 @@
         max-width: 100%;
         box-sizing: border-box;
       }
+
+      :host([invalid]) [part="label"] {
+        color: var(--lumo-error-text-color);
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-radio-group-styles.html b/theme/material/vaadin-radio-group-styles.html
@@ -1,6 +1,38 @@
 <dom-module id="material-radio-group" theme-for="vaadin-radio-group">
   <template>
     <style>
+      :host {
+        display: inline-flex;
+        position: relative;
+        padding-top: 8px;
+        margin-bottom: 8px;
+        outline: none;
+        color: var(--material-body-text-color);
+        font-size: var(--material-body-font-size);
+        line-height: 24px;
+        font-family: var(--material-font-family);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        contain: content;
+      }
+
+      :host::before {
+        line-height: 32px;
+      }
+
+      :host([has-label]) {
+        padding-top: 24px;
+      }
+
+      [part="label"]:empty {
+        display: none;
+      }
+
+      [part="label"]:empty::before {
+        content: " ";
+        position: absolute;
+      }
+
       :host([theme~="vertical"]) {
         display: flex;
         flex-direction: column;
@@ -13,6 +45,8 @@
 
       [part="label"] {
         display: block;
+        position: absolute;
+        top: 8px;
         font-size: 1em;
         line-height: 1;
         height: 20px;
@@ -24,6 +58,10 @@
         transform-origin: 0 75%;
         transform: scale(0.75);
       }
+
+      :host([invalid]) [part="label"] {
+        color: var(--material-error-text-color);
+      }
     </style>
   </template>
 </dom-module>