This is an automated email from the ASF dual-hosted git repository. diegopucci pushed a commit to branch geido/feat/antdesign-5 in repository https://gitbox.apache.org/repos/asf/superset.git
commit 91582f3fbac63017895fe61f64223f75ef7c40ac Author: Diego Pucci <[email protected]> AuthorDate: Sun Jun 9 19:09:43 2024 +0200 Upgrade Badge to Antd 5 --- .../src/components/Badge/Badge.stories.tsx | 8 --- .../src/components/Badge/Badge.test.tsx | 9 ---- superset-frontend/src/components/Badge/index.tsx | 20 ++++---- .../dashboard/components/FiltersBadge/index.tsx | 5 +- .../src/views/RootContextProviders.tsx | 58 ++++++++++++++-------- 5 files changed, 49 insertions(+), 51 deletions(-) diff --git a/superset-frontend/src/components/Badge/Badge.stories.tsx b/superset-frontend/src/components/Badge/Badge.stories.tsx index aa7f6b86af..201731f213 100644 --- a/superset-frontend/src/components/Badge/Badge.stories.tsx +++ b/superset-frontend/src/components/Badge/Badge.stories.tsx @@ -64,7 +64,6 @@ InteractiveBadge.args = { count: null, color: null, text: 'Text', - textColor: null, status: 'success', size: 'default', }; @@ -88,12 +87,6 @@ InteractiveBadge.argTypes = { options: [undefined, ...COLORS.options], }, }, - textColor: { - control: { - type: 'select', - options: [undefined, ...COLORS.options], - }, - }, count: { control: { type: 'select', @@ -110,7 +103,6 @@ export const BadgeGallery = () => ( {COLORS.options.map(color => ( <Badge count={9} - textColor={color} size={size} key={`${color}_${size}`} style={{ marginRight: '15px' }} diff --git a/superset-frontend/src/components/Badge/Badge.test.tsx b/superset-frontend/src/components/Badge/Badge.test.tsx index 084dceb342..cbf9bcf80e 100644 --- a/superset-frontend/src/components/Badge/Badge.test.tsx +++ b/superset-frontend/src/components/Badge/Badge.test.tsx @@ -22,7 +22,6 @@ import Badge from '.'; const mockedProps = { count: 9, text: 'Text', - textColor: 'orange', }; test('should render', () => { @@ -39,11 +38,3 @@ test('should render the text', () => { render(<Badge {...mockedProps} />); expect(screen.getByText('Text')).toBeInTheDocument(); }); - -test('should render with the chosen textColor', () => { - render(<Badge {...mockedProps} />); - const badge = screen.getAllByText('9')[0]; - expect(badge).toHaveStyle(` - color: 'orange'; - `); -}); diff --git a/superset-frontend/src/components/Badge/index.tsx b/superset-frontend/src/components/Badge/index.tsx index 9138529879..6ae0bf4b66 100644 --- a/superset-frontend/src/components/Badge/index.tsx +++ b/superset-frontend/src/components/Badge/index.tsx @@ -32,19 +32,21 @@ const Badge = styled( <AntdBadge text={text} color={text ? color : undefined} - classNames={{ - root: 'superset-badge', - }} + status={props.status || 'default'} {...props} /> ), )` - & > sup { - padding: 0 ${({ theme }) => theme.gridUnit * 2}px; - background: ${({ theme, color }) => color || theme.colors.primary.base}; - color: ${({ theme, textColor }) => - textColor || theme.colors.grayscale.light5}; - } + ${({ theme, color, count }) => ` + & > sup, + & > sup.ant-badge-count { + ${ + count !== undefined + ? `background: ${color || theme.colors.primary.base};` + : '' + } + } + `} `; export default Badge; diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx index dfea5cd508..6444d12d41 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx @@ -84,16 +84,15 @@ const StyledFilterCount = styled.div` const StyledBadge = styled(Badge)` ${({ theme }) => ` - vertical-align: middle; margin-left: ${theme.gridUnit * 2}px; - &>sup { - padding: 0 ${theme.gridUnit}px; + &>sup.ant-badge-count { min-width: ${theme.gridUnit * 4}px; height: ${theme.gridUnit * 4}px; line-height: 1.5; font-weight: ${theme.typography.weights.medium}; font-size: ${theme.typography.sizes.s - 1}px; box-shadow: none; + padding: 0 ${theme.gridUnit}px; } `} `; diff --git a/superset-frontend/src/views/RootContextProviders.tsx b/superset-frontend/src/views/RootContextProviders.tsx index 12bdd7d86f..83a439ebb1 100644 --- a/superset-frontend/src/views/RootContextProviders.tsx +++ b/superset-frontend/src/views/RootContextProviders.tsx @@ -25,6 +25,7 @@ import { QueryParamProvider } from 'use-query-params'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import getBootstrapData from 'src/utils/getBootstrapData'; +import { ConfigProvider } from 'antd-v5'; import { store } from './store'; import FlashProvider from '../components/FlashProvider'; import { theme } from '../preamble'; @@ -35,6 +36,17 @@ const { common } = getBootstrapData(); const extensionsRegistry = getExtensionsRegistry(); +const antdTheme = { + components: { + Badge: { + colorBgContainer: theme.colors.grayscale.light5, + // colorError affects the color of the badge count too + // must override at the Badge component level + colorError: theme.colors.error.base, + }, + }, +}; + export const RootContextProviders: FC = ({ children }) => { const RootContextProviderExtension = extensionsRegistry.get( 'root.context.provider', @@ -42,28 +54,30 @@ export const RootContextProviders: FC = ({ children }) => { return ( <ThemeProvider theme={theme}> - <ReduxProvider store={store}> - <DndProvider backend={HTML5Backend}> - <FlashProvider messages={common.flash_messages}> - <EmbeddedUiConfigProvider> - <DynamicPluginProvider> - <QueryParamProvider - ReactRouterRoute={Route} - stringifyOptions={{ encode: false }} - > - {RootContextProviderExtension ? ( - <RootContextProviderExtension> - {children} - </RootContextProviderExtension> - ) : ( - children - )} - </QueryParamProvider> - </DynamicPluginProvider> - </EmbeddedUiConfigProvider> - </FlashProvider> - </DndProvider> - </ReduxProvider> + <ConfigProvider theme={antdTheme}> + <ReduxProvider store={store}> + <DndProvider backend={HTML5Backend}> + <FlashProvider messages={common.flash_messages}> + <EmbeddedUiConfigProvider> + <DynamicPluginProvider> + <QueryParamProvider + ReactRouterRoute={Route} + stringifyOptions={{ encode: false }} + > + {RootContextProviderExtension ? ( + <RootContextProviderExtension> + {children} + </RootContextProviderExtension> + ) : ( + children + )} + </QueryParamProvider> + </DynamicPluginProvider> + </EmbeddedUiConfigProvider> + </FlashProvider> + </DndProvider> + </ReduxProvider> + </ConfigProvider> </ThemeProvider> ); };
