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-visiblepseudo class for action element focus styles
wrapWhenDisabledprop for Button, IconButton, and Link
truncateprop for Text truncation styles
Componentry 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.