(superset) 01/01: refactor(Tag): Upgrade Tag to Ant Design 5

[di...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch geido/chore/antd5-tagslist
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 5fd4b4801c31e0e6653fd1c308f6f323b447a557
Author: Diego Pucci <di...@gmail.com>
AuthorDate: Mon Jul 15 14:44:35 2024 +0300

    refactor(Tag): Upgrade Tag to Ant Design 5
---
 .../Tags/{TagsList.stories.tsx => Tag.stories.tsx} | 33 +++++++---------------
 superset-frontend/src/components/Tags/Tag.tsx      |  3 +-
 .../src/components/Tags/TagsList.stories.tsx       | 13 +++++++--
 superset-frontend/src/theme/index.ts               |  4 +++
 4 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/superset-frontend/src/components/Tags/TagsList.stories.tsx b/superset-frontend/src/components/Tags/Tag.stories.tsx
similarity index 64%
copy from superset-frontend/src/components/Tags/TagsList.stories.tsx
copy to superset-frontend/src/components/Tags/Tag.stories.tsx
index b1f1107336..bcd29cd131 100644
--- a/superset-frontend/src/components/Tags/TagsList.stories.tsx
+++ b/superset-frontend/src/components/Tags/Tag.stories.tsx
@@ -16,34 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import TagType from 'src/types/TagType';
-import { TagsList } from '.';
-import { TagsListProps } from './TagsList';
+import { Tag } from '.';
 
 export default {
   title: 'Tags',
-  component: TagsList,
+  component: Tag,
 };
-
-export const InteractiveTags = ({ tags, editable, maxTags }: TagsListProps) => (
-  <TagsList tags={tags} editable={editable} maxTags={maxTags} />
+export const InteractiveTag = (args: TagType) => (
+  <AntdThemeProvider>
+    <Tag {...args} />
+  </AntdThemeProvider>
 );
 
-const tags: TagType[] = [
-  { name: 'tag1' },
-  { name: 'tag2' },
-  { name: 'tag3' },
-  { name: 'tag4' },
-  { name: 'tag5' },
-  { name: 'tag6' },
-];
-
-const editable = true;
-
-const maxTags = 3;
-
-InteractiveTags.args = {
-  tags,
-  editable,
-  maxTags,
+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 d2047bbd53..75a3c3e91e 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 b1f1107336..3c9a19ef38 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) => (
-  <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,
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
index d31dadc661..308ea035d4 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,
+    },
   },
 };