fix: pass through props for DataTableCell (DHIS2-15767)

[martinkrulltott]

Relates to DHIS2-15767
Required by dhis2/line-listing-app#427

---

Description

Background
Using a Tooltip in a DataTable is currently quite tricky, as the table itself relies on a strict DOM structure of DataTableBody -> DataTableRow -> DataTableCell, so nothing else can easily be added into that structure. To wrap a Tooltip around an element without any additional side-effect elements the wrapped component (’DataTableCell) needs to implement a few props, such as ’onMouseOver’, ’onMouseOut’ and ’ref’. Currently the DataTableCell` doesn't pass through the former two of these.

Solution
DataTableCell will now pass through props to its underlying TableCell component, so that the props will be featured in e.g. the td of a TableDataCell. This enables the use of Tooltip.

Example

<DataTableRow>
    <Tooltip
        content={'Some tooltip content'}
    >
        {({ onMouseOver, onMouseOut, ref }) => (
            <DataTableCell
                onMouseOver={onMouseOver}
                onMouseOut={onMouseOut}
                ref={ref}
            >
                Some cell content
            </DataTableCell>
        )}
    </Tooltip>
</DataTableRow>

---

Checklist

• API docs are generated
• Tests were added
• Storybook demos were added

All points above should be relevant for feature PRs. For bugfixes, some points might not be relevant. In that case, just check them anyway to signal the work is done.

Screenshots

[dhis2-bot]

🚀 Deployed on https://pr-1401--dhis2-ui.netlify.app

[cypress]

Passing run #3012 ↗︎

0

583

0

0

0

Details:

fix: pass through props for DataTableCell
Project: ui	Commit: 589c573d9f
Status: Passed	Duration: 09:02 💡
Started: Sep 8, 2023 11:48 AM	Ended: Sep 8, 2023 11:57 AM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[dhis2-bot]

🎉 This PR is included in version 8.14.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