fix checkbox control color and radio button color

apache · Apr 19, 2022 · 0238b73 · 0238b73
1 parent 70e4988
commit 0238b73
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/...packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx b/...packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
@@ -56,8 +56,11 @@ export default function RadioButtonControl({
         '.control-label + .btn-group': {
           marginTop: 1,
         },
+        '.btn-group .btn-default': {
+          color: theme.colors.grayscale.dark1,
+        },
         '.btn-group .btn.active': {
-          background: theme.colors.secondary.light5,
+          background: theme.colors.grayscale.light4,
           fontWeight: theme.typography.weights.bold,
           boxShadow: 'none',
         },

diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -109,7 +109,7 @@ const ControlHeader: FC<ControlHeaderProps> = ({
           css={(theme: SupersetTheme) =>
             css`
               margin-bottom: ${theme.gridUnit * 0.5}px;
-              position: 'relative';
+              position: relative;
             `
           }
         >

diff --git a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { styled, css } from '@superset-ui/core';
 import ControlHeader from '../ControlHeader';
 import Checkbox from '../../../components/Checkbox';
 
@@ -32,7 +33,16 @@ const defaultProps = {
   onChange: () => {},
 };
 
-const checkboxStyle = { paddingRight: '8px' };
+const CheckBoxControlWrapper = styled.div`
+  ${({ theme }) => css`
+    .ControlHeader label {
+      color: ${theme.colors.grayscale.dark1};
+    }
+    span[role='checkbox'] {
+      padding-right: ${theme.gridUnit * 2}px;
+    }
+  `}
+`;
 
 export default class CheckboxControl extends React.Component {
   onChange() {
@@ -43,7 +53,6 @@ export default class CheckboxControl extends React.Component {
     return (
       <Checkbox
         onChange={this.onChange.bind(this)}
-        style={checkboxStyle}
         checked={!!this.props.value}
       />
     );
@@ -52,11 +61,13 @@ export default class CheckboxControl extends React.Component {
   render() {
     if (this.props.label) {
       return (
-        <ControlHeader
-          {...this.props}
-          leftNode={this.renderCheckbox()}
-          onClick={this.onChange.bind(this)}
-        />
+        <CheckBoxControlWrapper>
+          <ControlHeader
+            {...this.props}
+            leftNode={this.renderCheckbox()}
+            onClick={this.onChange.bind(this)}
+          />
+        </CheckBoxControlWrapper>
       );
     }
     return this.renderCheckbox();