-
Notifications
You must be signed in to change notification settings - Fork 53
fix(avatar): font icons sizing issue #846
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,10 @@ | ||
import { Func } from '../types' | ||
|
||
// https://jsperf.com/startdust-callable | ||
const callable = (possibleFunction: any) => (...args: any[]) => { | ||
return typeof possibleFunction === 'function' ? possibleFunction(...args) : possibleFunction | ||
const callable = <T = {}>(possibleFunction: T | Func<T>) => (...args: any[]) => { | ||
return typeof possibleFunction === 'function' | ||
? (possibleFunction as Func<T>)(...args) | ||
: possibleFunction | ||
} | ||
|
||
export default callable |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import avatarVariables from '../Avatar/avatarVariables' | ||
import { callable } from '../../../../lib' | ||
|
||
export default siteVars => ({ | ||
avatarBorderWidth: callable(avatarVariables)(siteVars).avatarBorderWidth, | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
import { pxToRem } from '../../../../lib' | ||
import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' | ||
import { AvatarProps } from '../../../../components/Avatar/Avatar' | ||
import { AvatarProps } from '../../../..' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we still use the direct import? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. sure, thanks for catching this thing! |
||
|
||
const sizeToPxValue = { | ||
export const sizeToPxValue = { | ||
smallest: 24, | ||
smaller: 24, | ||
small: 24, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import * as _ from 'lodash' | ||
|
||
import { pxToRem, SizeValue } from '../../../../lib' | ||
import { IconVariables } from './iconVariables' | ||
|
||
import { sizeToPxValue as avatarSizeToPxValue } from '../Avatar/avatarStyles' | ||
|
||
const sizeToIconPaddingInPx: Record<SizeValue, number> = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. these values need to be refined |
||
smallest: 4, | ||
smaller: 4, | ||
small: 4, | ||
medium: 6, | ||
large: 8, | ||
larger: 8, | ||
largest: 10, | ||
} | ||
|
||
export const getAvatarFontIconStyles = (size: SizeValue, v: IconVariables) => { | ||
const slotSizeInPx = avatarSizeToPxValue[size] | ||
const iconBorderWidthInPx = v.avatarBorderWidth || 0 | ||
const iconPaddingSizeInPx = sizeToIconPaddingInPx[size] | ||
|
||
const iconSizeInRems = pxToRem(slotSizeInPx - 2 * iconPaddingSizeInPx - 2 * iconBorderWidthInPx) | ||
|
||
return { | ||
fontSize: iconSizeInRems, | ||
padding: pxToRem(iconPaddingSizeInPx), | ||
|
||
'::before': { | ||
width: iconSizeInRems, | ||
height: iconSizeInRems, | ||
}, | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,9 +4,10 @@ import fontAwesomeIcons from './fontAwesomeIconStyles' | |
import { callable, pxToRem, SizeValue } from '../../../../lib' | ||
import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types' | ||
import { ResultOf } from '../../../../types' | ||
import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' | ||
import { Avatar, IconXSpacing, IconProps } from '../../../../' | ||
import { getStyle as getSvgStyle } from './svg' | ||
import { IconVariables, IconSizeModifier } from './iconVariables' | ||
import { getAvatarFontIconStyles } from './avatarIconStyles' | ||
|
||
const sizes: Record<SizeValue, number> = { | ||
smallest: 7, | ||
|
@@ -19,7 +20,7 @@ const sizes: Record<SizeValue, number> = { | |
} | ||
|
||
const getDefaultFontIcon = (iconName: string) => { | ||
return callable(fontAwesomeIcons(iconName).icon)() | ||
return callable(fontAwesomeIcons(iconName).icon as FontIconSpec)() | ||
} | ||
|
||
const getFontStyles = ( | ||
|
@@ -124,6 +125,10 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = { | |
...(!rtl && { | ||
transform: `rotate(${rotate}deg)`, | ||
}), | ||
|
||
[`&.${Avatar.slotClassNames.image}`]: { | ||
...(isFontBased && getAvatarFontIconStyles(size, v)), | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Actually, this is a single thing that stops me from the approve button. I understand why |
||
} | ||
}, | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we may safely remove this reference as
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's remove it 👍