fix: Unwinds icon fallout that came along with filters PR (#11474)

* Unwinds icon revamp that came along with filters PR.

* cleanup/linting

* removing unused import
This commit is contained in:
Evan Rusackas 2020-10-28 19:44:39 -07:00 committed by GitHub
parent 18658f45be
commit e024267447
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 17 deletions

View File

@ -17,7 +17,6 @@
* under the License. * under the License.
*/ */
import React, { SVGProps } from 'react'; import React, { SVGProps } from 'react';
import { styled } from '@superset-ui/core';
import { ReactComponent as AlertSolidIcon } from 'images/icons/alert_solid.svg'; import { ReactComponent as AlertSolidIcon } from 'images/icons/alert_solid.svg';
import { ReactComponent as AlertIcon } from 'images/icons/alert.svg'; import { ReactComponent as AlertIcon } from 'images/icons/alert.svg';
@ -380,18 +379,6 @@ interface IconProps extends SVGProps<SVGSVGElement> {
name: IconName; name: IconName;
} }
const IconWrapper = styled.span`
display: inline-block;
width: 1em;
height: 1em;
svg {
width: 100%;
height: 100%;
color: currentColor;
vertical-align: middle;
}
`;
const Icon = ({ const Icon = ({
name, name,
color = '#666666', color = '#666666',
@ -401,9 +388,7 @@ const Icon = ({
const Component = iconsRegistry[name]; const Component = iconsRegistry[name];
return ( return (
<IconWrapper> <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
<Component color={color} viewBox={viewBox} data-test={name} {...rest} />
</IconWrapper>
); );
}; };

View File

@ -20,8 +20,8 @@ import { styled } from '@superset-ui/core';
export const Pill = styled.div` export const Pill = styled.div`
display: inline-block; display: inline-block;
background: ${({ theme }) => theme.colors.grayscale.base};
color: ${({ theme }) => theme.colors.grayscale.light5}; color: ${({ theme }) => theme.colors.grayscale.light5};
background: ${({ theme }) => theme.colors.grayscale.base};
border-radius: 1em; border-radius: 1em;
vertical-align: text-top; vertical-align: text-top;
padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`}; padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`};
@ -36,6 +36,11 @@ export const Pill = styled.div`
svg { svg {
position: relative; position: relative;
top: -1px; top: -1px;
color: ${({ theme }) => theme.colors.grayscale.light5};
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
} }
&:hover { &:hover {
@ -49,6 +54,9 @@ export const Pill = styled.div`
&:hover { &:hover {
background: ${({ theme }) => theme.colors.alert.dark1}; background: ${({ theme }) => theme.colors.alert.dark1};
} }
svg {
color: ${({ theme }) => theme.colors.grayscale.dark2};
}
} }
&.filters-inactive { &.filters-inactive {