fix(px-to-rem): temporary remove recent changes

CHANGELOG.md

@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Refactor render method of `Label` component and simplify docs @davezuko ([#642](https://github.com/stardust-ui/react/pull/642))
 - Fix shorthand prop type @kuzhelov ([#697](https://github.com/stardust-ui/react/pull/697))
 - Export `ShorthandRenderer` type @miroslavstastny ([#698](https://github.com/stardust-ui/react/pull/698))
+- Temporary revert `pxToRem` changes introduced by [#371](https://github.com/stardust-ui/react/pull/371) @kuzhelov ([#700](https://github.com/stardust-ui/react/pull/700))
 
 ### Documentation
 - Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650))

src/lib/fontSizeUtility.ts

@@ -1,23 +1,73 @@
 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 16px unless
- * another base size is provided.
+ * 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} [baseSize] Base font size to use for rem convertion. Optional, 16px is used by default.
  * @example
  * // Returns '1rem'
- * pxToRem(16)
- *
- *  * // Returns '2rem'
- * pxToRem(16, 8)
+ * pxToRem(10)
  * @returns {string} The value converted to the rem.
  */
-export const pxToRem = (value: number, baseSize?: number): string => {
-  const baseFontSize = baseSize || DEFAULT_FONT_SIZE_IN_PX
-  const convertedValueInRems = value / baseFontSize
+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
 
   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()
+}

src/lib/index.ts

@@ -31,7 +31,7 @@ export { default as isBrowser } from './isBrowser'
 export { default as doesNodeContainClick } from './doesNodeContainClick'
 export { default as leven } from './leven'
 
-export { pxToRem } from './fontSizeUtility'
+export { pxToRem, setHTMLFontSize } from './fontSizeUtility'
 export { customPropTypes }
 export { default as createAnimationStyles } from './createAnimationStyles'
 export { default as createComponent } from './createStardustComponent'

src/themes/teams-high-contrast/components/Input/inputVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../teams/utils'
+import { pxToRem } from '../../../../lib'
 
 export default (siteVars: any) => {
   return {

src/themes/teams/components/Attachment/attachmentStyles.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { AttachmentProps } from '../../../../components/Attachment/Attachment'
 import { AttachmentVariables } from './attachmentVariables'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVariables> = {
   root: ({ props, variables }): ICSSInJSStyle => ({

src/themes/teams/components/Avatar/avatarStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
 

src/themes/teams/components/Button/buttonStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ButtonProps, ButtonState } from '../../../../components/Button/Button'
 import { truncateStyle } from '../../../../styles/customCSS'

src/themes/teams/components/Button/buttonVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export interface ButtonVariables {
   [key: string]: string | number

src/themes/teams/components/Chat/chatItemVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export interface ChatItemVariables {
   margin: string

src/themes/teams/components/Chat/chatMessageVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export interface ChatMessageVariables {
   width: string

src/themes/teams/components/Chat/chatStyles.ts

@@ -1,7 +1,7 @@
 import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { ChatVariables } from './chatVariables'
-import { pxToRem } from '../../utils'
 import { ChatProps } from 'src/components/Chat/Chat'
+import { pxToRem } from '../../../../lib'
 
 const chatStyles: ComponentSlotStylesInput<ChatProps, ChatVariables> = {
   root: ({ variables: v }): ICSSInJSStyle => ({

src/themes/teams/components/Divider/dividerStyles.ts

@@ -1,7 +1,6 @@
 import * as _ from 'lodash'
 
-import { childrenExist } from '../../../../lib'
-import { pxToRem } from '../../utils'
+import { childrenExist, pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider'
 import { DividerVariables } from './dividerVariables'

src/themes/teams/components/Divider/dividerVariables.ts

@@ -1,9 +1,8 @@
 import * as _ from 'lodash'
 import { FontWeightProperty } from 'csstype'
 
-import { pxToRem } from '../../utils'
 import { ColorValues } from '../../../types'
-import { mapColorsToScheme } from '../../../../lib'
+import { pxToRem, mapColorsToScheme } from '../../../../lib'
 
 export interface DividerVariables {
   colors: ColorValues<string>

src/themes/teams/components/Dropdown/dropdownStyles.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { DropdownProps } from '../../../../components/Dropdown/Dropdown'
 import { DropdownVariables } from './dropdownVariables'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables> = {
   root: (): ICSSInJSStyle => ({}),

src/themes/teams/components/Dropdown/dropdownVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 export interface DropdownVariables {
   backgroundColor: string
   borderBottom: string

src/themes/teams/components/Form/formFieldStyles.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { FormProps } from '../../../../components/Form/Form'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const formFieldStyles: ComponentSlotStylesInput<FormProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => ({}),

src/themes/teams/components/Form/formStyles.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { FormProps } from '../../../../components/Form/Form'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const formStyles: ComponentSlotStylesInput<FormProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => ({

src/themes/teams/components/Header/headerDescriptionStyles.ts

@@ -1,9 +1,9 @@
 import * as _ from 'lodash'
 
-import { pxToRem } from '../../utils'
 import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { HeaderDescriptionProps } from '../../../../components/Header/HeaderDescription'
 import { HeaderDescriptionVariables } from './headerDescriptionVariables'
+import { pxToRem } from '../../../../lib'
 
 const headerStyles: ComponentSlotStylesInput<HeaderDescriptionProps, HeaderDescriptionVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({

src/themes/teams/components/Icon/iconStyles.ts

@@ -6,7 +6,7 @@ import { fittedStyle } from '../../../../styles/customCSS'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../../types/utils'
 import { IconXSpacing, IconProps, IconSize } from '../../../../components/Icon/Icon'
-import { pxToRem } from '../../utils'
+import { pxToRem } from './../../../../lib'
 import { getStyle as getSvgStyle } from './svg'
 import { IconVariables, IconSizeModifier } from './iconVariables'
 

src/themes/teams/components/Icon/iconVariables.ts

@@ -1,6 +1,5 @@
 import { ColorValues } from '../../../types'
-import { mapColorsToScheme } from '../../../../lib'
-import { pxToRem } from '../../utils'
+import { mapColorsToScheme, pxToRem } from '../../../../lib'
 
 export type IconSizeModifier = 'x' | 'xx'
 

src/themes/teams/components/Image/imageStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ImageProps } from '../../../../components/Image/Image'
 

src/themes/teams/components/Image/imageVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export default () => ({
   width: undefined,

src/themes/teams/components/Input/inputVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export interface InputVariables {
   backgroundColor: string

src/themes/teams/components/ItemLayout/itemLayoutVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export default () => {
   const vars: any = {}

src/themes/teams/components/Label/labelStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { LabelProps } from '../../../../components/Label/Label'
 

src/themes/teams/components/Label/labelVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export default () => {
   const color = 'rgba(0, 0, 0, 0.6)'

src/themes/teams/components/List/listItemStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ListItemProps } from '../../../../components/List/ListItem'
 

src/themes/teams/components/Menu/menuItemStyles.ts

@@ -1,4 +1,5 @@
-import { pxToRem, getSideArrow } from '../../utils'
+import { getSideArrow } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { MenuVariables } from './menuVariables'
 import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'

src/themes/teams/components/Menu/menuStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { MenuProps, MenuState } from '../../../../components/Menu/Menu'
 import { MenuVariables } from './menuVariables'

src/themes/teams/components/Menu/menuVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export interface MenuVariables {
   color: string

src/themes/teams/components/Popup/popupContentStyles.ts

@@ -1,5 +1,5 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { PopupContentProps } from '../../../../components/Popup/PopupContent'
 import { PopupContentVariables } from './popupContentVariables'
 

src/themes/teams/components/Popup/popupContentVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 export interface PopupContentVariables {
   [key: string]: string | number

src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts

@@ -3,7 +3,7 @@ import {
   RadioGroupItemProps,
   RadioGroupItemState,
 } from '../../../../components/RadioGroup/RadioGroupItem'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const radioStyles: ComponentSlotStylesInput<RadioGroupItemProps & RadioGroupItemState, any> = {
   root: ({ props }): ICSSInJSStyle => ({

src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { RadioGroupItemProps } from '../../../../components/RadioGroup/RadioGroupItem'
 
 export default (siteVars: any, props: RadioGroupItemProps) => {

src/themes/teams/components/Status/statusStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { StatusPropsWithDefaults } from '../../../../components/Status/Status'
 import { StatusVariables } from './statusVariables'

src/themes/teams/components/Tree/treeItemStyles.ts

@@ -1,5 +1,5 @@
 import { ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const treeItemStyles = {
   root: (): ICSSInJSStyle => ({

src/themes/teams/components/Tree/treeStyles.ts

@@ -1,5 +1,5 @@
 import { ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const treeStyles = {
   root: (): ICSSInJSStyle => ({

src/themes/teams/components/Tree/treeTitleStyles.ts

@@ -1,5 +1,5 @@
 import { ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../utils'
+import { pxToRem } from '../../../../lib'
 
 const treeTitleStyles = {
   root: ({ variables }): ICSSInJSStyle => ({

src/themes/teams/siteVariables.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from './utils'
+import { pxToRem } from '../../lib'
 import { colors } from './colors'
 
 //

src/themes/teams/utils/index.ts

@@ -1,10 +1,5 @@
-import { pxToRem as basePxToRem } from '../../../lib'
 import { ThemeInput } from '../../types'
 
-const themeFontSizeInPx = 14
-
-export const pxToRem = (sizeInPx: number) => basePxToRem(sizeInPx, themeFontSizeInPx)
-
 export const getSideArrow = (theme: ThemeInput) => {
   const { rtl, siteVariables } = theme
   const { arrowLeft, arrowRight } = siteVariables