From 46e4c342ea1e35c3be434e26e8580386e3bdc8c8 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 6 Mar 2023 17:34:00 +1300
Subject: [PATCH] add error variant for caption component

---
 res/css/components/views/typography/_Caption.pcss   |  4 ++++
 src/components/views/typography/Caption.tsx         | 11 +++++++++--
 test/components/views/typography/Caption-test.tsx   |  5 +++++
 .../typography/__snapshots__/Caption-test.tsx.snap  | 13 +++++++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/res/css/components/views/typography/_Caption.pcss b/res/css/components/views/typography/_Caption.pcss
index 3af270c4a5e..f51276d9f96 100644
--- a/res/css/components/views/typography/_Caption.pcss
+++ b/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;
+    }
 }
diff --git a/src/components/views/typography/Caption.tsx b/src/components/views/typography/Caption.tsx
index 4ec7c20152d..69e7714b223 100644
--- a/src/components/views/typography/Caption.tsx
+++ b/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>
     );
diff --git a/test/components/views/typography/Caption-test.tsx b/test/components/views/typography/Caption-test.tsx
index ca3258f725f..bd684ca0f80 100644
--- a/test/components/views/typography/Caption-test.tsx
+++ b/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 = (
             <>
diff --git a/test/components/views/typography/__snapshots__/Caption-test.tsx.snap b/test/components/views/typography/__snapshots__/Caption-test.tsx.snap
index bb3c380a80c..b17d5044b08 100644
--- a/test/components/views/typography/__snapshots__/Caption-test.tsx.snap
+++ b/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>