docs: update faq

content/basic/typography/index-en-US.md

@@ -315,10 +315,11 @@ function Demo() {
 ### Ellipsis
 
 Show ellipsis if text is overflowed. Refer to [Ellipsis Config](#Ellipsis-Config) for detailed configuration.
-> At this moment, only pure text truncation is supported.
 
 <Notice title='Notice'>
-    ellipsis only supports truncation of plain text, and does not support complex types such as reactNode. Please ensure that the content type of children is string
+    1. ellipsis only supports truncation of plain text, and does not support complex types such as reactNode. Please ensure that the content type of children is string <br/><br/>
+    2. To achieve abbreviation, ellipsis needs to have a clear width or maxWidth limit for comparison and judgment. If the width is not set by itself (for example, purely relying on the flex property to expand), or the width is an indefinite value such as 100%, the parent needs to have a clear width or maxWidth<br/><br/>
+    3. Ellipsis needs to obtain information such as the width and height of the DOM to make basic judgments. If there is a display:none style in itself or the parent, the value will be incorrect, and the abbreviation will be invalid at this time<br/>
 </Notice>
 
 ```jsx live=true

content/basic/typography/index.md

@@ -303,7 +303,9 @@ function Demo() {
 支持文本的省略，可以通过 `ellipsis` 配置相关参数，具体参考 [Ellipsis Config](#Ellipsis-Config)。
 
 <Notice title='注意事项'>
-    ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string
+    1. ellipsis 仅支持纯文本的截断，不支持 reactNode 等复杂类型，请确保 children 传入内容类型为 string <br/>
+    2. ellipsis 要实现缩略，需要有明确的 width或 maxWidth 宽度限制做对比判断。若自身未设置宽度（例如纯依靠 flex 属性撑开），或 width为 100% 等不定数值，那么父级需要有明确的 width或 maxWidth <br/>
+    3. ellipsis 需要获取 DOM 的宽高度等信息用以做基本判断，若自身或父级存在 display:none 样式会导致取值不正确，此时缩略会失效<br/>
 </Notice>
 
 
@@ -507,7 +509,6 @@ function Demo() {
 
 
 ### Ellipsis Config
-**v >= 0.34.0**
 
 | 属性         | 说明                                                                                                              | 类型                                                | 默认值 |
 | ------------ | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------ |

content/navigation/tabs/index-en-US.md

@@ -18,9 +18,17 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
 ### Basic Usage
 
-Tbs supports three types of styles: `line`, `button`, and `card`. By default, the first tab is selected. You could use either `tabList` to pass in an array of tabs objects, or use `<TabPane>` to create each tab. Mixed usage of two ways is not recommended and data in `tabList` will be rendered with priority.
+Tbs supports three types of styles: `line`, `button`, and `card`. By default, the first tab is selected.
+
+Tabs supports two declare ways, and the rendering process of the two is different:
+- Pass the array of objects through `tabList`, when using `tabList`, only render the currently passed node each time
+- Or use `<TabPane>` to explicitly pass in item by item. When using `<TabPane>`, all panels will be rendered by default. You can set `keepDOM={false}` to only render the current panel, and there will be no animation effect at this time .
+
+<Notice title='Notice'>
+    1. When tabList and TabPane Children are used at the same time, the data passed in through tabList will be rendered first. It is not recommended to configure both <br/>
+    2. When using TabPane Children, TabPane must be a direct child element of Tabs, otherwise Tabs will not be able to correctly collect related attributes such as itemKey and other subcomponents
+</Notice>
 
-> When you use `tabList`, only the current active tab will be rendered. For `<TabPane>`, all tabs will be rendered in DOM tree by default. You could set `keepDOM={false}` to only render current panel. No animation will be displayed in this case.
 
 ```jsx live=true
 import React from 'react';
@@ -241,8 +249,10 @@ class App extends React.Component {
                 <RadioGroup
                     onChange={e => this.onSelect(e)}
                     value={this.state.type}
+                    type='button'
                     style={{
                         display: 'flex',
+                        width: 200,
                         justifyContent: 'center',
                     }}
                 >

content/navigation/tabs/index.md

@@ -18,10 +18,14 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
 ### 基本用法
 
 标签栏支持三种样式的显示：线条式，按钮式，卡片式。默认选中第一项。  
-标签页支持两种传入方式：通过 `tabList` 传入标签页对象的数组，或使用 `<TabPane>` 逐项显式传入。  
-两种方式建议不要同时使用，同时使用时会优先渲染通过 `tabList` 传入的数据。
+标签页支持两种传入方式，两者渲染流程上有所区别：
+- 通过 `tabList` 传入标签页对象的数组，当使用 `tabList` 时每次只渲染当前传入的节点
+- 或使用 `<TabPane>` 逐项显式传入，使用 `<TabPane>` 时默认会渲染所有面板，可以通过设置 `keepDOM={false}` 只渲染当前面板，此时不会有动画效果。
 
-> 当使用 `tabList` 时每次只渲染当前传入的节点使用 `<TabPane>` 时默认会渲染所有面板。可以通过设置 `keepDOM={false}` 只渲染当前面板，此时不会有动画效果。
+<Notice title='注意事项'>
+    1. tabList 与 TabPane Children 同时使用时，会优先渲染通过 tabList 传入的数据。不建议同时配置 <br/>
+    2. 使用 TabPane Children 时， TabPane 必须为 Tabs 的直接子元素，否则 Tabs 将无法正确收集子组件如 itemKey 等相关属性
+</Notice>
 
 ```jsx live=true
 import React from 'react';
@@ -230,8 +234,10 @@ class App extends React.Component {
                 <RadioGroup
                     onChange={e => this.onSelect(e)}
                     value={this.state.type}
+                    type='button'
                     style={{
                         display: 'flex',
+                        width: 200,
                         justifyContent: 'center',
                     }}
                 >

content/show/calendar/index-en-US.md

@@ -67,7 +67,7 @@ import { RadioGroup, Calendar, Radio } from '@douyinfe/semi-ui';
     const [v, setV] = useState(0);
     return (
         <div>
-            <RadioGroup defaultValue={v} aria-label="StartOfWeek" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
+            <RadioGroup type="button" defaultValue={v} aria-label="StartOfWeek" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
                 <Radio value={0}>Sunday</Radio>
                 <Radio value={1}>Mon</Radio>
                 <Radio value={2}>Tue</Radio>
@@ -213,7 +213,7 @@ class Demo extends React.Component {
         ];
         return (
             <>
-                <RadioGroup onChange={e => this.onSelect(e)} value={mode}>
+                <RadioGroup onChange={e => this.onSelect(e)} value={mode} type="button">
                     <Radio value={'day'}>Day view</Radio>
                     <Radio value={'week'}>Week view</Radio>
                     <Radio value={'month'}>Month view</Radio>

content/show/calendar/index.md

@@ -59,7 +59,7 @@ import { RadioGroup, Calendar, Radio } from '@douyinfe/semi-ui';
     const [v, setV] = useState(0);
     return (
         <div>
-            <RadioGroup defaultValue={v} aria-label="周起始日" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
+            <RadioGroup defaultValue={v} aria-label="周起始日" type="button" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
                 <Radio value={0}>周日</Radio>
                 <Radio value={1}>周一</Radio>
                 <Radio value={2}>周二</Radio>
@@ -205,7 +205,7 @@ class Demo extends React.Component {
         ];
         return (
             <>
-                <RadioGroup onChange={e => this.onSelect(e)} value={mode}>
+                <RadioGroup onChange={e => this.onSelect(e)} value={mode} type="button">
                     <Radio value={'day'}>日视图</Radio>
                     <Radio value={'week'}>周视图</Radio>
                     <Radio value={'month'}>月视图</Radio>

content/show/carousel/index-en-US.md

@@ -151,7 +151,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
             <br/>
             <Space> 
                 <div>theme</div>
-                <RadioGroup onChange={e => setTheme(e.target.value)} value={theme}>
+                <RadioGroup onChange={e => setTheme(e.target.value)} value={theme} type="button">
                     <Radio value='primary'>primary</Radio>
                     <Radio value='light'>light</Radio>
                     <Radio value='dark'>dark</Radio>
@@ -236,7 +236,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
             <Space vertical align='start'>
                 <Space> 
                     <div>type</div>
-                    <RadioGroup onChange={e => setType(e.target.value)} value={type}>
+                    <RadioGroup onChange={e => setType(e.target.value)} value={type} type="button">
                         <Radio value='dot'>dot</Radio>
                         <Radio value='line'>line</Radio>
                         <Radio value='columnar'>columnar</Radio>
@@ -244,7 +244,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
                 </Space>
                 <Space> 
                     <div>position</div>
-                    <RadioGroup onChange={e => setPosition(e.target.value)} value={position}>
+                    <RadioGroup onChange={e => setPosition(e.target.value)} value={position} type="button">
                         <Radio value='left'>left</Radio>
                         <Radio value='center'>center</Radio>
                         <Radio value='right'>right</Radio>
@@ -252,7 +252,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
                 </Space>
                 <Space> 
                     <div>size</div>
-                    <RadioGroup onChange={e => setSize(e.target.value)} value={size}>
+                    <RadioGroup onChange={e => setSize(e.target.value)} value={size} type="button">
                         <Radio value='small'>small</Radio>
                         <Radio value='medium'>medium</Radio>
                     </RadioGroup>
@@ -334,14 +334,14 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
             <Space vertical align='start'>
                 <Space> 
                     <div>arrow</div>
-                    <RadioGroup onChange={e => setShow(e.target.value)} value={show}>
+                    <RadioGroup onChange={e => setShow(e.target.value)} value={show} type="button">
                         <Radio value={true}>show</Radio>
                         <Radio value={false}>hide</Radio>
                     </RadioGroup>
                 </Space>
                 <Space> 
                     <div>show time</div>
-                    <RadioGroup onChange={e => setArrowTypew(e.target.value)} value={arrowType}>
+                    <RadioGroup onChange={e => setArrowTypew(e.target.value)} value={arrowType} type="button">
                         <Radio value='always'>always</Radio>
                         <Radio value='hover'>hover</Radio>
                     </RadioGroup>

content/show/carousel/index.md

@@ -150,7 +150,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
             <br/>
             <Space> 
                 <div>主题</div>
-                <RadioGroup onChange={e => setTheme(e.target.value)} value={theme}>
+                <RadioGroup onChange={e => setTheme(e.target.value)} value={theme} type="button">
                     <Radio value='primary'>primary</Radio>
                     <Radio value='light'>light</Radio>
                     <Radio value='dark'>dark</Radio>
@@ -235,7 +235,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
             <Space vertical align='start'>
                 <Space> 
                     <div>类型</div>
-                    <RadioGroup onChange={e => setType(e.target.value)} value={type}>
+                    <RadioGroup onChange={e => setType(e.target.value)} value={type} type="button">
                         <Radio value='dot'>dot</Radio>
                         <Radio value='line'>line</Radio>
                         <Radio value='columnar'>columnar</Radio>
@@ -243,7 +243,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
                 </Space>
                 <Space> 
                     <div>位置</div>
-                    <RadioGroup onChange={e => setPosition(e.target.value)} value={position}>
+                    <RadioGroup onChange={e => setPosition(e.target.value)} value={position} type="button">
                         <Radio value='left'>left</Radio>
                         <Radio value='center'>center</Radio>
                         <Radio value='right'>right</Radio>
@@ -251,7 +251,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
                 </Space>
                 <Space> 
                     <div>尺寸</div>
-                    <RadioGroup onChange={e => setSize(e.target.value)} value={size}>
+                    <RadioGroup onChange={e => setSize(e.target.value)} value={size} type="button">
                         <Radio value='small'>small</Radio>
                         <Radio value='medium'>medium</Radio>
                     </RadioGroup>
@@ -333,14 +333,14 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
             <Space vertical align='start'>
                 <Space> 
                     <div>展示箭头</div>
-                    <RadioGroup onChange={e => setShow(e.target.value)} value={show}>
+                    <RadioGroup onChange={e => setShow(e.target.value)} value={show} type="button">
                         <Radio value={true}>show</Radio>
                         <Radio value={false}>hide</Radio>
                     </RadioGroup>
                 </Space>
                 <Space> 
                     <div>展示时机</div>
-                    <RadioGroup onChange={e => setArrowTypew(e.target.value)} value={arrowType}>
+                    <RadioGroup onChange={e => setArrowTypew(e.target.value)} value={arrowType} type="button">
                         <Radio value='always'>always</Radio>
                         <Radio value='hover'>hover</Radio>
                     </RadioGroup>
@@ -599,7 +599,7 @@ class CarouselDemo extends React.Component {
         );
     };
 
-    onChange(activeIndex){
+    onChange(activeIndex) {
         this.setState({ activeIndex });
     }