Skip to content

Commit

Permalink
fix(Chip): avoid to collapse text if chip has no max width
Browse files Browse the repository at this point in the history
  • Loading branch information
@beawar
beawar authored and Beatrice Guerra committed Jun 10, 2022
1 parent 84b2d20 commit f8dae36
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 34 deletions.
10 changes: 10 additions & 0 deletions src/components/basic/Button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,20 @@ import { Container } from '@zextras/carbonio-design-system';
<Button label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dui varius eleifend pharetra. Suspendisse tempus euismod semper." color="primary" width="fit" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
<Button type="outlined" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dui varius eleifend pharetra. Suspendisse tempus euismod semper." width="fill" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
</Container>
<Container orientation="horizontal" maxWidth="500px" gap="10px">
<Button label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dui varius eleifend pharetra. Suspendisse tempus euismod semper." color="primary" width="fit" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
<Button type="default" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dui varius eleifend pharetra. Suspendisse tempus euismod semper." width="fit" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
</Container>
<Container orientation="vertical" maxWidth="500px" gap="10px">
<Button label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dui varius eleifend pharetra. Suspendisse tempus euismod semper." color="primary" width="fit" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
<Button type="outlined" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum dui varius eleifend pharetra. Suspendisse tempus euismod semper." width="fill" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
</Container>
<Container orientation="horizontal" maxWidth="500px" gap="10px">
<Button color="primary" width="fit" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
<Button color="primary" width="fit" icon="PeopleOutline" />
<Button type="outlined" width="fill" icon="PeopleOutline" secondaryAction={{ icon: 'ChevronDown', onClick: () => undefined }} />
<Button type="outlined" width="fill" icon="PeopleOutline" />
</Container>
</Container>
```

Expand Down
3 changes: 3 additions & 0 deletions src/components/basic/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,9 @@ const StyledIcon = styled(Icon)<{ $loading?: boolean; $size: string }>`
opacity: 0;
`};
width: ${({ $size }): string => $size};
min-width: ${({ $size }): string => $size};
height: ${({ $size }): string => $size};
min-height: ${({ $size }): string => $size};
flex-shrink: 0;
`;

Expand Down Expand Up @@ -194,6 +196,7 @@ const StyledButton = styled.button.attrs<

const StyledSecondaryAction = styled(StyledButton)<{ $loading: boolean }>`
flex-shrink: 0;
min-width: fit-content;
${({ $loading }): SimpleInterpolation =>
$loading &&
css`
Expand Down
73 changes: 40 additions & 33 deletions src/components/display/Chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
import { map } from 'lodash';
import styled, { css, SimpleInterpolation } from 'styled-components';
import type { ThemeObj } from '../../theme/theme';
import { Container, ContainerProps } from '../layout/Container';
import { Tooltip } from './Tooltip';
import { Icon } from '../basic/Icon';
import { IconButton, IconButtonProps } from '../inputs/IconButton';
Expand Down Expand Up @@ -95,41 +96,33 @@ const ActionIcon = styled(Icon)``;

const ActionIconButton = styled(IconButton)``;

