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

fix(avatar): sizing issues #976

Merged
merged 16 commits into from
Feb 27, 2019
Merged

fix(avatar): sizing issues #976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e0f1e51
fix styles
kuzhelov-ms Feb 26, 2019
dff4554
Merge branch 'master' into fix/avatar-icon-size
kuzhelov Feb 26, 2019
742853d
make style adjustments
kuzhelov-ms Feb 26, 2019
56402b9
Merge branch 'fix/avatar-icon-size' of https://github.com/stardust-ui…
kuzhelov-ms Feb 26, 2019
5c0f76e
Merge branch 'master' into fix/avatar-icon-size
kuzhelov Feb 26, 2019
80f2654
Merge branch 'master' into fix/avatar-icon-size
kuzhelov Feb 26, 2019
c8a39cc
fix styles of radio group
kuzhelov-ms Feb 26, 2019
d413f7d
Merge branch 'fix/avatar-icon-size' of https://github.com/stardust-ui…
kuzhelov-ms Feb 26, 2019
c883738
use border-box sizing for avatar styles where size props are defined
kuzhelov-ms Feb 27, 2019
a85c06b
temporary remove changes to radioGroup styles to see visual regressions
kuzhelov-ms Feb 27, 2019
ae4ad93
fix icon styles
kuzhelov-ms Feb 27, 2019
12fcd5c
revert changes to radioGroup item styles
kuzhelov-ms Feb 27, 2019
af81815
Merge branch 'master' into fix/avatar-icon-size
kuzhelov Feb 27, 2019
04d976e
update changelog
kuzhelov-ms Feb 27, 2019
55f01a2
Merge branch 'fix/avatar-icon-size' of https://github.com/stardust-ui…
kuzhelov-ms Feb 27, 2019
e46e359
Merge branch 'master' into fix/avatar-icon-size
kuzhelov Feb 27, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
### Fixes
- Remove space between `Button.Group` items without `circular` prop @Bugaa92 ([#973](https://github.com/stardust-ui/react/pull/973))
- Fix allow `Text` component when rendered as div to behave as block element in Teams theme @mnajdova ([#940](https://github.com/stardust-ui/react/pull/940))
- Fix font-based `Icon` styles in Teams theme @kuzhelov ([#976](https://github.com/stardust-ui/react/pull/976))
- Refactor the `ListItem` component to use the `Flex` components instead of `ItemLayout` @mnajdova ([#886](https://github.com/stardust-ui/react/pull/886))

<!--------------------------------[ v0.22.1 ]------------------------------- -->
Expand Down
3 changes: 3 additions & 0 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,6 +17,7 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
const sizeInRem = pxToRem(sizeToPxValue[size])

return {
boxSizing: 'border-box',
position: 'relative',
backgroundColor: 'inherit',
display: 'inline-block',
Expand All @@ -26,6 +27,7 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = {
}
},
image: ({ variables: v }): ICSSInJSStyle => ({
boxSizing: 'border-box',
Copy link
Contributor

Choose a reason for hiding this comment

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

I saw that you added the same thing in the image, that would mean that we don't need i there.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, but this is, actually, necessary, as not only the Image component could be rendered here. Essentially, we would like to ensure that all sizing props defined for this slot will be applied in the expected way

borderColor: v.avatarBorderColor,
borderStyle: 'solid',
borderWidth: `${v.avatarBorderWidth}px`,
Expand All @@ -38,6 +40,7 @@ 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
15 changes: 10 additions & 5 deletions 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 @@ -34,13 +34,16 @@ const getFontStyles = (
fontFamily,
fontSize: sizeInRems,
lineHeight: 1,
textAlign: 'center',

display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',

width: sizeInRems,
height: sizeInRems,

'::before': {
content,
display: 'block',
width: sizeInRems,
height: sizeInRems,
},
}
}
Expand Down Expand Up @@ -96,14 +99,16 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
}): ICSSInJSStyle => {
const iconSpec = theme.icons[name]
const rtl = theme.rtl
const isFontBased = !iconSpec || !iconSpec.isSvg
const isFontBased = name && (!iconSpec || !iconSpec.isSvg)

return {
backgroundColor: v.backgroundColor,
display: 'inline-block',
speak: 'none',
verticalAlign: 'middle',

...(!isFontBased && { boxSizing: 'border-box' }),

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

...(isFontBased && {
Expand Down
1 change: 1 addition & 0 deletions 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,6 +4,7 @@ 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