Make validation error class customizable

eclipsesource · Jan 20, 2021 · e308a00 · e308a00
1 parent 7046332
commit e308a00
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 4 deletions.
diff --git a/packages/vanilla/Styles.md b/packages/vanilla/Styles.md
@@ -24,6 +24,7 @@
 - array.table.label &rightarrow; id for the label in the header
 - array.table.button &rightarrow; id for the add button
 - array.table.validation &rightarrow; id for the validation field
+- array.table.validation.error &rightarrow; id for the validation error field
 - array.validation.error &rightarrow; id for the validation column if activated
 ### GroupRenderer
 #### Hardcoded ClassNames
@@ -50,6 +51,8 @@
 #### Ids
 - control &rightarrow; id for the whole control
 - control.label &rightarrow; id for the label of control
+- control.validation &rightarrow; id for the validation of control
+- control.validation.error &rightarrow; id for the validation error of control
 - input.description &rightarrow; id for the description of control
 
 ## Example of styling id contributions

diff --git a/packages/vanilla/src/complex/TableArrayControl.tsx b/packages/vanilla/src/complex/TableArrayControl.tsx
@@ -98,7 +98,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
     const labelObject = createLabelDescriptionFrom(controlElement, schema);
     const isValid = errors.length === 0;
     const divClassNames = [validationClass]
-      .concat(isValid ? '' : ' validation_error')
+      .concat(isValid ? '' : getStyleAsClassName('array.table.validation.error'))
       .join(' ');
     const labelText = isPlainLabel(label) ? label : label.default;
 

diff --git a/packages/vanilla/src/controls/InputControl.tsx b/packages/vanilla/src/controls/InputControl.tsx
@@ -67,7 +67,7 @@ export class InputControl extends Control<
     const isValid = errors.length === 0;
 
     const divClassNames = [classNames.validation]
-      .concat(isValid ? classNames.description : 'validation_error')
+      .concat(isValid ? classNames.description : classNames.validationError)
       .join(' ');
 
     const appliedUiSchemaOptions = merge({}, config, uischema.options);

diff --git a/packages/vanilla/src/styles/styles.ts b/packages/vanilla/src/styles/styles.ts
@@ -53,6 +53,10 @@ export const vanillaStyles: StyleDef[] = [
     name: 'control.select',
     classNames: ['select']
   },
+  {
+    name: 'control.validation.error',
+    classNames: ['validation_error']
+  },
   {
     name: 'control.validation',
     classNames: ['validation']
@@ -97,6 +101,10 @@ export const vanillaStyles: StyleDef[] = [
     name: 'vertical.layout',
     classNames: ['vertical-layout']
   },
+  {
+    name: 'array.table.validation.error',
+    classNames: ['validation_error']
+  },
   {
     name: 'array.table.validation',
     classNames: ['validation']

diff --git a/packages/vanilla/src/util/index.tsx b/packages/vanilla/src/util/index.tsx
@@ -72,6 +72,7 @@ export const addVanillaControlProps = <P extends StatePropsOfControl>(
     const labelClass = getStyleAsClassName(state)('control.label');
     const descriptionClassName = getStyleAsClassName(state)('input.description');
     const validationClassName = getStyleAsClassName(state)('control.validation');
+    const validationErrorClassName = getStyleAsClassName(state)('control.validation.error');
     const inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
 
     return {
@@ -83,7 +84,8 @@ export const addVanillaControlProps = <P extends StatePropsOfControl>(
         input: inputClassName.join(' '),
         label: labelClass,
         description: descriptionClassName,
-        validation: validationClassName
+        validation: validationClassName,
+        validationError: validationErrorClassName
       }
     };
   };
@@ -106,6 +108,7 @@ export const withVanillaControlProps = (Component: ComponentType<any>) => (props
   const labelClass = findStyleAsClassName(contextStyles)('control.label');
   const descriptionClassName = findStyleAsClassName(contextStyles)('input.description');
   const validationClassName = findStyleAsClassName(contextStyles)('control.validation');
+  const validationErrorClassName = findStyleAsClassName(contextStyles)('control.validation.error');
   const inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
   return (
     <Component
@@ -117,7 +120,8 @@ export const withVanillaControlProps = (Component: ComponentType<any>) => (props
         input: inputClassName.join(' '),
         label: labelClass,
         description: descriptionClassName,
-        validation: validationClassName
+        validation: validationClassName,
+        validationError: validationErrorClassName
       }}
     />
   );