Added label property to the vaadin-radio-group

demo/radio-group-demos.html

@@ -7,12 +7,12 @@
     </style>
 
     <h3>Radio Group</h3>
-    <vaadin-demo-snippet id="radio-group-demos-radio-group">
+    <vaadin-demo-snippet id="radio-group-demos-radio-group-label">
       <template preserve-content>
-        <vaadin-radio-group>
-          <vaadin-radio-button name="foo">Foo</vaadin-radio-button>
-          <vaadin-radio-button name="bar">Bar</vaadin-radio-button>
-          <vaadin-radio-button name="baz">Baz</vaadin-radio-button>
+        <vaadin-radio-group label="Risk level">
+          <vaadin-radio-button name="low">Low</vaadin-radio-button>
+          <vaadin-radio-button name="medium">Medium</vaadin-radio-button>
+          <vaadin-radio-button name="high">High</vaadin-radio-button>
         </vaadin-radio-group>
       </template>
     </vaadin-demo-snippet>
@@ -34,8 +34,7 @@ <h3>Radio Group with Value</h3>
       <template preserve-content>
         <dom-bind>
           <template>
-            <p>Preferred language of contact:</p>
-            <vaadin-radio-group value="{{radioValue}}">
+            <vaadin-radio-group value="{{radioValue}}" label="Preferred language of contact">
               <vaadin-radio-button value="en">English</vaadin-radio-button>
               <vaadin-radio-button value="fr">Français</vaadin-radio-button>
               <vaadin-radio-button value="de">Deutsch</vaadin-radio-button>

src/vaadin-radio-group.html

@@ -11,7 +11,40 @@
 
 <dom-module id="vaadin-radio-group">
   <template>
-    <slot id="slot"></slot>
+    <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>
+
+    <div class="vaadin-group-field-container">
+      <label part="label">[[label]]</label>
+
+      <div part="group-field">
+        <slot id="slot"></slot>
+      </div>
+
+    </div>
+
   </template>
 
   <script>
@@ -29,11 +62,19 @@
        *
        * ### Styling
        *
+       * The following shadow DOM parts are available for styling:
+       *
+       * Part name | Description
+       * ----------------|----------------
+       * `label` | The label element
+       * `group-field` | The element that wraps radio-buttons
+       *
        * The following state attributes are available for styling:
        *
        * Attribute  | Description | Part name
        * -----------|-------------|------------
-       * `disabled`   | Set when the radio group and its children are disabled. | :host
+       * `disabled` | Set when the radio group and its children are disabled. | :host
+       * `has-label` | Set when the element has a label | :host
        *
        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
        *
@@ -63,6 +104,15 @@
               observer: '_checkedButtonChanged'
             },
 
+            /**
+             * String used for the label element.
+             */
+            label: {
+              type: String,
+              value: '',
+              observer: '_labelChanged'
+            },
+
             /**
              * Value of the radio group.
              */
@@ -227,6 +277,14 @@
           items.forEach(e => e.tabindex = e === items[idx] ? 0 : -1);
         }
 
+        _labelChanged(label) {
+          if (label) {
+            this.setAttribute('has-label', '');
+          } else {
+            this.removeAttribute('has-label');
+          }
+        }
+
       }
 
       customElements.define(RadioGroupElement.is, RadioGroupElement);

test/vaadin-radio-group.html

@@ -206,6 +206,15 @@
         document.body.removeChild(focusInput);
       });
 
+      it('should update has-label attribute when setting label', function() {
+        expect(vaadinRadioButtonGroup.hasAttribute('has-label')).to.be.false;
+
+        vaadinRadioButtonGroup.label = 'foo';
+
+        expect(vaadinRadioButtonGroup.hasAttribute('has-label')).to.be.true;
+        expect(vaadinRadioButtonGroup.label).to.be.equal('foo');
+      });
+
     });
   </script>
 </body>

test/visual/default.html

@@ -10,12 +10,12 @@
 
 <body>
 
-  <span id="default-tests" style="padding: 6px">
-    <vaadin-radio-group>
+  <div id="default-tests" style="padding: 6px">
+    <vaadin-radio-group label="Foo">
       <vaadin-radio-button checked>1</vaadin-radio-button>
       <vaadin-radio-button disabled>2</vaadin-radio-button>
       <vaadin-radio-button>3</vaadin-radio-button>
     </vaadin-radio-group>
-  </span>
+  </div>
 
 </body>

theme/lumo/vaadin-radio-group-styles.html

@@ -1,10 +1,60 @@
 <dom-module id="lumo-radio-group" theme-for="vaadin-radio-group">
   <template>
     <style>
-      :host([theme~="vertical"]) {
+      :host {
+        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;
+      }
+
+      :host::before {
+        height: var(--lumo-size.m);
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      [part="label"] {
+        display: block;
+      }
+
+      :host([theme~="vertical"]) [part="group-field"] {
         display: flex;
         flex-direction: column;
       }
+
+      :host([has-label])::before {
+        margin-top: calc(var(--lumo-font-size-s) * 1.5);
+      }
+
+      :host([has-label]) {
+        padding-top: var(--lumo-space-m);
+      }
+
+      [part="label"] {
+        align-self: flex-start;
+        color: var(--lumo-secondary-text-color);
+        font-weight: 500;
+        font-size: var(--lumo-font-size-s);
+        margin-left: calc(var(--lumo-border-radius) / 4);
+        transition: color 0.2s;
+        line-height: 1;
+        padding-bottom: 0.7em;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: relative;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
+      :host([invalid]) [part="label"] {
+        color: var(--lumo-error-text-color);
+      }
     </style>
   </template>
 </dom-module>

theme/material/vaadin-radio-group-styles.html

@@ -1,10 +1,67 @@
 <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;
       }
+
+      :host([disabled]) [part="label"] {
+        color: var(--material-disabled-text-color);
+        -webkit-text-fill-color: var(--material-disabled-text-color);
+      }
+
+      [part="label"] {
+        display: block;
+        position: absolute;
+        top: 8px;
+        font-size: 1em;
+        line-height: 1;
+        height: 20px;
+        margin-bottom: -4px;
+        white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        color: var(--material-secondary-text-color);
+        transform-origin: 0 75%;
+        transform: scale(0.75);
+      }
+
+      :host([invalid]) [part="label"] {
+        color: var(--material-error-text-color);
+      }
     </style>
   </template>
 </dom-module>