diff --git a/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx index 7f279f0c1..ab776da70 100644 --- a/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx @@ -18,10 +18,9 @@ */ /* eslint-disable no-unused-expressions */ import React from 'react'; -import { mount } from 'enzyme'; import { Select } from 'src/components/Select'; import { getCategoricalSchemeRegistry } from '@superset-ui/core'; - +import { styledMount as mount } from 'spec/helpers/theming'; import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeControl'; const defaultProps = { diff --git a/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx b/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx index 5ee68e79a..66597fc69 100644 --- a/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx @@ -17,8 +17,8 @@ * under the License. */ import React from 'react'; -import { shallow, mount } from 'enzyme'; - +import { shallow } from 'enzyme'; +import { styledMount as mount } from 'spec/helpers/theming'; import FilterBox from 'src/visualizations/FilterBox/FilterBox'; import SelectControl from 'src/explore/components/controls/SelectControl'; diff --git a/superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx index c995787fc..bfb16aab2 100644 --- a/superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx @@ -19,10 +19,11 @@ /* eslint-disable no-unused-expressions */ import React from 'react'; import sinon from 'sinon'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; import { Select, CreatableSelect } from 'src/components/Select'; import OnPasteSelect from 'src/components/Select/OnPasteSelect'; import SelectControl from 'src/explore/components/controls/SelectControl'; +import { styledMount as mount } from 'spec/helpers/theming'; const defaultProps = { choices: [ diff --git a/superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx b/superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx index 73805c74a..44a03330c 100644 --- a/superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx +++ b/superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx @@ -17,7 +17,8 @@ * under the License. */ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; +import { ReactWrapper } from 'enzyme'; +import { styledMount as mount } from 'spec/helpers/theming'; import { act } from 'react-dom/test-utils'; import MetricsControl from 'src/explore/components/controls/MetricsControl'; diff --git a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx index ee8ee950f..a06ba569c 100644 --- a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx +++ b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx @@ -40,6 +40,7 @@ import { } from 'react-sortable-hoc'; import arrayMove from 'array-move'; import { Props as SelectProps } from 'react-select/src/Select'; +import { useTheme } from '@superset-ui/core'; import { WindowedSelectComponentType, WindowedSelectProps, @@ -52,13 +53,13 @@ import { DEFAULT_CLASS_NAME, DEFAULT_CLASS_NAME_PREFIX, DEFAULT_STYLES, - DEFAULT_THEME, DEFAULT_COMPONENTS, VALUE_LABELED_STYLES, PartialThemeConfig, PartialStylesConfig, SelectComponentsType, InputProps, + defaultTheme, } from './styles'; import { findValue } from './utils'; @@ -176,7 +177,6 @@ function styled< } return optionRenderer ? optionRenderer(option) : getOptionLabel(option); }, - ...restProps } = selectProps; @@ -256,6 +256,9 @@ function styled< selectRef.current = stateManager; } }; + + const theme = useTheme(); + return ( merge(defaultTheme, DEFAULT_THEME, themeConfig)} + theme={reactSelectTheme => + merge(reactSelectTheme, defaultTheme(theme), themeConfig) + } formatOptionLabel={formatOptionLabel} getOptionLabel={getOptionLabel} getOptionValue={getOptionValue} diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx index eb1fcee91..1f7ad315b 100644 --- a/superset-frontend/src/components/Select/styles.tsx +++ b/superset-frontend/src/components/Select/styles.tsx @@ -18,7 +18,7 @@ */ import React, { CSSProperties, ComponentType, ReactNode } from 'react'; import { css, SerializedStyles, ClassNames } from '@emotion/core'; -import { supersetTheme } from '@superset-ui/core'; +import { SupersetTheme } from '@superset-ui/core'; import { Styles, Theme, @@ -27,8 +27,7 @@ import { InputProps as ReactSelectInputProps, } from 'react-select'; import { Props as SelectProps } from 'react-select/src/Select'; -import { colors as reactSelectColros } from 'react-select/src/theme'; -import { supersetColors } from 'src/components/styles'; +import { colors as reactSelectColors } from 'react-select/src/theme'; import { DeepNonNullable } from 'react-select/src/components'; import { OptionType } from 'antd/lib/select'; import { SupersetStyledSelectProps } from './SupersetStyledSelect'; @@ -40,6 +39,30 @@ type RecursivePartial = { [P in keyof T]?: RecursivePartial; }; +const colors = (theme: SupersetTheme) => ({ + primary: theme.colors.success.base, + danger: theme.colors.error.base, + warning: theme.colors.warning.base, + indicator: theme.colors.info.base, + almostBlack: theme.colors.grayscale.dark1, + grayDark: theme.colors.grayscale.dark1, + grayLight: theme.colors.grayscale.light2, + gray: theme.colors.grayscale.light1, + grayBg: theme.colors.grayscale.light4, + grayBgDarker: theme.colors.grayscale.light3, + grayBgDarkest: theme.colors.grayscale.light2, + grayHeading: theme.colors.grayscale.light1, + menuHover: theme.colors.grayscale.light3, + lightest: theme.colors.grayscale.light5, + darkest: theme.colors.grayscale.dark2, + grayBorder: theme.colors.grayscale.light2, + grayBorderLight: theme.colors.grayscale.light3, + grayBorderDark: theme.colors.grayscale.light1, + textDefault: theme.colors.grayscale.dark1, + textDarkest: theme.colors.grayscale.dark2, + dangerLight: theme.colors.error.light1, +}); + export type ThemeConfig = { borderRadius: number; // z-index for menu dropdown @@ -47,10 +70,10 @@ export type ThemeConfig = { zIndex: number; colors: { // add known colors - [key in keyof typeof reactSelectColros]: string; + [key in keyof typeof reactSelectColors]: string; } & { - [key in keyof typeof supersetColors]: string; + [key in keyof ReturnType]: string; } & { [key: string]: string; // any other colors }; @@ -66,21 +89,22 @@ export type ThemeConfig = { export type PartialThemeConfig = RecursivePartial; -export const DEFAULT_THEME: PartialThemeConfig = { - borderRadius: supersetTheme.borderRadius, - zIndex: 11, - colors: { - ...supersetColors, - dangerLight: supersetColors.warning, - }, - spacing: { - baseUnit: 3, - menuGutter: 0, - controlHeight: 28, - lineHeight: 19, - fontSize: 14, - minWidth: '7.5em', // just enough to display 'No options' - }, +export const defaultTheme: ( + theme: SupersetTheme, +) => PartialThemeConfig = theme => { + return { + borderRadius: theme.borderRadius, + zIndex: 11, + colors: colors(theme), + spacing: { + baseUnit: 3, + menuGutter: 0, + controlHeight: 28, + lineHeight: 19, + fontSize: 14, + minWidth: '7.5em', // just enough to display 'No options' + }, + }; }; // let styles accept serialized CSS, too diff --git a/superset-frontend/src/components/styles.ts b/superset-frontend/src/components/styles.ts deleted file mode 100644 index c24cff12e..000000000 --- a/superset-frontend/src/components/styles.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * 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. - */ - -// Variables ported from "src/stylesheets/less/variables.less" -// TODO: move to `@superset-ui/style` -// Keep it here to make PRs easier for review. -export const supersetColors = { - primary: '#00a699', - danger: '#fe4a49', - warning: '#ffab00', - indicator: '#44c0ff', - almostBlack: '#263238', - grayDark: '#484848', - grayLight: '#cfd8dc', - gray: '#879399', - grayBg: '#f5f5f5', - grayBgDarker: '#e8e8e8', // select option menu hover - grayBgDarkest: '#d2d2d2', // table cell bar chart - grayHeading: '#a3a3a3', - menuHover: '#f2f3f5', - lightest: '#fff', - darkest: '#000', - - // addition most common colors - grayBorder: '#ccc', - grayBorderLight: '#d9d9d9', - grayBorderDark: '#b3b3b3', - textDefault: '#333', - textDarkest: '#111', -};