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

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

Merged
merged 20 commits into from
Apr 15, 2019
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
717ef7f
-added border-box in the global styles
Mar 13, 2019
d69744b
-updated icon styles
Mar 13, 2019
e02e687
-fixed dropdown styles
Mar 14, 2019
58cb46e
-moved styles to globalStyles
Mar 14, 2019
c53fcc6
-removed unnecessary box sizing styles
Mar 14, 2019
7308386
-updates changelog
Mar 14, 2019
525aafc
-reverted loader styles form base theme
Mar 18, 2019
715e51a
Merge branch 'master' into fix/add-box-sizing-in-global-styles
Mar 18, 2019
d8d4ef6
-updated changelog
Mar 18, 2019
fd73ef5
Merge branch 'master' into fix/add-box-sizing-in-global-styles
Mar 26, 2019
14f3e7d
-removed unnecessary border-box styles
Mar 26, 2019
5c3597d
-changed changelog
Mar 26, 2019
192593b
-reverted border-box in loader styles
Mar 26, 2019
6ccd7bb
Merge branch 'master' into fix/add-box-sizing-in-global-styles
Apr 10, 2019
9185ff5
-updates on the box sizing prop
Apr 10, 2019
eece976
Merge branch 'master' into fix/add-box-sizing-in-global-styles
Apr 10, 2019
117a792
-fixed changelog entry
Apr 10, 2019
9273496
Merge branch 'master' into fix/add-box-sizing-in-global-styles
Apr 15, 2019
f376e75
-removed boxSizing: 'border-box' to video and embed styles in Teams t…
Apr 15, 2019
463cc66
-reverted boxSizing: 'border-box' on imageStyles, as it was moved in …
Apr 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

## [Unreleased]

### BREAKING CHANGES
- added `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))
mnajdova marked this conversation as resolved.
Show resolved Hide resolved

<!--------------------------------[ v0.23.1 ]------------------------------- -->
## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13)
[Compare changes](https://github.com/stardust-ui/react/compare/v0.23.0...v0.23.1)
Expand Down
3 changes: 0 additions & 3 deletions packages/react/src/themes/teams/components/Avatar/avatarStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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`,
Expand All @@ -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,
Expand Down
1 change: 0 additions & 1 deletion packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
display: 'flex',
flexWrap: 'wrap',
position: 'relative',
boxSizing: 'border-box',
borderStyle: 'solid',
borderColor: 'transparent',
outline: 0,
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just curious how 20rem became 296px?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So previously on the Dropdown list, we had padding on the top and 6 elements in the list (one list item has height of 48px) => (6*48px) + 8px = 296px :) We don't want to use rem anyway and the height was a bit different because of the box-sizing, so that is why I converted it to px.

listItemBackgroundColor: siteVars.colors.white,
listItemBackgroundColorActive: siteVars.colors.primary[500],
listItemColorActive: siteVars.colors.white,
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/themes/teams/components/Icon/iconStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
speak: 'none',
verticalAlign: 'middle',

...(!isFontBased && { boxSizing: 'border-box' }),
...(isFontBased && { boxSizing: 'content-box' }),
mnajdova marked this conversation as resolved.
Show resolved Hide resolved

...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)),

Expand Down
1 change: 0 additions & 1 deletion packages/react/src/themes/teams/components/Image/imageStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { ImageProps } from '../../../../components/Image/Image'

export default {
root: ({ props, variables }): ICSSInJSStyle => ({
boxSizing: 'border-box',
display: 'inline-block',
verticalAlign: 'middle',
width: (props.fluid && '100%') || variables.width,
Expand Down
1 change: 0 additions & 1 deletion packages/react/src/themes/teams/components/Input/inputStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion packages/react/src/themes/teams/components/Status/statusStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
9 changes: 9 additions & 0 deletions packages/react/src/themes/teams/staticStyles/globalStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,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