feature: Radio Group disabled && radio button style bug fix (#2411)

* support radio group disabled

* fix disabled radio button style bug

examples/docs/en-US/radio.md

@@ -5,7 +5,9 @@
         radio: '1',
         radio1: 'selected and disabled',
         radio2: 3,
-        radio3: ''
+        radio3: 'New York',
+        radio4: 'New York',
+        radio5: 'New York'
       };
     }
   };
@@ -95,7 +97,21 @@ Radio with button styles.
 <el-radio-group v-model="radio3">
   <el-radio-button label="New York"></el-radio-button>
   <el-radio-button label="Washington"></el-radio-button>
-  <el-radio-button label="Los Angeles" :disabled="true"></el-radio-button>
+  <el-radio-button label="Los Angeles"></el-radio-button>
+  <el-radio-button label="Chicago"></el-radio-button>
+</el-radio-group>
+<div style="margin: 15px 0;"></div>
+<el-radio-group v-model="radio4">
+  <el-radio-button label="New York"></el-radio-button>
+  <el-radio-button label="Washington" :disabled="true"></el-radio-button>
+  <el-radio-button label="Los Angeles"></el-radio-button>
+  <el-radio-button label="Chicago"></el-radio-button>
+</el-radio-group>
+<div style="margin: 15px 0;"></div>
+<el-radio-group v-model="radio5" :disabled="true">
+  <el-radio-button label="New York"></el-radio-button>
+  <el-radio-button label="Washington"></el-radio-button>
+  <el-radio-button label="Los Angeles"></el-radio-button>
   <el-radio-button label="Chicago"></el-radio-button>
 </el-radio-group>
 
@@ -103,7 +119,9 @@ Radio with button styles.
   export default {
     data () {
       return {
-        radio3: ''
+        radio3: 'New York',
+        radio4: 'New York',
+        radio5: 'New York'
       };
     }
   }

examples/docs/zh-CN/radio.md

@@ -5,7 +5,9 @@
         radio: '1',
         radio1: '选中且禁用',
         radio2: 3,
-        radio3: ''
+        radio3: '上海',
+        radio4: '上海',
+        radio5: '上海'
       };
     }
   };
@@ -99,7 +101,21 @@
   <el-radio-group v-model="radio3">
     <el-radio-button label="上海"></el-radio-button>
     <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州" :disabled="true"></el-radio-button>
+    <el-radio-button label="广州"></el-radio-button>
+    <el-radio-button label="深圳"></el-radio-button>
+  </el-radio-group>
+  <div style="margin: 15px 0;"></div>
+  <el-radio-group v-model="radio4">
+    <el-radio-button label="上海"></el-radio-button>
+    <el-radio-button label="北京" :disabled="true"></el-radio-button>
+    <el-radio-button label="广州"></el-radio-button>
+    <el-radio-button label="深圳"></el-radio-button>
+  </el-radio-group>
+  <div style="margin: 15px 0;"></div>
+  <el-radio-group v-model="radio5" :disabled="true">
+    <el-radio-button label="上海"></el-radio-button>
+    <el-radio-button label="北京"></el-radio-button>
+    <el-radio-button label="广州"></el-radio-button>
     <el-radio-button label="深圳"></el-radio-button>
   </el-radio-group>
 </template>
@@ -108,7 +124,9 @@
   export default {
     data () {
       return {
-        radio3: ''
+        radio3: '上海',
+        radio4: '上海',
+        radio5: '上海'
       };
     }
   }

packages/radio/src/radio-button.vue

@@ -1,3 +1,25 @@
+<template>
+  <label
+    class="el-radio-button"
+    :class="[
+      size ? 'el-radio-button--' + size : '',
+      { 'is-active': value === label },
+      { 'is-disabled': isDisabled }
+    ]"
+  >
+    <input
+      class="el-radio-button__orig-radio"
+      :value="label"
+      type="radio"
+      v-model="value"
+      :name="name"
+      :disabled="isDisabled">
+    <span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+</template>
 <script>
   export default {
     name: 'ElRadioButton',
@@ -29,36 +51,17 @@
       },
       activeStyle() {
         return {
-          backgroundColor: this._radioGroup.fill,
-          borderColor: this._radioGroup.fill,
-          color: this._radioGroup.textColor
+          backgroundColor: this._radioGroup.fill || '',
+          borderColor: this._radioGroup.fill || '',
+          color: this._radioGroup.textColor || ''
         };
       },
       size() {
         return this._radioGroup.size;
+      },
+      isDisabled() {
+        return this.disabled || this._radioGroup.disabled;
       }
     }
   };
 </script>
