feat: colorbox error displayed once #30 (#53)

Author: mikbry

src/components/ColorBox/index.jsx

@@ -79,10 +79,17 @@ const StyledBox = styled.div`
   }
   & .muicc-colorbox-controls {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: row;
     flex-wrap: wrap;
     padding: 8px;
   }
+  & .muicc-colorbox-error {
+    color: #f44336;
+    line-height: 36.5px;
+  }
+  & .muicc-colorbox-controls > button {
+    margin-left: auto;
+  }
 `;
 
 const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange, disableAlpha, ...props }) => {
@@ -139,6 +146,7 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
             value={color}
             format={input}
             disableAlpha
+            enableErrorDisplay={false}
             className="muicc-colorbox-input"
             onChange={handleInputChange}
           />
@@ -190,11 +198,14 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
             />
           </>
         )}
-        {deferred && (
-          <div className="muicc-colorbox-controls">
-            <Button onClick={handleSet}>{t('Set')}</Button>
-          </div>
-        )}
+        <div className="muicc-colorbox-controls">
+          {color.error && (
+            <span className="muicc-colorbox-error" data-testid="colorbox-error">
+              {t(color.error)}
+            </span>
+          )}
+          {deferred && <Button onClick={handleSet}>{t('Set')}</Button>}
+        </div>
       </StyledBox>
     </Box>
   );

src/components/ColorInput.jsx

@@ -35,7 +35,7 @@ const StyledRoot = styled.div`
   }
 `;
 
-const ColorInput = ({ value, format, onChange, disableAlpha, forwardRef, ...props }) => {
+const ColorInput = ({ value, format, onChange, disableAlpha, enableErrorDisplay, forwardRef, ...props }) => {
   const { t, i18n } = useTranslate();
   const color = ColorTool.validateColor(value, disableAlpha, t, i18n.language);
   let field;
@@ -102,7 +102,7 @@ const ColorInput = ({ value, format, onChange, disableAlpha, forwardRef, ...prop
   return (
     <StyledFormControl error={!!color.error} data-testid="colorinput">
       {field}
-      {color.error && <FormHelperText id="component-error-text">{color.error}</FormHelperText>}
+      {enableErrorDisplay && color.error && <FormHelperText id="component-error-text">{color.error}</FormHelperText>}
     </StyledFormControl>
   );
 };
@@ -118,6 +118,7 @@ ColorInput.propTypes = {
   /**
     Internal usage
    */
+  enableErrorDisplay: PropTypes.bool,
   forwardRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 };
 
@@ -126,6 +127,7 @@ ColorInput.defaultProps = {
   format: 'plain',
   forwardRef: undefined,
   disableAlpha: false,
+  enableErrorDisplay: true,
 };
 
 export default uncontrolled(ColorInput);

test/ColorBox.test.js

@@ -9,6 +9,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import ColorBox from '../src/components/ColorBox';
+import * as ColorTool from '../src/helpers/colorTool';
 
 const palette = {
   red: '#ff0000',
@@ -114,6 +115,13 @@ test('ColorBox palette onChange', () => {
   expect(value.raw).toBe('#ff0000');
 });
 
+test('ColorBox error display', () => {
+  const color = ColorTool.validateColor('#ffx');
+  const { getByTestId } = render(<ColorBox value={color} />);
+  const span = getByTestId('colorbox-error');
+  expect(span.textContent).toBe('Not an hex value');
+});
+
 test('ColorBox deferred', () => {
   let value;
   const onChange = jest.fn().mockImplementation(newValue => {