From 99bb9f3d7e97a852a53fcf2e165111d919d8bac0 Mon Sep 17 00:00:00 2001
From: Graham Fairweather <xotic750@gmail.com>
Date: Fri, 19 Jan 2018 08:25:19 +0100
Subject: [PATCH 1/8] Fix focus

---
 src/components/radio/radio.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index 530053fa..0a6af034 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -13,6 +13,7 @@
                 :checked="currentValue"
                 :name="name"
                 @change="change"
+                @focus="$el.focus()"
             >
         </span><slot>{{ label }}</slot>
     </label>

From f4e25069055c5dd2ff804e32f61ca8dcabef2d3f Mon Sep 17 00:00:00 2001
From: Graham Fairweather <xotic750@gmail.com>
Date: Fri, 19 Jan 2018 12:00:13 +0100
Subject: [PATCH 2/8] Use z-index to show shadow

Other ideas are to use :before or :after to create shadow
---
 src/components/radio/radio-group.vue |  2 +-
 src/styles/components/radio.less     | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/radio/radio-group.vue b/src/components/radio/radio-group.vue
index a6e8b806..cf04d1eb 100644
--- a/src/components/radio/radio-group.vue
+++ b/src/components/radio/radio-group.vue
@@ -61,7 +61,7 @@
 
                 if (this.childrens) {
                     this.childrens.forEach(child => {
-                        child.currentValue = value == child.label;
+                        child.currentValue = value === child.label;
                         child.group = true;
                     });
                 }
diff --git a/src/styles/components/radio.less b/src/styles/components/radio.less
index c1ec6061..20249088 100644
--- a/src/styles/components/radio.less
+++ b/src/styles/components/radio.less
@@ -32,6 +32,7 @@
     &:focus {
         & .@{radio-inner-prefix-cls} {
             box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+            z-index: 1;
         }
     }
 }
