2
0

fix: 💄 1-line truncated texts

This commit is contained in:
Baptiste Arnaud
2022-06-18 07:58:51 +02:00
parent 283509ed59
commit e4ad23c2b9
14 changed files with 15 additions and 15 deletions

View File

@@ -90,7 +90,7 @@ export const DashboardHeader = () => {
/> />
</SkeletonCircle> </SkeletonCircle>
{workspace && ( {workspace && (
<Text noOfLines={0} maxW="200px"> <Text noOfLines={1} maxW="200px">
{workspace.name} {workspace.name}
</Text> </Text>
)} )}

View File

@@ -91,7 +91,7 @@ export const MemberIdentityContent = ({
<Text <Text
color="gray.500" color="gray.500"
fontSize={name ? '14px' : 'inherit'} fontSize={name ? '14px' : 'inherit'}
noOfLines={0} noOfLines={1}
> >
{email} {email}
</Text> </Text>

View File

@@ -85,7 +85,7 @@ export const CustomDomainsDropdown = ({
textAlign="left" textAlign="left"
{...props} {...props}
> >
<Text noOfLines={0} overflowY="visible" h="20px"> <Text noOfLines={1} overflowY="visible" h="20px">
{currentCustomDomain ?? 'Add my domain'} {currentCustomDomain ?? 'Add my domain'}
</Text> </Text>
</MenuButton> </MenuButton>

View File

@@ -101,7 +101,7 @@ export const CredentialsDropdown = ({
textAlign="left" textAlign="left"
{...props} {...props}
> >
<Text noOfLines={0} overflowY="visible" h="20px"> <Text noOfLines={1} overflowY="visible" h="20px">
{currentCredential ? currentCredential.name : defaultCredentialsLabel} {currentCredential ? currentCredential.name : defaultCredentialsLabel}
</Text> </Text>
</MenuButton> </MenuButton>

View File

@@ -39,7 +39,7 @@ export const DropdownList = <T,>({
textAlign="left" textAlign="left"
{...props} {...props}
> >
<chakra.span noOfLines={0} display="block"> <chakra.span noOfLines={1} display="block">
{(currentItem ?? placeholder) as unknown as ReactNode} {(currentItem ?? placeholder) as unknown as ReactNode}
</chakra.span> </chakra.span>
</MenuButton> </MenuButton>

View File

@@ -4,7 +4,7 @@ import { Text } from '@chakra-ui/react'
type Props = { label?: string } type Props = { label?: string }
export const ConfigureContent = ({ label }: Props) => ( export const ConfigureContent = ({ label }: Props) => (
<Text color={label ? 'currentcolor' : 'gray.500'} noOfLines={0}> <Text color={label ? 'currentcolor' : 'gray.500'} noOfLines={1}>
{label ?? 'Configure...'} {label ?? 'Configure...'}
</Text> </Text>
) )

View File

@@ -6,7 +6,7 @@ type Props = {
} }
export const FileInputContent = ({ options: { isMultipleAllowed } }: Props) => ( export const FileInputContent = ({ options: { isMultipleAllowed } }: Props) => (
<Text noOfLines={0} pr="6"> <Text noOfLines={1} pr="6">
Collect {isMultipleAllowed ? 'files' : 'file'} Collect {isMultipleAllowed ? 'files' : 'file'}
</Text> </Text>
) )

View File

@@ -13,7 +13,7 @@ export const PaymentInputContent = ({ block }: Props) => {
) )
return <Text color="gray.500">Configure...</Text> return <Text color="gray.500">Configure...</Text>
return ( return (
<Text noOfLines={0} pr="6"> <Text noOfLines={1} pr="6">
Collect {block.options.amount} {block.options.currency} Collect {block.options.amount} {block.options.currency}
</Text> </Text>
) )

View File

@@ -6,7 +6,7 @@ type Props = {
} }
export const RatingInputContent = ({ block }: Props) => ( export const RatingInputContent = ({ block }: Props) => (
<Text noOfLines={0} pr="6"> <Text noOfLines={1} pr="6">
Rate from 1 to {block.options.length} Rate from 1 to {block.options.length}
</Text> </Text>
) )

View File

@@ -36,7 +36,7 @@ export const ProviderWebhookContent = ({ block, configuredLabel }: Props) => {
if (isNotDefined(webhook?.body)) if (isNotDefined(webhook?.body))
return <Text color="gray.500">Configure...</Text> return <Text color="gray.500">Configure...</Text>
return ( return (
<Text noOfLines={0} pr="6"> <Text noOfLines={1} pr="6">
{webhook?.url ? configuredLabel : 'Disabled'} {webhook?.url ? configuredLabel : 'Disabled'}
</Text> </Text>
) )

View File

@@ -22,7 +22,7 @@ export const ConditionNodeContent = ({ item }: Props) => {
byId(comparison.variableId) byId(comparison.variableId)
) )
return ( return (
<Wrap key={comparison.id} spacing={1} noOfLines={0}> <Wrap key={comparison.id} spacing={1} noOfLines={1}>
{idx > 0 && <Text>{item.content.logicalOperator ?? ''}</Text>} {idx > 0 && <Text>{item.content.logicalOperator ?? ''}</Text>}
{variable?.name && ( {variable?.name && (
<Tag bgColor="orange.400" color="white"> <Tag bgColor="orange.400" color="white">
@@ -38,7 +38,7 @@ export const ConditionNodeContent = ({ item }: Props) => {
)} )}
{comparison?.value && ( {comparison?.value && (
<Tag bgColor={'gray.200'}> <Tag bgColor={'gray.200'}>
<Text noOfLines={0}>{comparison.value}</Text> <Text noOfLines={1}>{comparison.value}</Text>
</Tag> </Tag>
)} )}
</Wrap> </Wrap>

View File

@@ -174,7 +174,7 @@ export const CollaborationList = () => {
<Flex py="2" px="4" justifyContent="space-between"> <Flex py="2" px="4" justifyContent="space-between">
<HStack minW={0}> <HStack minW={0}>
<EmojiOrImageIcon icon={workspace.icon} /> <EmojiOrImageIcon icon={workspace.icon} />
<Text fontSize="15px" noOfLines={0}> <Text fontSize="15px" noOfLines={1}>
Everyone at {workspace.name} Everyone at {workspace.name}
</Text> </Text>
</HStack> </HStack>

View File

@@ -91,7 +91,7 @@ export const CollaboratorIdentityContent = ({
<Text <Text
color="gray.500" color="gray.500"
fontSize={name ? '14px' : 'inherit'} fontSize={name ? '14px' : 'inherit'}
noOfLines={0} noOfLines={1}
> >
{email} {email}
</Text> </Text>

View File

@@ -18,7 +18,7 @@ export const EditableTypebotName = ({ name, onNewName }: EditableProps) => {
<Tooltip label="Rename"> <Tooltip label="Rename">
<Editable value={localName} onChange={setLocalName} onSubmit={onNewName}> <Editable value={localName} onChange={setLocalName} onSubmit={onNewName}>
<EditablePreview <EditablePreview
noOfLines={0} noOfLines={1}
cursor="pointer" cursor="pointer"
maxW="200px" maxW="200px"
overflow="hidden" overflow="hidden"