diff --git a/CHANGELOG.md b/CHANGELOG.md index d203f6c6f9..993ff245e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,8 +19,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Export `triangle-down` and `triangle-right` icons in Teams theme @codepretty ([#785](https://github.com/stardust-ui/react/pull/785)) -- Add rtl examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) -- 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)) +- Add RTL examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) +- 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)) +- Remove ability to introduce global style overrides for HTML document from `pxToRem` @kuzhelov ([#789](https://github.com/stardust-ui/react/pull/789)) ### Fixes - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779)) diff --git a/src/lib/fontSizeUtility.ts b/src/lib/fontSizeUtility.ts index 0950c2af28..afb9cba773 100644 --- a/src/lib/fontSizeUtility.ts +++ b/src/lib/fontSizeUtility.ts @@ -1,15 +1,15 @@ 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 DEFAULT_REM_SIZE_IN_PX = 16 -const getComputedFontSize = (): number => { +let _documentRemSize: number | null = null + +const getDocumentRemSize = (): number => { return isBrowser() ? getFontSizeValue(getComputedStyle(document.documentElement).fontSize) || DEFAULT_REM_SIZE_IN_PX - : DEFAULT_FONT_SIZE_IN_PX + : DEFAULT_REM_SIZE_IN_PX } const getFontSizeValue = (size?: string | null): number | null => { @@ -19,55 +19,23 @@ const getFontSizeValue = (size?: string | null): number | 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(). - * @param {number} value The px value to convert to rem. + * @param {number} valueInPx - The px value to convert to rem. + * @param {number} baseRemSize - Rem size to use for convertions. Optional - document's font size will be taken otherwise. * @example - * // Returns '1rem' - * pxToRem(10) + * // Returns '1rem' for default document font size (16px). + * pxToRem(16) + * + * // Returns '2rem'. + * pxToRem(32, 16) * @returns {string} The value converted to the rem. */ -export const pxToRem = (value: number = 0): string => { - if (!_htmlFontSizeInPx) { - _htmlFontSizeInPx = getComputedFontSize() +export const pxToRem = (valueInPx: number, baseRemSize?: number): string => { + if (!baseRemSize && !_documentRemSize) { + _documentRemSize = getDocumentRemSize() } - if (process.env.NODE_ENV !== 'production') { - if (value < 0) { - throw new Error(`Invalid value of: '${value}'.`) - } - } - const convertedValueInRems = value / _htmlFontSizeInPx + const remSize = baseRemSize || _documentRemSize || DEFAULT_REM_SIZE_IN_PX + const convertedValueInRems = valueInPx / remSize 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() -} diff --git a/src/lib/index.ts b/src/lib/index.ts index f7067c9f0f..52a1f1fe2c 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -32,7 +32,7 @@ export { default as isBrowser } from './isBrowser' export { default as doesNodeContainClick } from './doesNodeContainClick' export { default as leven } from './leven' -export { pxToRem, setHTMLFontSize } from './fontSizeUtility' +export { pxToRem } from './fontSizeUtility' export { customPropTypes } export { default as createAnimationStyles } from './createAnimationStyles' export { default as createComponent } from './createStardustComponent' diff --git a/test/specs/lib/fontSizeUtility-test.ts b/test/specs/lib/fontSizeUtility-test.ts index 95310871ba..d111610c70 100644 --- a/test/specs/lib/fontSizeUtility-test.ts +++ b/test/specs/lib/fontSizeUtility-test.ts @@ -1,50 +1,29 @@ -import { pxToRem, setHTMLFontSize } from 'src/lib' +import { pxToRem } from 'src/lib' describe('fontSizeUtility', () => { describe('pxToRem', () => { - it('returns 1rem for 10px with a default HTML font size of 10px.', () => { - expect(pxToRem(10)).toEqual('1rem') - }) - - it('should throw error when called with a negative number.', () => { - expect(() => pxToRem(-1)).toThrowError() + it('returns 1rem for 16px with a default HTML font size of 16px.', () => { + expect(pxToRem(16)).toEqual('1rem') }) it('returns 1rem with base font size of 10px.', () => { - setHTMLFontSize('10px') - expect(pxToRem(10)).toEqual('1rem') + expect(pxToRem(10, 10)).toEqual('1rem') }) it('returns 0.714rem with a base font size of 14px.', () => { - setHTMLFontSize('14px') - - expect(pxToRem(10)).toEqual('0.7143rem') + expect(pxToRem(10, 14)).toEqual('0.7143rem') }) it('returns 1.25rem with a base font size of 8px.', () => { - setHTMLFontSize('8px') - - expect(pxToRem(10)).toEqual('1.25rem') - }) - - it('returns 0rem when pxToRem is called without a value.', () => { - expect(pxToRem()).toEqual('0rem') + expect(pxToRem(10, 8)).toEqual('1.25rem') }) it('returns 0rem when pxToRem is called with 0.', () => { expect(pxToRem(0)).toEqual('0rem') }) - }) - - describe('setHTMLFontSize', () => { - it('throws when htmlFontSize is in rems.', () => { - expect(() => setHTMLFontSize('8rem')).toThrowError() - }) - - it('throws when htmlFontSize is <= 0px.', () => { - expect(() => setHTMLFontSize('0px')).toThrowError() - expect(() => setHTMLFontSize('-1px')).toThrowError() + it('should handle negative input values and return negative conversion result.', () => { + expect(pxToRem(-16, 16)).toEqual('-1rem') }) }) })