Split Message into Error and Description

mui · Aug 2, 2024 · b838979 · b838979
1 parent 578bac7
commit b838979
Show file tree

Hide file tree

Showing 31 changed files with 440 additions and 151 deletions.
diff --git a/docs/data/base/components/field/UnstyledFieldAsync.js b/docs/data/base/components/field/UnstyledFieldAsync.js
@@ -59,22 +59,22 @@ export default function UnstyledFieldAsync() {
         <Field.Validity>
           {(state) => {
             if (loading) {
-              return <FieldMessage>Checking availability...</FieldMessage>;
+              return <FieldDescription>Checking availability...</FieldDescription>;
             }
 
             if (state.value === '') {
-              return <FieldMessage>Enter a name</FieldMessage>;
+              return <FieldDescription>Enter a name</FieldDescription>;
             }
 
             if (!state.validity.customError) {
               return (
-                <FieldMessage data-type="success">
+                <FieldDescription data-type="success">
                   <strong>@{state.value}</strong> is available
-                </FieldMessage>
+                </FieldDescription>
               );
             }
 
-            return <FieldMessage data-type="error" show="customError" />;
+            return <FieldError show="customError" />;
           }}
         </Field.Validity>
       </FieldRoot>
@@ -119,18 +119,23 @@ const FieldControl = styled(Field.Control)`
   }
 `;
 
-const FieldMessage = styled(Field.Message)`
+const FieldDescription = styled(Field.Description)`
   font-size: 90%;
   margin: 0;
   margin-top: 4px;
   line-height: 1.1;
   color: #666;
 
-  &[data-type='error'] {
-    color: red;
-  }
-
   &[data-type='success'] {
     color: green;
   }
 `;
+
+const FieldError = styled(Field.Error)`
+  display: block;
+  font-size: 90%;
+  margin: 0;
+  margin-top: 4px;
+  line-height: 1.1;
+  color: red;
+`;
diff --git a/docs/data/base/components/field/UnstyledFieldAsync.tsx b/docs/data/base/components/field/UnstyledFieldAsync.tsx
@@ -59,22 +59,22 @@ export default function UnstyledFieldAsync() {
         <Field.Validity>
           {(state) => {
             if (loading) {
-              return <FieldMessage>Checking availability...</FieldMessage>;
+              return <FieldDescription>Checking availability...</FieldDescription>;
             }
 
             if (state.value === '') {
-              return <FieldMessage>Enter a name</FieldMessage>;
+              return <FieldDescription>Enter a name</FieldDescription>;
             }
 
             if (!state.validity.customError) {
               return (
-                <FieldMessage data-type="success">
+                <FieldDescription data-type="success">
                   <strong>@{state.value as string}</strong> is available
-                </FieldMessage>
+                </FieldDescription>
               );
             }
 
-            return <FieldMessage data-type="error" show="customError" />;
+            return <FieldError show="customError" />;
           }}
         </Field.Validity>
       </FieldRoot>
@@ -119,18 +119,23 @@ const FieldControl = styled(Field.Control)`
   }
 `;
 
-const FieldMessage = styled(Field.Message)`
+const FieldDescription = styled(Field.Description)`
   font-size: 90%;
   margin: 0;
   margin-top: 4px;
   line-height: 1.1;
   color: #666;
 
-  &[data-type='error'] {
-    color: red;
-  }
-
   &[data-type='success'] {
     color: green;
   }
 `;
+
+const FieldError = styled(Field.Error)`
+  display: block;
+  font-size: 90%;
+  margin: 0;
+  margin-top: 4px;
+  line-height: 1.1;
+  color: red;
+`;
diff --git a/docs/data/base/components/field/UnstyledFieldIntroduction/system/index.js b/docs/data/base/components/field/UnstyledFieldIntroduction/system/index.js
@@ -20,15 +20,16 @@ export default function UnstyledFieldIntroduction() {
           }
 
           return (
-            <FieldMessage>Your name will be visible on your profile.</FieldMessage>
+            <FieldDescription>
+              Your name will be visible on your profile.
+            </FieldDescription>
           );
         }}
       </Field.Validity>
-      <FieldMessage data-error show="valueMissing" />
-      <FieldMessage data-error show="customError" />
-      <FieldMessage data-error show="patternMismatch">
+      <FieldError show="valueMissing" />
+      <FieldError show="patternMismatch">
         Only alphanumeric characters are allowed (a-z, A-Z, 0-9).
-      </FieldMessage>
+      </FieldError>
     </FieldRoot>
   );
 }
@@ -50,9 +51,9 @@ const FieldControl = styled(Field.Control)`
   }
 `;
 
-const FieldMessage = styled(Field.Message)`
+const FieldDescription = styled(Field.Description)`
   font-size: 90%;
-  margin: 0;
+  margin-bottom: 0;
   margin-top: 4px;
   line-height: 1.1;
   color: #666;
