6ef8824baee - - Icon
now uses React.memo() to stop unnecessary re-renders.
- A bug in the types for icon sizes has been resolved
This change also includes a number of quality of life fixes as part of lite mode.
Internal changes
- class components have been changed to functional components
- styled-components has been removed as a peer dependency
- @emotion/core has been added a direct dependency, base components now use emotion for styling
- An internal gradient function
insertDynamicGradientId has been removed from the runtime
- Enzyme removed in favour of RTL
Updating tests
Tests that rely on enzyme may have issues with this update. We've mostly seen issues with one of
the following cases.
Can't find internal react test id
Because icon is now wrapped in memo you won't be able to easily find it. This code will fail:
import BookIcon from '@atlaskit/icon/glyph/book';
<BookIcon />;
wrapper.find('BookIcon');
As a fix you can add memo to the target:
wrapper.find('Memo(BookIcon)');
Even better, use the test id.
<BookIcon testId="book-icon" />;
wrapper.find('[data-testid="book-icon"]');
Treating the icon as a button
Icon hasn't had an onClick handler since many major versions. This code will fail:
const Example = () => <Button testId="test-id" iconBefore={<SomeGlyph />} />;
// in some teat
wrapper.find(SomeGlyph).click();
// OR
wrapper.find('SomeGlyph').click();
As a fix you can target the button instead:
wrapper.find('[data-testid="test-id"]').click();
