refactor: radio style (#1060)

* refactor: radio style
* fix: RadioGroup state value first render bug

packages/semi-foundation/radio/radio.scss

@@ -7,9 +7,8 @@ $inner-width: $width-icon-medium;
 .#{$module} {
     @include box-sizing;
     @include font-size-regular;
-    position: relative;
     display: inline-flex;
-    flex-wrap: wrap;
+    column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
     border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
@@ -81,6 +80,8 @@ $inner-width: $width-icon-medium;
     }
 
     &-buttonRadioGroup {
+        // Button needs to be positioned relative to parent
+        position: relative;
         padding: $spacing-radio_buttonRadioGroup_middle-padding;
         border-radius: $radius-radio_buttonRadio;
         line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
@@ -111,11 +112,9 @@ $inner-width: $width-icon-medium;
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
-            position: relative;
             &-display {
                 background: $color-radio_card-bg-default;
             }
-            margin-right: $spacing-radio_cardRadioGroup_inner-marginRight;
             flex-shrink: 0;
         }
 
@@ -124,8 +123,6 @@ $inner-width: $width-icon-medium;
             font-size: $font-radio_cardRadioGroup_addon-size;
             line-height: $font-radio_cardRadioGroup_addon-lineHeight;
             color: $color-radio_cardRadioGroup_addon-text-default;
-            margin-left: 0;
-            padding-left: 0;
         }
 
         .#{$module}-extra {
@@ -210,19 +207,19 @@ $inner-width: $width-icon-medium;
     }
 
     &-inner {
-        position: absolute;
-        display: inline-block;
-        top: 2px;
-        left: 0;
+        display: inline-flex;
+        margin-top: 2px;
+        // WARN: The absolute positioning used by the input does not occupy space, and relative cannot be removed here.
+        position: relative;
         width: $width-radio_inner;
         height: $width-radio_inner;
         vertical-align: sub;
         user-select: none; // prevent text under it will be selected when double click
 
         &-display {
-            position: absolute;
-            left: 0;
-            top: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             @include box-sizing;
             width: $width-radio_inner;
             height: $width-radio_inner;
@@ -233,7 +230,6 @@ $inner-width: $width-icon-medium;
             border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
         
             .#{$prefix}-icon {
-                position: absolute;
                 width: 100%;
                 height: 100%;
                 font-size: 14px;
@@ -241,6 +237,11 @@ $inner-width: $width-icon-medium;
         }
     }
 
+    &-content {
+        display: flex;
+        flex-direction: column;
+    }
+
     &:hover {
         .#{$module}-inner-display {
             background: $color-radio_default-bg-hover;
@@ -255,14 +256,11 @@ $inner-width: $width-icon-medium;
 
     &-addon {
         user-select: none;
-        padding-left: $spacing-radio_addon-paddingLeft;
-        margin-left: $spacing-radio_addon-marginLeft;
         color: $color-radio_default-text-default;
         display: inline-flex;
         align-items: center;
 
         &-buttonRadio {
-            margin-left: $spacing-radio_addon_buttonRadio_marginLeft;
             text-align: center;
             border-radius: $radius-radio_addon_buttonRadio;
             font-weight: $font-radio_buttonRadio-default-fontWeight;
@@ -381,11 +379,7 @@ $inner-width: $width-icon-medium;
     }
 
     &-extra {
-        flex-grow: 1;
-        flex-basis: 100%;
-        flex-shrink: 0;
         color: $color-radio_extra-text-default;
-        padding-left: $spacing-radio_extra-paddingLeft;
         box-sizing: border-box;
     }
 
@@ -402,37 +396,26 @@ $inner-width: $width-icon-medium;
     @include font-size-regular;
 
     &-vertical {
-        .#{$module} {
-            &:last-of-type {
-                margin-bottom: 0;
-            }
-        }
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-radio_group_vertical-marginBottom;
+
         &-default {
             .#{$module} {
-                display: block;
-                margin-bottom: $spacing-radio_group_vertical-marginBottom;
-
+                display: flex;
             }
         }
         &-card {
             .#{$module} {
                 display: flex;
-                margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
             }
         }
     }
 
     &-horizontal {
-        .#{$module} {
-            margin-right: $spacing-radio_group_horizontal-marginRight;
-
-            &:last-of-type {
-                margin-right: 0;
-            }
-        }
-        &-default {
-            display: inline-block;
-        }
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: $spacing-radio_group_horizontal-marginRight;
     }
 
     &-buttonRadio {

packages/semi-foundation/radio/rtl.scss

@@ -17,62 +17,9 @@ $inner-width: $width-icon-medium;
                 padding-left: $spacing-radio_buttonRadioGroup-paddingRight;
             }
         }
