chore: Make font-weights themable, fix font faces (#19236)

* fix(fonts): Import all necessary font packages * Make html tags themable * Set bold font weight to 600, add medium font weight to theme * Replace hard coded font weights with theme variables * Change some font weight light elements to normal * Fix tests * Fix bug in pivot table * Address code review comments
apache · Mar 22, 2022 · a8a48af · a8a48af
1 parent 35b8a72
commit a8a48af
Show file tree

Hide file tree

Showing 29 changed files with 528 additions and 457 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -127,8 +127,8 @@
     "dom-to-image": "^2.6.0",
     "emotion-rgba": "0.0.9",
     "fast-glob": "^3.2.7",
-    "fontsource-fira-code": "^3.0.5",
-    "fontsource-inter": "^3.0.5",
+    "fontsource-fira-code": "^4.0.0",
+    "fontsource-inter": "^4.0.0",
     "fs-extra": "^10.0.0",
     "fuse.js": "^6.4.6",
     "geolib": "^2.0.24",

diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/NoResultsComponent.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/NoResultsComponent.tsx
@@ -17,31 +17,38 @@
  * under the License.
  */
 
-import React, { CSSProperties, useMemo } from 'react';
+import React, { CSSProperties } from 'react';
+import { css, styled } from '../../style';
 import { t } from '../../translation';
 
 const MESSAGE_STYLES: CSSProperties = { maxWidth: 800 };
-const TITLE_STYLES: CSSProperties = {
-  fontSize: 16,
-  fontWeight: 'bold',
-  paddingBottom: 8,
-};
-const BODY_STYLES: CSSProperties = { fontSize: 14 };
 const MIN_WIDTH_FOR_BODY = 250;
 
-const generateContainerStyles: (
-  height: number | string,
-  width: number | string,
-) => CSSProperties = (height: number | string, width: number | string) => ({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'column',
-  height,
-  justifyContent: 'center',
-  padding: 16,
-  textAlign: 'center',
-  width,
-});
+const Container = styled.div<{
+  width: number | string;
+  height: number | string;
+}>`
+  ${({ theme, width, height }) => css`
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    height: ${height}px;
+    width: ${width}px;
+    padding: ${theme.gridUnit * 4}px;
+
+    & .no-results-title {
+      font-size: ${theme.typography.sizes.l}px;
+      font-weight: ${theme.typography.weights.bold};
+      padding-bottom: ${theme.gridUnit * 2};
+    }
+
+    & .no-results-body {
+      font-size: ${theme.typography.sizes.m}px;
+    }
+  `}
+`;
 
 type Props = {
   className?: string;
@@ -51,11 +58,6 @@ type Props = {
 };
 
 const NoResultsComponent = ({ className, height, id, width }: Props) => {
-  const containerStyles = useMemo(
-    () => generateContainerStyles(height, width),
-    [height, width],
-  );
-
   // render the body if the width is auto/100% or greater than 250 pixels
   const shouldRenderBody =
     typeof width === 'string' || width > MIN_WIDTH_FOR_BODY;
@@ -65,17 +67,20 @@ const NoResultsComponent = ({ className, height, id, width }: Props) => {
   );
 
   return (
-    <div
+    <Container
+      height={height}
+      width={width}
       className={className}
       id={id}
-      style={containerStyles}
       title={shouldRenderBody ? undefined : BODY_STRING}
     >
       <div style={MESSAGE_STYLES}>
-        <div style={TITLE_STYLES}>{t('No Results')}</div>
-        {shouldRenderBody && <div style={BODY_STYLES}>{BODY_STRING}</div>}
+        <div className="no-results-title">{t('No Results')}</div>
+        {shouldRenderBody && (
+          <div className="no-results-body">{BODY_STRING}</div>
+        )}
       </div>
-    </div>
+    </Container>
   );
 };
 

diff --git a/superset-frontend/packages/superset-ui-core/src/style/index.tsx b/superset-frontend/packages/superset-ui-core/src/style/index.tsx
@@ -140,7 +140,8 @@ const defaultTheme = {
     weights: {
       light: 200,
       normal: 400,
-      bold: 700,
+      medium: 500,
+      bold: 600,
     },
     sizes: {
       xxs: 9,

diff --git a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx
@@ -17,13 +17,18 @@
  * under the License.
  */
 
-import React from 'react';
-import { mount } from 'enzyme';
+import React, { ReactElement } from 'react';
 import mockConsole, { RestoreConsole } from 'jest-mock-console';
 import { triggerResizeObserver } from 'resize-observer-polyfill';
 import ErrorBoundary from 'react-error-boundary';
 
-import { promiseTimeout, SuperChart } from '@superset-ui/core';
+import {
+  promiseTimeout,
+  SuperChart,
+  supersetTheme,
+  ThemeProvider,
+} from '@superset-ui/core';
+import { mount as enzymeMount } from 'enzyme';
 import RealSuperChart, {
   WrapperProps,
 } from '../../../src/chart/components/SuperChart';
@@ -51,6 +56,12 @@ function expectDimension(
   );
 }
 
+const mount = (component: ReactElement) =>
+  enzymeMount(component, {
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: { theme: supersetTheme },
+  });
+
 describe('SuperChart', () => {
   const plugins = [
     new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
@@ -303,6 +314,7 @@ describe('SuperChart', () => {
           height="125"
         />,
       );
+      // @ts-ignore
       triggerResizeObserver([{ contentRect: { height: 125, width: 150 } }]);
 
       return promiseTimeout(() => {
@@ -328,6 +340,7 @@ describe('SuperChart', () => {
           height="25%"
         />,
       );
+      // @ts-ignore
       triggerResizeObserver([{ contentRect: { height: 75, width: 50 } }]);
 
       return promiseTimeout(() => {

diff --git a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx
@@ -65,7 +65,6 @@ export default styled(SankeyComponent)`
     background: #ddd;
     padding: 10px;
     font-size: ${({ fontSize }) => fontSize}em;
-    font-weight: ${({ theme }) => theme.typography.weights.light};
     color: #000;
     border: 1px solid #fff;
     text-align: center;

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
@@ -302,13 +302,11 @@ export default styled(BigNumberVis)`
   }
 
   .kicker {
-    font-weight: ${({ theme }) => theme.typography.weights.light};
     line-height: 1em;
     padding-bottom: 2em;
   }
 
   .header-line {
-    font-weight: ${({ theme }) => theme.typography.weights.normal};
     position: relative;
     line-height: 1em;
     span {
@@ -318,7 +316,6 @@ export default styled(BigNumberVis)`
   }
 
   .subheader-line {
-    font-weight: ${({ theme }) => theme.typography.weights.light};
     line-height: 1em;
     padding-bottom: 0;
   }