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, + }, }, };