const ActionContainer = styled.span<{ $spacing: string }>`
& > ${ActionIcon}, & > ${ActionIconButton} {
const ActionContainer = styled.div<{ $spacing: string }>`
min-width: fit-content;
& > ${ActionIcon} {
padding: ${({ $spacing }): SimpleInterpolation => css`calc(${$spacing} / 2)`};
}
`;

const LabelRow = styled(Row)``;
const LabelContainer = styled(Container)``;

const ContentRow = styled(Row)<{ $spacing: string }>`
gap: ${({ $spacing }): string => $spacing};
&:first-child > ${LabelRow}:first-child {
padding-left: ${({ $spacing }): SimpleInterpolation => css`calc(${$spacing} * 2)`};
const ContentContainer = styled(Container)<{ gap: ContainerProps['gap'] }>`
&:first-child > ${LabelContainer}:first-child {
padding-left: ${({ gap }): SimpleInterpolation => css`calc(${gap} * 2)`};
}
& > ${LabelRow}:last-child {
padding-right: ${({ $spacing }): SimpleInterpolation => css`calc(${$spacing} * 2)`};
& > ${LabelContainer}:last-child {
padding-right: ${({ gap }): SimpleInterpolation => css`calc(${gap} * 2)`};
}
`;

const ActionsRow = styled(Row)<{ $spacing: string }>`
gap: ${({ $spacing }): SimpleInterpolation => css`calc(${$spacing} / 2)`};
`;

const ChipContainer = styled(Row)<{
const ChipContainer = styled(Container)<{
background: keyof ThemeObj['palette'];
disabled: boolean;
onClick?: React.ReactEventHandler;
onDoubleClick?: React.ReactEventHandler;
$spacing: string;
}>`
user-select: none;
vertical-align: middle;
line-height: 1.5;
padding: ${({ $spacing }): SimpleInterpolation =>
css`calc(${$spacing} / 4) calc(${$spacing} / 2)`};
gap: ${({ $spacing }): string => $spacing};
${({ background, disabled, onClick, onDoubleClick, theme }): SimpleInterpolation =>
!disabled &&
(onClick || onDoubleClick) &&
Expand Down Expand Up @@ -299,7 +292,7 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function ChipFn(
onClick={clickHandler}
customSize={{
iconSize: SIZES[size].icon,
paddingSize: 0 // padding set through styled component
paddingSize: `calc(${SIZES[size].spacing} / 2)`
}}
/>
</ActionContainer>
Expand Down Expand Up @@ -350,19 +343,23 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function ChipFn(
placement={tooltipPlacement}
>
<ChipContainer
display="inline-flex"
wrap="nowrap"
orientation="horizontal"
ref={chipRef}
background={error ? 'error' : background}
borderRadius={shape}
width="fit"
maxWidth={maxWidth}
mainAlignment="space-between"
$spacing={SIZES[size].spacing}
gap={SIZES[size].spacing}
padding={{
vertical: `calc(${SIZES[size].spacing} / 4)`,
horizontal: `calc(${SIZES[size].spacing} / 2)`
}}
onClick={onClick && clickHandler}
onDoubleClick={onDoubleClick && dblClickHandler}
disabled={!!disabled}
width="fit"
minWidth={maxWidth ? '0' : 'fit'}
{...rest}
>
{hasAvatar && (
Expand All @@ -377,8 +374,11 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function ChipFn(
disabled={!!disabled}
/>
)}
<ContentRow
<ContentContainer
wrap="nowrap"
orientation="horizontal"
width="fit"
minWidth={maxWidth ? '0' : 'fit'}
minHeight={`calc(${theme.sizes.avatar[SIZES[size].avatar].diameter} + calc(${
SIZES[size].spacing
} / 4))`}
Expand All @@ -388,10 +388,10 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function ChipFn(
SIZES[size].spacing
}))`
}
$spacing={SIZES[size].spacing}
gap={SIZES[size].spacing}
>
{keyLabel && (
<LabelRow wrap="nowrap" flexShrink={0}>
<LabelContainer wrap="nowrap" width="auto">
<Text
weight="regular"
size={SIZES[size].font}
Expand All @@ -400,16 +400,17 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function ChipFn(
>
{keyLabel}
</Text>
</LabelRow>
</LabelContainer>
)}
{label && (
<LabelRow
wrap="nowrap"
takeAvailableSpace={!!maxWidth}
<LabelContainer
width="fit"
onMouseEnter={showLabelTooltip}
onMouseLeave={hideLabelTooltip}
onFocus={showLabelTooltip}
onBlur={hideLabelTooltip}
flexShrink={maxWidth ? 1 : 0}
minWidth="0"
>
<Tooltip
label={(typeof label === 'string' && label) || ''}
Expand All @@ -427,14 +428,20 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function ChipFn(
{typeof label === 'string' ? label : <Row wrap="nowrap">{label}</Row>}
</Text>
</Tooltip>
</LabelRow>
</LabelContainer>
)}
{actionItems && actionItems.length > 0 && (
<ActionsRow wrap="nowrap" $spacing={SIZES[size].spacing}>
<Container
gap={`calc(${SIZES[size].spacing} / 2)`}
orientation="horizontal"
width="fit"
minWidth="fit"
flexShrink={0}
>
{actionItems}
</ActionsRow>
</Container>
)}
</ContentRow>
</ContentContainer>
</ChipContainer>
</Tooltip>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/ChipInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -561,7 +561,7 @@ const options = [
{ id: '5', label: 'Fifth option' }
];
<Container style={{ gap: '10px' }} orientation="horizontal">
<ChipInput placeholder="ChipInput enabled" options={options} disableOptions={false} background="gray5" bottomBorderColor="gray3" />
<ChipInput placeholder="ChipInput enabled" options={options} disableOptions={false} background="gray5" bottomBorderColor="gray3" description="" />
<ChipInput placeholder="ChipInput disabled" options={options} disabled disableOptions={false} background="gray5" bottomBorderColor="gray3" description="Disabled" />
</Container>
```
Expand Down
1 change: 1 addition & 0 deletions src/components/inputs/ChipInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@ const ChipsContainer = styled.div`
gap: 8px;
justify-content: flex-start;
width: auto;
min-width: fit-content;
`;

function reducer(
Expand Down
2 changes: 2 additions & 0 deletions src/components/inputs/IconButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ const StyledIconButton = styled(Button)<{
css`
svg {
width: ${$iconSize};
min-width: ${$iconSize};
height: ${$iconSize};
min-height: ${$iconSize};
}
`};
${({ $paddingSize }): SimpleInterpolation =>
Expand Down

0 comments on commit f8dae36

Please sign in to comment.