iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: fix checkbox color (#10970) 

* style: fix checkbox color

* lint

* wrap test into theme
This commit is contained in:
Maxime Beauchemin 2020-09-21 13:12:12 -07:00 committed by GitHub
parent 41dfcd4834
commit e4e78b66fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx
View File

@ -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');

11
superset-frontend/src/components/Checkbox/index.tsx
View File

@ -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);

6
superset-frontend/src/components/CheckboxIcons.tsx
View File

@ -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>