@@ -61,3 +62,13 @@ const FieldMessage = styled(Field.Message)`
     color: red;
   }
 `;
+
+const FieldError = styled(Field.Error)`
+  display: block;
+  font-size: 90%;
+  margin: 0;
+  margin-bottom: 0;
+  margin-top: 4px;
+  line-height: 1.1;
+  color: red;
+`;
diff --git a/docs/data/base/components/field/UnstyledFieldIntroduction/system/index.tsx b/docs/data/base/components/field/UnstyledFieldIntroduction/system/index.tsx
@@ -20,15 +20,16 @@ export default function UnstyledFieldIntroduction() {
           }
 
           return (
-            <FieldMessage>Your name will be visible on your profile.</FieldMessage>
+            <FieldDescription>
+              Your name will be visible on your profile.
+            </FieldDescription>
           );
         }}
       </Field.Validity>
-      <FieldMessage data-error show="valueMissing" />
-      <FieldMessage data-error show="customError" />
-      <FieldMessage data-error show="patternMismatch">
+      <FieldError show="valueMissing" />
+      <FieldError show="patternMismatch">
         Only alphanumeric characters are allowed (a-z, A-Z, 0-9).
-      </FieldMessage>
+      </FieldError>
     </FieldRoot>
   );
 }
@@ -50,9 +51,9 @@ const FieldControl = styled(Field.Control)`
   }
 `;
 
-const FieldMessage = styled(Field.Message)`
+const FieldDescription = styled(Field.Description)`
   font-size: 90%;
-  margin: 0;
+  margin-bottom: 0;
   margin-top: 4px;
   line-height: 1.1;
   color: #666;
@@ -61,3 +62,13 @@ const FieldMessage = styled(Field.Message)`
     color: red;
   }
 `;
+
+const FieldError = styled(Field.Error)`
+  display: block;
+  font-size: 90%;
+  margin: 0;
+  margin-bottom: 0;
+  margin-top: 4px;
+  line-height: 1.1;
+  color: red;
+`;
diff --git a/docs/data/base/components/field/UnstyledFieldPassword.js b/docs/data/base/components/field/UnstyledFieldPassword.js
@@ -24,28 +24,18 @@ function validate(value) {
 export default function UnstyledFieldPassword() {
   function handleValidate(value) {
     const password = value;
-    const errors = validate(password);
-    return errors.length ? 'error' : null;
+    return validate(password);
   }
 
   return (
     <Field.Root validate={handleValidate} validateOnChange>
       <Field.Control type="password" />
       <Field.Label>Password</Field.Label>
-      <Field.Message show="customError" render={<ul />} data-error>
+      <Field.Error render={<ul />}>
         <Field.Validity>
-          {(state) => {
-            const password = state.value;
-            const errors = validate(password);
-
-            if (!errors.length) {
-              return null;
-            }
-
-            return errors.map((error) => <li key={error}>{error}</li>);
-          }}
+          {(state) => state.errors.map((error) => <li key={error}>{error}</li>)}
         </Field.Validity>
-      </Field.Message>
+      </Field.Error>
     </Field.Root>
   );
 }
diff --git a/docs/data/base/components/field/UnstyledFieldPassword.tsx b/docs/data/base/components/field/UnstyledFieldPassword.tsx
@@ -24,28 +24,18 @@ function validate(value: string) {
 export default function UnstyledFieldPassword() {
   function handleValidate(value: unknown) {
     const password = value as string;
-    const errors = validate(password);
-    return errors.length ? 'error' : null;
+    return validate(password);
   }
 
   return (
     <Field.Root validate={handleValidate} validateOnChange>
       <Field.Control type="password" />
       <Field.Label>Password</Field.Label>
-      <Field.Message show="customError" render={<ul />} data-error>
+      <Field.Error render={<ul />}>
         <Field.Validity>
-          {(state) => {
-            const password = state.value as string;
-            const errors = validate(password);
-
-            if (!errors.length) {
-              return null;
-            }
-
-            return errors.map((error) => <li key={error}>{error}</li>);
-          }}
+          {(state) => state.errors.map((error) => <li key={error}>{error}</li>)}
         </Field.Validity>
-      </Field.Message>
+      </Field.Error>
     </Field.Root>
   );
 }
diff --git a/docs/data/base/components/field/UnstyledFieldPassword.tsx.preview b/docs/data/base/components/field/UnstyledFieldPassword.tsx.preview
@@ -0,0 +1,9 @@
+<Field.Root validate={handleValidate} validateOnChange>
+  <Field.Control type="password" />
+  <Field.Label>Password</Field.Label>
+  <Field.Error render={<ul />}>
+    <Field.Validity>
+      {(state) => state.errors.map((error) => <li key={error}>{error}</li>)}
+    </Field.Validity>
+  </Field.Error>
+</Field.Root>