• 
      

    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)