diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e238f3e40acf9..71f30eb220ab7 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -22,7 +22,7 @@ /.github/ @villebro @geido @eschutho @rusackas @betodealmeida @nytai @mistercrunch @craig-rueda @john-bodley @kgabryje @dpgaspar -# Notify PMC members of changes to required Github Actions +# Notify PMC members of changes to required GitHub Actions /.asf.yaml @villebro @geido @eschutho @rusackas @betodealmeida @nytai @mistercrunch @craig-rueda @john-bodley @kgabryje @dpgaspar diff --git a/superset-frontend/src/components/Card/index.tsx b/superset-frontend/src/components/Card/index.tsx index 71acde079d016..855f50c273f51 100644 --- a/superset-frontend/src/components/Card/index.tsx +++ b/superset-frontend/src/components/Card/index.tsx @@ -28,6 +28,8 @@ const Card = ({ padded, ...props }: CardProps) => ( ({ + // 'border-radius': `${theme.gridUnit}px`, + border: `1px solid ${theme.colors.grayscale.light2}`, '.antd5-card-body': { padding: padded ? theme.gridUnit * 4 : theme.gridUnit, }, @@ -35,4 +37,6 @@ const Card = ({ padded, ...props }: CardProps) => ( /> ); -export default Card; +export default Object.assign(Card, { + Meta: AntdCard.Meta, +}); diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx index ae026495d29d3..8d897d5bd32c0 100644 --- a/superset-frontend/src/components/ListViewCard/index.tsx +++ b/superset-frontend/src/components/ListViewCard/index.tsx @@ -18,8 +18,10 @@ */ import { ReactNode, ComponentType, ReactElement, FC } from 'react'; import { styled, useTheme } from '@superset-ui/core'; -import { Skeleton, AntdCard } from 'src/components'; +import { Skeleton, Card } from 'src/components'; import { Tooltip } from 'src/components/Tooltip'; +import { theme as supersetTheme } from 'src/preamble'; +import { ConfigProvider } from 'antd-v5'; import ImageLoader, { BackgroundPosition } from './ImageLoader'; import CertifiedBadge from '../CertifiedBadge'; @@ -29,19 +31,20 @@ const ActionsWrapper = styled.div` justify-content: flex-end; `; -const StyledCard = styled(AntdCard)` +// Styling part 1: Override Card tokens when possible +const listViewCardTheme = { + components: { + Card: { + colorBgContainer: supersetTheme.colors.grayscale.light5, + }, + }, +}; + +// Styling part 2: Use CSS when necessary +const StyledCard = styled(Card)` ${({ theme }) => ` - border: 1px solid ${theme.colors.grayscale.light2}; - border-radius: ${theme.gridUnit}px; overflow: hidden; - .ant-card-body { - padding: ${theme.gridUnit * 4}px - ${theme.gridUnit * 2}px; - } - .ant-card-meta-detail > div:not(:last-child) { - margin-bottom: 0; - } .gradient-container { position: relative; height: 100%; @@ -188,98 +191,101 @@ function ListViewCard({ const Link = url && linkComponent ? linkComponent : AnchorLink; const theme = useTheme(); return ( - - -
- -
- - - {!loading && coverLeft && ( - {coverLeft} - )} - {!loading && coverRight && ( - {coverRight} - )} - - - ) - } - > - {loading && ( - - - -
- {' '} - + + +
+ +
+ + + {!loading && coverLeft && ( + {coverLeft} + )} + {!loading && coverRight && ( + {coverRight} + )} + + + ) + } + > + {loading && ( + + + +
+ {' '} + +
+
+ + } + description={ + + } + /> + )} + {!loading && ( + + {subtitle || null} +
+ + + {certifiedBy && ( + <> + {' '} + + )} + {title} + + + {titleRight && {titleRight}} +
+ {actions} +
- - } - description={ - - } - /> - )} - {!loading && ( - - {subtitle || null} -
- - - {certifiedBy && ( - <> - {' '} - - )} - {title} - - - {titleRight && {titleRight}} -
- {actions} -
-
- - } - description={description} - avatar={avatar || null} - /> - )} -
+ } + description={description} + avatar={avatar || null} + /> + )} + + ); } diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts index 8b771da995ea0..d06d3274f4a16 100644 --- a/superset-frontend/src/components/index.ts +++ b/superset-frontend/src/components/index.ts @@ -25,7 +25,7 @@ export { default as Select } from './Select/Select'; export { default as AsyncSelect } from './Select/AsyncSelect'; export { default as Button } from './Button'; - +export { default as Card } from './Card'; /* * Components that don't conflict with the ones in src/components. * As Superset progresses to support full theming, this list should @@ -57,7 +57,7 @@ export { * or extending the components in src/components. */ export { - Breadcrumb as AntdBreadcrumb, + Breadcrumb as AntdBreadcrumb, // TODO: Make this a real Component Card as AntdCard, Checkbox as AntdCheckbox, Collapse as AntdCollapse, diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts index 1ed1cc21a6d08..6a2654b55fdd9 100644 --- a/superset-frontend/src/theme/index.ts +++ b/superset-frontend/src/theme/index.ts @@ -29,6 +29,9 @@ const themes = { [ThemeType.LIGHT]: lightAlgorithm, }; +// Want to figure out which tokens look like what? Try this! +// https://ant.design/theme-editor + const baseConfig: ThemeConfig = { token: { borderRadius: supersetTheme.borderRadius, @@ -56,7 +59,6 @@ const baseConfig: ThemeConfig = { paddingXS: supersetTheme.gridUnit * 2, }, Card: { - colorBgContainer: supersetTheme.colors.grayscale.light4, paddingLG: supersetTheme.gridUnit * 6, fontWeightStrong: supersetTheme.typography.weights.medium, },