Skip to content

Conversation

@kurtdoherty
Copy link
Contributor

@kurtdoherty kurtdoherty commented Aug 26, 2025

Context

  • We have table atoms in @reapit/elements/lab/table, but these don't facilitate the level of nuance required by the DS. For example:
    • They are pinned to semantic table elements like td, tr and so on, but we may need the flexibility of using them in a div-based DOM structure instead.
    • They do not provide any solution for the primary row action (which is meant to appear like the row itself is interactive).
    • They do not provide any solution for rendering row header cells.
    • They require column widths to be defined at the cell-level of the table rather than once at the table-level.
  • We want to enhance the capability of our table atoms when implementing "official" core versions of them (i.e. the table atoms that will be available via @reapit/elements/core/table.
  • The first chunk of this work will be done over a number of PRs and be focused on atoms involved in the table's body:
    • Part 1: Primary action for table rows (this PR)
    • Part 2: Primary data for table body cells
    • Part 3: Double-line layout for cells
    • Part 4: Body cell
    • Part 5: Body row
    • Part 6: Table body

This PR

  • Adds TableRowPrimaryAction and TableRowPrimaryActionButton.

note: These components render as an anchor and button respectively, but ones whose "hit area" will expand to fill the bounding box of the closest, relatively-positioned ancestor, which, by default, will be the table row.

Screenshot 2025-08-27 at 9 37 54 am Screenshot 2025-08-27 at 9 37 59 am

@rpt-uk-github
Copy link

rpt-uk-github commented Aug 26, 2025

🎉 Snyk checks have passed. No issues have been found so far.

security/snyk check is complete. No issues have been found. (View Details)

license/snyk check is complete. No issues have been found. (View Details)

code/snyk check is complete. No issues have been found. (View Details)

@codacy-production
Copy link

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation Diff coverage
Report missing for 2f3a5d11 100.00%
Coverage variation details
Coverable lines Covered lines Coverage
Common ancestor commit (2f3a5d1) Report Missing Report Missing Report Missing
Head commit (6871de3) 8339 7703 92.37%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details
Coverable lines Covered lines Diff coverage
Pull request (#715) 12 12 100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

Footnotes

  1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct.

@kurtdoherty kurtdoherty marked this pull request as ready for review August 27, 2025 00:06
text-decoration: none;

outline: none;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: this is the special sauce for the primary action. It's not a fool-proof approach, but it's cheap and will get us moving forward with good a11y and DOM structure.

In particular, it's susceptible to intermediate elements provided by consumers that use relative positioning. Hopefully, this will not prove to be a significant issue, but if it does and we need to work around it, we'll likely reach for anchor positioning (i.e. using CSS anchor positioning to position the ::after pseudo-element w.r.t. to the row as an anchor.

border: none;
margin: 0;
padding: 0;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: the default font style is the "primary" styled outlined in the design spec. Since this component is for the "primary" action of the row, it should always be used in the row header cell, which is mean to use the medium weight font.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants