fix: Fixes group by control icon colors (#14674)

This commit is contained in:
Michael S. Molina 2021-05-17 17:53:32 -03:00 committed by GitHub
parent ea96d95622
commit fd8b2cb89b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 17 deletions

View File

@ -39,12 +39,12 @@ export default function Option(props: OptionProps) {
data-test="remove-control-button" data-test="remove-control-button"
onClick={() => props.clickClose(props.index)} onClick={() => props.clickClose(props.index)}
> >
<Icons.XSmall color={theme.colors.grayscale.light1} /> <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
</CloseContainer> </CloseContainer>
<Label data-test="control-label">{props.children}</Label> <Label data-test="control-label">{props.children}</Label>
{props.withCaret && ( {props.withCaret && (
<CaretContainer> <CaretContainer>
<Icons.CaretRight color={theme.colors.grayscale.light1} /> <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
</CaretContainer> </CaretContainer>
)} )}
</OptionControlContainer> </OptionControlContainer>

View File

@ -47,19 +47,27 @@ export const OptionControlContainer = styled.div<{
`; `;
export const Label = styled.div` export const Label = styled.div`
display: flex; ${({ theme }) => `
max-width: 100%; display: flex;
overflow: hidden; max-width: 100%;
text-overflow: ellipsis; overflow: hidden;
align-items: center; text-overflow: ellipsis;
white-space: nowrap; align-items: center;
padding-left: ${({ theme }) => theme.gridUnit}px; white-space: nowrap;
svg { padding-left: ${theme.gridUnit}px;
margin-right: ${({ theme }) => theme.gridUnit}px; svg {
} margin-right: ${theme.gridUnit}px;
.option-label { margin-left: ${theme.gridUnit}px;
display: inline; }
} .type-label {
margin-right: ${theme.gridUnit}px;
margin-left: ${theme.gridUnit}px;
font-weight: ${theme.typography.weights.normal};
}
.option-label {
display: inline;
}
`}
`; `;
export const CaretContainer = styled.div` export const CaretContainer = styled.div`

View File

@ -42,8 +42,9 @@ const OptionContainer = styled.div`
} }
} }
.type-label { .type-label {
margin-right: ${({ theme }) => theme.gridUnit * 2}px; margin-right: ${({ theme }) => theme.gridUnit * 3}px;
width: ${({ theme }) => theme.gridUnit * 7}px; margin-left: ${({ theme }) => theme.gridUnit * 3}px;
width: ${({ theme }) => theme.gridUnit * 4}px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-weight: ${({ theme }) => theme.typography.weights.bold}; font-weight: ${({ theme }) => theme.typography.weights.bold};