fix(switch): fix style (#1768)

Co-authored-by: maxin <[email protected]>
growingio · Jan 4, 2022 · 45c05bb · 45c05bb · vercel · Jan 4, 2022
1 parent d6f1b49
commit 45c05bb
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 78 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,19 +1,25 @@
 module.exports = {
-  extends: ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "prettier", "plugin:storybook/recommended"],
+  extends: [
+    'airbnb',
+    'airbnb/hooks',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   env: {
     browser: true,
     mocha: true,
-    jest: true
+    jest: true,
   },
   // 忽略对全局 variable 的检查
   globals: {
-    Promise: true
+    Promise: true,
   },
   settings: {
     react: {
-      version: 'detect'
-    }
+      version: 'detect',
+    },
   },
   plugins: ['prettier', '@typescript-eslint'],
   // Rewrite style
@@ -24,24 +30,39 @@ module.exports = {
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': [1],
     '@typescript-eslint/no-unused-vars': 'error',
-    'react/jsx-filename-extension': ['error', {
-      extensions: ['.js', '.jsx', '.ts', '.tsx']
-    }],
+    'react/jsx-filename-extension': [
+      'error',
+      {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    ],
     'react/jsx-props-no-spreading': 'off',
     'import/no-unresolved': 'off',
-    'import/no-extraneous-dependencies': ['error', {
-      devDependencies: true
-    }],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: true,
+      },
+    ],
     'import/extensions': ['off', 'never'],
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': ['error'],
     'no-underscore-dangle': 'off',
     'no-unused-expressions': [0],
     'react/static-property-placement': ['error', 'static public field'],
-    '@typescript-eslint/no-unused-expressions': ['error', {
-      allowShortCircuit: true
-    }],
+    '@typescript-eslint/no-unused-expressions': [
+      'error',
+      {
+        allowShortCircuit: true,
+      },
+    ],
     '@typescript-eslint/explicit-module-boundary-types': ['off'],
-    'react/jsx-no-bind': ['off']
-  }
-};
+    'react/jsx-no-bind': ['off'],
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        assert: 'either',
+      },
+    ],
+  },
+};
diff --git a/package.json b/package.json
@@ -135,7 +135,7 @@
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",

diff --git a/src/switchGroup/Group.tsx b/src/switchGroup/Group.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { isUndefined } from 'lodash';
+import { usePrefixCls } from '@gio-design/utils';
 import usePrevious from '../utils/hooks/usePrevious';
 import filterChildren from '../utils/filterChildren';
-import usePrefixCls from '../utils/hooks/use-prefix-cls';
 import SwitchItem from './SwitchItem';
 import SwitchGroupContext from './context';
 import { ISwitchGroupProps, SwitchItemValueType } from './interface';