-
-<template>
-  <label
-    class="el-radio-button"
-    :class="[
-      size ? 'el-radio-button--' + size : '',
-      { 'is-active': value === label }
-    ]"
-  >
-    <input
-      class="el-radio-button__orig-radio"
-      :value="label"
-      type="radio"
-      v-model="value"
-      :name="name"
-      :disabled="disabled">
-    <span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
-      <slot></slot>
-      <template v-if="!$slots.default">{{label}}</template>
-    </span>
-  </label>
-</template>

packages/radio/src/radio-group.vue

@@ -1,3 +1,8 @@
+<template>
+  <div class="el-radio-group">
+    <slot></slot>
+  </div>
+</template>
 <script>
   import Emitter from 'element-ui/src/mixins/emitter';
 
@@ -11,14 +16,9 @@
     props: {
       value: [String, Number],
       size: String,
-      fill: {
-        type: String,
-        default: '#20a0ff'
-      },
-      textColor: {
-        type: String,
-        default: '#fff'
-      }
+      fill: String,
+      textColor: String,
+      disabled: Boolean
     },
     watch: {
       value(value) {
@@ -29,8 +29,3 @@
   };
 </script>
 
-<template>
-  <div class="el-radio-group">
-    <slot></slot>
-  </div>
-</template>

packages/radio/src/radio.vue

@@ -2,7 +2,7 @@
   <label class="el-radio">
     <span class="el-radio__input"
       :class="{
-        'is-disabled': disabled,
+        'is-disabled': isDisabled,
         'is-checked': model === label,
         'is-focus': focus
       }"
@@ -16,7 +16,7 @@
         @focus="focus = true"
         @blur="focus = false"
         :name="name"
-        :disabled="disabled">
+        :disabled="isDisabled">
     </span>
     <span class="el-radio__label">
       <slot></slot>
@@ -73,6 +73,12 @@
             this.$emit('input', val);
           }
         }
+      },
+
+      isDisabled() {
+        return this.isGroup
+          ? this._radioGroup.disabled || this.disabled
+          : this.disabled;
       }
     }
   };

packages/theme-default/src/common/var.css

@@ -139,6 +139,9 @@
   --radio-input-border-color-hover: var(--color-primary);
 
   --radio-button-font-size: var(--font-size-base);
+  --radio-button-checked-fill: var(--color-primary);
+  --radio-button-checked-color: var(--color-white);
+  --radio-button-checked-border-color: var(--color-primary);
 
   /* Select
   -------------------------- */

packages/theme-default/src/radio.css

@@ -171,6 +171,14 @@
       z-index: -1;
       left: -999px;
 
+      &:checked {
+        & + .el-radio-button__inner {
+          color: var(--radio-button-checked-color);
+          background-color: var(--radio-button-checked-fill);
+          border-color: var(--radio-button-checked-border-color);
+        }
+      }
+
       &:disabled {
         & + .el-radio-button__inner {
           color: var(--button-disabled-color);

test/unit/specs/radio.spec.js

@@ -50,40 +50,14 @@ describe('Radio', () => {
       done();
     });
   });
