Deprecating components

Inevitably code will be replaced and improved, leaving components stale and or outdated.

So we should tell developers to not use them.

Here's what we need to make sure we do:

  1. Developers can avoid installing and outdated component;
  2. Developers can know to stop using a component; and
  3. Components aren't removed so existing sites continue to function.

How to deprecate an entire component

  1. In the component-name.config.yml file add:
    • status: deprecated
    • component-type: deprecated
    • hidden: true
  2. In the component-name.scss file wrap the sass with:
    • html:not(.vf-disable-deprecated) {
  3. Update README.md with:
    • why the component has been deprecated
    • what component(s) developers should instead use
    • Use this template
    <h2>This component has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#"new</a> component.</h2> in the README.md file.
    
  4. Publish on npm
  5. Remove the component from vf-core
  6. Deprecate on npm
    • npm deprecate @visual-framework/component "no longer supported use the @visual-framework/component instead"

Need to deprecate just one variant of a component?

  1. Add a note to the --variant.njk
    • Use this template
    <h2>This variant has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#"new</a> component.</h2> in the README.md file.
    
  2. Wrap the relevant Sass in html:not(.vf-disable-deprecated) {
  3. Hide the variant tab in .config.yml:
variants:
  - name: deprecated-variant
    hidden: true

See also: example vf-deprecated component

Find an issue on this page? Propose a change or discuss it.