diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx index 031dea9b9f3..e006aaa8d92 100644 --- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx +++ b/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'; diff --git a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx index aaa308fcb12..dcc58edf82b 100644 --- a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx +++ b/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'; diff --git a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx b/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx index 1c3c50cc1cb..ba81b2c1c30 100644 --- a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx +++ b/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'; diff --git a/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx b/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx index 1fe721a122c..97fe25ba908 100644 --- a/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx +++ b/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', () => { diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx index b8ada4160cf..e5c8b68f52e 100644 --- a/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx +++ b/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'; diff --git a/superset-frontend/src/common/components/Radio/Radio.stories.tsx b/superset-frontend/src/common/components/Radio/Radio.stories.tsx new file mode 100644 index 00000000000..2688cd7ca15 --- /dev/null +++ b/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 ( + updateArgs({ checked: !checked })} + {...rest} + > + Example + + ); +}; + +SupersetRadio.args = { + checked: false, + disabled: false, +}; diff --git a/superset-frontend/src/common/components/Radio.tsx b/superset-frontend/src/common/components/Radio/index.tsx similarity index 76% rename from superset-frontend/src/common/components/Radio.tsx rename to superset-frontend/src/common/components/Radio/index.tsx index 3134fb7bab5..a80662adc17 100644 --- a/superset-frontend/src/common/components/Radio.tsx +++ b/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; } } diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx index f46ded72c6f..d850a23759e 100644 --- a/superset-frontend/src/common/components/common.stories.tsx +++ b/superset-frontend/src/common/components/common.stories.tsx @@ -332,6 +332,7 @@ export const CollapseAnimateArrows = () => ( ); + export function StyledCronPicker() { // @ts-ignore const inputRef = useRef(null); diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx index bfbccbe40bc..c10be850b09 100644 --- a/superset-frontend/src/common/components/index.tsx +++ b/superset-frontend/src/common/components/index.tsx @@ -59,7 +59,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'; diff --git a/superset-frontend/src/dashboard/components/SaveModal.tsx b/superset-frontend/src/dashboard/components/SaveModal.tsx index a377edb9feb..0bbc3277675 100644 --- a/superset-frontend/src/dashboard/components/SaveModal.tsx +++ b/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 { })); } - handleSaveTypeChange(event: React.FormEvent) { + handleSaveTypeChange(event: RadioChangeEvent) { this.setState({ saveType: (event.target as HTMLInputElement).value as SaveType, }); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx index bd8eccb75de..75a4382872d 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx +++ b/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, diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx index e1dfe76d589..c0863dca604 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.jsx +++ b/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'; diff --git a/superset-frontend/src/explore/components/SaveModal.tsx b/superset-frontend/src/explore/components/SaveModal.tsx index 767099a6f9e..5d53074ae7c 100644 --- a/superset-frontend/src/explore/components/SaveModal.tsx +++ b/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'; @@ -220,7 +221,6 @@ class SaveModal extends React.Component { this.changeAction('overwrite')} @@ -231,7 +231,6 @@ class SaveModal extends React.Component { this.changeAction('saveas')} > diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx index 5b0f15a5e7e..1b26c6d57cd 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx +++ b/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'; diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx index 0be926de47d..b2c31d27354 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx +++ b/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, diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx index d51b94344a8..e4df91e523e 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx +++ b/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'; diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx index 08045ee1c10..cfc5d4853ef 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx +++ b/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,