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

Commit 62d7cf4

Browse files
authored
feat(pxToRem): remove global overrides for document styles (#789)
* remove global overrides * fix pxToRem tests * fix js docs * revert back font size setting for Teams theme * update changelog * revert site variables changes * update changelog
1 parent 8435577 commit 62d7cf4

File tree

4 files changed

+29
-81
lines changed

4 files changed

+29
-81
lines changed

CHANGELOG.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
1919

2020
### Features
2121
- Export `triangle-down` and `triangle-right` icons in Teams theme @codepretty ([#785](https://github.com/stardust-ui/react/pull/785))
22-
- Add rtl examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792))
23-
- Add mechanism for marking icons that should rotate in rtl in Teams theme; marked icons: `send`, `bullets`, `leave`, `outdent`, `redo`, `undo`, `send` @mnajdova ([#788](https://github.com/stardust-ui/react/pull/788))
22+
- Add RTL examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792))
23+
- Add mechanism for marking icons that should rotate in RTL in Teams theme; marked icons: `send`, `bullets`, `leave`, `outdent`, `redo`, `undo`, `send` @mnajdova ([#788](https://github.com/stardust-ui/react/pull/788))
24+
- Remove ability to introduce global style overrides for HTML document from `pxToRem` @kuzhelov ([#789](https://github.com/stardust-ui/react/pull/789))
2425

2526
### Fixes
2627
- Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779))

src/lib/fontSizeUtility.ts

Lines changed: 17 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import * as _ from 'lodash'
22
import isBrowser from './isBrowser'
33

4-
const DEFAULT_FONT_SIZE_IN_PX = 16
5-
const DEFAULT_REM_SIZE_IN_PX = 10
6-
let _htmlFontSizeInPx: number | null = null
4+
const DEFAULT_REM_SIZE_IN_PX = 16
75

8-
const getComputedFontSize = (): number => {
6+
let _documentRemSize: number | null = null
7+
8+
const getDocumentRemSize = (): number => {
99
return isBrowser()
1010
? getFontSizeValue(getComputedStyle(document.documentElement).fontSize) ||
1111
DEFAULT_REM_SIZE_IN_PX
12-
: DEFAULT_FONT_SIZE_IN_PX
12+
: DEFAULT_REM_SIZE_IN_PX
1313
}
1414

1515
const getFontSizeValue = (size?: string | null): number | null => {
@@ -19,55 +19,23 @@ const getFontSizeValue = (size?: string | null): number | null => {
1919
/**
2020
* Converts the provided px size to rem based on the default font size of 10px unless
2121
* the HTML font size has been previously defined with setHTMLFontSize().
22-
* @param {number} value The px value to convert to rem.
22+
* @param {number} valueInPx - The px value to convert to rem.
23+
* @param {number} baseRemSize - Rem size to use for convertions. Optional - document's font size will be taken otherwise.
2324
* @example
24-
* // Returns '1rem'
25-
* pxToRem(10)
25+
* // Returns '1rem' for default document font size (16px).
26+
* pxToRem(16)
27+
*
28+
* // Returns '2rem'.
29+
* pxToRem(32, 16)
2630
* @returns {string} The value converted to the rem.
2731
*/
28-
export const pxToRem = (value: number = 0): string => {
29-
if (!_htmlFontSizeInPx) {
30-
_htmlFontSizeInPx = getComputedFontSize()
32+
export const pxToRem = (valueInPx: number, baseRemSize?: number): string => {
33+
if (!baseRemSize && !_documentRemSize) {
34+
_documentRemSize = getDocumentRemSize()
3135
}
3236

33-
if (process.env.NODE_ENV !== 'production') {
34-
if (value < 0) {
35-
throw new Error(`Invalid value of: '${value}'.`)
36-
}
37-
}
38-
const convertedValueInRems = value / _htmlFontSizeInPx
37+
const remSize = baseRemSize || _documentRemSize || DEFAULT_REM_SIZE_IN_PX
38+
const convertedValueInRems = valueInPx / remSize
3939

4040
return `${_.round(convertedValueInRems, 4)}rem`
4141
}
42-
43-
/**
44-
* Sets the HTML font size for use for px to rem conversion.
45-
* Providing null for fontSize will get the computed font size based on the document, or set it to DEFAULT_REM_SIZE_IN_PX.
46-
* @param {string} [fontSize] The font size in px, to set as the HTML font size in the fontSizeUtility.
47-
* @example
48-
* // Sets the HTML font size to 10px.
49-
* setHTMLFontSize('10px')
50-
* @example
51-
* // Sets the HTML font size based on document.fontSize.
52-
* setHTMLFontSize()
53-
*/
54-
export const setHTMLFontSize = (fontSize?: string): void => {
55-
if (!fontSize) {
56-
throw new Error('fontSize is not defined')
57-
}
58-
59-
const htmlFontSizeValue = getFontSizeValue(fontSize) || 0
60-
const htmlFontSizeUnit = fontSize.replace(htmlFontSizeValue.toString(), '')
61-
62-
if (process.env.NODE_ENV !== 'production') {
63-
if (htmlFontSizeValue <= 0) {
64-
throw new Error(`Invalid htmlFontSizeValue of: '${htmlFontSizeValue}'.`)
65-
}
66-
67-
if (htmlFontSizeUnit !== 'px') {
68-
throw new Error(`Expected htmlFontSize to be in px, but got: '${htmlFontSizeUnit}'.`)
69-
}
70-
}
71-
72-
_htmlFontSizeInPx = htmlFontSizeValue || getComputedFontSize()
73-
}

src/lib/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export { default as isBrowser } from './isBrowser'
3232
export { default as doesNodeContainClick } from './doesNodeContainClick'
3333
export { default as leven } from './leven'
3434

35-
export { pxToRem, setHTMLFontSize } from './fontSizeUtility'
35+
export { pxToRem } from './fontSizeUtility'
3636
export { customPropTypes }
3737
export { default as createAnimationStyles } from './createAnimationStyles'
3838
export { default as createComponent } from './createStardustComponent'
Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,29 @@
1-
import { pxToRem, setHTMLFontSize } from 'src/lib'
1+
import { pxToRem } from 'src/lib'
22

33
describe('fontSizeUtility', () => {
44
describe('pxToRem', () => {
5-
it('returns 1rem for 10px with a default HTML font size of 10px.', () => {
6-
expect(pxToRem(10)).toEqual('1rem')
7-
})
8-
9-
it('should throw error when called with a negative number.', () => {
10-
expect(() => pxToRem(-1)).toThrowError()
5+
it('returns 1rem for 16px with a default HTML font size of 16px.', () => {
6+
expect(pxToRem(16)).toEqual('1rem')
117
})
128

139
it('returns 1rem with base font size of 10px.', () => {
14-
setHTMLFontSize('10px')
15-
expect(pxToRem(10)).toEqual('1rem')
10+
expect(pxToRem(10, 10)).toEqual('1rem')
1611
})
1712

1813
it('returns 0.714rem with a base font size of 14px.', () => {
19-
setHTMLFontSize('14px')
20-
21-
expect(pxToRem(10)).toEqual('0.7143rem')
14+
expect(pxToRem(10, 14)).toEqual('0.7143rem')
2215
})
2316

2417
it('returns 1.25rem with a base font size of 8px.', () => {
25-
setHTMLFontSize('8px')
26-
27-
expect(pxToRem(10)).toEqual('1.25rem')
28-
})
29-
30-
it('returns 0rem when pxToRem is called without a value.', () => {
31-
expect(pxToRem()).toEqual('0rem')
18+
expect(pxToRem(10, 8)).toEqual('1.25rem')
3219
})
3320

3421
it('returns 0rem when pxToRem is called with 0.', () => {
3522
expect(pxToRem(0)).toEqual('0rem')
3623
})
37-
})
38-
39-
describe('setHTMLFontSize', () => {
40-
it('throws when htmlFontSize is in rems.', () => {
41-
expect(() => setHTMLFontSize('8rem')).toThrowError()
42-
})
43-
44-
it('throws when htmlFontSize is <= 0px.', () => {
45-
expect(() => setHTMLFontSize('0px')).toThrowError()
4624

47-
expect(() => setHTMLFontSize('-1px')).toThrowError()
25+
it('should handle negative input values and return negative conversion result.', () => {
26+
expect(pxToRem(-16, 16)).toEqual('-1rem')
4827
})
4928
})
5029
})

0 commit comments

Comments
 (0)