Add clarification to BCD tables that there is more data upon click (#6777)

queengooborg · fiji-flo · web-flow · commit a92239d74027 · 2022-08-18T11:07:01.000+02:00
* Add clarification to BCD tables that there is more data upon click

* Update legend.tsx

Co-authored-by: Florian Dieminger &lt;me@fiji-flo.de&gt;
diff --git a/client/src/assets/icons/more.svg b/client/src/assets/icons/more.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="https://www.w3.org/2000/svg">
+<path d="M3,8c0-0.6-0.4-1-1-1S1,7.4,1,8c0,0.6,0.4,1,1,1S3,8.6,3,8z" fill="black"/>
+<path d="M9,8c0-0.6-0.4-1-1-1S7,7.4,7,8c0,0.6,0.4,1,1,1S9,8.6,9,8z" fill="black"/>
+<path d="M15,8c0-0.6-0.4-1-1-1s-1,0.4-1,1s0.4,1,1,1S15,8.6,15,8z" fill="black"/>
+</svg>
diff --git a/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx b/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx
@@ -269,6 +269,7 @@ function CellIcons({ support }: { support: BCD.SupportStatement | undefined }) {
     hasNoteworthyNotes(supportItem) && <Icon key="footnote" name="footnote" />,
     supportItem.alternative_name && <Icon key="altname" name="altname" />,
     supportItem.flags && <Icon key="disabled" name="disabled" />,
+    Array.isArray(support) && <Icon key="more" name="more" />,
   ].filter(Boolean);
 
   return icons.length ? <div className="bc-icons">{icons}</div> : null;
diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -167,6 +167,13 @@
   font-size: var(--type-smaller-font-size);
 }
 
+.bc-legend-tip {
+  font-size: var(--type-smaller-font-size);
+  margin-top: 0rem;
+  margin-bottom: 1rem;
+  font-style: italic;
+}
+
 .bc-legend-item {
   align-items: center;
   display: flex;
diff --git a/client/src/document/ingredients/browser-compatibility-table/legend.tsx b/client/src/document/ingredients/browser-compatibility-table/legend.tsx
@@ -23,6 +23,7 @@ export const LEGEND_LABELS = {
   disabled: "User must explicitly enable this feature.",
   altname: "Uses a non-standard name.",
   prefix: "Requires a vendor prefix or different name for use.",
+  more: "Has more compatibility info.",
 };
 type LEGEND_KEY = keyof typeof LEGEND_LABELS;
 
@@ -90,6 +91,10 @@ function getActiveLegendItems(
           legendItems.add("disabled");
         }
       }
+
+      if (Array.isArray(browserSupport)) {
+        legendItems.add("more");
+      }
     }
   }
   return Object.keys(LEGEND_LABELS)
@@ -115,6 +120,9 @@ export function Legend({
       <h3 className="visually-hidden" id="Legend">
         Legend
       </h3>
+      <p className="bc-legend-tip">
+        Tip: you can click/tap on a cell for more information.
+      </p>
       <dl className="bc-legend-items-container">
         {getActiveLegendItems(compat, name, browserInfo).map(([key, label]) =>
           ["yes", "partial", "no", "unknown", "preview"].includes(key) ? (
diff --git a/client/src/ui/atoms/icon/index.scss b/client/src/ui/atoms/icon/index.scss
@@ -3,10 +3,10 @@ $icons: "add-filled", "add", "altname", "bell-filled", "bell", "bookmark-filled"
   "deprecated", "desktop", "disabled", "edge", "edit", "ellipses",
   "experimental", "external", "eye-filled", "eye", "footnote",
   "github-mark-small", "ie", "information", "language", "menu-filled", "menu",
-  "mobile", "theme-dark", "next", "no", "nodejs", "nonstandard", "note-info",
-  "note-warning", "note-deprecated", "opera", "padlock", "partial", "prefix",
-  "preview", "previous", "quote", "safari", "samsunginternet", "search",
-  "server", "sidebar", "simple-firefox", "small-arrow", "theme-light",
+  "mobile", "more", "theme-dark", "next", "no", "nodejs", "nonstandard",
+  "note-info", "note-warning", "note-deprecated", "opera", "padlock", "partial",
+  "prefix", "preview", "previous", "quote", "safari", "samsunginternet",
+  "search", "server", "sidebar", "simple-firefox", "small-arrow", "theme-light",
   "star-filled", "star", "theme-os-default", "thumbs-down", "thumbs-up", "trash",
   "twitter", "unknown", "warning", "webview", "yes", "yes-circle";
 
