Pass props defined in the theme .defaultProps to the components

(Opening this ticket so the conversation doesn’t get lost on discord)

Right now only stylistic props in the defaultProps section of the component theme are used. Any other properties are ignored. (See codesanbox)

There is a bunch of non-stylistic properties that would benefit from being passed to the underlying component. Some examples:

• Being able to set a default openDelay on all tooltips.
• Being able to set all tooltips with hasArrow.
• Being able to set a default as on the different variants/sizes of Heading.
• Overriding the default aria-label on components like the CloseButton (e.g. translating it to other languages).

Right now the only alternative would be to create a custom wrapper component that sets those defaults props.

[cloud-walker]

Hi all, I know it may be a bit hacky, but I thought it was good to share: you can actually override the defaultProps as follows

// my-theme.js

import {extendTheme, Tooltip} from '@chakra-ui/react'

// ...

Tooltip.defaultProps = {...Tooltip.defaultProps, hasArrow: true}

Have a good weekend!

[with-heart]

I think this is a great idea. These are valid, common sense use cases. Wrapper components are also the worst.