mirror of https://github.com/apache/superset.git
style: fix checkbox color (#10970)
* style: fix checkbox color * lint * wrap test into theme
This commit is contained in:
parent
41dfcd4834
commit
e4e78b66fa
|
@ -21,6 +21,8 @@ import React from 'react';
|
|||
import sinon from 'sinon';
|
||||
import { shallow, mount } from 'enzyme';
|
||||
|
||||
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||
|
||||
import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
import Checkbox from 'src/components/Checkbox';
|
||||
|
@ -48,7 +50,10 @@ describe('CheckboxControl', () => {
|
|||
});
|
||||
|
||||
it('Checks the box when the label is clicked', () => {
|
||||
const fullComponent = mount(<CheckboxControl {...defaultProps} />);
|
||||
const fullComponent = mount(<CheckboxControl {...defaultProps} />, {
|
||||
wrappingComponent: ThemeProvider,
|
||||
wrappingComponentProps: { theme: supersetTheme },
|
||||
});
|
||||
|
||||
const spy = sinon.spy(fullComponent.instance(), 'onChange');
|
||||
|
||||
|
|
|
@ -30,8 +30,14 @@ interface CheckboxProps {
|
|||
}
|
||||
|
||||
const Styles = styled.span`
|
||||
&,
|
||||
& svg {
|
||||
cursor: pointer;
|
||||
&.primary {
|
||||
color: ${({ theme }) => theme.colors.primary.base};
|
||||
}
|
||||
&.grayscale {
|
||||
color: ${({ theme }) => theme.colors.grayscale.light1};
|
||||
}
|
||||
svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
`;
|
||||
|
@ -39,6 +45,7 @@ const Styles = styled.span`
|
|||
export default function Checkbox({ checked, onChange, style }: CheckboxProps) {
|
||||
return (
|
||||
<Styles
|
||||
className={checked ? 'primary' : 'grayscale'}
|
||||
style={style}
|
||||
onClick={() => {
|
||||
onChange(!checked);
|
||||
|
|
|
@ -28,7 +28,7 @@ export const CheckboxChecked = () => (
|
|||
>
|
||||
<path
|
||||
d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.11 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0Z"
|
||||
fill="#00A699"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M7 14L2 9L3.41 7.59L7 11.17L14.59 3.58L16 5L7 14Z" fill="white" />
|
||||
</svg>
|
||||
|
@ -44,7 +44,7 @@ export const CheckboxHalfChecked = () => (
|
|||
>
|
||||
<path
|
||||
d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
|
||||
fill="#999999"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M14 10H4V8H14V10Z" fill="white" />
|
||||
</svg>
|
||||
|
@ -60,7 +60,7 @@ export const CheckboxUnchecked = () => (
|
|||
>
|
||||
<path
|
||||
d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
|
||||
fill="#CCCCCC"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M16 2V16H2V2H16V2Z" fill="white" />
|
||||
</svg>
|
||||
|
|
Loading…
Reference in New Issue