villebro commented on a change in pull request #15276:
URL: https://github.com/apache/superset/pull/15276#discussion_r655336861
##########
File path: superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
##########
@@ -16,12 +16,62 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { getNumberFormatter, NumberFormats, t } from '@superset-ui/core';
+import {
+ getNumberFormatter,
+ NumberFormats,
+ styled,
+ t,
+} from '@superset-ui/core';
import React, { useEffect, useState } from 'react';
import { Slider } from 'src/common/components';
import { PluginFilterRangeProps } from './types';
import { Styles } from '../common';
import { getRangeExtraFormData } from '../../utils';
+import FormItem from '../../../components/Form/FormItem';
+
+const Error = styled.div`
+ color: ${({ theme }) => theme.colors.error.base};
+`;
+
+const Wrapper = styled.div<{ validateStatus?: string }>`
+ border: 1px solid transparent;
+ &:focus {
+ border: 1px solid
+ ${({ theme, validateStatus }) =>
+ validateStatus ? theme.colors.error.base : theme.colors.primary.base};
+ outline: 0;
+ box-shadow: 0 0 0 5px
Review comment:
IMO looks nicer with less shadow:
```suggestion
box-shadow: 0 0 0 3px
```
##########
File path: superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
##########
@@ -27,8 +27,27 @@ const TimeFilterStyles = styled(Styles)`
overflow-x: auto;
`;
-const ControlContainer = styled.div`
- display: inline-block;
+const ControlContainer = styled.div<{ validateStatus?: string }>`
+ padding: 2px;
+ & > span {
+ border: 2px solid transparent;
+ display: inline-block;
+ border: ${({ theme, validateStatus }) =>
+ validateStatus && `2px solid ${theme.colors.error.base}`};
+ }
+ &:focus {
+ & > span {
+ border: 2px solid
+ ${({ theme, validateStatus }) =>
+ validateStatus ? theme.colors.error.base :
theme.colors.primary.base};
+ outline: 0;
+ box-shadow: 0 0 0 2px
+ ${({ validateStatus }) =>
+ validateStatus
+ ? 'rgba(224, 67, 85, 12%)'
+ : 'rgba(32, 167, 201, 0.2)'};
Review comment:
Not sure if we should introduce this dependency to be able to use theme
colors with alpha channels: https://github.com/Chris-Baker/Emotion-RGBA
##########
File path: superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
##########
@@ -16,12 +16,62 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { getNumberFormatter, NumberFormats, t } from '@superset-ui/core';
+import {
+ getNumberFormatter,
+ NumberFormats,
+ styled,
+ t,
+} from '@superset-ui/core';
import React, { useEffect, useState } from 'react';
import { Slider } from 'src/common/components';
import { PluginFilterRangeProps } from './types';
import { Styles } from '../common';
import { getRangeExtraFormData } from '../../utils';
+import FormItem from '../../../components/Form/FormItem';
+
+const Error = styled.div`
+ color: ${({ theme }) => theme.colors.error.base};
+`;
+
+const Wrapper = styled.div<{ validateStatus?: string }>`
+ border: 1px solid transparent;
+ &:focus {
+ border: 1px solid
+ ${({ theme, validateStatus }) =>
+ validateStatus ? theme.colors.error.base : theme.colors.primary.base};
+ outline: 0;
+ box-shadow: 0 0 0 5px
+ ${({ validateStatus }) =>
+ validateStatus ? 'rgba(224, 67, 85, 12%)' : 'rgba(224, 67, 85, 12%)'};
Review comment:
I assume a typo in copy-pasta
```suggestion
validateStatus ? 'rgba(224, 67, 85, 12%)' : 'rgba(32, 167, 201,
0.2)'};
```
##########
File path: superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
##########
@@ -16,12 +16,62 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { getNumberFormatter, NumberFormats, t } from '@superset-ui/core';
+import {
+ getNumberFormatter,
+ NumberFormats,
+ styled,
+ t,
+} from '@superset-ui/core';
import React, { useEffect, useState } from 'react';
import { Slider } from 'src/common/components';
import { PluginFilterRangeProps } from './types';
import { Styles } from '../common';
import { getRangeExtraFormData } from '../../utils';
+import FormItem from '../../../components/Form/FormItem';
+
+const Error = styled.div`
+ color: ${({ theme }) => theme.colors.error.base};
+`;
+
+const Wrapper = styled.div<{ validateStatus?: string }>`
+ border: 1px solid transparent;
+ &:focus {
+ border: 1px solid
+ ${({ theme, validateStatus }) =>
+ validateStatus ? theme.colors.error.base : theme.colors.primary.base};
+ outline: 0;
+ box-shadow: 0 0 0 5px
+ ${({ validateStatus }) =>
+ validateStatus ? 'rgba(224, 67, 85, 12%)' : 'rgba(224, 67, 85, 12%)'};
+ }
+ & .ant-slider {
+ & .ant-slider-track {
+ background-color: ${({ theme, validateStatus }) =>
+ validateStatus && theme.colors.error.light1};
+ }
+ & .ant-slider-handle {
+ border: ${({ theme, validateStatus }) =>
+ validateStatus && `2px solid ${theme.colors.error.light1}`};
+ &:focus {
+ box-shadow: 0 0 0 5px
+ ${({ validateStatus }) =>
+ validateStatus
+ ? 'rgba(224, 67, 85, 12%)'
+ : 'rgba(32, 167, 201, 0.2)'};
+ }
+ }
+ &:hover {
+ & .ant-slider-track {
+ background-color: ${({ theme, validateStatus }) =>
+ validateStatus && theme.colors.error.base};
+ }
+ & .ant-slider-handle {
+ border: ${({ theme, validateStatus }) =>
+ validateStatus && `2px solid ${theme.colors.error.base}`};
+ }
+ }
+ }
Review comment:
It seems like these validation status color changes weren't being picked
up (I believe the same applies to time filter):
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
