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
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mnajdova
requested review from
dvdzkwsk,
kuzhelov,
layershifter,
levithomason and
miroslavstastny
as code owners
Codecov Report
@@ Coverage Diff @@
## master #1057 +/- ##
=======================================
Coverage 82.56% 82.56%
=======================================
Files 752 752
Lines 8859 8859
Branches 1178 1178
=======================================
Hits 7314 7314
Misses 1530 1530
Partials 15 15
Continue to review full report at Codecov.
|
mnajdova
changed the title
mnajdova
changed the title
packages/react/src/themes/base/components/Loader/loaderStyles.ts
Outdated
Show resolved
Hide resolved
layershifter
approved these changes
Mar 15, 2019
notandrew
approved these changes
Mar 15, 2019
Merged
|
pls remove |
miroslavstastny
approved these changes
Mar 19, 2019
| listBackgroundColor: siteVars.colors.white, | ||
| listBorderRadius: _3px_asRem, | ||
| listPadding: `${pxToRem(8)} 0`, | ||
| listBoxShadow: `0 .2rem .6rem 0 ${siteVars.gray06}`, | ||
| listMaxHeight: '20rem', | ||
| listMaxHeight: pxToRem(296), |
There was a problem hiding this comment.
just curious how 20rem became 296px?
There was a problem hiding this comment.
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.
codepretty
approved these changes
Mar 20, 2019
kuzhelov
reviewed
Mar 21, 2019
kuzhelov
approved these changes
Mar 21, 2019
kuzhelov
reviewed
Mar 21, 2019
added 8 commits
March 26, 2019 16:36
# Conflicts: # CHANGELOG.md
-moved content-box for font icons near the width and height props
# Conflicts: # packages/react/src/themes/teams/components/Icon/iconStyles.ts
miroslavstastny
approved these changes
Apr 11, 2019
delete-merged-branch
bot
deleted the
fix/add-box-sizing-in-global-styles
branch
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds the
box-sizing: border-boxto all elements, as well before and auto pseudo elements in teams theme, by providing a rule in the global styles. Parts of the styles of the components, had to be updated. We can still see some screener differences, but I see these as fixes, rather then regressions. @codepretty @bcalvery @notandrew let me know what you think.BREAKING CHANGES:
The `box-sizing: border-box' prop is added for all elements, so check for regressions to all components that has style overrides affecting the size of the components, or adding paddings and margings of the elements.