refactor: Bootstrap to AntD - Radio

superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx

@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import thunk from 'redux-thunk';
-import { Radio } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
 
 import Icon from 'src/components/Icon';
 import Tabs from 'src/common/components/Tabs';

superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx

@@ -18,7 +18,7 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { Radio } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
 import sinon from 'sinon';
 import { styledMount as mount } from 'spec/helpers/theming';
 

superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx

@@ -24,7 +24,8 @@ import { Provider } from 'react-redux';
 
 import { shallow } from 'enzyme';
 import { styledMount as mount } from 'spec/helpers/theming';
-import { FormControl, Radio } from 'react-bootstrap';
+import { FormControl } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
 import Button from 'src/components/Button';
 import sinon from 'sinon';
 import fetchMock from 'fetch-mock';

superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx

@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Radio, AutoComplete, Input } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
+import { AutoComplete, Input } from 'src/common/components';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 
 describe('SaveDatasetModal', () => {

superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx

@@ -19,7 +19,8 @@
 
 import React, { FunctionComponent } from 'react';
 import { AutoCompleteProps } from 'antd/lib/auto-complete';
-import { Radio, AutoComplete, Input } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
+import { AutoComplete, Input } from 'src/common/components';
 import StyledModal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 import { styled, t } from '@superset-ui/core';

superset-frontend/src/common/components/Radio/Radio.stories.tsx

@@ -0,0 +1,56 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { useArgs } from '@storybook/client-api';
+import { Radio } from './index';
+
+export default {
+  title: 'Radio',
+  component: Radio,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+  argTypes: {
+    theme: {
+      table: {
+        disable: true,
+      },
+    },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export const SupersetRadio = () => {
+  const [{ checked, ...rest }, updateArgs] = useArgs();
+  return (
+    <Radio
+      checked={checked}
+      onChange={() => updateArgs({ checked: !checked })}
+      {...rest}
+    >
+      Example
+    </Radio>
+  );
+};
+
+SupersetRadio.args = {
+  checked: false,
+  disabled: false,
+};

superset-frontend/src/common/components/Radio.tsx → superset-frontend/src/common/components/Radio/index.tsx

@@ -21,20 +21,26 @@ import { Radio as BaseRadio } from 'src/common/components';
 
 const StyledRadio = styled(BaseRadio)`
   .ant-radio-inner {
-    width: 18px;
-    height: 18px;
+    top: -1px;
+    left: 2px;
+    width: ${({ theme }) => theme.gridUnit * 4}px;
+    height: ${({ theme }) => theme.gridUnit * 4}px;
     border-width: 2px;
-    border-color: ${({ theme }) => theme.colors.grayscale.base};
+    border-color: ${({ theme }) => theme.colors.grayscale.light2};
   }
 
   .ant-radio.ant-radio-checked {
     .ant-radio-inner {
-      background-color: ${({ theme }) => theme.colors.primary.dark1};
-      border-color: ${({ theme }) => theme.colors.primary.dark1};
+      border-width: ${({ theme }) => theme.gridUnit + 1}px;
+      border-color: ${({ theme }) => theme.colors.primary.base};
     }
 
     .ant-radio-inner::after {
       background-color: ${({ theme }) => theme.colors.grayscale.light5};
+      top: 0;
+      left: 0;
+      width: ${({ theme }) => theme.gridUnit + 2}px;
+      height: ${({ theme }) => theme.gridUnit + 2}px;
     }
   }
 

superset-frontend/src/common/components/common.stories.tsx

@@ -332,6 +332,7 @@ export const CollapseAnimateArrows = () => (
     </Collapse.Panel>
   </Collapse>
 );
+
 export function StyledCronPicker() {
   // @ts-ignore
   const inputRef = useRef<Input>(null);

superset-frontend/src/common/components/index.tsx

@@ -58,7 +58,7 @@ export {
 } from 'antd';
 export { TreeProps } from 'antd/lib/tree';
 export { FormInstance } from 'antd/lib/form';
-
+export { RadioChangeEvent } from 'antd/lib/radio';
 export { default as Collapse } from './Collapse';
 export { default as Badge } from './Badge';
 export { default as Progress } from './ProgressBar';

superset-frontend/src/dashboard/components/SaveModal.tsx

@@ -18,7 +18,9 @@
  */
 /* eslint-env browser */
 import React from 'react';
-import { FormControl, FormGroup, Radio } from 'react-bootstrap';
+import { FormControl, FormGroup } from 'react-bootstrap';
+import { RadioChangeEvent } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
 import Button from 'src/components/Button';
 import { t, CategoricalColorNamespace, JsonResponse } from '@superset-ui/core';
 
@@ -101,7 +103,7 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
     }));
   }
 
-  handleSaveTypeChange(event: React.FormEvent<Radio>) {
+  handleSaveTypeChange(event: RadioChangeEvent) {
     this.setState({
       saveType: (event.target as HTMLInputElement).value as SaveType,
     });

superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx

@@ -19,9 +19,9 @@
 
 import React, { FC } from 'react';
 import { t, styled } from '@superset-ui/core';
+import { Radio } from 'src/common/components/Radio';
 import {
   Form,
-  Radio,
   Typography,
   Space,
   FormInstance,

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Col, Radio, Well } from 'react-bootstrap';
+import { Alert, Col, Well } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
 import Badge from 'src/common/components/Badge';
 import shortid from 'shortid';
 import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core';

superset-frontend/src/explore/components/SaveModal.tsx

@@ -18,9 +18,10 @@
  */
 /* eslint camelcase: 0 */
 import React from 'react';
-import { Alert, FormControl, FormGroup, Radio } from 'react-bootstrap';
+import { Alert, FormControl, FormGroup } from 'react-bootstrap';
 import { JsonObject, t, styled } from '@superset-ui/core';
 import ReactMarkdown from 'react-markdown';
+import { Radio } from 'src/common/components/Radio';
 import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 import FormLabel from 'src/components/FormLabel';
@@ -216,7 +217,6 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
           <FormGroup data-test="radio-group">
             <Radio
               id="overwrite-radio"
-              inline
               disabled={!(this.props.can_overwrite && this.props.slice)}
               checked={this.state.action === 'overwrite'}
               onChange={() => this.changeAction('overwrite')}
@@ -227,7 +227,6 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
             <Radio
               id="saveas-radio"
               data-test="saveas-radio"
-              inline
               checked={this.state.action === 'saveas'}
               onChange={() => this.changeAction('saveas')}
             >

superset-frontend/src/explore/components/controls/DateFilterControl.jsx

@@ -18,10 +18,11 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, FormGroup, InputGroup, Radio } from 'react-bootstrap';
+import { FormControl, FormGroup, InputGroup } from 'react-bootstrap';
 import { Tooltip } from 'src/common/components/Tooltip';
 import Popover from 'src/common/components/Popover';
 import { Select, Input } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
 import Button from 'src/components/Button';
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';

superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { t } from '@superset-ui/core';
-import { Radio } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
 import { CALENDAR_RANGE_OPTIONS, CALENDAR_RANGE_SET } from '../constants';
 import {
   CalendarRangeType,

superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { t } from '@superset-ui/core';
-import { Radio } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
 import { COMMON_RANGE_OPTIONS, COMMON_RANGE_SET } from '../constants';
 import { CommonRangeType, FrameComponentProps } from '../types';
 

superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx

@@ -20,13 +20,8 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import { Moment } from 'moment';
 import { isInteger } from 'lodash';
-import {
-  Col,
-  DatePicker,
-  InputNumber,
-  Radio,
-  Row,
-} from 'src/common/components';
+import { Col, DatePicker, InputNumber, Row } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
 import { Select } from 'src/components/Select';
 import {
   SINCE_GRAIN_OPTIONS,