Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Mar 22, 2022

Conversation

kgabryje
Copy link
Member

@kgabryje kgabryje commented Mar 17, 2022

SUMMARY

  1. Due to incorrect import of fonts in src/assets/stylesheets/less/fonts.less, in fact only the fonts with normal font weight were available. That means that font weights other than 400 simply didn't work - weights from 200 to 500 were rendered as 400, bold font weights were extrapolated by the browser. This PR fixes that issue by explicitely importing font files with weights 200, 400, 500 and 600.
  2. After the change described above, font-weight 700 (bold) was too thick. I replaced all 700 weights with 600, so that all texts look similar to how they looked before.
  3. HTML tags <h1-6>, <th> and <strong> all use font-weight: 700 by default. I've overriden them globally to use font-weight: 600.
  4. I changed the value of bold font weight in supersetTheme from 700 to 600, because of the reasons described above.
  5. I replaced hardcoded font weights in many components with superset theme variables. Only a few font weights in some plugins css files remain hardcoded.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

The changes affect the whole product - everything should look as it did before (if you compare side-by-side with current look, there are slight differences in how bold texts look - that's because we didn't actually use Inter font's bold version before).

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

CC @kasiazjc

@codecov
Copy link

codecov bot commented Mar 17, 2022

Codecov Report

Merging #19236 (a3f3e43) into master (30c97ad) will decrease coverage by 0.00%.
The diff coverage is 60.00%.

@@            Coverage Diff             @@
##           master   #19236      +/-   ##
==========================================
- Coverage   66.55%   66.54%   -0.01%     
==========================================
  Files        1646     1645       -1     
  Lines       63617    63713      +96     
  Branches     6471     6503      +32     
==========================================
+ Hits        42339    42398      +59     
- Misses      19600    19632      +32     
- Partials     1678     1683       +5     
Flag Coverage Δ
javascript 51.29% <60.00%> (+0.03%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...tend/packages/superset-ui-core/src/style/index.tsx 100.00% <ø> (ø)
...ins/legacy-plugin-chart-sankey/src/ReactSankey.jsx 0.00% <ø> (ø)
...lugin-chart-echarts/src/BigNumber/BigNumberViz.tsx 0.00% <ø> (ø)
...n-chart-pivot-table/src/react-pivottable/Styles.js 0.00% <0.00%> (ø)
superset-frontend/src/GlobalStyles.tsx 0.00% <0.00%> (ø)
superset-frontend/src/SqlLab/App.jsx 0.00% <ø> (ø)
superset-frontend/src/addSlice/App.tsx 0.00% <ø> (ø)
...set-frontend/src/components/ReportModal/styles.tsx 100.00% <ø> (ø)
...frontend/src/dashboard/components/AddSliceCard.jsx 55.55% <ø> (ø)
superset-frontend/src/explore/App.jsx 0.00% <ø> (ø)
... and 129 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 30c97ad...a3f3e43. Read the comment docs.

@kgabryje
Copy link
Member Author

/testenv up

@github-actions
Copy link
Contributor

@kgabryje Ephemeral environment spinning up at http://34.213.199.151:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

@michael-s-molina michael-s-molina added the need:qa-review Requires QA review label Mar 18, 2022
@michael-s-molina
Copy link
Member

@jinghua-qa Can you please help us test this one?

Copy link
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for the improvements!

@kgabryje kgabryje merged commit a8a48af into apache:master Mar 22, 2022
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

michael-hoffman-26 pushed a commit to nielsen-oss/superset that referenced this pull request Mar 23, 2022
* 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
@villebro villebro added lts-v1 and removed need:qa-review Requires QA review labels Mar 29, 2022
villebro pushed a commit that referenced this pull request Apr 3, 2022
* 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
@mistercrunch mistercrunch added 🍒 1.5.0 🍒 1.5.1 🍒 1.5.2 🍒 1.5.3 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels lts-v1 size/XL 🍒 1.5.0 🍒 1.5.1 🍒 1.5.2 🍒 1.5.3 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants