ESLint plugin
The essential plugin for use with the Atlassian Design System.use-visually-hidden
Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it with a ready made solution by the Atlassian Design System Team.
Examples
This rule marks code as violations when it can be replaced 1:1 with the visually hidden component.
Incorrect
import { css } from '@emotion/core';
import { visuallyHidden } from '@atlaskit/theme/constants';
const visuallyHiddenStyles = css({
width: '1px',
height: '1px',
padding: '0',
position: 'absolute',
border: '0',
clip: 'rect(1px, 1px, 1px, 1px)',
overflow: 'hidden',
whiteSpace: 'nowrap',
});
const VisuallyHidden = styled.span`${visuallyHidden()}`;
^^^^^^^^^^^^^^Correct
import VisuallyHidden from '@atlaskit/visually-hidden';