@@ -183,7 +184,7 @@ span.@{radio-prefix-cls} + * {
         transition: all @transition-time ease-in-out;
         cursor: pointer;
         border: 1px solid @border-color-base;
-        border-left: 0;
+        //border-left: 0;
         background: #fff;
 
         > span {
@@ -227,6 +228,7 @@ span.@{radio-prefix-cls} + * {
 
         &:focus {
             box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+            z-index: 1;
         }
 
         .@{radio-prefix-cls}-inner,
@@ -240,7 +242,7 @@ span.@{radio-prefix-cls} + * {
             background: #fff;
             border-color: @primary-color;
             color: @primary-color;
-            box-shadow: -1px 0 0 0 @primary-color;
+            //box-shadow: -1px 0 0 0 @primary-color;
 
             &:first-child {
                 border-color: @primary-color;
@@ -249,7 +251,7 @@ span.@{radio-prefix-cls} + * {
 
             &:hover {
                 border-color: tint(@primary-color, 20%);
-                box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
+                //box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
                 color: tint(@primary-color, 20%);
             }
 
@@ -259,7 +261,7 @@ span.@{radio-prefix-cls} + * {
 
             &:active {
                 border-color: shade(@primary-color, 5%);
-                box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
+                //box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
                 color: shade(@primary-color, 5%);
             }
         }

From 36d24701325afe4874af14fc559d0445192dbaf5 Mon Sep 17 00:00:00 2001
From: Graham Fairweather <xotic750@gmail.com>
Date: Fri, 19 Jan 2018 15:16:49 +0100
Subject: [PATCH 3/8] Radio w3c keyboard WIP

---
 examples/routers/radio.vue           |  4 +-
 package.json                         |  2 +-
 src/components/radio/radio-group.vue | 58 ++++++++++++++++++++++++++--
 src/components/radio/radio.vue       |  3 +-
 src/styles/components/radio.less     |  1 +
 5 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/examples/routers/radio.vue b/examples/routers/radio.vue
index b4e6e215..69fd7b81 100644
--- a/examples/routers/radio.vue
+++ b/examples/routers/radio.vue
@@ -43,9 +43,9 @@
         data () {
             return {
                 single: true,
-                phone: 'apple',
+                phone: '',
                 button2: '北京',
-            }
+            };
         },
         methods: {
 
diff --git a/package.json b/package.json
index d22f448c..a9e1e09c 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "tinycolor2": "^1.4.1"
   },
   "peerDependencies": {
-    "vue": "^2.5.2"
+    "vue": "^2.5.13"
   },
   "devDependencies": {
     "autoprefixer-loader": "^2.0.0",
diff --git a/src/components/radio/radio-group.vue b/src/components/radio/radio-group.vue
index cf04d1eb..4e6715eb 100644
--- a/src/components/radio/radio-group.vue
+++ b/src/components/radio/radio-group.vue
@@ -1,5 +1,11 @@
 <template>
-    <div :class="classes">
+    <div
+        :class="classes" tabindex="0"
+        @keydown.left="onLeft"
+        @keydown.right="onRight"
+        @keydown.up="onUp"
+        @keydown.down="onDown"
+        @keydown.tab="onTab">
         <slot></slot>
     </div>
 </template>
@@ -35,7 +41,8 @@
         data () {
             return {
                 currentValue: this.value,
-                childrens: []
+                childrens: [],
+                preventDefaultTab: true
             };
         },
         computed: {
@@ -72,7 +79,52 @@
                 this.$emit('input', data.value);
                 this.$emit('on-change', data.value);
                 this.dispatch('FormItem', 'on-form-change', data.value);
-            }
+            },
+            findRadio(value) {
+                return this.childrens && this.childrens.length ? this.childrens.find((child) => child.value === value) : undefined;
+            },
+            findIndexRadio(value) {
+                return this.childrens && this.childrens.length ? this.childrens.findIndex((child) => child.value === value) : -1;
+            },
+            includesRadio(value) {
+                return this.childrens && this.childrens.length ? this.childrens.includes((child) => child.value === value) : false;
+            },
+            nextRadio() {
+              if (this.includesRadio(this.currentValue)) {
+                console.log('get next');
+              } else {
+                return this.childrens && this.childrens.length ? this.childrens[0] : undefined;
+              }
+            },
+            onLeft() {
+                console.log('left', this.currentValue);
+            },
+            onRight() {
+                console.log('right', this.currentValue);
+            },
+            onUp() {
+                console.log('up', this.currentValue);
+            },
+            onDown() {
+                console.log('down', this.currentValue);
+            },
+            onTab(event) {
+                if (!this.preventDefaultTab) {
+                    return;
+                }
+
+                event.preventDefault();
+                this.preventDefaultTab = false;
+                this.currentValue = this.nextRadio();
+                if (this.currentValue) {
+                    this.change({
+                        value: this.currentValue.label
+                    });
+                }
+
+                console.log('tab', this);
+
+            },
         },
         watch: {
             value () {
diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index 0a6af034..7be686fb 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -1,8 +1,7 @@
 <template>
     <label
         :class="wrapClasses"
-        :tabindex="disabled ? -1 : 0"
-        @keyup.space="change">
+        :tabindex="disabled || group ? -1 : 0">
         <span :class="radioClasses">
             <span :class="innerClasses"></span>
             <input
diff --git a/src/styles/components/radio.less b/src/styles/components/radio.less
index 20249088..de53295b 100644
--- a/src/styles/components/radio.less
+++ b/src/styles/components/radio.less
@@ -7,6 +7,7 @@
     display: inline-block;
     font-size: @font-size-small;
     vertical-align: middle;
+    //outline: 0;
     &-vertical{
         .@{radio-prefix-cls}-wrapper {
             display: block;

From 79964596878615e93d3cdce6b019b2d2a499ec86 Mon Sep 17 00:00:00 2001
From: Xotic750 <xotic750@gmail.com>
Date: Sat, 20 Jan 2018 23:57:42 +0100
Subject: [PATCH 4/8] Use native w3c

---
 examples/routers/radio.vue           |  2 +-
 src/components/radio/radio-group.vue | 71 +++++-------------------
 src/components/radio/radio.vue       | 82 +++++++++++++++++++---------
 src/styles/components/radio.less     | 28 +++-------
 4 files changed, 79 insertions(+), 104 deletions(-)

diff --git a/examples/routers/radio.vue b/examples/routers/radio.vue
index 69fd7b81..1fda34a7 100644
--- a/examples/routers/radio.vue
+++ b/examples/routers/radio.vue
@@ -50,5 +50,5 @@
         methods: {
 
         }
-    }
+    };
 </script>
diff --git a/src/components/radio/radio-group.vue b/src/components/radio/radio-group.vue
index 4e6715eb..6cd4ffea 100644
--- a/src/components/radio/radio-group.vue
+++ b/src/components/radio/radio-group.vue
@@ -1,11 +1,5 @@
 <template>
-    <div
-        :class="classes" tabindex="0"
-        @keydown.left="onLeft"
-        @keydown.right="onRight"
-        @keydown.up="onUp"
-        @keydown.down="onDown"
-        @keydown.tab="onTab">
+    <div :class="classes" :name="name">
         <slot></slot>
     </div>
 </template>
@@ -15,6 +9,10 @@
 
     const prefixCls = 'ivu-radio-group';
 
+    let seed = 0;
+    const now = Date.now();
+    const getUuid = () => `ivuRadioGroup_${now}_${seed++}`;
+
     export default {
         name: 'RadioGroup',
         mixins: [ Emitter ],
@@ -36,13 +34,16 @@
             vertical: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String,
+                default: getUuid
             }
         },
         data () {
             return {
                 currentValue: this.value,
-                childrens: [],
-                preventDefaultTab: true
+                childrens: []
             };
         },
         computed: {
@@ -63,12 +64,10 @@
         },
         methods: {
             updateValue () {
-                const value = this.value;
                 this.childrens = findComponentsDownward(this, 'Radio');
-
                 if (this.childrens) {
                     this.childrens.forEach(child => {
-                        child.currentValue = value === child.label;
+                        child.currentValue = this.value === child.label;
                         child.group = true;
                     });
                 }
@@ -79,55 +78,11 @@
                 this.$emit('input', data.value);
                 this.$emit('on-change', data.value);
                 this.dispatch('FormItem', 'on-form-change', data.value);
-            },
-            findRadio(value) {
-                return this.childrens && this.childrens.length ? this.childrens.find((child) => child.value === value) : undefined;
-            },
-            findIndexRadio(value) {
-                return this.childrens && this.childrens.length ? this.childrens.findIndex((child) => child.value === value) : -1;
-            },
-            includesRadio(value) {
-                return this.childrens && this.childrens.length ? this.childrens.includes((child) => child.value === value) : false;
-            },
-            nextRadio() {
-              if (this.includesRadio(this.currentValue)) {
-                console.log('get next');
-              } else {
-                return this.childrens && this.childrens.length ? this.childrens[0] : undefined;
-              }
-            },
-            onLeft() {
-                console.log('left', this.currentValue);
-            },
-            onRight() {
-                console.log('right', this.currentValue);
-            },
-            onUp() {
-                console.log('up', this.currentValue);
-            },
-            onDown() {
-                console.log('down', this.currentValue);
-            },
-            onTab(event) {
-                if (!this.preventDefaultTab) {
-                    return;
-                }
-
-                event.preventDefault();
-                this.preventDefaultTab = false;
-                this.currentValue = this.nextRadio();
-                if (this.currentValue) {
-                    this.change({
-                        value: this.currentValue.label
-                    });
-                }
-
-                console.log('tab', this);
-
-            },
+            }
         },
         watch: {
             value () {
+                this.currentValue = this.value;
                 this.updateValue();
             }
         }
diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index 7be686fb..7d78d1c1 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -1,20 +1,18 @@
 <template>
-    <label
-        :class="wrapClasses"
-        :tabindex="disabled || group ? -1 : 0">
+    <label :class="wrapClasses" ref="label">
         <span :class="radioClasses">
-            <span :class="innerClasses"></span>
+            <span :class="innerClasses" ref="inner"></span>
             <input
                 type="radio"
-                tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
-                :name="name"
+                :name="groupName"
                 @change="change"
-                @focus="$el.focus()"
-            >
-        </span><slot>{{ label }}</slot>
+                @focus="onFocus"
+                @blur="onBlur">
+        </span>
+        <slot>{{ label }}</slot>
     </label>
 </template>
 <script>
@@ -59,7 +57,10 @@
             return {
                 currentValue: this.value,
                 group: false,
-                parent: findComponentUpward(this, 'RadioGroup')
+                groupName: this.name,
+                parent: findComponentUpward(this, 'RadioGroup'),
+                focusWrapper: false,
+                focusInner: false
             };
         },
         computed: {
@@ -70,7 +71,8 @@
                         [`${prefixCls}-group-item`]: this.group,
                         [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled,
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-focus`]: this.focusWrapper
                     }
                 ];
             },
@@ -84,18 +86,33 @@
                 ];
             },
             innerClasses () {
-                return `${prefixCls}-inner`;
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-focus`]: this.focusInner
+                    }
+                ];
             },
             inputClasses () {
                 return `${prefixCls}-input`;
             }
         },
         mounted () {
-            if (this.parent) this.group = true;
-            if (!this.group) {
-                this.updateValue();
-            } else {
+            if (this.parent) {
+                this.group = true;
+                if (this.name && this.name !== this.parent.name) {
+                    if (console.warn) {
+                        console.warn('[iview] Name does not match Radio Group name.');
+                    }
+                } else {
+                    this.groupName = this.parent.name; 
+                }
+            }
+
+            if (this.group) {
                 this.parent.updateValue();
+            } else {
+                this.updateValue();
             }
         },
         methods: {
@@ -107,30 +124,43 @@
                 const checked = event.target.checked;
                 this.currentValue = checked;
 
-                let value = checked ? this.trueValue : this.falseValue;
+                const value = checked ? this.trueValue : this.falseValue;
                 this.$emit('input', value);
 
-                if (this.group && this.label !== undefined) {
-                    this.parent.change({
-                        value: this.label,
-                        checked: this.value
-                    });
-                }
-                if (!this.group) {
+                if (this.group) {
+                    if (this.label !== undefined) {
+                        this.parent.change({
+                            value: this.label,
+                            checked: this.value
+                        });
+                    }
+                } else {
                     this.$emit('on-change', value);
                     this.dispatch('FormItem', 'on-form-change', value);
                 }
             },
             updateValue () {
                 this.currentValue = this.value === this.trueValue;
+            },
+            onBlur () {
+                this.focusWrapper = false;
+                this.focusInner = false;
+            },
+            onFocus () {
+                if (this.group && this.parent.type === 'button') {
+                    this.focusWrapper = true;
+                } else {
+                    this.focusInner = true;
+                }
             }
         },
         watch: {
             value (val) {
-                if (val !== this.trueValue && val !== this.falseValue) {
+                if (val === this.trueValue || val === this.falseValue) {
+                    this.updateValue();
+                } else {
                     throw 'Value should be trueValue or falseValue.';
                 }
-                this.updateValue();
             }
         }
     };
diff --git a/src/styles/components/radio.less b/src/styles/components/radio.less
index de53295b..51498446 100644
--- a/src/styles/components/radio.less
+++ b/src/styles/components/radio.less
@@ -3,11 +3,16 @@
 @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
 @radio-group-button-prefix-cls: ~"@{radio-group-prefix-cls}-button";
 
+.@{radio-prefix-cls}-focus {
+    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+    z-index: 1;
+}
+
 .@{radio-group-prefix-cls} {
     display: inline-block;
     font-size: @font-size-small;
     vertical-align: middle;
-    //outline: 0;
+    //outline: none;
     &-vertical{
         .@{radio-prefix-cls}-wrapper {
             display: block;
@@ -29,20 +34,14 @@
     &-disabled{
         cursor: @cursor-disabled;
     }
-    outline: 0;
-    &:focus {
-        & .@{radio-inner-prefix-cls} {
-            box-shadow: 0 0 0 2px fade(@primary-color, 20%);
-            z-index: 1;
-        }
-    }
+    //outline: none;
 }
 
 .@{radio-prefix-cls} {
     display: inline-block;
     margin-right: 4px;
     white-space: nowrap;
-    outline: none;
+    //outline: none;
     position: relative;
     line-height: 1;
     vertical-align: middle;
@@ -227,11 +226,6 @@ span.@{radio-prefix-cls} + * {
             }
         }
 
-        &:focus {
-            box-shadow: 0 0 0 2px fade(@primary-color, 20%);
-            z-index: 1;
-        }
-
         .@{radio-prefix-cls}-inner,
         input {
             opacity: 0;
@@ -247,7 +241,7 @@ span.@{radio-prefix-cls} + * {
 
             &:first-child {
                 border-color: @primary-color;
-                box-shadow: none!important;
+                //box-shadow: none!important;
             }
 
             &:hover {
@@ -256,10 +250,6 @@ span.@{radio-prefix-cls} + * {
                 color: tint(@primary-color, 20%);
             }
 
-            &:focus {
-                box-shadow: 0 0 0 2px fade(@primary-color, 20%)!important;
-            }
-
             &:active {
                 border-color: shade(@primary-color, 5%);
                 //box-shadow: -1px 0 0 0 shade(@primary-color, 5%);

From ebba929712aadc903823ba1cbdbb5d4a638dfaed Mon Sep 17 00:00:00 2001
From: Xotic750 <xotic750@gmail.com>
Date: Sat, 20 Jan 2018 23:59:13 +0100
Subject: [PATCH 5/8] Revert pkg

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a9e1e09c..d22f448c 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "tinycolor2": "^1.4.1"
   },
   "peerDependencies": {
-    "vue": "^2.5.13"
+    "vue": "^2.5.2"
   },
   "devDependencies": {
     "autoprefixer-loader": "^2.0.0",

From 76b2f0324584d3fd8ea506c4f6ec809ca646953c Mon Sep 17 00:00:00 2001
From: Xotic750 <xotic750@gmail.com>
Date: Sun, 21 Jan 2018 01:22:22 +0100
Subject: [PATCH 6/8] Remove refs

---
 src/components/radio/radio.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index 7d78d1c1..ebd5b9c5 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -1,7 +1,7 @@
 <template>
-    <label :class="wrapClasses" ref="label">
+    <label :class="wrapClasses">
         <span :class="radioClasses">
-            <span :class="innerClasses" ref="inner"></span>
+            <span :class="innerClasses"></span>
             <input
                 type="radio"
                 :class="inputClasses"

From 2e14b458da32fd1687b80802663d9890a414faf1 Mon Sep 17 00:00:00 2001
From: Xotic750 <xotic750@gmail.com>
Date: Sun, 21 Jan 2018 01:26:05 +0100
Subject: [PATCH 7/8] Disable lint error

---
 src/components/radio/radio.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index ebd5b9c5..c5293b92 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -101,9 +101,11 @@
             if (this.parent) {
                 this.group = true;
                 if (this.name && this.name !== this.parent.name) {
+                    /* eslint-disable no-console */
                     if (console.warn) {
                         console.warn('[iview] Name does not match Radio Group name.');
                     }
+                    /* eslint-enable no-console */
                 } else {
                     this.groupName = this.parent.name; 
                 }

From a646fc36fe18e876109f0c6932623b8a617f6b84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 22 Jan 2018 17:47:06 +0800
Subject: [PATCH 8/8] optimize box-shadow

use two box-shadow when focus, and a :after to make focus style looks better
---
 src/styles/components/radio.less | 53 +++++++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/styles/components/radio.less b/src/styles/components/radio.less
index 51498446..c14a085f 100644
--- a/src/styles/components/radio.less
+++ b/src/styles/components/radio.less
@@ -178,34 +178,45 @@ span.@{radio-prefix-cls} + * {
         height: @btn-circle-size;
         line-height: @btn-circle-size - 2px;
         margin: 0;
-        padding: 0 16px;
+        padding: 0 16px - 1px;
         font-size: @font-size-small;
         color: @btn-default-color;
         transition: all @transition-time ease-in-out;
         cursor: pointer;
         border: 1px solid @border-color-base;
-        //border-left: 0;
+        border-left: 0;
         background: #fff;
+        position: relative;
 
         > span {
             margin-left: 0;
         }
 
-        &:before {
+        &:before, &:after {
             content: '';
+            display: block;
             position: absolute;
             width: 1px;
             height: 100%;
             left: -1px;
+            top: 0;
             background: @border-color-base;
-            visibility: hidden;
+            //visibility: hidden;
             transition: all @transition-time ease-in-out;
         }
 
+        &:after{
+            height: @btn-circle-size + 4px;
+            left: -1px;
+            top: -3px;
+            background: fade(@primary-color, 20%);
+            opacity: 0;
+        }
+
         &:first-child {
             border-radius: @btn-border-radius 0 0 @btn-border-radius;
             border-left: 1px solid @border-color-base;
-            &:before {
+            &:before, &:after {
                 display: none;
             }
         }
@@ -237,11 +248,31 @@ span.@{radio-prefix-cls} + * {
             background: #fff;
             border-color: @primary-color;
             color: @primary-color;
-            //box-shadow: -1px 0 0 0 @primary-color;
+            box-shadow: -1px 0 0 0 @primary-color;
+            z-index: 1;
+
+            &:before{
+                background: @primary-color;
+                opacity: 0.1;
+            }
+
+            &.@{radio-prefix-cls}-focus{
+                box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px fade(@primary-color, 20%);
+                transition: all @transition-time ease-in-out;
+                &:after{
+                    left: -3px;
+                    top: -3px;
+                    opacity: 1;
+                    background: fade(@primary-color, 20%);
+                }
+                &:first-child{
+                    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+                }
+            }
 
             &:first-child {
                 border-color: @primary-color;
-                //box-shadow: none!important;
+                box-shadow: none;
             }
 
             &:hover {
@@ -287,6 +318,9 @@ span.@{radio-prefix-cls} + * {
     height: @btn-circle-size-large;
     line-height: @btn-circle-size-large - 2px;
     font-size: @font-size-base;
+    &:after{
+        height: @btn-circle-size-large + 4px;
+    }
 }
 
 .@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
@@ -294,6 +328,11 @@ span.@{radio-prefix-cls} + * {
     line-height: @btn-circle-size-small - 2px;
     padding: 0 12px;
     font-size: @font-size-small;
+
+    &:after{
+        height: @btn-circle-size-small + 4px;
+    }
+
     &:first-child {
         border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
     }