From fc39ed6307fe23e11d42335a37ac12209863eeee Mon Sep 17 00:00:00 2001
From: Florian Dieminger <me@fiji-flo.de>
Date: Thu, 9 Jan 2025 17:06:59 +0100
Subject: [PATCH] feat(baseline): asterisk support for baseline (#12415)

* feat(baseline): asterisk support for baseline
---
 client/src/document/baseline-indicator.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/document/baseline-indicator.tsx b/client/src/document/baseline-indicator.tsx
index 6c4a0945d030..fb507d9c1642 100644
--- a/client/src/document/baseline-indicator.tsx
+++ b/client/src/document/baseline-indicator.tsx
@@ -9,7 +9,9 @@ import "./baseline-indicator.scss";
 
 // web-features doesn't export these types directly so we need to do a little typescript magic:
 import type { features } from "web-features";
-type SupportStatus = (typeof features)[keyof typeof features]["status"];
+type SupportStatus = (typeof features)[keyof typeof features]["status"] & {
+  asterisk?: boolean;
+};
 type BrowserIdentifier =
   keyof (typeof features)[keyof typeof features]["status"]["support"];
 
@@ -123,6 +125,7 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) {
                   ? "Widely available"
                   : low_date?.getFullYear()}
               </span>
+              {status.asterisk && " *"}
             </>
           ) : (
             <span className="not-bold">Limited availability</span>
@@ -176,6 +179,11 @@ export function BaselineIndicator({ status }: { status: SupportStatus }) {
             most widely-used browsers.
           </p>
         )}
+        {status.asterisk && (
+          <p>
+            * Some parts of this feature may have varying levels of support.
+          </p>
+        )}
         <ul>
           <li>
             {/* eslint-disable-next-line react/jsx-no-target-blank */}