Fix error message validation logic (#1311)

* Fix error message validation logic

* Fix error message logic

* remove redundant prop

Author: oscarcarlstrom

.changeset/clear-rings-think.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": patch
+---
+
+Fixes the logic behind validation states for inputs, where passing `errorMessage=""` would set the field in an invalid state. This doesn't really make sense, and can cause strange validation behaviour when using libraries like Zod. With this change setting `errorMessage` to `"" | null | undefined` is now equivalent: the field is valid, unless combined with the `isInvalid` prop set to `true`.

packages/react/src/checkbox/checkbox-group.tsx

@@ -47,7 +47,7 @@ function CheckboxGroup(props: CheckboxGroupProps) {
 
   // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
   // which will override any built in validation
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <RACCheckboxGroup

packages/react/src/checkbox/checkbox.tsx

@@ -74,7 +74,7 @@ function Checkbox(props: CheckboxProps) {
   const descriptionId = `desc${id}`;
   const errorMessageId = `error${id}`;
 
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <div>

packages/react/src/combobox/combobox.tsx

@@ -71,7 +71,7 @@ function Combobox<T extends object>(props: ComboboxProps<T>) {
 
   // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
   // which will override any built in validation
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <RACCombobox

packages/react/src/numberfield/numberfield.tsx

@@ -91,7 +91,7 @@ function NumberField(props: NumberFieldProps) {
 
   // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
   // which will override any built in validation
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <RACNumberField

packages/react/src/radiogroup/radio-group.stories.tsx

@@ -143,7 +143,6 @@ export const WithErrorMessage: Story = {
 
   args: {
     ...defaultProps,
-    isInvalid: true,
     errorMessage: 'Det valgte alternativet er ikke gyldig',
   },
 };

packages/react/src/radiogroup/radio-group.tsx

@@ -47,7 +47,7 @@ function RadioGroup(props: RadioGroupProps) {
 
   // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
   // which will override any built in validation
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <RACRadioGroup

packages/react/src/select/select.tsx

@@ -56,7 +56,7 @@ function Select<T extends object>(props: SelectProps<T>) {
 
   // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
   // which will override any built in validation
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <RACSelect

packages/react/src/textarea/textarea.tsx

@@ -48,7 +48,7 @@ function TextArea(props: TextAreaProps) {
     ...restProps
   } = props;
 
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <RACTextField

packages/react/src/textfield/textfield.tsx

@@ -81,7 +81,7 @@ function TextField(props: TextFieldProps) {
 
   // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
   // which will override any built in validation
-  const isInvalid = errorMessage != null || _isInvalid;
+  const isInvalid = !!errorMessage || _isInvalid;
 
   return (
     <RACTextField