react-ui-org/react-ui

create strategy where to assign transferProps

mbohal opened this issue · 2 comments

mbohal commented

Presently there is no officially stated startegy where HTML attributes should be forwarded to.

@dacerondrej did a good job unifying it in https://react-ui.io/components/popover#forwarding-html-attributes, but in order to provide a good DX we need a stated strategy.

The current state is following:

Alert                   root
Badge                   root
Button                  interactive/root
ButtonGroup             root

Card                    root
CardBody                root
CardFooter              root
`
CheckboxField           interactive
FileInputField          interactive

FormLayout              root
FormLayoutCustomField   root

Grid                    root
GridSpan                root

InputGroup              root

Modal                   modal, not backdrop
ModalBody               root
ModalCloseButton        interactive/root
ModalContent            root
ModalFooter             root
ModalHeader             root
ModalTitle              root

Paper                   root

Popover                 root
PopoverWrapper          root

Radio                   root
ScrollView              root

SelectField             interactive
Table                   root

Tabs                    root
TabsItem                root

Text                    root
TextArea                interactive
TextField               interactive
TextLink                interactive/root
Toggle                  interactive

Toolbar                 root
ToolbarGroup            root
ToolbarItem             root

root = the root node of the component
interactive = the interactive element in the composition - it might or might not be the root node

The problematic ones are:

  • Radio -> will be fixed in #481
  • Modal -> I don't know what to do wit this one… will be fixed in #461
  • TabsItem -> Should be fixed here
mbohal commented

@adamkudrna Would #461 fix this issue? In other words would that issue allow us to make the <dialog> HTML element the root of our <Modal> component?

I think it should be possible, because for backdrop we could use https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop, but I'm not sure.

adamkudrna commented

In other words would that issue allow us to make the <dialog> HTML element the root of our <Modal> component?

Yes!