mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
chore: Removes hard-coded colors - iteration 3 (#20016)
This commit is contained in:
parent
3a379af1e7
commit
8bb8b7f612
@ -94,20 +94,22 @@ const StyledRow = styled(Row)`
|
||||
`;
|
||||
|
||||
export const StyledButtonComponent = styled(Button)`
|
||||
${({ theme }) => `
|
||||
background: none;
|
||||
text-transform: none;
|
||||
padding: 0px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: ${theme.colors.grayscale.dark2};
|
||||
font-size: 14px;
|
||||
font-weight: ${({ theme }) => theme.typography.weights.normal};
|
||||
font-weight: ${theme.typography.weights.normal};
|
||||
&:disabled {
|
||||
background: none;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: ${theme.colors.grayscale.dark2};
|
||||
&:hover {
|
||||
background: none;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: ${theme.colors.grayscale.dark2};
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledJsonSchema = styled.div`
|
||||
|
@ -96,21 +96,23 @@ const validatorMap =
|
||||
const scheduledQueriesConf = bootstrapData?.common?.conf?.SCHEDULED_QUERIES;
|
||||
|
||||
const LimitSelectStyled = styled.span`
|
||||
${({ theme }) => `
|
||||
.ant-dropdown-trigger {
|
||||
align-items: center;
|
||||
color: black;
|
||||
color: ${theme.colors.grayscale.dark2};
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
margin-right: ${theme.gridUnit * 2}px;
|
||||
text-decoration: none;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
margin-right: ${theme.gridUnit * 2}px;
|
||||
&:last-of-type: {
|
||||
margin-right: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
margin-right: ${theme.gridUnit * 4}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledToolbar = styled.div`
|
||||
|
@ -48,7 +48,7 @@ export interface InfoTooltipProps {
|
||||
const StyledTooltip = styled(Tooltip)`
|
||||
cursor: pointer;
|
||||
path:first-of-type {
|
||||
fill: #999999;
|
||||
fill: ${({ theme }) => theme.colors.grayscale.base};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -87,35 +87,38 @@ const ListViewStyles = styled.div`
|
||||
`;
|
||||
|
||||
const BulkSelectWrapper = styled(Alert)`
|
||||
${({ theme }) => `
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
color: #3d3d3d;
|
||||
background-color: ${({ theme }) => theme.colors.primary.light4};
|
||||
color: ${theme.colors.grayscale.dark1};
|
||||
background-color: ${theme.colors.primary.light4};
|
||||
|
||||
.selectedCopy {
|
||||
display: inline-block;
|
||||
padding: ${({ theme }) => theme.gridUnit * 2}px 0;
|
||||
padding: ${theme.gridUnit * 2}px 0;
|
||||
}
|
||||
|
||||
.deselect-all {
|
||||
color: #1985a0;
|
||||
margin-left: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
color: ${theme.colors.primary.base};
|
||||
margin-left: ${theme.gridUnit * 4}px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: ${({ theme: { gridUnit } }) =>
|
||||
`${-gridUnit * 2}px 0 ${-gridUnit * 2}px ${gridUnit * 4}px`};
|
||||
margin: ${`${-theme.gridUnit * 2}px 0 ${-theme.gridUnit * 2}px ${
|
||||
theme.gridUnit * 4
|
||||
}px`};
|
||||
width: 1px;
|
||||
height: ${({ theme }) => theme.gridUnit * 8}px;
|
||||
box-shadow: inset -1px 0px 0px #dadada;
|
||||
height: ${theme.gridUnit * 8}px;
|
||||
box-shadow: inset -1px 0px 0px ${theme.colors.grayscale.light2};
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ant-alert-close-icon {
|
||||
margin-top: ${({ theme }) => theme.gridUnit * 1.5}px;
|
||||
margin-top: ${theme.gridUnit * 1.5}px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const bulkSelectColumnConfig = {
|
||||
|
@ -30,13 +30,14 @@ const ActionsWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const StyledCard = styled(AntdCard)`
|
||||
border: 1px solid #d9dbe4;
|
||||
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||
${({ theme }) => `
|
||||
border: 1px solid ${theme.colors.grayscale.light2};
|
||||
border-radius: ${theme.gridUnit}px;
|
||||
overflow: hidden;
|
||||
|
||||
.ant-card-body {
|
||||
padding: ${({ theme }) => theme.gridUnit * 4}px
|
||||
${({ theme }) => theme.gridUnit * 2}px;
|
||||
padding: ${theme.gridUnit * 4}px
|
||||
${theme.gridUnit * 2}px;
|
||||
}
|
||||
.ant-card-meta-detail > div:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
@ -46,32 +47,14 @@ const StyledCard = styled(AntdCard)`
|
||||
height: 100%;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 8px 8px 28px 0px rgba(0, 0, 0, 0.24);
|
||||
transition: box-shadow ${({ theme }) => theme.transitionTiming}s ease-in-out;
|
||||
|
||||
.gradient-container:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 47.83%,
|
||||
rgba(0, 0, 0, 0.219135) 79.64%,
|
||||
rgba(0, 0, 0, 0.5) 100%
|
||||
);
|
||||
|
||||
transition: background ${({ theme }) => theme.transitionTiming}s
|
||||
ease-in-out;
|
||||
}
|
||||
box-shadow: 8px 8px 28px 0px ${theme.colors.grayscale.light1};
|
||||
transition: box-shadow ${theme.transitionTiming}s ease-in-out;
|
||||
|
||||
.cover-footer {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const Cover = styled.div`
|
||||
|
@ -16,6 +16,10 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
// Deprecated component
|
||||
/* eslint-disable theme-colors/no-literal-colors */
|
||||
|
||||
import React, { CSSProperties, ComponentType, ReactNode } from 'react';
|
||||
import { SerializedStyles } from '@emotion/react';
|
||||
import { SupersetTheme, css } from '@superset-ui/core';
|
||||
|
@ -35,9 +35,10 @@ interface TableCollectionProps {
|
||||
}
|
||||
|
||||
export const Table = styled.table`
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
${({ theme }) => `
|
||||
background-color: ${theme.colors.grayscale.light5};
|
||||
border-collapse: separate;
|
||||
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||
border-radius: ${theme.borderRadius}px;
|
||||
|
||||
thead > tr > th {
|
||||
border: 0;
|
||||
@ -49,12 +50,12 @@ export const Table = styled.table`
|
||||
}
|
||||
}
|
||||
th {
|
||||
background: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
background: ${theme.colors.grayscale.light5};
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
padding-left: ${theme.gridUnit * 4}px;
|
||||
}
|
||||
|
||||
&.xs {
|
||||
@ -114,7 +115,7 @@ export const Table = styled.table`
|
||||
position: relative;
|
||||
|
||||
.loading-bar {
|
||||
background-color: ${({ theme }) => theme.colors.secondary.light4};
|
||||
background-color: ${theme.colors.secondary.light4};
|
||||
border-radius: 7px;
|
||||
|
||||
span {
|
||||
@ -127,27 +128,6 @@ export const Table = styled.table`
|
||||
width: 100%;
|
||||
height: 1.2em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
left: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background-image: linear-gradient(
|
||||
100deg,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 0.5) 60%,
|
||||
rgba(255, 255, 255, 0) 80%
|
||||
);
|
||||
background-size: 200px 48px;
|
||||
background-position: -100px 0;
|
||||
background-repeat: no-repeat;
|
||||
animation: loading-shimmer 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@ -160,7 +140,7 @@ export const Table = styled.table`
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: ${({ theme }) => theme.colors.primary.base};
|
||||
fill: ${theme.colors.primary.base};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -169,24 +149,24 @@ export const Table = styled.table`
|
||||
.table-row {
|
||||
.actions {
|
||||
opacity: 0;
|
||||
font-size: ${({ theme }) => theme.typography.sizes.xl}px;
|
||||
font-size: ${theme.typography.sizes.xl}px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => theme.colors.secondary.light5};
|
||||
background-color: ${theme.colors.secondary.light5};
|
||||
|
||||
.actions {
|
||||
opacity: 1;
|
||||
transition: opacity ease-in ${({ theme }) => theme.transitionTiming}s;
|
||||
transition: opacity ease-in ${theme.transitionTiming}s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-selected {
|
||||
background-color: ${({ theme }) => theme.colors.secondary.light4};
|
||||
background-color: ${theme.colors.secondary.light4};
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => theme.colors.secondary.light4};
|
||||
background-color: ${theme.colors.secondary.light4};
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,7 +177,7 @@ export const Table = styled.table`
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
&:first-of-type {
|
||||
padding-left: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
padding-left: ${theme.gridUnit * 4}px;
|
||||
}
|
||||
&__wrap {
|
||||
white-space: normal;
|
||||
@ -216,6 +196,7 @@ export const Table = styled.table`
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
Table.displayName = 'table';
|
||||
|
@ -96,8 +96,9 @@ const Tabs = Object.assign(StyledTabs, {
|
||||
});
|
||||
|
||||
const StyledEditableTabs = styled(StyledTabs)`
|
||||
${({ theme, fullWidth }) => `
|
||||
.ant-tabs-content-holder {
|
||||
background: white;
|
||||
background: ${theme.colors.grayscale.light5};
|
||||
}
|
||||
|
||||
& > .ant-tabs-nav {
|
||||
@ -107,15 +108,17 @@ const StyledEditableTabs = styled(StyledTabs)`
|
||||
.ant-tabs-tab-remove {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: ${({ theme }) => theme.gridUnit * 6}px;
|
||||
height: ${theme.gridUnit * 6}px;
|
||||
}
|
||||
|
||||
${({ fullWidth }) =>
|
||||
${
|
||||
fullWidth &&
|
||||
css`
|
||||
.ant-tabs-nav-list {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
|
@ -50,21 +50,22 @@ const propTypes = {
|
||||
};
|
||||
|
||||
const ActionsContainer = styled.div`
|
||||
height: ${({ theme }) => theme.gridUnit * 16}px;
|
||||
${({ theme }) => `
|
||||
height: ${theme.gridUnit * 16}px;
|
||||
|
||||
// TODO: replace hardcoded color with theme variable after refactoring filter-scope-selector.less to Emotion
|
||||
border-top: ${({ theme }) => theme.gridUnit / 4}px solid #cfd8dc;
|
||||
padding: ${({ theme }) => theme.gridUnit * 6}px;
|
||||
margin: 0 0 0 ${({ theme }) => -theme.gridUnit * 6}px;
|
||||
border-top: ${theme.gridUnit / 4}px solid ${theme.colors.primary.light3};
|
||||
padding: ${theme.gridUnit * 6}px;
|
||||
margin: 0 0 0 ${-theme.gridUnit * 6}px;
|
||||
text-align: right;
|
||||
|
||||
.btn {
|
||||
margin-right: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
margin-right: ${theme.gridUnit * 4}px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export default class FilterScopeSelector extends React.PureComponent {
|
||||
|
@ -236,7 +236,7 @@ const StyledTabs = styled(Tabs)`
|
||||
.ant-tabs-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
background: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
@ -27,6 +27,7 @@ import {
|
||||
getChartMetadataRegistry,
|
||||
validateNonEmpty,
|
||||
isValidExpression,
|
||||
withTheme,
|
||||
} from '@superset-ui/core';
|
||||
|
||||
import SelectControl from 'src/explore/components/controls/SelectControl';
|
||||
@ -97,7 +98,7 @@ const defaultProps = {
|
||||
close: () => {},
|
||||
};
|
||||
|
||||
export default class AnnotationLayer extends React.PureComponent {
|
||||
class AnnotationLayer extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const {
|
||||
@ -710,7 +711,9 @@ export default class AnnotationLayer extends React.PureComponent {
|
||||
return (
|
||||
<>
|
||||
{this.props.error && (
|
||||
<span style={{ color: 'red' }}>ERROR: {this.props.error}</span>
|
||||
<span style={{ color: this.props.theme.colors.error.base }}>
|
||||
ERROR: {this.props.error}
|
||||
</span>
|
||||
)}
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<div style={{ marginRight: '2rem' }}>
|
||||
@ -807,3 +810,5 @@ export default class AnnotationLayer extends React.PureComponent {
|
||||
|
||||
AnnotationLayer.propTypes = propTypes;
|
||||
AnnotationLayer.defaultProps = defaultProps;
|
||||
|
||||
export default withTheme(AnnotationLayer);
|
||||
|
@ -141,10 +141,14 @@ class AnnotationLayerControl extends React.PureComponent {
|
||||
}
|
||||
|
||||
renderInfo(anno) {
|
||||
const { annotationError, annotationQuery } = this.props;
|
||||
const { annotationError, annotationQuery, theme } = this.props;
|
||||
if (annotationQuery[anno.name]) {
|
||||
return (
|
||||
<i className="fa fa-refresh" style={{ color: 'orange' }} aria-hidden />
|
||||
<i
|
||||
className="fa fa-refresh"
|
||||
style={{ color: theme.colors.primary.base }}
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (annotationError[anno.name]) {
|
||||
@ -157,7 +161,7 @@ class AnnotationLayerControl extends React.PureComponent {
|
||||
);
|
||||
}
|
||||
if (!anno.show) {
|
||||
return <span style={{ color: 'red' }}> Hidden </span>;
|
||||
return <span style={{ color: theme.colors.error.base }}> Hidden </span>;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
@ -19,7 +19,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { SketchPicker } from 'react-color';
|
||||
import { getCategoricalSchemeRegistry } from '@superset-ui/core';
|
||||
import { getCategoricalSchemeRegistry, styled } from '@superset-ui/core';
|
||||
import Popover from 'src/components/Popover';
|
||||
import ControlHeader from '../ControlHeader';
|
||||
|
||||
@ -42,18 +42,19 @@ const swatchCommon = {
|
||||
bottom: '0px',
|
||||
};
|
||||
|
||||
const StyledSwatch = styled.div`
|
||||
${({ theme }) => `
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
padding: ${theme.gridUnit}px;
|
||||
borderRadius: ${theme.borderRadius}px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
`}
|
||||
`;
|
||||
|
||||
const styles = {
|
||||
swatch: {
|
||||
width: '50px',
|
||||
height: '20px',
|
||||
position: 'relative',
|
||||
padding: '5px',
|
||||
borderRadius: '1px',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
boxShadow:
|
||||
'rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset',
|
||||
},
|
||||
color: {
|
||||
...swatchCommon,
|
||||
borderRadius: '2px',
|
||||
@ -103,10 +104,10 @@ export default class ColorPickerControl extends React.Component {
|
||||
placement="right"
|
||||
content={this.renderPopover()}
|
||||
>
|
||||
<div style={styles.swatch}>
|
||||
<StyledSwatch>
|
||||
<div style={styles.checkboard} />
|
||||
<div style={colStyle} />
|
||||
</div>
|
||||
</StyledSwatch>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
|
@ -17,7 +17,7 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { styled, t } from '@superset-ui/core';
|
||||
import { styled, SupersetTheme, t, useTheme } from '@superset-ui/core';
|
||||
import { Form, FormItem, FormProps } from 'src/components/Form';
|
||||
import Select from 'src/components/Select/Select';
|
||||
import { Col, Row } from 'src/components';
|
||||
@ -38,10 +38,10 @@ const JustifyEnd = styled.div`
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const colorSchemeOptions = [
|
||||
{ value: 'rgb(0,255,0)', label: t('green') },
|
||||
{ value: 'rgb(255,255,0)', label: t('yellow') },
|
||||
{ value: 'rgb(255,0,0)', label: t('red') },
|
||||
const colorSchemeOptions = (theme: SupersetTheme) => [
|
||||
{ value: theme.colors.success.light1, label: t('green') },
|
||||
{ value: theme.colors.alert.light1, label: t('yellow') },
|
||||
{ value: theme.colors.error.light1, label: t('red') },
|
||||
];
|
||||
|
||||
const operatorOptions = [
|
||||
@ -187,7 +187,10 @@ export const FormattingPopoverContent = ({
|
||||
config?: ConditionalFormattingConfig;
|
||||
onChange: (config: ConditionalFormattingConfig) => void;
|
||||
columns: { label: string; value: string }[];
|
||||
}) => (
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const colorScheme = colorSchemeOptions(theme);
|
||||
return (
|
||||
<Form
|
||||
onFinish={onChange}
|
||||
initialValues={config}
|
||||
@ -210,9 +213,9 @@ export const FormattingPopoverContent = ({
|
||||
name="colorScheme"
|
||||
label={t('Color scheme')}
|
||||
rules={rulesRequired}
|
||||
initialValue={colorSchemeOptions[0].value}
|
||||
initialValue={colorScheme[0].value}
|
||||
>
|
||||
<Select ariaLabel={t('Color scheme')} options={colorSchemeOptions} />
|
||||
<Select ariaLabel={t('Color scheme')} options={colorScheme} />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
@ -228,3 +231,4 @@ export const FormattingPopoverContent = ({
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
@ -114,7 +114,7 @@ const ContentStyleWrapper = styled.div`
|
||||
.control-label {
|
||||
font-size: 11px;
|
||||
font-weight: ${theme.typography.weights.medium};
|
||||
color: #b2b2b2;
|
||||
color: ${theme.colors.grayscale.light2};
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
margin: 8px 0;
|
||||
|
@ -19,7 +19,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { TextArea } from 'src/components/Input';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, withTheme } from '@superset-ui/core';
|
||||
|
||||
import Button from 'src/components/Button';
|
||||
import { TextAreaEditor } from 'src/components/AsyncAceEditor';
|
||||
@ -57,7 +57,7 @@ const defaultProps = {
|
||||
readOnly: false,
|
||||
};
|
||||
|
||||
export default class TextAreaControl extends React.Component {
|
||||
class TextAreaControl extends React.Component {
|
||||
onControlChange(event) {
|
||||
const { value } = event.target;
|
||||
this.props.onChange(value);
|
||||
@ -70,7 +70,9 @@ export default class TextAreaControl extends React.Component {
|
||||
renderEditor(inModal = false) {
|
||||
const minLines = inModal ? 40 : this.props.minLines || 12;
|
||||
if (this.props.language) {
|
||||
const style = { border: '1px solid #CCC' };
|
||||
const style = {
|
||||
border: `1px solid ${this.props.theme.colors.grayscale.light1}`,
|
||||
};
|
||||
if (this.props.readOnly) {
|
||||
style.backgroundColor = '#f2f2f2';
|
||||
}
|
||||
@ -137,3 +139,5 @@ export default class TextAreaControl extends React.Component {
|
||||
|
||||
TextAreaControl.propTypes = propTypes;
|
||||
TextAreaControl.defaultProps = defaultProps;
|
||||
|
||||
export default withTheme(TextAreaControl);
|
||||
|
@ -19,7 +19,7 @@
|
||||
/* eslint-disable no-unused-expressions */
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import { TextAreaEditor } from 'src/components/AsyncAceEditor';
|
||||
import { TextArea } from 'src/components/Input';
|
||||
|
||||
@ -34,7 +34,7 @@ const defaultProps = {
|
||||
describe('TextArea', () => {
|
||||
let wrapper;
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<TextAreaControl {...defaultProps} />);
|
||||
wrapper = mount(<TextAreaControl {...defaultProps} />);
|
||||
});
|
||||
|
||||
it('renders a FormControl', () => {
|
||||
@ -50,7 +50,7 @@ describe('TextArea', () => {
|
||||
it('renders a AceEditor when language is specified', () => {
|
||||
const props = { ...defaultProps };
|
||||
props.language = 'markdown';
|
||||
wrapper = shallow(<TextAreaControl {...props} />);
|
||||
wrapper = mount(<TextAreaControl {...props} />);
|
||||
expect(wrapper.find(TextArea)).not.toExist();
|
||||
expect(wrapper.find(TextAreaEditor)).toExist();
|
||||
});
|
||||
@ -58,7 +58,7 @@ describe('TextArea', () => {
|
||||
it('calls onAreaEditorChange when entering in the AceEditor', () => {
|
||||
const props = { ...defaultProps };
|
||||
props.language = 'markdown';
|
||||
wrapper = shallow(<TextAreaControl {...props} />);
|
||||
wrapper = mount(<TextAreaControl {...props} />);
|
||||
wrapper.simulate('change', { target: { value: 'x' } });
|
||||
expect(defaultProps.onChange.calledWith('x')).toBe(true);
|
||||
});
|
||||
|
@ -324,7 +324,7 @@ const SavedQueries = ({
|
||||
language="sql"
|
||||
lineProps={{
|
||||
style: {
|
||||
color: 'black',
|
||||
color: theme.colors.grayscale.dark2,
|
||||
wordBreak: 'break-all',
|
||||
whiteSpace: 'pre-wrap',
|
||||
},
|
||||
|
@ -241,10 +241,10 @@ const TimeTable = ({
|
||||
<span
|
||||
key={column.key}
|
||||
data-value={v}
|
||||
style={
|
||||
css={theme =>
|
||||
color && {
|
||||
boxShadow: `inset 0px -2.5px 0px 0px ${color}`,
|
||||
borderRight: '2px solid #fff',
|
||||
borderRight: `2px solid ${theme.colors.grayscale.light5}`,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user