[RFC] Provide merged props and state to Styles and Accessibility

[silviuaavram]

Feature Request

The feature is meant to provide a unified object of the component's props and state in the context of Styles and Accessibility.

Problem description

So far, in both the cases of Accessibility and Styles, it was required that we have access to both state and props when applying custom behaviour or styles to the component.

The following scenarios should be considered as motivation for this feature:

• accessibility: we need to provide an aria-checked to a checkbox, depending on its check state.
• styles: we have hit the issue where we need to differentiate focus source (e.g. keyboard or mouse) so we can apply a different style to the component. If the focus comes from the mouse, this is reflected in the component's state, and then we need to apply different style (removing the focus ring) based on that.

Proposed solution

• unified (merged) object of props and state should be passed as argument to component's style functions, as well as to the accessibility behaviours.
• if there is a property that is common for both state and props objects, the one from props will override the one from state).

Which name should be used for merged object?

Currently we are using props as name for the arg that is passed to style function, and the same for the one that is passed to accessibility behavior. For the sake of not introducing misleading associations with React domain (this will quite loudly apply to style functions, where props arg will contain props+state data) it is better to consider another name for it. Proposed options so far:

• properties (or componentProperties)
• data (or componentData)

[levithomason]

Problem 👍 Proposed solutions 1 and 2 👍

As for the style function argument, even though props was popularized by React it seems many CSS in JS libraries call this argument props, even if they aren't supporting React. Some also call it state, as CSS in JS is also described as "styles as a function of state."

I think we should look around at the ecosystem and make a determination based on what is emerging and stay away from inventing anything new. Here are a few popular libraries

https://github.com/Khan/aphrodite https://github.com/paypal/glamorous https://github.com/FormidableLabs/radium https://emotion.sh/ https://github.com/cssinjs/jss http://fela.js.org/ https://github.com/styled-components/styled-components https://github.com/styled-components/polished https://github.com/styletron/styletron

Even more are listed here here:

https://github.com/MicheleBertoli/css-in-js

[kuzhelov]

required functionality is now introduced, let's spend some time to figure out if something needs to be changed for the name of props - based on the experience of other libs (totally agree that we'd better to stick to commonly taken approach).

[hughreeling]

Perhaps also do https://github.com/stardust-ui/react/issues/176

[kuzhelov]

this one is addressed by #173, closing