Semantic-ui-react: Tab component passing redundant `aligned` prop to underlying Menu > div

[amankkg]

Steps

Use Tab component with panes shortcut prop.

Expected Result

In development mode - no errors/warnings.

Actual Result

In development mode - react's console error: Warning: Unknown prop `aligned` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop.
In production mode - all is OK.

Version

0.77.0 and above

Testcase

To spot the problem one needs to open react-dev-tools and navigate to nodes Tab > div > Menu > div > aligned prop passed.
https://codesandbox.io/s/vy7kq4npp7 using 0.77.2 - there is a redundant prop passed to div
https://codesandbox.io/s/4w9z82qj8x using 0.76.0 - no redundant props passed to div

Also, here is the screenshot from official website, which is using 0.77.2:

Investigation summary

The aligned prop was introduced in #2265
It seems like Tab component passes this prop (as if it was unhandled) down to Menu component. Menu has no such prop also, so again it's being passed to underlying div as unhandled.

[b0gok]

I think it's because of this commit https://github.com/Semantic-Org/Semantic-UI-React/commit/93c09a1132b65f70a05cd29b6d175517e35ed019

[amankkg]

Yep, seems like Menu is not using this prop actually, therefore it's being passed down as unhandled.
IMO, we should add dedicated Tab prop for this feature, say menuAligned, so...

• Menu's behavior is not affected;
• Tab's menu prop is aligned with Menu props API.

I'd like to help if we agree on final API @ryanmcgarvey @levithomason

[levithomason]

@amankkg This sounds great to me, aligned is not a Menu concern but a Tab concern. PRs welcome!

[amankkg]

Btw, there are some discussion is going on in #2499