feat(theme): add box-sizing to the global styles (Teams theme) (#1057)

* -added border-box in the global styles

* -updated icon styles

* -fixed dropdown styles

* -moved styles to globalStyles

* -removed unnecessary box sizing styles

* -updates changelog

* -reverted loader styles form base theme

* -updated changelog

* -removed unnecessary border-box styles

* -changed changelog
-moved content-box for font icons near the width and height props

* -reverted border-box in loader styles

* -updates on the box sizing prop

* -fixed changelog entry

* -removed boxSizing: 'border-box' to video and embed styles in Teams theme

* -reverted boxSizing: 'border-box' on imageStyles, as it was moved in base theme

Author: mnajdova

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Add `box-sizing: border-box` to all elements, as well as before and after pseudo elements in Teams theme @mnajdova ([#1057](https://github.com/stardust-ui/react/pull/1057))
+
 ### Fixes
 - Fix overflowing focus outline for `Grid` items for Teams theme @Bugaa92 ([#1195](https://github.com/stardust-ui/react/pull/1195))
 - Fix routing for accessibility documentation @sophieH29 ([#1208](https://github.com/stardust-ui/react/pull/1208))

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -57,7 +57,6 @@ const getInputWrapperStyles = ({ attached }: ComposeMessageProps): React.CSSProp
   const borderWidth = '1px'
 
   return {
-    boxSizing: 'border-box',
     borderStyle: 'solid',
     borderWidth,
     borderRadius: `${borderTopRadius} ${borderTopRadius} ${borderBottomRadius} ${borderBottomRadius}`,

packages/react/src/themes/teams/components/Alert/alertStyles.ts

@@ -61,7 +61,6 @@ const alertStyles: ComponentSlotStylesInput<AlertProps, AlertVariables> = {
     alignItems: 'center',
     position: 'relative',
     width: '100%',
-    boxSizing: 'border-box',
     borderStyle: v.borderStyle,
     borderWidth: v.borderWidth,
     borderRadius: v.borderRadius,

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

@@ -24,12 +24,6 @@ const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVari
 
     outline: 0,
 
-    // todo: remove when #1057 to make box-sizing global is checked in
-    boxSizing: 'border-box',
-    '& *': {
-      boxSizing: `border-box`,
-    },
-
     ...(p.isFromKeyboard && {
       ':focus': {
         borderColor: v.focusInnerBorderColor,

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

@@ -17,7 +17,6 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
     const sizeInRem = pxToRem(sizeToPxValue[size])
 
     return {
-      boxSizing: 'border-box',
       position: 'relative',
       backgroundColor: 'inherit',
       display: 'inline-block',
@@ -27,7 +26,6 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
     }
   },
   image: ({ variables: v }): ICSSInJSStyle => ({
-    boxSizing: 'border-box',
     borderColor: v.avatarBorderColor,
     borderStyle: 'solid',
     borderWidth: `${v.avatarBorderWidth}px`,
@@ -40,7 +38,6 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
   label: ({ props: { size } }): ICSSInJSStyle => {
     const sizeInRem = pxToRem(sizeToPxValue[size])
     return {
-      boxSizing: 'border-box',
       display: 'inline-block',
       width: sizeInRem,
       height: sizeInRem,

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

@@ -64,7 +64,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
     display: 'flex',
     flexWrap: 'wrap',
     position: 'relative',
-    boxSizing: 'border-box',
     borderStyle: 'solid',
     borderColor: 'transparent',
     outline: 0,

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

@@ -30,12 +30,12 @@ export default (siteVars): DropdownVariables => ({
   borderWidth: `0 0 ${pxToRem(2)} 0`,
   color: siteVars.bodyColor,
   comboboxPaddingButton: `0 ${_12px_asRem}`,
-  comboboxFlexBasis: '50px',
+  comboboxFlexBasis: pxToRem(50),
   listBackgroundColor: siteVars.colors.white,
   listBorderRadius: _3px_asRem,
   listPadding: `${pxToRem(8)} 0`,
   listBoxShadow: `0 .2rem .6rem 0 ${siteVars.gray06}`,
-  listMaxHeight: '20rem',
+  listMaxHeight: pxToRem(296),
   listItemBackgroundColor: siteVars.colors.white,
   listItemBackgroundColorActive: siteVars.colors.primary[500],
   listItemColorActive: siteVars.colors.white,

packages/react/src/themes/teams/components/Embed/embedStyles.ts

@@ -6,7 +6,6 @@ import { EmbedVariables } from './embedVariables'
 export default {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
     return {
-      boxSizing: 'border-box',
       display: 'inline-block',
       verticalAlign: 'middle',
       position: 'relative',

packages/react/src/themes/teams/components/Input/inputStyles.ts

@@ -14,7 +14,6 @@ const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = {
 
   input: ({ props: p, variables: v }): ICSSInJSStyle => ({
     outline: 0,
-    boxSizing: 'border-box',
     borderStyle: 'solid',
     borderColor: 'transparent',
     borderWidth: v.borderWidth,

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

@@ -24,9 +24,6 @@ const radioStyles: ComponentSlotStylesInput<
   RadioGroupItemVariables
 > = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    // can remove this after global style for border-box goes in
-    boxSizing: 'border-box',
-
     alignItems: 'center',
     borderStyle: 'solid',
     borderWidth: `${pxToRem(1)}`,
@@ -69,10 +66,6 @@ const radioStyles: ComponentSlotStylesInput<
     // overrides from icon styles
     backgroundColor: 'transparent',
     boxShadow: 'none',
-
-    // can remove this after global style for border-box goes in
-    boxSizing: 'border-box',
-
     borderStyle: 'solid',
     borderWidth: `${pxToRem(1)}`,
     borderColor: 'currentColor',

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

@@ -58,7 +58,6 @@ export const getSizeStyles = (sizeInPx: number, variables: StatusVariables) => {
 const statusStyles: ComponentSlotStylesInput<StatusProps, StatusVariables> = {
   root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
     return {
-      boxSizing: 'border-box',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',

packages/react/src/themes/teams/components/Video/videoStyles.ts

@@ -4,7 +4,6 @@ import { VideoVariables } from './videoVariables'
 
 export default {
   root: ({ variables: v }): ICSSInJSStyle => ({
-    boxSizing: 'border-box',
     display: 'inline-block',
     verticalAlign: 'middle',
     width: v.width,

packages/react/src/themes/teams/staticStyles/globalStyles.ts

@@ -8,6 +8,15 @@ const globalStyles: StaticStyleFunction = siteVars => ({
     fontSize: siteVars.bodyFontSize,
     lineHeight: siteVars.bodyLineHeight,
   },
+  '*': {
+    boxSizing: 'border-box',
+  },
+  '*:before': {
+    boxSizing: 'border-box',
+  },
+  '*:after': {
+    boxSizing: 'border-box',
+  },
 })
 
 export default globalStyles