DRY and RequiredErrorMessage

src/widgets/RequiredErrorMessage.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Error } from './Widget'
+
+export const RequiredErrorMessage = () => {
+  return (
+    <Error data-error='required'>At least one selection must be made</Error>
+  )
+}

src/widgets/StringChoiceWidget.tsx

@@ -23,11 +23,11 @@ import {
   ReservedSpace,
   WidgetActionsWrapper,
   WidgetHeader,
-  WidgetTitle,
-  Error
+  WidgetTitle
 } from './Widget'
 
 import { isDisabled, useBypassRequired } from '../utils'
+import { RequiredErrorMessage } from './RequiredErrorMessage'
 
 export interface StringChoiceWidgetDetails {
   columns: number
@@ -175,7 +175,7 @@ const StringChoiceWidget = ({
       </WidgetHeader>
       <ReservedSpace data-stylizable='widget string-choice reserved-error-space'>
         {!bypassed && required && !selection?.length ? (
-          <Error>At least one selection must be made</Error>
+          <RequiredErrorMessage />
         ) : null}
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>

src/widgets/StringListArrayWidget.tsx

@@ -23,7 +23,6 @@ import {
   WidgetActionsWrapper,
   WidgetHeader,
   WidgetTitle,
-  Error,
   ReservedSpace
 } from './Widget'
 
@@ -34,6 +33,7 @@ import {
   useBypassRequired,
   useWidgetSelection
 } from '../utils'
+import { RequiredErrorMessage } from './RequiredErrorMessage'
 
 declare global {
   interface Set<T> {
@@ -431,7 +431,7 @@ const StringListArrayWidget = ({
       </WidgetHeader>
       <ReservedSpace data-stylizable='widget string-listarray reserved-error-space'>
         {!bypassed && required && !selection[name]?.length ? (
-          <Error>At least one selection must be made</Error>
+          <RequiredErrorMessage />
         ) : null}
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>

src/widgets/StringListWidget.tsx

@@ -19,7 +19,6 @@ import {
   WidgetActionsWrapper,
   WidgetHeader,
   WidgetTitle,
-  Error,
   ReservedSpace
 } from './Widget'
 
@@ -30,6 +29,7 @@ import {
   useBypassRequired,
   useWidgetSelection
 } from '../utils'
+import { RequiredErrorMessage } from './RequiredErrorMessage'
 
 declare global {
   interface Set<T> {
@@ -189,7 +189,7 @@ const StringListWidget = ({
       </WidgetHeader>
       <ReservedSpace>
         {!bypassed && required && !selection[name]?.length ? (
-          <Error>At least one selection must be made</Error>
+          <RequiredErrorMessage />
         ) : null}
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>