fix: Error Icon not showing up on errored input fieds on validation (#…

…15431) * Fixed now-show error icon Signed-off-by: andrewbastian <[email protected]> * Changed `%` to `px` * Fixed lint error * Changed units to `theme.gridUnit`
apache · Jun 29, 2021 · 74ce6e6 · 74ce6e6
1 parent 4b46a17
commit 74ce6e6
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { Input } from 'antd';
 import { styled, css, SupersetTheme } from '@superset-ui/core';
 import InfoTooltip from 'src/components/InfoTooltip';
+import errorIcon from 'images/icons/error.svg';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
 
@@ -49,18 +50,17 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
   ${hasError &&
   `.ant-form-item-control-input-content {
       position: relative;
-
       &:after {
         content: ' ';
         display: inline-block;
         background: ${theme.colors.error.base};
-        mask: url('/images/icons/error.svg');
+        mask: url(${errorIcon});
         mask-size: cover;
         width: ${theme.gridUnit * 4}px;
         height: ${theme.gridUnit * 4}px;
         position: absolute;
-        right: 7px;
-        top: 15px;
+        right: ${theme.gridUnit * 1.25}px;
+        top: ${theme.gridUnit * 2.75}px;
       }
     }`}
 `;