fix(TagSelect): fix styles

alibaba · Aug 9, 2022 · 320a4c8 · 320a4c8
1 parent d7cbf4b
commit 320a4c8
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 26 deletions.
diff --git a/packages/core/src/components/tag-select/tag-select.tsx b/packages/core/src/components/tag-select/tag-select.tsx
@@ -2,7 +2,7 @@ import cx from 'classnames';
 import React from 'react';
 import { useSelectableList, UseSelectableListProps } from '../../hooks';
 import { ListNode } from '../../types';
-import { Box, Flex, FlexProps, Grid, GridProps } from '../layout';
+import { Box, FlexProps, Grid, GridProps, Group } from '../layout';
 import { TagSelectProvider, useTagSelectContext } from './context';
 import { CheckableTag, CheckableTagProps } from './tag';
 
@@ -35,7 +35,8 @@ export function TagSelect(props: TagSelectProps) {
     defaultValue,
     onChange,
     layoutProps = {
-      spacing: 'm',
+      spacingX: 'm',
+      spacingY: 'm',
     },
     className,
     columns,
@@ -69,9 +70,9 @@ export function TagSelect(props: TagSelectProps) {
             {items}
           </Grid>
         ) : (
-          <Flex className={clazz} flexWrap="wrap" {...layoutProps}>
+          <Group className={clazz} flexWrap="wrap" {...layoutProps}>
             {items}
-          </Flex>
+          </Group>
         )}
       </Box>
     </TagSelectProvider>

diff --git a/packages/core/src/components/tag-select/tag.tsx b/packages/core/src/components/tag-select/tag.tsx
@@ -7,10 +7,6 @@ const StyledTag = styled(Box)`
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
-
-  svg {
-    margin-right: var(--rex-space-m);
-  }
 `;
 
 const sizeMap: Record<string, BoxProps> = {
@@ -40,6 +36,7 @@ export const CheckableTag = (props: CheckableTagProps) => {
     ? {
         borderColor: 'brand.normal',
         color: 'brand.normal',
+        backgroundColor: 'rgba(56, 98, 207, .05)',
       }
     : {
         borderColor: 'line.border',

diff --git a/packages/core/src/theme/phone-light-theme.ts b/packages/core/src/theme/phone-light-theme.ts
@@ -6,7 +6,6 @@ export const phoneLightTheme = extendTheme(base, {
   fontSizes: {
     note: '10px',
     body: '14px',
-
     subtitle: '16px',
     title: '18px',
     subheader: '19px',

diff --git a/packages/doc/sidebars.js b/packages/doc/sidebars.js
@@ -62,6 +62,7 @@ module.exports = {
             'textarea',
             'search',
             'select',
+            'tag-select',
             'tree-select',
             'cascader-select',
           ],

diff --git a/packages/story/src/tag-select.stories.tsx b/packages/story/src/tag-select.stories.tsx
@@ -46,21 +46,5 @@ export const Size = () => (
 );
 
 export const Columns = () => (
-  <Group>
-    <TagSelect
-      columns={2}
-      selectMode="multiple"
-      dataSource={list}
-      defaultValue={['front-end']}
-      onChange={console.log}
-    />
-    <br />
-    <TagSelect
-      columns={3}
-      selectMode="multiple"
-      dataSource={list}
-      defaultValue={['front-end']}
-      onChange={console.log}
-    />
-  </Group>
+  <TagSelect columns={3} selectMode="multiple" dataSource={list} defaultValue={['front-end']} onChange={console.log} />
 );