patternfly / AI-infra-ui-components

List of UI components based on Patternfly used for AI infra.
MIT License
0 stars 2 forks source link

EmptyTableCellForAlignment - migrate from ODH and document API #14

Closed nicolethoen closed 3 weeks ago

nicolethoen commented 1 month ago

The code for this component currently lives https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/pages/projects/components/EmptyTableCellForAlignment.tsx

This new components should be built using PF6.

A PF6 version of this component lives in the current PF6 migration POC PR: https://github.com/opendatahub-io/odh-dashboard/pull/3038

The API of the new component should match the API of the component in RHOAI. We can improve a11y, right-to-left language support, replace deprecated components under the hood, or generally clean up the implementation, as long as the API works in RHOAI.

adamviktora commented 3 weeks ago

This component is very small and I don't see a use case for making it a general component.

If I understand the purpose of it, it should be used as a gap filler when using the expandable table row. But as I was taking a closer look at the usage in the odh-dashboard, I am not sure if that still is the case. The hardcoded 46px is also concerning. If it was used only as the gap filler for the expanded row for the place of the toggle, simple Td will do the job and there is no need to hardcode the 46 (maybe it is a leftover from PF4).

Image Image

What might be an issue when migrating to V6 is the PatternFly ExpandableRowContent component, which now includes padding on the x axis. The only way to remove it is to modify the token value, which also can't be done through inline styles, because ExpandableRowContent props only accept children. We might want to extend the props on the React side, or even provide a direct prop to remove the x-axis padding?

V6 example: Image

adamviktora commented 3 weeks ago

Opened a design issue for the above ^

Won't migrate this component, closing.