[EuiBasicTable] Fixed clickable rows not highlighting in sub-tables

[anuragxxd]

Summary

Fixed the problem to the sub-tables not showing the hover effect.
Fixes #3923
CodeSandBox: https://codesandbox.io/s/row-highlighting-bug-2r55i?file=/src/index.js:252-1582

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4566/

[anuragxxd]

@cchaos can you please review this :)

[cchaos]

Yep, we'll get to it. We appreciate your patience with us. Also, don't forget to start new branches from the latest EUI master branch so that your PR commit log is clean and only contains those pertaining to this PR.

[cchaos]

This one is going to require a little more work to test as we don't have an exact example in our docs to test with. At first glance though, the style changes are too heavy handed on the expanded row contents. The row contents should not have the hover affect but keep the shaded background color constant.

Screen.Recording.2021-02-23.at.12.40.20.PM.mp4

[anuragxxd]

@cchaos I have made the example of this on my machine. Maybe if you want I can add that to the pr. It will also be good for future. :)
Regarding the master branch I am sorry for that I accidentally made extra commit to the master I have another pr on hold merging it will solve the issue (#4549). :-\

[cchaos]

My only concern with adding this as a specific example is that it's not a great UI pattern so I don't want to necessarily promote it through our docs. But what we've done in the past is push an example up in the PR to make testing easier, but mark it as something to revert before merge. I'd be good with that approach for this PR if you want to just push your docs example with the commit message of To Revert: Testing example

[anuragxxd]

@cchaos Temporally changed the 1st example for testing. Once you feel okay with it I will revert the change.

[cchaos]

Thanks! Can you also address my previous comment about highlighting the expanded row content?

[anuragxxd]

Isn't this little contradictory that in one we will be setting the background-color property to none and in one we want this to be $euiTableHoverColor. @cchaos

[cchaos]

So the original issue is about how nesting a table specifically within a collapsible row doesn't get the right row hover behavior. But the fix shouldn't affect how other content currently gets displayed like in the original doc example which is just a description list.

By default, expanded row content should be a static gray background (no hover effect). But if a table lives within this expanded row content, it should properly handle it's own row hover behavior. Instead it's getting it's cell background color from the .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell selector which simply needs to be changed to be a direct descendent .euiTableRow.euiTableRow-isExpandedRow > .euiTableRowCell

Screen.Recording.2021-02-25.at.01.26.16.PM.mp4

[anuragxxd]

@cchaos Done everything you asked for. Hope all good now. :\

[cchaos]

Jenkins, test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4566/

[cchaos]

Thanks! It looks like this approach works as well. Just some suggestions to cleanup the sass and then be sure to go through the PR checklist.

[anuragxxd]

Thanks @cchaos for so much help! I will revert the example once you tell me. :)

[anuragxxd]

@cchaos Should I revert the changes of adding example?

[cchaos]

Jenkins, test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4566/

[cchaos]

👍 Changes look good to me. Now just be sure to go through the PR checklist and you can revert the doc change too. Thanks!

[anuragxxd]

Reverted the changes @cchaos

[cchaos]

Great, just need to finish up the rest of the PR checklist! See the PR summary.

[cchaos]

Jenkins, test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4566/