diff --git a/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx
index 9a0740cb01a84..9dc24811f6b31 100644
--- a/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/CheckboxControl_spec.jsx
@@ -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();
+ const fullComponent = mount(, {
+ wrappingComponent: ThemeProvider,
+ wrappingComponentProps: { theme: supersetTheme },
+ });
const spy = sinon.spy(fullComponent.instance(), 'onChange');
diff --git a/superset-frontend/src/components/Checkbox/index.tsx b/superset-frontend/src/components/Checkbox/index.tsx
index 621ce1755c56d..6bff6d8947f4e 100644
--- a/superset-frontend/src/components/Checkbox/index.tsx
+++ b/superset-frontend/src/components/Checkbox/index.tsx
@@ -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 (
{
onChange(!checked);
diff --git a/superset-frontend/src/components/CheckboxIcons.tsx b/superset-frontend/src/components/CheckboxIcons.tsx
index 2c94c863fb04f..a9addf8159e5c 100644
--- a/superset-frontend/src/components/CheckboxIcons.tsx
+++ b/superset-frontend/src/components/CheckboxIcons.tsx
@@ -28,7 +28,7 @@ export const CheckboxChecked = () => (
>
@@ -44,7 +44,7 @@ export const CheckboxHalfChecked = () => (
>
@@ -60,7 +60,7 @@ export const CheckboxUnchecked = () => (
>