-
-        &-inner {
-            left: auto;
-            right: 0;
-
-            &-display {
-                left: auto;
-                right: 0;
-            }
-        }
-
-        &-addon {
-            padding-left: 0;
-            margin-left: 0;
-            padding-right: $spacing-radio_addon-paddingLeft;
-            margin-right: $spacing-radio_addon-marginLeft;
-            
-            &-buttonRadio {
-                margin-right: $spacing-none;
-            }
-        }
-
-        &-extra {
-            padding-left: 0;
-            padding-right: $spacing-radio_extra-paddingLeft;
-        }
-    }
-
-    &-isCardRadioGroup {
-        .#{$module}-inner {
-            margin-right: 0;
-            margin-left: $spacing-radio_cardRadioGroup_inner-marginRight;
-        }
-
-        .#{$module}-addon {
-            margin-right: 0;
-            padding-right: 0;
-        }
-
-        .#{$module}-extra {
-            padding-right: 0;
-        }
     }
 
     .#{$module}Group {
         direction: rtl;
-
-        &-horizontal {
-            .#{$module} {
-                margin-right: 0;
-                margin-left: $spacing-radio_group_horizontal-marginRight;
-
-                &:last-of-type {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 }

packages/semi-ui/radio/_story/radio.stories.js

@@ -254,18 +254,18 @@ _RadioGroup.story = {
 
 export const RadioWithVertical = () => {
   return (
-    <Radio.Group>
-      <Radio value="A" displayMode="vertical">
+    <Radio.Group direction="vertical">
+      <Radio value="A">
         无限长的一串字The Storybook webapp UI can be customised with this addon. It can be used to
         change the header, show/hide various UI elements and to enable full-screen mode by default.
       </Radio>
-      <Radio value="C" displayMode="vertical">
+      <Radio value="C">
         C
       </Radio>
-      <Radio value="D" displayMode="vertical">
+      <Radio value="D">
         D
       </Radio>
-      <Radio value="E" displayMode="vertical">
+      <Radio value="E">
         E
       </Radio>
     </Radio.Group>

packages/semi-ui/radio/radio.tsx

@@ -268,20 +268,25 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
             [`${prefix}-focus`]: focusVisible && isButtonRadio,
         }, addonClassName);
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
-                        {children}
-                    </span>
-                ) : null}
-                {extra && !isButtonRadio ? (
-                    <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
+        const renderContent = () => {
+            if (!children && !extra) {
+                return null;
+            }
+            return (
+                <div className={cls([`${prefix}-content`, { [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup }])}>
+                    {children ? (
+                        <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
+                            {children}
+                        </span>
+                    ) : null}
+                    {extra && !isButtonRadio ? (
+                        <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
+                            {extra}
+                        </div>
+                    ) : null}
+                </div>
+            );
+        };
 
         return (
             <label
@@ -307,11 +312,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {
-                    isCardRadioGroup ?
-                        <div className={`${prefix}-isCardRadioGroup_content`}>{renderContent()}</div> :
-                        renderContent()
-                }
+                {renderContent()}
             </label>
         );
     }

packages/semi-ui/radio/radioGroup.tsx

@@ -88,7 +88,7 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
     constructor(props: RadioGroupProps) {
         super(props);
         this.state = {
-            value: undefined,
+            value: props.value || props.defaultValue,
         };
         this.foundation = new RadioGroupFoundation(this.adapter);
     }