Non-standard/Deprecated icons are not consistent

[OnkarRuikar]

Summary

The entire page and compatibility section uses different icons for the same 'Non-standard' badge.
Same is the case with Deprecated badge.
Same icon 👎🏻 has different meanings, in different sections on the same page.

URL

https://developer.mozilla.org/en-US/docs/Web/API/Window#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/API/Window#methods

Reproduction steps

1. Open the URL and search mozpaintCount property.
2. In properties section you'll see assigned badges like this:
   
   Note:
   👎🏻 => Non-standard
   🗑 => Deprecated
3. Now go to browser compatibility section. You'll see:
   
   Note:
   👎🏻 => Deprecated
   ⚠ => Non-standard
4. Now open page https://developer.mozilla.org/en-US/docs/Web/API/Window/mozPaintCount . There you'll see:
   
   Note:
   ❌ => Deprecated
   ⚠ => Non-standard
5. Note, same icon 👎🏻 has different meanings, on the same page. The icons used are different for the same badges.

Expected behavior

Icons should be consistent across the entire site.

• 1. 🗑 should mean Deprecated everywhere on the website. Compatibility section and notecards need to be corrected.
• 2. ⚠ should mean Non-Standard everywhere on the website. CSS rule icon-nonstandard needs to be corrected on main page. The icon 👎🏻doesn't fit well here, and has negative tone.

Less severe issues:

• 3. Same icons should be used everywhere e.g. Experimental icon looks different everywhere: The flask is different for compatibility and main section.
• 4. Quick links sidebar has colored badges. Looks odd. Can we have same black and white badges there too?
• 5. Currently badge order is different at 3 places(mentioned in Steps to Reproduce section). For sake of consistency the badges should appear in same order every where e.g. deprecated -> experimental -> non-standard. Or the order can be decided based on the danger of using such APIs, i.e. deprecated are more harmful than experimental, cos they can creep into production easily, and so on.

Actual behavior

• Icon 👎🏻 represents different badges in main content(non-standard) and in browser compatibility(deprecated).
• Deprecated badge uses different icons ( 🗑, 👎🏻 , and ❌) at different places: main content, browser compatibility, and notecards.
• Icons have different flavors at different places. In quicklinks sidebar icons are colored.

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

No response

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[caugner]

Good catch, thanks!

As for the BCD tables, I will check internally if there is any reason not to use the trash symbol there. If there isn't, this would be a good community PR opportunity along these lines:

yari/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx

Lines 76 to 80 in c5c8559

	status.deprecated && {
	title: "Deprecated. Not for use in new websites.",
	text: "Deprecated",
	iconClassName: "icon-thumbs-down",
	},

yari/client/src/document/ingredients/browser-compatibility-table/legend.tsx

Lines 7 to 20 in c5c8559

	const LEGEND_LABELS = {
	yes: "Full support",
	partial: "Partial support",
	preview: "In development. Supported in a pre-release version.",
	no: "No support",
	unknown: "Compatibility unknown",
	experimental: "Experimental. Expect behavior to change in the future.",
	"note-warning": "Non-standard. Check cross-browser support before using.",
	"thumbs-down": "Deprecated. Not for use in new websites.",
	footnote: "See implementation notes.",
	disabled: "User must explicitly enable this feature.",
	altname: "Uses a non-standard name.",
	prefix: "Requires a vendor prefix or different name for use.",
	};

As for the non-standard / deprecated headers, I agree that it would make sense to use the corresponding icons there. Again, I will check this internally and get back.

I would clarify these first before going into issues 4 ("Quick links sidebar has colored badges") and 5 ("Currently badge order is different at 3 places").

[caugner]

I have checked internally, and we would like to

• use the trash symbol consistently for deprecated features, and
• restore the icons for the non-standard / deprecated headers (notecards).

@OnkarRuikar Would you be interested in submitting one or two PRs for this?

[danielhjacobs]

1-3 fixed by #5583

[caugner]

1-3 fixed by #5583

Unless I'm mistaken, 3 is not yet fixed, but will be fixed by #5611.

PS: I have inserted a task list for the 5 problems mentioned in the OP.

[caugner]

FWIW #5644 is resolving point 4.

[danielhjacobs]

@caugner So is there internal consensus for removing the color of those icons? Last I heard it was still being discussed.

[caugner]

@danielhjacobs Sorry for the waiting time. I have added this to the agenda of an internal meeting on Wednesday.

[danielhjacobs]

#5644 is merged. That's fine, but it means I'll need to open a follow-up PR if the result of Wednesday's meeting is that the colors are to be removed.

[caugner]

We are consistent now, and we'll keep the colors until further notice.