fix: fix type = button / card RadioGroup style, close #1954, #2126 (#…

…2149) fix: fix radio group style, close #1954, #2126 Co-authored-by: nekocode <[email protected]>
DouyinFE · Apr 2, 2024 · 506a7ca · 506a7ca
1 parent 2f78190
commit 506a7ca
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 33 deletions.
diff --git a/content/input/radio/index-en-US.md b/content/input/radio/index-en-US.md
@@ -37,8 +37,6 @@ import { Radio } from '@douyinfe/semi-ui';
 
 You can use `extra` to add extra information, which can be any type of ReactNode.
 
-> `extra` >= v0.25.0
-
 ```jsx live=true
 import React from 'react';
 import { Radio } from '@douyinfe/semi-ui';
@@ -379,18 +377,18 @@ class App extends React.Component {
 | addonId | id of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly  <br/>**provided after v2.11.0**                                 | string            |       |
 | addonStyle | inline style of content wrapper<br/>**provided after v1.16.0** | object |  |
 | aria-label      | Label of Radio                                                            | string           | -  |
-| name         | The `name` attribute passed to `input[type="radio"]` in the Radio component, Radios with the same `name` belong to the same RadioGroup,The `name` attribute can refer to [MDN Radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/radio#value)   | string         | -  |
 | autoFocus | Automatically focus the form control when the page is loaded | boolean | false |
 | checked | Specify whether it is currently selected | boolean | false |
-| type | Set the type of radio, one of `default`, `button`, `card`, `pureCard` <br/>**This api is provided after v2.18.0**| string | `default` |
 | className | Class name | string |  |
 | defaultChecked | Checked by default | boolean | false |
 | disabled | Disable the radio | boolean | false |
-| extra | Extra information displayed <br/>**provided after v0.25.0** | ReactNode | - |
+| extra | Extra information displayed | ReactNode | - |
 | extraId        | id of extra node. aria-describedby refers to this id, if not set, it will randomly generate an id <br/>**provided after v2.11.0**                     | ReactNode         | -      |
 | mode | In advanced mode, options can be clicked to uncheck, one of `advanced` | string | - |
+| name | The `name` attribute passed to `input[type="radio"]` in the Radio component, Radios with the same `name` belong to the same RadioGroup,The `name` attribute can refer to [MDN Radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/radio#value)   | string         | -  |
 | preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |  |  |
 | style | Inline style | CSSProperties |  |
+| type | Set the type of radio, one of `default`, `button`, `card`, `pureCard` <br/>**This api is provided after v2.18.0**| string | `default` |
 | value | Compared based on value to determine whether the option is selected | string \| number | - |
 | onChange | Callback function when the selected option changes | Function (e: Event) | - |
 | onMouseEnter | The callback function when the mouse moves into the option   | function(e:Event) | -   |

diff --git a/content/input/radio/index.md b/content/input/radio/index.md
@@ -33,8 +33,6 @@ import { Radio } from '@douyinfe/semi-ui';
 
 通过`extra`设置辅助文本，可以是任意类型的 ReactNode
 
-> `extra`在 v0.25.0 后开始提供
-
 ```jsx live=true
 import React from 'react';
 import { Radio } from '@douyinfe/semi-ui';