-  it('radio group', done => {
-    vm = createVue({
-      template: `
-        <el-radio-group v-model="radio">
-          <el-radio :label="3" ref="radio1">备选项</el-radio>
-          <el-radio :label="6" ref="radio2">备选项</el-radio>
-          <el-radio :label="9">备选项</el-radio>
-        </el-radio-group>
-      `,
-      data() {
-        return {
-          radio: 3
-        };
-      }
-    }, true);
-    setTimeout(_ => {
-      expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
-      let radioElm = vm.$refs.radio2.$el;
-      radioElm.click();
-      vm.$nextTick(_ => {
-        expect(radioElm.querySelector('.is-checked')).to.be.ok;
-        expect(vm.radio === 6).to.be.true;
-        done();
-      });
-    }, 50);
-  });
-  describe('Radio', () => {
+  describe('Radio group', () => {
     it('create', done => {
       vm = createVue({
         template: `
           <el-radio-group v-model="radio">
-            <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
-            <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
-            <el-radio-button :label="9">备选项</el-radio-button>
+            <el-radio :label="3" ref="radio1">备选项</el-radio>
+            <el-radio :label="6" ref="radio2">备选项</el-radio>
+            <el-radio :label="9">备选项</el-radio>
           </el-radio-group>
         `,
         data() {
@@ -92,19 +66,46 @@ describe('Radio', () => {
           };
         }
       }, true);
-      expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
-      let radio = vm.$refs.radio2;
-      radio.$el.click();
+      setTimeout(_ => {
+        expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
+        let radioElm = vm.$refs.radio2.$el;
+        radioElm.click();
+        vm.$nextTick(_ => {
+          expect(radioElm.querySelector('.is-checked')).to.be.ok;
+          expect(vm.radio === 6).to.be.true;
+          done();
+        });
+      }, 50);
+    });
+    it('disabled', done => {
+      vm = createVue({
+        template: `
+          <el-radio-group v-model="radio" disabled>
+            <el-radio :label="3" ref="radio1">备选项</el-radio>
+            <el-radio :label="6" ref="radio2">备选项</el-radio>
+            <el-radio :label="9">备选项</el-radio>
+          </el-radio-group>
+        `,
+        data() {
+          return {
+            radio: 3
+          };
+        }
+      }, true);
+      let radio2 = vm.$refs.radio2;
+      expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
+      expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
+      radio2.$el.click();
       vm.$nextTick(_ => {
-        expect(radio.$el.classList.contains('is-active')).to.be.true;
-        expect(vm.radio === 6).to.be.true;
+        expect(vm.radio === 3).to.be.true;
+        expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
         done();
       });
     });
-    it('custom color', done => {
+    it('disabled when children is radio button', done => {
       vm = createVue({
         template: `
-          <el-radio-group v-model="radio" fill="#000" text-color="#ff0">
+          <el-radio-group v-model="radio" disabled>
             <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
             <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
             <el-radio-button :label="9">备选项</el-radio-button>
@@ -116,12 +117,83 @@ describe('Radio', () => {
           };
         }
       }, true);
+      let radio2 = vm.$refs.radio2;
+      expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
+      expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
+      radio2.$el.click();
       vm.$nextTick(_ => {
-        expect(vm.$refs.radio1.activeStyle.backgroundColor).to.equal('#000');
-        expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000');
-        expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0');
+        expect(vm.radio === 3).to.be.true;
+        expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
         done();
       });
     });
+    describe('Radio Button', () => {
+      it('create', done => {
+        vm = createVue({
+          template: `
+            <el-radio-group v-model="radio">
+              <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
+              <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
+              <el-radio-button :label="9">备选项</el-radio-button>
+            </el-radio-group>
+          `,
+          data() {
+            return {
+              radio: 3
+            };
+          }
+        }, true);
+        expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
+        let radio = vm.$refs.radio2;
+        radio.$el.click();
+        vm.$nextTick(_ => {
+          expect(radio.$el.classList.contains('is-active')).to.be.true;
+          expect(vm.radio === 6).to.be.true;
+          done();
+        });
+      });
+      it('custom color', done => {
+        vm = createVue({
+          template: `
+            <el-radio-group v-model="radio" fill="#000" text-color="#ff0">
+              <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
+              <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
+              <el-radio-button :label="9">备选项</el-radio-button>
+            </el-radio-group>
+          `,
+          data() {
+            return {
+              radio: 3
+            };
+          }
+        }, true);
+        vm.$nextTick(_ => {
+          expect(vm.$refs.radio1.activeStyle.backgroundColor).to.equal('#000');
+          expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000');
+          expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0');
+          done();
+        });
+      });
+      it('size', done => {
+        vm = createVue({
+          template: `
+            <el-radio-group v-model="radio" size="large">
+              <el-radio-button :label="3" ref="radio1">备选项</el-radio-button>
+              <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
+              <el-radio-button :label="9">备选项</el-radio-button>
+            </el-radio-group>
+          `,
+          data() {
+            return {
+              radio: 3
+            };
+          }
+        }, true);
+        vm.$nextTick(_ => {
+          expect(vm.$el.querySelectorAll('.el-radio-button--large').length).to.be.equal(3);
+          done();
+        });
+      });
+    });
   });
 });