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"
onClick={() => props.clickClose(props.index)}
>
<Icons.XSmall color={theme.colors.grayscale.light1} />
<Icons.XSmall iconColor={theme.colors.grayscale.light1} />
</CloseContainer>
<Label data-test="control-label">{props.children}</Label>
{props.withCaret && (
<CaretContainer>
<Icons.CaretRight color={theme.colors.grayscale.light1} />
<Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
</CaretContainer>
)}
</OptionControlContainer>

View File

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

View File

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