From 9fe30ab71e01ba427d91fb3cd76f5535148a010f Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 28 Aug 2020 17:34:28 -0700 Subject: [PATCH] style: Pass at propagating (and enhancing) Button component throughout Superset (#10649) * getting rid of weird focus/active outline ring * Buttons... buttons _everywhere_ * linting * Nixing views/CRUD/dataset/Button component * fixing 2 typing errors * fixing more TS errors * prefer src path for include * one more real button, one less CSS class * one more "button" to "Button" * Published Status is now a proper clickable Label * nixing the CRUD button again * touching up stories, with SupersetButton story * SIP-34 button colors * adding polished package to mix colors * updating button colors to match Superset theme * abstracting away from bootstrap-specific props (might pivot libraries soon!) * more abstraction from bsStyle/bsSize props * exchanging styles for a prop * linting * restoring feature flag to stock * using src alias * last diff --git a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx index 9de78089a3..69d0095c69 100644 --- a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx +++ b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx @@ -22,7 +22,7 @@ import { Table } from 'reactable-arc'; import { Alert } from 'react-bootstrap'; import { t } from '@superset-ui/translation'; -import Button from '../../components/Button'; +import Button from 'src/components/Button'; import Loading from '../../components/Loading'; import ModalTrigger from '../../components/ModalTrigger'; @@ -85,8 +85,8 @@ class EstimateQueryCostButton extends React.PureComponent { modalBody={this.renderModalBody()} triggerNode={ + ); q.db = ( - + ); q.started = moment(q.startDttm).format('HH:mm:ss'); q.querylink = (
- +
); q.sql = ( diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx index db154fba43..db40267bf0 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx @@ -17,7 +17,8 @@ * under the License. */ import React, { CSSProperties } from 'react'; -import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap'; +import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap'; +import Button from 'src/components/Button'; import shortid from 'shortid'; import { t } from '@superset-ui/translation'; @@ -166,7 +167,7 @@ export default class ResultSet extends React.PureComponent< )} {this.props.csv && ( } @@ -243,7 +244,7 @@ export default class ResultSet extends React.PureComponent< ] {t('was created')}   ); @@ -67,6 +63,7 @@ const RunQueryActionButton = ({ return ( )} diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx index 976a3be94a..4f3e72c861 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx @@ -398,7 +398,7 @@ class SqlEditor extends React.PureComponent { {this.props.database.allow_ctas && ( )} diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx index 7127cc355b..15f6572fd1 100644 --- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx +++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx @@ -29,8 +29,8 @@ import 'brace/theme/textmate'; import { t } from '@superset-ui/translation'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; +import Button from 'src/components/Button'; import ModalTrigger from '../../components/ModalTrigger'; -import Button from '../../components/Button'; const propTypes = { onChange: PropTypes.func, diff --git a/superset-frontend/src/addSlice/AddSliceContainer.tsx b/superset-frontend/src/addSlice/AddSliceContainer.tsx index fbcd3b386d..436397d875 100644 --- a/superset-frontend/src/addSlice/AddSliceContainer.tsx +++ b/superset-frontend/src/addSlice/AddSliceContainer.tsx @@ -17,7 +17,8 @@ * under the License. */ import React from 'react'; -import { Button, Panel } from 'react-bootstrap'; +import { Panel } from 'react-bootstrap'; +import Button from 'src/components/Button'; import Select from 'src/components/Select'; import { t } from '@superset-ui/translation'; @@ -142,7 +143,7 @@ export default class AddSliceContainer extends React.PureComponent<
- ))} - - ))} + {Object.entries(buttonSizeKnob.options).map(([name, size]) => ( +
+

{name}

+ {Object.values(buttonStyleKnob.options) + .filter(o => o) + .map(style => ( + + ))} +
+ ))} ); export const InteractiveButton = () => ( } /> )} - diff --git a/superset-frontend/src/components/ExpandableList.tsx b/superset-frontend/src/components/ExpandableList.tsx index f827c98afb..20d980ea9d 100644 --- a/superset-frontend/src/components/ExpandableList.tsx +++ b/superset-frontend/src/components/ExpandableList.tsx @@ -39,12 +39,12 @@ export default function ExpandableList({ items, display = 3 }: Props) { const showMoreAction = items.length > display; const lessAction = ( - ); const moreAction = ( - ); diff --git a/superset-frontend/src/components/Label/Label.stories.tsx b/superset-frontend/src/components/Label/Label.stories.tsx index 143e2c8d49..89b36e287c 100644 --- a/superset-frontend/src/components/Label/Label.stories.tsx +++ b/superset-frontend/src/components/Label/Label.stories.tsx @@ -25,7 +25,7 @@ export default { title: 'Label', component: Label, decorators: [withKnobs], - excludeStories: ['bsStyleKnob'], + excludeStories: /.*Knob$/, }; export const bsStyleKnob = { diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index f825753a03..54fdeaec8e 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -311,11 +311,12 @@ function ListView({ ); } diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx index f3a27e95d0..1450001550 100644 --- a/superset-frontend/src/components/Menu/SubMenu.tsx +++ b/superset-frontend/src/components/Menu/SubMenu.tsx @@ -26,12 +26,8 @@ const StyledHeader = styled.header` font-weight: ${({ theme }) => theme.typography.weights.bold}; } .navbar-right { - .supersetButton { - margin: ${({ theme }) => - `${theme.gridUnit * 2}px ${theme.gridUnit * 4}px ${ - theme.gridUnit * 2 - }px 0`}; - } + padding: 8px 0; + margin-right: 0; } .navbar-nav { li { @@ -94,16 +90,18 @@ const SubMenu: React.FunctionComponent = props => {