ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: set appropriate types to nowrap (#3392)

Browse Source
This commit is contained in:
Zach Pomerantz 2022-03-03 10:39:44 -08:00 committed by GitHub
parent b2288258f2
commit a4fbfae4ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/theme/type.tsx
View File

@ -5,10 +5,11 @@ import { Color } from './theme'
type TextProps = Omit<TextPropsWithCss, 'css' | 'color'> & { color?: Color }
const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string }>`
const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string; noWrap?: true }>`
color: ${({ color = 'currentColor', theme }) => theme[color as Color]};
// Avoid the need for placeholders by setting min-height to line-height.
min-height: ${({ lineHeight }) => lineHeight};
white-space: ${({ noWrap }) => noWrap && 'nowrap'};
`
const TransitionTextWrapper = styled(TextWrapper)`
@ -16,23 +17,33 @@ const TransitionTextWrapper = styled(TextWrapper)`
`
export function H1(props: TextProps) {
return <TextWrapper className="headline headline-1" fontSize={36} fontWeight={400} lineHeight="36px" {...props} />
return (
<TextWrapper className="headline headline-1" fontSize={36} fontWeight={400} lineHeight="36px" noWrap {...props} />
)
}
export function H2(props: TextProps) {
return <TextWrapper className="headline headline-2" fontSize={32} fontWeight={400} lineHeight="32px" {...props} />
return (
<TextWrapper className="headline headline-2" fontSize={32} fontWeight={400} lineHeight="32px" noWrap {...props} />
)
}
export function H3(props: TextProps) {
return <TextWrapper className="headline headline-3" fontSize={20} fontWeight={400} lineHeight="20px" {...props} />
return (
<TextWrapper className="headline headline-3" fontSize={20} fontWeight={400} lineHeight="20px" noWrap {...props} />
)
}
export function Subhead1(props: TextProps) {
return <TextWrapper className="subhead subhead-1" fontSize={16} fontWeight={500} lineHeight="16px" {...props} />
return (
<TextWrapper className="subhead subhead-1" fontSize={16} fontWeight={500} lineHeight="16px" noWrap {...props} />
)
}
export function Subhead2(props: TextProps) {
return <TextWrapper className="subhead subhead-2" fontSize={14} fontWeight={500} lineHeight="14px" {...props} />
return (
<TextWrapper className="subhead subhead-2" fontSize={14} fontWeight={500} lineHeight="14px" noWrap {...props} />
)
}
export function Body1(props: TextProps) {
@ -48,19 +59,25 @@ export function Caption(props: TextProps) {
}
export function Badge(props: TextProps) {
return <TextWrapper className="badge" fontSize={8} fontWeight={600} lineHeight="8px" {...props} />
return <TextWrapper className="badge" fontSize={8} fontWeight={600} lineHeight="8px" noWrap />
}
export function ButtonLarge(props: TextProps) {
return <TextWrapper className="button button-large" fontSize={20} fontWeight={500} lineHeight="20px" {...props} />
return (
<TextWrapper className="button button-large" fontSize={20} fontWeight={500} lineHeight="20px" noWrap {...props} />
)
}
export function ButtonMedium(props: TextProps) {
return <TextWrapper className="button button-medium" fontSize={16} fontWeight={500} lineHeight="16px" {...props} />
return (
<TextWrapper className="button button-medium" fontSize={16} fontWeight={500} lineHeight="16px" noWrap {...props} />
)
}
export function ButtonSmall(props: TextProps) {
return <TextWrapper className="button button-small" fontSize={14} fontWeight={500} lineHeight="14px" {...props} />
return (
<TextWrapper className="button button-small" fontSize={14} fontWeight={500} lineHeight="14px" noWrap {...props} />
)
}
export function TransitionButton(props: TextProps & { buttonSize: 'small' | 'medium' | 'large' }) {
@ -73,6 +90,7 @@ export function TransitionButton(props: TextProps & { buttonSize: 'small' | 'med
fontSize={fontSize}
fontWeight={500}
lineHeight={lineHeight}
noWrap
{...props}
/>
)