parkhojeong commented on code in PR #68346:
URL: https://github.com/apache/airflow/pull/68346#discussion_r3419616872
##########
airflow-core/src/airflow/ui/src/components/DataTable/TableList.tsx:
##########
@@ -87,7 +93,22 @@ export const TableList = <TData,>({ allowFiltering,
renderSubComponent, table }:
<Table.Body>
{table.getRowModel().rows.map((row) => (
<Fragment key={row.id}>
- <Table.Row>
+ <Table.Row
+ _hover={onRowClick === undefined ? undefined : { bg: "bg.subtle"
}}
+ cursor={onRowClick === undefined ? undefined : "pointer"}
+ onClick={onRowClick === undefined ? undefined : () =>
onRowClick(row)}
Review Comment:
Thanks for the catch!
The row-button approach would make nested interactive elements. A single
cell would support two different actions. I think this could be confusing for
users and goes against the HTML spec.
<!-- <img width="800" height="185" alt="image"
src="https://github.com/user-attachments/assets/2cded75d-9106-4c8d-9fe3-4dc64a6c068d";
/> -->
- two actions screenshot: <img width="253" height="84" alt="image"
src="https://github.com/user-attachments/assets/6bab3e4b-e38e-43a4-a7cf-ef6380f6036a";
/>
- HTML spec is `The Button element: ... there must be no interactive content
descendant ...`:
https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model
---
Given these concerns, I replaced the row-button with a icon button. What do
you think?
https://github.com/apache/airflow/pull/68346/commits/e8dfa958c7a2378b7e69fbcfb7f6c45003d1cfa3
Screenshot
| normal | hover |
| --- | --- |
| <img width="339" height="120" alt="image"
src="https://github.com/user-attachments/assets/006804b7-4585-4b72-be13-cd0c1fbef81e";
/> | <img width="332" height="115" alt="image"
src="https://github.com/user-attachments/assets/e6047e03-9069-4e13-a8a6-3d55fd5d7651";
/> |
<!-- <img width="442" height="171" alt="image"
src="https://github.com/user-attachments/assets/be37db23-f96e-425f-87f6-b8c046b87761";
/> -->
<!-- <img width="446" height="160" alt="image"
src="https://github.com/user-attachments/assets/1d3071fc-edb5-4610-a099-1d047d8de50d";
/> -->
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
