This rule prevents the usage of .ink-* hardcoded classes. These class names are a part of a private API used internally for the Ink library, and are being deprecated. Instead, use Ink components themselves to ensure compatibility with future versions of the library.

Severity

Recommended Severity: error

rules: {
'@carta/ink-rules/no-ink-classes': 2,
}

Components affected by this rule

All components and tests making use of .ink-* classes.

Examples

Unit tests

wrapper.find(".ink-button__primary").hostNodes().simulate("click")

wrapper.find("Ink.Button").simulate("click")

userEvent.click(getByRole("button", { name: /click me/i }))

Don't

Don't use 'ink-*' classes as selectors in your testing code.

Use the component itself as a selector or use the content/role to select the component

wrapper.find(".ink-button__primary").hostNodes().simulate("click")

Don't

Don't use 'ink-*' classes as selectors in your testing code.

wrapper.find("Ink.Button").simulate("click")

userEvent.click(getByRole("button", { name: /click me/i }))

Use the component itself as a selector or use the content/role to select the component

App view

<a className="ink-anchor">Read more</a>

<Anchor>Read More</Anchor>

Don't

Use the internal 'ink-*' class to build a component

Use the ink component directly

<a className="ink-anchor">Read more</a>

Don't

Use the internal 'ink-*' class to build a component

<Anchor>Read More</Anchor>

Use the ink component directly

Severity

Components affected by this rule

Examples

Unit tests

App view

Is this page helpful?

no-ink-classes

Disallows the usage of .ink-* classes in code

Severity(Copy link)

Components affected by this rule(Copy link)

Examples(Copy link)

Unit tests

App view

Table of Contents

Severity

Components affected by this rule

Examples