@@ -325,18 +323,18 @@ class App extends React.Component {
 | addonId | addon 节点 id，aria-labelledby 指向这个 id，若无设置会随机生成一个 id  <br/>**v2.11.0 后提供**                                 | string            |       |
 | addonStyle     | 包裹内容容器的内联样式  <br/>**v1.16.0 后提供**                                 | CSSProperties     |       |
 | aria-label      | Radio 的 label                                                            | string           | -  |
-| name         | Radio组件中`input[type="radio"]`的`name`属性，具有相同`name`的Radio属于同一个RadioGroup，`name`属性可参考[MDN Radio](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio#%E5%80%BC)                              | string         | -  |
 | autoFocus      | 自动获取焦点                                                            | boolean           | false  |
 | checked        | 指定当前是否选中                                                         | boolean           | false  |
-|type            |设置 radio的样式类型，可选值为：`default`、`button`、`card`、`pureCard` <br/>**该 api 在 v2.18.0 后提供**    |string|`default`|
 | className      | 样式类名                                                                | string            |        |
 | defaultChecked | 初始是否选中                                                             | boolean           | false  |
 | disabled       | 禁选单选框                                                              |boolean            | false    |
-| extra          | 副文本，只对type='default'生效<br/>**v0.25.0 后提供**                     | ReactNode         | -      |
+| extra          | 副文本，只对type='default'生效<br/>                                      | ReactNode         | -      |
 | extraId        | 副文本的 id，aria-describedby 指向这个 id，若无设置会随机生成一个 id <br/>**v2.11.0 后提供**                     | ReactNode         | -      |
 | mode           | 高级和普通模式，高级模式可以在 checked 时点击变成 unchecked，可选值 advanced   | string            | -      |
+| name         | Radio组件中`input[type="radio"]`的`name`属性，具有相同`name`的Radio属于同一个RadioGroup，`name`属性可参考 [MDN Radio](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio#%E5%80%BC)                              | string         | -  |
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean |  |  |
 | style          | 内联样式                                                                 | CSSProperties    |        |
+| type            |设置 radio的样式类型，可选值为：`default`、`button`、`card`、`pureCard` <br/>**该 api 在 v2.18.0 后提供**    |string|`default`|
 | value          | 根据 value 进行比较，判断是否选中                                          | string \| number               | -      |
 | onChange       | 选项变化时的回调函数                                                      | function(e:Event) | -      |
 | onMouseEnter   | 鼠标移入选项时的回调函数                                                   | function(e:Event) | -      |

diff --git a/packages/semi-foundation/form/form.scss b/packages/semi-foundation/form/form.scss
@@ -9,6 +9,8 @@ $col: #{$form}-col;
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
 $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+$horizontalCardRadioGroup: #{$prefix}-radioGroup-horizontal-card;
+$verticalCardRadioGroup: #{$prefix}-radioGroup-vertical-card;
 
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
@@ -171,11 +173,17 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        // no need to adjust height for button radio & card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$field}-label-with-extra {
             display: flex;
             align-items: center;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -197,8 +205,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-        // no need to adjust height for button radio, already 32px
-        .#{$buttonRadioGroup} {
+        // no need to adjust height for button radio, already 32px, no need to consider height of card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
             padding-top: 0;
             padding-bottom: 0;
         }

diff --git a/packages/semi-foundation/radio/radio.scss b/packages/semi-foundation/radio/radio.scss
@@ -335,6 +335,7 @@ $inner-width: $width-icon-medium;
         left: 0;
         width: 100%;
         height: 100%;
+        margin-top: 0; // when type= button/card/pureCard, reset margin
         z-index: -1;
         opacity: 0;
     }

diff --git a/packages/semi-ui/radio/_story/radio.stories.jsx b/packages/semi-ui/radio/_story/radio.stories.jsx
@@ -435,27 +435,51 @@ export const RadioGroupButtonStyle = () => {
     const onChange3 = e => {
       setValue3(e.target.value);
     };
+
+    const options = [
+      { label: 'semi', value: 1 },
+      { label: 'design', value: 2 },
+      { label: 'designToCode', value: 3 },
+      { label: 'dsm', value: 4 },
+    ];
+
+    const rowStyle = { marginBottom: 12 }
+
+    const type = 'button';
+
     return (
-      <Space vertical spacing="loose" align="start">
-        <RadioGroup type="button" buttonSize="small" onChange={onChange1} value={value1} name="demo-radio-button-1">
-          <Radio value={1}>semi</Radio>
-          <Radio value={2}>pipixia</Radio>
-          <Radio value={3}>hotsoon</Radio>
-          <Radio value={4}>toutiao</Radio>
-        </RadioGroup>
-        <RadioGroup type="button" buttonSize="middle" onChange={onChange2} value={value2} name="demo-radio-button-2">
-          <Radio value={1}>semi</Radio>
-          <Radio value={2}>pipixia</Radio>
-          <Radio value={3}>hotsoon</Radio>
-          <Radio value={4}>toutiao</Radio>
-        </RadioGroup>
-        <RadioGroup type="button" buttonSize="large" onChange={onChange3} value={value3} name="demo-radio-button-3">
-          <Radio value={1}>semi</Radio>
-          <Radio value={2}>pipixia</Radio>
-          <Radio value={3}>hotsoon</Radio>
-          <Radio value={4}>toutiao</Radio>
-        </RadioGroup>
-      </Space>
+      <Row>
+        {/* default button radio */}
+        <Col span={12}>
+            <div style={rowStyle}>
+              <RadioGroup type={type} buttonSize="small" onChange={onChange1} options={options} value={value1} name="demo-radio-button-1" />
+            </div>
+            <div style={rowStyle}>
+              <RadioGroup type={type} buttonSize="middle" onChange={onChange2} options={options} value={value2} name="demo-radio-button-2" />
+            </div>
+            <div style={rowStyle}>
+              <RadioGroup type={type} buttonSize="large" onChange={onChange3} options={options}  value={value3} name="demo-radio-button-3" />
+            </div>
+        </Col>
+
+        {/* form radio button */}
+        <Col span={12}>
+            <Form>
+                <div style={rowStyle}>
+                  <Form.RadioGroup field='test1' type={type} buttonSize="small" onChange={onChange1} options={options}  value={value1} name="demo-radio-button-1">
+                  </Form.RadioGroup>
+                </div>
+                <div style={rowStyle}>
+                  <Form.RadioGroup field='test2' type={type} buttonSize="middle" onChange={onChange2} options={options}  value={value2} name="demo-radio-button-2">
+                  </Form.RadioGroup>
+                </div>
+                <div style={rowStyle}>
+                  <Form.RadioGroup field='test3' type={type} buttonSize="large" onChange={onChange3} options={options}  value={value3} name="demo-radio-button-3">
+                  </Form.RadioGroup>
+                </div>
+            </Form>
+        </Col>
+      </Row>
     );
   };