From 3e3623e4b01d9da631d33ea07d1fca761e4fd975 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 16 Mar 2022 19:30:22 +0100
Subject: [PATCH] fix(bcd): improve titles for support behind flags (#5616)

---
 .../browser-compatibility-table/feature-row.tsx        | 10 +++++++++-
 .../ingredients/browser-compatibility-table/legend.tsx |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx b/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx
index e5c90d48b27c..5144242537cc 100644
--- a/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx
+++ b/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx
@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import type bcd from "@mdn/browser-compat-data/types";
 import { BrowserInfoContext } from "./browser-info";
 import { asList, getFirst, isTruthy, versionIsPreview } from "./utils";
+import { LEGEND_LABELS } from "./legend";
 
 // Yari builder will attach extra keys from the compat data
 // it gets from @mdn/browser-compat-data. These are "Yari'esque"
@@ -158,6 +159,11 @@ const CellText = React.memo(
             isSupported: "preview",
             label: labelFromString(added, browser),
           };
+        } else if (currentSupport?.flags?.length) {
+          status = {
+            isSupported: "no",
+            label: labelFromString(added, browser),
+          };
         } else {
           status = {
             isSupported: "yes",
@@ -244,8 +250,10 @@ const CellText = React.memo(
 );
 
 function Icon({ name }: { name: string }) {
+  const title = LEGEND_LABELS[name] ?? name;
+
   return (
-    <abbr className="only-icon" title={name}>
+    <abbr className="only-icon" title={title}>
       <span>{name}</span>
       <i className={`icon icon-${name}`} />
     </abbr>
diff --git a/client/src/document/ingredients/browser-compatibility-table/legend.tsx b/client/src/document/ingredients/browser-compatibility-table/legend.tsx
index 41741ce2d8a7..ad4155080d95 100644
--- a/client/src/document/ingredients/browser-compatibility-table/legend.tsx
+++ b/client/src/document/ingredients/browser-compatibility-table/legend.tsx
@@ -4,7 +4,7 @@ import { BrowserInfoContext } from "./browser-info";
 import { asList, listFeatures, versionIsPreview } from "./utils";
 
 // Also specifies the order in which the legend appears
-const LEGEND_LABELS = {
+export const LEGEND_LABELS = {
   yes: "Full support",
   partial: "Partial support",
   preview: "In development. Supported in a pre-release version.",