v33.3.1
Tools
no-ink-classes
Disallows the usage of .ink-* classes in code
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.
Do
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 }))
Do
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
Do
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>
Do
Use the ink component directly
Table of Contents
Is this page helpful?