fix(bcd): improve titles for support behind flags (mdn#5616)

dipikabh · Mar 16, 2022 · 3e3623e · 3e3623e
1 parent 04258e6
commit 3e3623e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -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.",