@@ -13,7 +13,18 @@ const InnerGroup: React.ForwardRefRenderFunction<HTMLDivElement, ISwitchGroupPro
   props: ISwitchGroupProps,
   ref
 ) => {
-  const { className, style, disabled, defaultValue, value, onChange, children, options, size = 'normal', dataTestId = "switch" } = props;
+  const {
+    className,
+    style,
+    disabled,
+    defaultValue,
+    value,
+    onChange,
+    children,
+    options,
+    size = 'normal',
+    dataTestId = 'switch',
+  } = props;
 
   const prefixCls = usePrefixCls('switch');
   const [selectedValue, setSelectedValue] = useState(() => (!isUndefined(value) ? value : defaultValue));
@@ -40,7 +51,7 @@ const InnerGroup: React.ForwardRefRenderFunction<HTMLDivElement, ISwitchGroupPro
     });
 
   const renderItems = () => {
-    let renderedChildren: React.ReactNodeArray = [];
+    let renderedChildren: React.ReactNode[] = [];
     if (options && options.length > 0) {
       renderedChildren = options
         .filter((_) => !!_)

diff --git a/src/switchGroup/SwitchItem.tsx b/src/switchGroup/SwitchItem.tsx
@@ -6,7 +6,7 @@ import SwitchGroupContext from './context';
 import { ISwitchProps } from './interface';
 import WithRef from '../utils/withRef';
 
-const InnerSwitchItem: React.ForwardRefRenderFunction<HTMLInputElement, ISwitchProps> = (props: ISwitchProps, ref) => {
+const InnerSwitchItem: React.ForwardRefRenderFunction<HTMLInputElement, ISwitchProps> = (props, ref) => {
   const { prefixCls: customPrefixCls, className, style, children, defaultChecked, prefix, ...restProps } = props;
 
   const groupContext = useContext(SwitchGroupContext);
@@ -33,8 +33,11 @@ const InnerSwitchItem: React.ForwardRefRenderFunction<HTMLInputElement, ISwitchP
     [`${prefixCls}-${restProps.disabled ? 'disabled' : ''}`]: switchProps.disabled,
   });
 
+  const prefixIcon = React.isValidElement(prefix)
+    ? React.cloneElement(prefix, { className: `${prefixCls}-prefix` })
+    : prefix;
+
   return (
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label className={wrapperCls}>
       <input
         type="radio"
@@ -45,12 +48,11 @@ const InnerSwitchItem: React.ForwardRefRenderFunction<HTMLInputElement, ISwitchP
         style={style}
         disabled={restProps.disabled}
         defaultChecked={defaultChecked}
+        data-testid="switch-item"
         {...switchProps}
       />
-      <span>
-        {prefix}
-        {children}
-      </span>
+      {prefixIcon}
+      {children}
     </label>
   );
 };

diff --git a/src/switchGroup/demo/Switch.stories.tsx b/src/switchGroup/demo/Switch.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { withDesign } from 'storybook-addon-designs';
-import { ListOutlined } from '@gio-design/icons';
+import { ListOutlined, PushMsgFilled } from '@gio-design/icons';
 import Switch from '../index';
 import { ISwitchGroupProps } from '../interface';
 import Docs from './SwitchPage';
@@ -329,7 +329,9 @@ const JSXTemplateGroup: Story<ISwitchGroupProps> = (args) => {
     <>
       <Switch {...args} size="normal" value={selectedValue} onChange={onChange}>
         {tabs.map((t) => (
-          <Switch.Item value={t.value}>{t.value}</Switch.Item>
+          <Switch.Item value={t.value} prefix={<PushMsgFilled />}>
+            {t.value}
+          </Switch.Item>
         ))}
       </Switch>
     </>

diff --git a/src/switchGroup/style/index.less b/src/switchGroup/style/index.less
@@ -1,6 +1,4 @@
-@import '../../stylesheet/index.less';
-@import '../../stylesheet/mixin/index.less';
-@import '../../stylesheet/variables/index.less';
+@import (reference) '../../stylesheet/variables/index.less';
 
 @switch-prefix-cls: ~'@{component-prefix}-switch';
 
@@ -12,14 +10,35 @@
 
 .@{switch__wrapper} {
   position: relative;
-  display: inline-block;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
   max-width: 100%;
+  height: 100%;
   margin: 0;
+  padding: 0 12px;
   color: @gray-5;
   font-weight: normal;
+  font-size: 14px;
+  font-style: normal;
   white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid @gray-2;
+  border-radius: 4px;
   cursor: pointer;
 
+  &:not(:last-of-type) {
+    border-right-color: transparent;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:not(:first-of-type) {
+    margin-left: -1px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   @supports (-webkit-appearance: none) or (-moz-appearance: none) {
     input[type='radio'].@{switch-prefix-cls} {
       display: none;
@@ -29,6 +48,11 @@
     }
   }
 
+  > span.gio-icon {
+    display: flex;
+    align-items: center;
+  }
+
   &:hover {
     color: @blue-3;
   }
@@ -41,43 +65,20 @@
   }
 }
 
+.@{switch-prefix-cls}-prefix {
+  margin-right: 8px;
+}
+
 .@{switch__wrapper__checked} {
-  span {
-    color: @blue-3;
-    vertical-align: bottom;
-    background: @gray-1;
-  }
+  color: @blue-3;
+  background: @gray-1;
 }
 
 .@{switch__wrapper__disabled} {
   color: @gray-3;
   background: @gray-1;
 }
 
-.@{switch-prefix-cls} {
-  position: relative;
-  top: 0;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-  white-space: nowrap;
-  vertical-align: middle;
-  outline: none;
-  cursor: pointer;
-
-  & + * {
-    display: inline-block;
-    padding: 0 12px;
-    font-weight: normal;
-    font-size: 14px;
-    font-style: normal;
-  }
-}
-
 .@{switch-disabled} {
   background-color: @gray-1;
   border-color: @gray-2;
@@ -89,9 +90,9 @@
   @switch-normal-height: 36px;
 
   display: inline-flex;
+  align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
-  border: 1px solid @gray-2;
   border-radius: 4px;
 
   &_small {
@@ -103,18 +104,4 @@
     height: @switch-normal-height;
     line-height: 34px;
   }
-
-  label:nth-child(n + 2) {
-    border-left: 1px solid @gray-2;
-  }
-  label:nth-child(1) {
-    span {
-      border-radius: 4px 0 0 4px;
-    }
-  }
-  label:last-child {
-    span {
-      border-radius: 0 4px 4px 0;
-    }
-  }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -7768,7 +7768,7 @@ eslint-plugin-import@^2.22.0:
     resolve "^1.20.0"
     tsconfig-paths "^3.11.0"
 
-eslint-plugin-jsx-a11y@^6.3.1:
+eslint-plugin-jsx-a11y@^6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz#cdbf2df901040ca140b6ec14715c988889c2a6d8"
   integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==