add error variant for caption component

res/css/components/views/typography/_Caption.pcss

@@ -17,4 +17,8 @@ limitations under the License.
 .mx_Caption {
     font-size: $font-12px;
     color: $secondary-content;
+
+    &.mx_Caption_error {
+        color: $alert;
+    }
 }

src/components/views/typography/Caption.tsx

@@ -14,15 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import classNames from "classnames";
 import React, { HTMLAttributes } from "react";
 
 interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
     children: React.ReactNode;
+    isError?: boolean;
 }
 
-export const Caption: React.FC<Props> = ({ children, ...rest }) => {
+export const Caption: React.FC<Props> = ({ children, isError, ...rest }) => {
     return (
-        <span className="mx_Caption" {...rest}>
+        <span
+            className={classNames("mx_Caption", {
+                mx_Caption_error: isError,
+            })}
+            {...rest}
+        >
             {children}
         </span>
     );

test/components/views/typography/Caption-test.tsx

@@ -31,6 +31,11 @@ describe("<Caption />", () => {
         expect({ container }).toMatchSnapshot();
     });
 
+    it("renders an error message", () => {
+        const { container } = render(getComponent({ isError: true }));
+        expect({ container }).toMatchSnapshot();
+    });
+
     it("renders react children", () => {
         const children = (
             <>

test/components/views/typography/__snapshots__/Caption-test.tsx.snap

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Caption /> renders an error message 1`] = `
+{
+  "container": <div>
+    <span
+      class="mx_Caption mx_Caption_error"
+      data-testid="test test id"
+    >
+      test
+    </span>
+  </div>,
+}
+`;
+
 exports[`<Caption /> renders plain text children 1`] = `
 {
   "container": <div>