chore(AntD5): touchup on component imports/exports, theming ListViewC…

…ard (apache#29545) Co-authored-by: Geido <[email protected]>
preset-io · Nov 11, 2024 · 4d50d49 · 4d50d49
1 parent 8893426
commit 4d50d49
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 102 deletions.
diff --git 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
@@ -28,11 +28,15 @@ const Card = ({ padded, ...props }: CardProps) => (
   <AntdCard
     {...props}
     css={(theme: SupersetTheme) => ({
+      // 'border-radius': `${theme.gridUnit}px`,
+      border: `1px solid ${theme.colors.grayscale.light2}`,
       '.antd5-card-body': {
         padding: padded ? theme.gridUnit * 4 : theme.gridUnit,
       },
     })}
   />
 );
 
-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
@@ -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 (
-    <StyledCard
-      data-test="styled-card"
-      cover={
-        cover || (
-          <Cover>
-            <Link to={url!}>
-              <div className="gradient-container">
-                <ImageLoader
-                  src={imgURL || ''}
-                  fallback={imgFallbackURL || ''}
-                  isLoading={loading}
-                  position={imgPosition}
-                />
-              </div>
-            </Link>
-            <CoverFooter className="cover-footer">
-              {!loading && coverLeft && (
-                <CoverFooterLeft>{coverLeft}</CoverFooterLeft>
-              )}
-              {!loading && coverRight && (
-                <CoverFooterRight>{coverRight}</CoverFooterRight>
-              )}
-            </CoverFooter>
-          </Cover>
-        )
-      }
-    >
-      {loading && (
-        <AntdCard.Meta
-          title={
-            <>
-              <TitleContainer>
-                <Skeleton.Input
-                  active
-                  size="small"
-                  css={{
-                    width: Math.trunc(theme.gridUnit * 62.5),
-                  }}
-                />
-                <div className="card-actions">
-                  <Skeleton.Button active shape="circle" />{' '}
-                  <Skeleton.Button
+    <ConfigProvider theme={listViewCardTheme}>
+      <StyledCard
+        data-test="styled-card"
+        padded
+        cover={
+          cover || (
+            <Cover>
+              <Link to={url!}>
+                <div className="gradient-container">
+                  <ImageLoader
+                    src={imgURL || ''}
+                    fallback={imgFallbackURL || ''}
+                    isLoading={loading}
+                    position={imgPosition}
+                  />
+                </div>
+              </Link>
+              <CoverFooter className="cover-footer">
+                {!loading && coverLeft && (
+                  <CoverFooterLeft>{coverLeft}</CoverFooterLeft>
+                )}
+                {!loading && coverRight && (
+                  <CoverFooterRight>{coverRight}</CoverFooterRight>
+                )}
+              </CoverFooter>
+            </Cover>
+          )
+        }
+      >
+        {loading && (
+          <Card.Meta
+            title={
+              <>
+                <TitleContainer>
+                  <Skeleton.Input
                     active
+                    size="small"
                     css={{
-                      width: theme.gridUnit * 10,
+                      width: Math.trunc(theme.gridUnit * 62.5),
                     }}
                   />
+                  <div className="card-actions">
+                    <Skeleton.Button active shape="circle" />{' '}
+                    <Skeleton.Button
+                      active
+                      css={{
+                        width: theme.gridUnit * 10,
+                      }}
+                    />
+                  </div>
+                </TitleContainer>
+              </>
+            }
+            description={
+              <ThinSkeleton
+                round
+                active
+                title={false}
+                paragraph={paragraphConfig}
+              />
+            }
+          />
+        )}
+        {!loading && (
+          <Card.Meta
+            title={
+              <TitleContainer>
+                {subtitle || null}
+                <div className="titleRow">
+                  <Tooltip title={title}>
+                    <TitleLink>
+                      {certifiedBy && (
+                        <>
+                          <CertifiedBadge
+                            certifiedBy={certifiedBy}
+                            details={certificationDetails}
+                          />{' '}
+                        </>
+                      )}
+                      {title}
+                    </TitleLink>
+                  </Tooltip>
+                  {titleRight && <TitleRight>{titleRight}</TitleRight>}
+                  <div className="card-actions" data-test="card-actions">
+                    {actions}
+                  </div>
                 </div>
               </TitleContainer>
-            </>
-          }
-          description={
-            <ThinSkeleton
-              round
-              active
-              title={false}
-              paragraph={paragraphConfig}
-            />
-          }
-        />
-      )}
-      {!loading && (
-        <AntdCard.Meta
-          title={
-            <TitleContainer>
-              {subtitle || null}
-              <div className="titleRow">
-                <Tooltip title={title}>
-                  <TitleLink>
-                    {certifiedBy && (
-                      <>
-                        <CertifiedBadge
-                          certifiedBy={certifiedBy}
-                          details={certificationDetails}
-                        />{' '}
-                      </>
-                    )}
-                    {title}
-                  </TitleLink>
-                </Tooltip>
-                {titleRight && <TitleRight>{titleRight}</TitleRight>}
-                <div className="card-actions" data-test="card-actions">
-                  {actions}
-                </div>
-              </div>
-            </TitleContainer>
-          }
-          description={description}
-          avatar={avatar || null}
-        />
-      )}
-    </StyledCard>
+            }
+            description={description}
+            avatar={avatar || null}
+          />
+        )}
+      </StyledCard>
+    </ConfigProvider>
   );
 }
 

diff --git 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
@@ -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,
     },