this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[Web] Fix clipped text when using `numberOfLines={1}` (#10105)

authored by

Samuel Newman and committed by
GitHub
854ae60e cc4a436e

+33 -11
+33 -11
src/components/Typography.tsx
··· 1 1 import {UITextView} from 'react-native-uitextview' 2 2 3 3 import {logger} from '#/logger' 4 - import {atoms, useAlf, useTheme, web} from '#/alf' 4 + import {atoms as a, type TextStyleProp, useAlf, useTheme, web} from '#/alf' 5 5 import { 6 6 childHasEmoji, 7 7 normalizeTextStyles, ··· 22 22 selectable, 23 23 title, 24 24 dataSet, 25 + numberOfLines, 25 26 ...rest 26 27 }: TextProps) { 27 28 const {fonts, flags} = useAlf() 28 29 const t = useTheme() 29 - const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, style], { 30 - fontScale: fonts.scaleMultiplier, 31 - fontFamily: fonts.family, 32 - flags, 33 - }) 30 + const s = normalizeTextStyles( 31 + [ 32 + a.text_sm, 33 + t.atoms.text, 34 + web(numberOfLines === 1 && numberOfLinesClippingFix), 35 + style, 36 + ], 37 + { 38 + fontScale: fonts.scaleMultiplier, 39 + fontFamily: fonts.family, 40 + flags, 41 + }, 42 + ) 34 43 35 44 if (__DEV__) { 36 45 if (!emoji && childHasEmoji(children)) { ··· 44 53 const shared = { 45 54 uiTextView: true, 46 55 selectable, 56 + numberOfLines, 47 57 style: s, 48 58 dataSet: Object.assign({tooltip: title}, dataSet || {}), 49 59 ...rest, ··· 82 92 role: 'paragraph', 83 93 }) || {} 84 94 return ( 85 - <Text 86 - {...attr} 87 - {...rest} 88 - style={[atoms.text_md, atoms.leading_relaxed, style]} 89 - /> 95 + <Text {...attr} {...rest} style={[a.text_md, a.leading_relaxed, style]} /> 90 96 ) 91 97 } 98 + 99 + /** 100 + * HACKFIX: React Native Web applies `overflow: hidden` to 101 + * text when using the `numberOfLines` prop, which causes it to clip 102 + * ascenders/descenders. It only needs to be doing this for the X axis, 103 + * so override the style with `overflowX: 'hidden'`. 104 + * Note this only works for `numberOfLines={1}` -sfn 105 + * 106 + * @see https://github.com/necolas/react-native-web/pull/2836 107 + */ 108 + const numberOfLinesClippingFix = { 109 + overflowY: 'visible', 110 + overflowX: 'clip', 111 + // this is neater and supports vertical writing modes, but it's only baseline newly available 112 + // overflowInline: 'clip', 113 + } satisfies React.CSSProperties as TextStyleProp