[Layout] Properties are Not Passed when using "as" (1.0.0-next.6)

~When working with a component that used an object as a prop I noticed that it would not come through when using an “as” property.~

When using non HTML property names properties are not passed when using “as”. For example name and href props will pass but anything that doesn’t have an HTML prop on an element does not (that is my working theory anyway).

Quite simply

     <SimpleComponent name="Susan" nested={{ lastName: "Smith" }}>Children Work</SimpleComponent>

Will pass nested to the component but

      <Box as={SimpleComponent} name="Susan" nested={{ lastName: "Smith" }}> Children Still Work</Box>

Will not pass the nested property to simple component (name property will pass). I tried this with a few other components as well (Button, Flex) with same behavior.

Expected Behavior I expect as to pass props to the base component of any type

Link to minimal reproduction https://codesandbox.io/s/relaxed-vaughan-xjglk?file=/src/App.tsx

Steps to Reproduce See sandbox

Suggested solution(s)

I have not looked closely but I think this would be a candidate for a unit test. If you agree it is a bug I’m happy to help create that.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome, Safari
• Version 84, 13.1.1

Additional context I love Chakra-UI, nice work! 😃

[with-heart]

I’ve been looking into this and I think I’ve figured out what’s wrong. Looks like the way we determine whether props should be forwarded in our shouldForwardProp function changed recently, and it doesn’t apply to non-HTML+non-system props the way it should.

[with-heart]

You’re right! That was a mistake on my part