@atlassian/aui/src/js/aui-css-deprecations.js

Atlassian User Interface library

import { css } from './aui/internal/deprecation';
import deprecatedAdg2Icons from './aui/internal/deprecation/deprecated-adg2-icons';

css('.aui-message span.aui-icon', {
    displayName: 'Message icon span',
});
css('.aui-tabs.vertical-tabs', {
    displayName: 'Vertical tabs',
});
css('form.aui span.content');
css(['form.aui .button', 'form.aui .buttons-container'], {
    displayName: 'Unprefixed buttons',
    alternativeName: 'aui-button and aui-buttons',
    removeInVersion: '10.0.0',
});
css(
    [
        'form.aui .icon-date',
        'form.aui .icon-range',
        'form.aui .icon-help',
        'form.aui .icon-required',
        'form.aui .icon-inline-help',
        'form.aui .icon-users',
        '.aui-icon-date',
        '.aui-icon-range',
        '.aui-icon-help',
        '.aui-icon-required',
        '.aui-icon-users',
        '.aui-icon-inline-help',
    ],
    {
        displayName: 'Form icons',
    }
);
css(
    [
        '.aui-dropdown2 .active',
        '.aui-dropdown2 .checked',
        '.aui-dropdown2 .disabled',
        '.aui-dropdown2 .interactive',
    ],
    {
        displayName: 'Unprefixed dropdown2 css AUI-2150',
        removeInVersion: '10.0.0',
    }
);

// 5.9.0
// -----

var fiveNineZero = {
    // Inline Dialog
    arrow: 'aui-inline-dialog-arrow',
    contents: 'aui-inline-dialog-contents',
};
var name;

for (name in fiveNineZero) {
    if (Object.hasOwnProperty.call(fiveNineZero, name)) {
        css(name, {
            alternativeName: fiveNineZero[name],
            removeVersion: '10.0.0',
            sinceVersion: '5.9.0',
        });
    }
}

// 7.1.0
// -----

css('.aui-badge', {
    displayName: 'AUI Badge CSS class',
    alternativeName: 'aui-badge',
    sinceVersion: '7.1.0',
    removeInVersion: '10.0.0',
    extraInfo: 'The badge pattern is best used as a web component instead of a CSS class',
});

// 7.5.0
// -----

css(['.aui-iconfont-image-extrasmall'], {
    displayName: 'Special size icon names',
    sinceVersion: '7.5.0',
    removeInVersion: '10.0.0',
    extraInfo: 'The only size variant allowed for icon names is `-small`.',
});

// New ADGS names for the old ADG2 icon
deprecatedAdg2Icons.forEach(({ newName, oldName }) =>
    css(`.aui-iconfont-${oldName}`, {
        displayName: 'ADG2 icon',
        alternativeName: `.aui-iconfont-${newName}`,
        sinceVersion: '7.5.0',
        removeVersion: '10.0.0',
        extraInfo: 'Use the new ADGS icon CSS class name',
    })
);

// 7.8.0
css('.aui-table-interactive', {
    alternativeName: '.aui-table-list',
    sinceVersion: '7.8.0',
    removeInVersion: '10.0.0',
    extraInfo:
        'The "interactive" suffix caused some confusion when contrasted with sortable tables.' +
        'The name has been updated to reflect its intended purpose: displaying lists of data in a tabular format.',
});

// 7.9.4
css('aui-spinner[filled]', {
    sinceVersion: '7.9.4',
    removeInVersion: '10.0.0',
    extraInfo: `Add CSS to the parent element of the <aui-spinner>.
Use CSS flexbox or grid to vertically align it.
See https://css-tricks.com/centering-css-complete-guide/ for techniques.`,
});

// 8.4.0

css('.aui-button-light', {
    sinceVersion: '8.4.0',
    removeInVersion: '10.0.0',
    extraInfo: 'ADGS allows only for normal and subtle buttons.',
});

// 9.3.5

css('.aui-dropdown2-tailed', {
    sinceVersion: '9.3.5',
    removeInVersion: '10.0.0',
    extraInfo: 'ADGS does not include tails on layered components',
});

// 9.7.0
css('form.aui .multi-select', {
    sinceVersion: '9.7.0',
    displayName: 'Multi-select',
    removeInVersion: '11.0.0',
    extraInfo:
        'Default browser behavior for selecing items is non-intuitive and non-accessible. Use Select2 instead.',
});