This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 55
fix: refactor approach for px-to-rem conversions #371
Merged
Merged
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
6be4821
refactor approach to pxToRem
kuzhelov-ms 126609a
fixing merge
8608b9b
Allowing negative values
bc3d23d
Fixing merge
152a65d
Changing name back to pxToRem
07c7996
Fixing test
aa30a3d
Merge branch 'master' into fix/px-to-rem
kuzhelov 157e7e9
merge recent changes
kuzhelov-ms 47ea370
Merge branch 'master' into fix/px-to-rem
kuzhelov 81db169
Merge branch 'master' into fix/px-to-rem
kuzhelov 4bb7eed
set html font size explicitly
kuzhelov-ms 6ee3115
Merge branch 'fix/px-to-rem' of https://github.com/stardust-ui/react …
kuzhelov-ms bc8e67b
set default font size 16px
kuzhelov-ms 00f1998
html font size 14px
kuzhelov-ms a43e7cc
introduce Teams theme font size constant
kuzhelov-ms 9531bb2
update changelog
kuzhelov-ms File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,7 @@ import { semanticCssOverrides } from './Style' | |
import { ThemeContext } from './context/theme-context' | ||
import Router from './routes' | ||
|
||
const semanticStyleOverrides = { | ||
const semanticStylesOverrideTheme = { | ||
staticStyles: [semanticCssOverrides], | ||
} | ||
|
||
|
@@ -38,15 +38,7 @@ class App extends React.Component<any, AppState> { | |
const { themeName } = this.state | ||
return ( | ||
<ThemeContext.Provider value={this.state}> | ||
<Provider | ||
theme={mergeThemes(semanticStyleOverrides, themes[themeName], { | ||
// adjust Teams' theme to Semantic UI's font size scheme | ||
siteVariables: { | ||
htmlFontSize: '14px', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this now should be defined as |
||
bodyFontSize: '1rem', | ||
}, | ||
})} | ||
> | ||
<Provider theme={mergeThemes(semanticStylesOverrideTheme, themes[themeName])}> | ||
<Router /> | ||
</Provider> | ||
</ThemeContext.Provider> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,73 +1,23 @@ | ||
import * as _ from 'lodash' | ||
import isBrowser from './isBrowser' | ||
|
||
const DEFAULT_FONT_SIZE_IN_PX = 16 | ||
const DEFAULT_REM_SIZE_IN_PX = 10 | ||
let _htmlFontSizeInPx: number | null = null | ||
|
||
const getComputedFontSize = (): number => { | ||
return isBrowser() | ||
? getFontSizeValue(getComputedStyle(document.documentElement).fontSize) || | ||
DEFAULT_REM_SIZE_IN_PX | ||
: DEFAULT_FONT_SIZE_IN_PX | ||
} | ||
|
||
const getFontSizeValue = (size?: string | null): number | null => { | ||
return (size && parseFloat(size)) || null | ||
} | ||
|
||
/** | ||
* Converts the provided px size to rem based on the default font size of 10px unless | ||
* the HTML font size has been previously defined with setHTMLFontSize(). | ||
* Converts the provided px size to rem based on the default font size of 16px unless | ||
* another base size is provided. | ||
* @param {number} value The px value to convert to rem. | ||
* @param {number} [baseSize] Base font size to use for rem convertion. Optional, 16px is used by default. | ||
* @example | ||
* // Returns '1rem' | ||
* pxToRem(10) | ||
* pxToRem(16) | ||
* | ||
* * // Returns '2rem' | ||
* pxToRem(16, 8) | ||
* @returns {string} The value converted to the rem. | ||
*/ | ||
export const pxToRem = (value: number = 0): string => { | ||
if (!_htmlFontSizeInPx) { | ||
_htmlFontSizeInPx = getComputedFontSize() | ||
} | ||
|
||
if (process.env.NODE_ENV !== 'production') { | ||
if (value < 0) { | ||
throw new Error(`Invalid value of: '${value}'.`) | ||
} | ||
} | ||
const convertedValueInRems = value / _htmlFontSizeInPx | ||
export const pxToRem = (value: number, baseSize?: number): string => { | ||
const baseFontSize = baseSize || DEFAULT_FONT_SIZE_IN_PX | ||
const convertedValueInRems = value / baseFontSize | ||
|
||
return `${_.round(convertedValueInRems, 4)}rem` | ||
} | ||
|
||
/** | ||
* Sets the HTML font size for use for px to rem conversion. | ||
* Providing null for fontSize will get the computed font size based on the document, or set it to DEFAULT_REM_SIZE_IN_PX. | ||
* @param {string} [fontSize] The font size in px, to set as the HTML font size in the fontSizeUtility. | ||
* @example | ||
* // Sets the HTML font size to 10px. | ||
* setHTMLFontSize('10px') | ||
* @example | ||
* // Sets the HTML font size based on document.fontSize. | ||
* setHTMLFontSize() | ||
*/ | ||
export const setHTMLFontSize = (fontSize?: string): void => { | ||
if (!fontSize) { | ||
throw new Error('fontSize is not defined') | ||
} | ||
|
||
const htmlFontSizeValue = getFontSizeValue(fontSize) || 0 | ||
const htmlFontSizeUnit = fontSize.replace(htmlFontSizeValue.toString(), '') | ||
|
||
if (process.env.NODE_ENV !== 'production') { | ||
if (htmlFontSizeValue <= 0) { | ||
throw new Error(`Invalid htmlFontSizeValue of: '${htmlFontSizeValue}'.`) | ||
} | ||
|
||
if (htmlFontSizeUnit !== 'px') { | ||
throw new Error(`Expected htmlFontSize to be in px, but got: '${htmlFontSizeUnit}'.`) | ||
} | ||
} | ||
|
||
_htmlFontSizeInPx = htmlFontSizeValue || getComputedFontSize() | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/themes/teams-high-contrast/components/Input/inputVariables.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { pxToRem as basePxToRem } from '../../../lib' | ||
|
||
const themeFontSizeInPx = 14 | ||
|
||
export const pxToRem = (sizeInPx: number) => basePxToRem(sizeInPx, themeFontSizeInPx) |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