refactor(Tag): Upgrade Tag and TagsList to Ant Design 5

superset-frontend/src/components/Tags/Tag.stories.tsx

@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
+import TagType from 'src/types/TagType';
+import { Tag } from '.';
+
+export default {
+  title: 'Tags',
+  component: Tag,
+};
+export const InteractiveTag = (args: TagType) => (
+  <AntdThemeProvider>
+    <Tag {...args} />
+  </AntdThemeProvider>
+);
+
+InteractiveTag.args = {
+  editable: false,
+  name: 'Tag',
+};

superset-frontend/src/components/Tags/Tag.tsx

@@ -19,7 +19,7 @@
 
 import { styled } from '@superset-ui/core';
 import TagType from 'src/types/TagType';
-import AntdTag from 'antd/lib/tag';
+import { Tag as AntdTag } from 'antd-v5';
 import { useMemo } from 'react';
 import { Tooltip } from 'src/components/Tooltip';
 import { CloseOutlined } from '@ant-design/icons';
@@ -28,7 +28,6 @@ const StyledTag = styled(AntdTag)`
   ${({ theme }) => `
   margin-top: ${theme.gridUnit}px;
   margin-bottom: ${theme.gridUnit}px;
-  font-size: ${theme.typography.sizes.s}px;
   `};
 `;
 

superset-frontend/src/components/Tags/TagsList.stories.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import TagType from 'src/types/TagType';
+import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import { TagsList } from '.';
 import { TagsListProps } from './TagsList';
 
@@ -25,8 +26,14 @@ export default {
   component: TagsList,
 };
 
-export const InteractiveTags = ({ tags, editable, maxTags }: TagsListProps) => (
-  <TagsList tags={tags} editable={editable} maxTags={maxTags} />
+export const InteractiveTagsList = ({
+  tags,
+  editable,
+  maxTags,
+}: TagsListProps) => (
+  <AntdThemeProvider>
+    <TagsList tags={tags} editable={editable} maxTags={maxTags} />
+  </AntdThemeProvider>
 );
 
 const tags: TagType[] = [
@@ -42,7 +49,7 @@ const editable = true;
 
 const maxTags = 3;
 
-InteractiveTags.args = {
+InteractiveTagsList.args = {
   tags,
   editable,
   maxTags,

superset-frontend/src/theme/index.ts

@@ -60,6 +60,10 @@ const baseConfig: ThemeConfig = {
       paddingLG: supersetTheme.gridUnit * 6,
       fontWeightStrong: supersetTheme.typography.weights.medium,
     },
+    Tag: {
+      borderRadiusSM: supersetTheme.gridUnit / 2,
+      defaultBg: supersetTheme.colors.grayscale.light4,
+    },
   },
 };