feat(Switch): add autoWidth, close #2993

Author: youluna

docs/switch/demo/accessibility.md

@@ -25,7 +25,7 @@ function onChange(checked) {
 }
 
 ReactDOM.render(<div>
-    <Switch checkedChildren="on" onChange={onChange} unCheckedChildren="off" aria-label="accessible switch"/>
+    <Switch autoWidth checkedChildren="on" onChange={onChange} unCheckedChildren="off" aria-label="accessible switch"/>
 
 </div>,
 mountNode);
@@ -35,4 +35,4 @@ mountNode);
 .large-width {
     width: 100px;
 }
-````
+````

docs/switch/demo/basic.md

@@ -24,7 +24,7 @@ function onChange(checked) {
 }
 
 ReactDOM.render(<div>
-    <Switch defaultChecked={false} onChange={onChange} />
+    <Switch autoWidth defaultChecked={false} onChange={onChange} />
 </div>,
 mountNode);
 ````

docs/switch/demo/checked-children.md

@@ -24,11 +24,11 @@ function onChange(checked) {
 }
 
 ReactDOM.render(<div>
-    <Switch checkedChildren="on" unCheckedChildren="off" onChange={onChange} />
+    <Switch autoWidth checkedChildren="on" unCheckedChildren="off" onChange={onChange} />
     <br />
-    <Switch checkedChildren="已启用" unCheckedChildren="已关闭" onChange={onChange}/>
+    <Switch autoWidth checkedChildren="已启用" unCheckedChildren="已关闭" onChange={onChange}/>
     <br />
-    <Switch checkedChildren={<Icon type="select" size="xs"/>} unCheckedChildren={<Icon type="close" size="xs"/>}  onChange={onChange} />
+    <Switch autoWidth checkedChildren={<Icon type="select" size="xs"/>} unCheckedChildren={<Icon type="close" size="xs"/>}  onChange={onChange} />
 </div>,
 mountNode);
 ````

docs/switch/demo/disabled.md

@@ -27,7 +27,7 @@ const Demo = () => {
 
   return (
     <div>
-      <Switch disabled={disabled} defaultChecked />
+      <Switch autoWidth disabled={disabled} defaultChecked />
       <br />
       <Button type="primary" onClick={toggle}>
         Toggle disabled

docs/switch/demo/loading.md

@@ -19,7 +19,7 @@ Switch with loading
 import { Switch } from '@alifd/next';
 
 ReactDOM.render(<div>
-    <Switch loading defaultChecked={false} /> <Switch loading defaultChecked />
+    <Switch autoWidth loading defaultChecked={false} /> <Switch loading defaultChecked />
 </div>,
 mountNode);
 ````

docs/switch/demo/size.md

@@ -20,9 +20,9 @@ import { Switch } from '@alifd/next';
 
 ReactDOM.render(
     <div>
-        <Switch />
+        <Switch autoWidth/>
         <br/>
-        <Switch size="small"/>
+        <Switch autoWidth size="small"/>
     </div>,
     mountNode
 );

docs/switch/index.md

@@ -17,6 +17,8 @@
 
 对于 checkChildren 和 unCheckedChildren 的自定义要考虑文字大小，因为 switch 的宽度有限，默认一个汉字大小。如果设置成多个字或者英文要注意宽度控制。
 
+## FAQ
+1.23 版本增加了 `autoWidth` API，我们推荐用户默认开启，同时在2.0里也会默认设置为true。开启后，原 `<Switch style={{display: 'block'}}>` 写法的用户可能会出现样式异常。
 ## API
 
 ### Switch

src/switch/index.jsx

@@ -78,6 +78,11 @@ class Switch extends React.Component {
          * @param {number} value 评分值
          */
         renderPreview: PropTypes.func,
+        /**
+         * 开启后宽度根据内容自适应
+         * @version 1.23
+         */
+        autoWidth: PropTypes.bool,
         /**
          * 国际化配置
          */
@@ -91,6 +96,7 @@ class Switch extends React.Component {
         isPreview: false,
         loading: false,
         readOnly: false,
+        autoWidth: false,
         onChange: () => {},
         locale: zhCN.Switch,
     };
@@ -143,6 +149,7 @@ class Switch extends React.Component {
             readOnly,
             size,
             loading,
+            autoWidth,
             checkedChildren,
             unCheckedChildren,
             rtl,
@@ -165,6 +172,7 @@ class Switch extends React.Component {
             [`${prefix}switch-loading`]: loading,
             [`${prefix}switch-${status}`]: true,
             [`${prefix}switch-${_size}`]: true,
+            [`${prefix}switch-auto-width`]: autoWidth,
             [className]: className,
         });
         let attrs;

src/switch/main.scss

@@ -12,6 +12,7 @@
     cursor: pointer;
     vertical-align: middle;
     user-select: none;
+    overflow: hidden;
 
     &-btn {
         transition: all $motion-duration-immediately $motion-linear;

src/switch/scss/mixin.scss

@@ -13,10 +13,15 @@
     position: relative;
     display: inline-block;
     border: $border-width-container solid transparent;
-    min-width: $width;
+    width: $width;
     height: calc(#{$trigger-size} + #{$border-width-container} * 2);
     border-radius: $container-radius;
 
+    &.#{$css-prefix}switch-auto-width {
+        min-width: $width;
+        width: auto;
+        overflow: initial;
+    }
     &:after {
         content: '';
     }

types/switch/index.d.ts

@@ -40,6 +40,7 @@ export interface SwitchProps extends HTMLAttributesWeak, CommonProps {
      * 开关当前的值(针对受控组件)
      */
     checked?: boolean;
+    autoWidth?: boolean;
 
     /**
      * 开关默认值 (针对非受控组件)