Add a utility class and mixin to deprecate elements and selectors.

Review Request #13689 — Created April 1, 2024 and submitted

Information

Ink
master

Reviewers

When working in a codebase with a lot of styles, and a need to keep a
level of backwards-compatibility while transitioning to newer components
or selectors, it can be difficult to know when a part of the UI is using
something that's now deprecated.

To help work with this, Ink now provides some useful deprecation
utilities.

An .ink-deprecated CSS class can now mark an element as deprecated.
This is useful for components or templates that are expected to go away.

An #ink-ns-ui.deprecated() mixin marks whatever it's mixed into as
deprecated. This is useful for styles.

These won't do anything by themselves, but when an affected element
resides within an element containing an .ink-show-deprecations CSS
class, the element will gain a double-outline offset from the element
that cycles through a series of colors. This provides a visual that
works in light and dark modes that will help draw attention to the
element, without affecting layout.

Consumers of Ink are encouraged to make use of this.

Tested in Storybook and in Review Board, with and without the opt-in
ink-show-deprecations CSS class.

Summary ID
Add a utility class and mixin to deprecate elements and selectors.
When working in a codebase with a lot of styles, and a need to keep a level of backwards-compatibility while transitioning to newer components or selectors, it can be difficult to know when a part of the UI is using something that's now deprecated. To help work with this, Ink now provides some useful deprecation utilities. An `.ink-deprecated` CSS class can now mark an element as deprecated. This is useful for components or templates that are expected to go away. An `#ink-ns-ui.deprecated()` mixin marks whatever it's mixed into as deprecated. This is useful for styles. These won't do anything by themselves, but when an affected element resides within an element containing an `.ink-show-deprecations` CSS class, the element will gain a double-outline offset from the element that cycles through a series of colors. This provides a visual that works in light and dark modes that will help draw attention to the element, without affecting layout. Consumers of Ink are encouraged to make use of this.
74db272132c024f36579913d761074edcdeb916e

david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to master (2b9178c)