Componentry v4.5 includes additions and improvements to the library action components: Button, IconButton and Link. The new wrapWhenDisabled prop allows creating disabled actions that can still be used with elements that require a ref, like Tooltips for explaining disabled states.
V4.4 improvement highlights:
focus-visible pseudo class for action element focus styleswrapWhenDisabled prop for Button, IconButton, and Linktruncate prop for Text truncation stylesComponentry now has stable support for Button, IconButton, and Link components. Action elements are critical to any design system and Componentry provides a set that balances automating important accessibility support with component transparency.
Creating library-consistent focused and disabled states was a key question for this release. Componentry provides library-consistent implementation of these concerns using a :focus-visible pseudo class and a .C9Y-disabled library class. Action components will show a focused style for keyboard interactions, and have pointer events disabled by default for focused and disabled states respectively.
In order to allow using wrapping components that require a req (tooltips for disabled buttons is a common example pattern) each of the action components supports a wrapWhenDisabled prop that will wrap disabled instances in a span. This supports refs, as well as custom cursor styles for disabled action elements.
The Text component now accepts a truncate boolean prop. When true it will include the .truncate className which will include Tailwind's text truncation styles for truncating overflowing text with ellipses.