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 a84375213ee3..e9b5b01b9709 100644 --- a/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx +++ b/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx @@ -35,19 +35,22 @@ export function getCurrentSupportType( function getSupportType( support: SimpleSupportStatementExtended, browser: BCD.BrowserStatement -) { +): SupportType { let { flags, version_added, version_removed, partial_implementation } = support; - let className; + let className: SupportType; if (version_added === null) { className = "unknown"; } else if (versionIsPreview(version_added, browser)) { className = "preview"; } else if (version_added) { - className = "yes"; - if (version_removed || (flags && flags.length)) { + if (version_removed) { + className = "removed"; + } else if (flags && flags.length) { className = "no"; + } else { + className = "yes"; } } else { className = "no"; @@ -59,6 +62,14 @@ function getSupportType( return className; } +function getSupportClassName(supportType: SupportType): string { + if (supportType === "removed") { + return "no"; + } + + return supportType; +} + function getSupportBrowserReleaseDate( support: SupportStatementExtended | undefined ): string | undefined { @@ -193,6 +204,7 @@ const CellText = React.memo( }) => { const browserReleaseDate = getSupportBrowserReleaseDate(support); const supportType = getCurrentSupportType(support, browser); + const supportClassName = getSupportClassName(supportType); const status = getCurrentStatus(support, supportType, browser); let label: string | React.ReactNode; @@ -219,6 +231,7 @@ const CellText = React.memo( break; case "no": + case "removed": title = "No support"; label = status.label || "No"; break; @@ -244,9 +257,9 @@ const CellText = React.memo( {title} @@ -508,7 +521,8 @@ function CompatCell({ onToggle: () => void; locale: string; }) { - const supportClassName = getCurrentSupportType(support, browserInfo); + const supportType = getCurrentSupportType(support, browserInfo); + const supportClassName = getSupportClassName(supportType); // NOTE: 1-5-21, I've forced hasNotes to return true, in order to // make the details view open all the time. // Whenever the support statement is complex (array with more than one entry) diff --git a/client/src/document/ingredients/browser-compatibility-table/utils.ts b/client/src/document/ingredients/browser-compatibility-table/utils.ts index 9a630805ee89..11be556ff557 100644 --- a/client/src/document/ingredients/browser-compatibility-table/utils.ts +++ b/client/src/document/ingredients/browser-compatibility-table/utils.ts @@ -17,6 +17,7 @@ export type SupportType = | "yes" | "partial" | "preview" + | "removed" | "removed-partial" | "unknown";