style: improve the "Create New Chart" screen's usability (#11383)

* style: make disabled buttons more readable

* making more of a CTA for VizControl
This commit is contained in:
Maxime Beauchemin 2020-10-22 10:16:58 -07:00 committed by GitHub
parent 5a3d23dc01
commit 64b5aae6bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 5 deletions

View File

@ -103,7 +103,7 @@ export default class AddSliceContainer extends React.PureComponent<
name="select-datasource"
onChange={this.changeDatasource}
options={this.props.datasources}
placeholder={t('Choose a datasource')}
placeholder={t('Choose a dataset')}
value={
this.state.datasourceValue
? {
@ -134,6 +134,7 @@ export default class AddSliceContainer extends React.PureComponent<
name="select-vis-type"
onChange={this.changeVisType}
value={this.state.visType}
labelBsStyle="primary"
/>
</div>
<br />

View File

@ -221,7 +221,7 @@ const SupersetButton = styled(BootstrapButton)`
&[disabled],
&[disabled]:hover {
background-color: ${({ theme }) => theme.colors.grayscale.light2};
color: ${({ theme }) => theme.colors.grayscale.light1};
color: ${({ theme }) => theme.colors.grayscale.base};
}
}

View File

@ -38,16 +38,17 @@ const propTypes = {
name: PropTypes.string.isRequired,
onChange: PropTypes.func,
value: PropTypes.string.isRequired,
labelBsStyle: PropTypes.string,
};
const defaultProps = {
onChange: () => {},
labelBsStyle: 'default',
};
const registry = getChartMetadataRegistry();
const IMAGE_PER_ROW = 6;
const LABEL_STYLE = { cursor: 'pointer' };
const DEFAULT_ORDER = [
'line',
'big_number',
@ -160,7 +161,7 @@ export default class VizTypeControl extends React.PureComponent {
render() {
const { filter, showModal } = this.state;
const { value } = this.props;
const { value, labelBsStyle } = this.props;
const filterString = filter.toLowerCase();
const filteredTypes = DEFAULT_ORDER.filter(type => registry.has(type))
@ -198,7 +199,7 @@ export default class VizTypeControl extends React.PureComponent {
}
>
<>
<Label onClick={this.toggleModal} style={LABEL_STYLE}>
<Label onClick={this.toggleModal} bsStyle={labelBsStyle}>
{registry.has(value) ? registry.get(value).name : `${value}`}
</Label>
{!registry.has(value) && (