diff --git a/superset-frontend/src/components/Tags/Tag.stories.tsx b/superset-frontend/src/components/Tags/Tag.stories.tsx
new file mode 100644
index 0000000000000..bcd29cd131e50
--- /dev/null
+++ b/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) => (
+
+
+
+);
+
+InteractiveTag.args = {
+ editable: false,
+ name: 'Tag',
+};
diff --git a/superset-frontend/src/components/Tags/Tag.tsx b/superset-frontend/src/components/Tags/Tag.tsx
index d2047bbd53ee6..75a3c3e91ebe2 100644
--- a/superset-frontend/src/components/Tags/Tag.tsx
+++ b/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;
`};
`;
diff --git a/superset-frontend/src/components/Tags/TagsList.stories.tsx b/superset-frontend/src/components/Tags/TagsList.stories.tsx
index b1f11073361f7..3c9a19ef3847e 100644
--- a/superset-frontend/src/components/Tags/TagsList.stories.tsx
+++ b/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) => (
-
+export const InteractiveTagsList = ({
+ tags,
+ editable,
+ maxTags,
+}: TagsListProps) => (
+
+
+
);
const tags: TagType[] = [
@@ -42,7 +49,7 @@ const editable = true;
const maxTags = 3;
-InteractiveTags.args = {
+InteractiveTagsList.args = {
tags,
editable,
maxTags,
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
index d31dadc661a9f..308ea035d48cf 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/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,
+ },
},
};