Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

fix(Theme): Use global REM-base, do not set html font-size in static styles #1190

Merged
merged 3 commits into from
Apr 10, 2019

Conversation

miroslavstastny
Copy link
Member

@miroslavstastny miroslavstastny commented Apr 8, 2019

BREAKING CHANGE

Teams theme no longer sets font-size on html.
Set correct font-size on html manually BEFORE Stardust is imported.

This is a hotfix which fixes #988.

What was broken

pxToRem uses html font-size as a base to correctly convert pixels to REMs. There are several problems with it:

  1. As html font-size is global on a page, two themes loaded at the same time cannot use different base font sizes for the pxToRem, But the previous semantics with htmlFontSize being a theme's siteVariable and Provider resetting the cached base when a new theme was loaded looked like it is possible.
  2. As pxToRem is called before the static styles are applied, static html font-size was cached before the themes font size was applied resulting in broken design (see pxToRem sometimes returning incorrect size #988).

Fix

Teams theme no longer sets html font-size in its static styles and expects it to be correctly set BEFORE Stardust is imported not so set false expectations.

Limitations of the fix

It's no possible to scale Stardust components to:

  1. have part of the page bigger/smaller compared to the rest,
  2. zoom the whole page by setting font size in browser settings.

These limitations are not new, they were present before the fix as well.

There is another PR #1186 which is an experiment on how to introduce more advanced fix without these limitations later.

@codecov
Copy link

codecov bot commented Apr 8, 2019

Codecov Report

Merging #1190 into master will decrease coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1190      +/-   ##
==========================================
- Coverage   82.49%   82.48%   -0.01%     
==========================================
  Files         742      742              
  Lines        8762     8758       -4     
  Branches     1170     1236      +66     
==========================================
- Hits         7228     7224       -4     
  Misses       1519     1519              
  Partials       15       15
Impacted Files Coverage Δ
...ackages/react/src/components/Provider/Provider.tsx 96.72% <ø> (-0.06%) ⬇️
...eact/src/themes/teams/staticStyles/globalStyles.ts 100% <ø> (ø) ⬆️
packages/react/src/lib/fontSizeUtility.ts 94.11% <ø> (-0.62%) ⬇️
packages/react/src/themes/teams/siteVariables.ts 100% <100%> (ø) ⬆️
packages/react/src/lib/index.ts 100% <100%> (ø) ⬆️

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 553c045...b52994d. Read the comment docs.

@@ -35,6 +31,9 @@ export const updateCachedRemSize = () => {
*/
export const pxToRem = (valueInPx: number, baseRemSize?: number): string => {
if (!baseRemSize && !_documentRemSize) {
// there is no way how to reset the cached value, once it's cached, it's cached
Copy link
Contributor

@kuzhelov kuzhelov Apr 9, 2019

Choose a reason for hiding this comment

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

nit-nit: may suggest

  • to remove once it's cached, it's cached, as it provides no additional value in explanation :)
  • rephrase the rest in a more succinct way

as resetting cached value won't trigger recalculation of site variables, for which originally computed values will stay unchanged

Copy link
Contributor

@kuzhelov kuzhelov left a comment

Choose a reason for hiding this comment

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

just one thing I would like to refine before merge: https://github.com/stardust-ui/react/pull/1190/files#r273730374

@miroslavstastny miroslavstastny merged commit 1d8c578 into master Apr 10, 2019
@delete-merged-branch delete-merged-branch bot deleted the fix/global-rem-base branch April 10, 2019 11:48
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

pxToRem sometimes returning incorrect size
2 participants