Define: row component

History

The package group uses its own (non-pajamas) reusable component for the Dependency Proxy, Container Registry, and Package Registry. Side note, these designs will soon be updated - issue with designs.

Current prod row component (package)

I've noticed that this component is similar to many other parts of GitLab. Each of these areas has slightly different interactions (example: some of these rows have a hover state and some do not). For consistency, it could be helpful to have a single re-usable component that caters to multiple areas of GitLab.

Similar examples from around GitLab

Proposal

1. Audit visually similar components (for lack of a better word) around GitLab to understand what information they display
2. Investigate areas are similar enough to be considered to be replaced by a single pajamas component. Discuss with teams owning those areas.
3. Understand if any of these areas of the product would be better served by a table (including package).
4. For those areas who could use a row component, design a component with variations and determine if it's feasible / logical to have a pajamas row component. E.g. if the component needs many variations, it probably cannot be a global component. Design for all screen widths.

Checklist

Make sure the following are completed before closing the issue:

1. Assign the correct component label to this issue.
2. Create an MR with the additions or updates needed.
3. When applicable, create a new Pajamas issue using the "Figma update" issue template to update the component in Figma. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
4. When applicable, create an MR in GitLab UI to update the component. If you do not have capacity or are unable to update the component directly, create a new GitLab UI issue using the "Component" issue template. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
5. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review and UX Weekly meeting.
6. Congrats, you made it! You can now close this issue.

added pajamasdefine label

Hi @katiemacoy,

Please make sure that both a workflow label and weight are added to your issue. This helps to categorize and locate issues in the future.

Thanks for your help!

@jeldergl Rayana may have mentioned to this. We have a bespoke reusable component that we use only in Package interfaces, and I'd like to explore if it makes sense elevating it to a component. Your input is welcome here

Thanks @katiemacoy! I wouldn't elevate this to a component. I know we don't use atomic design language much in Pajamas, but I would consider this to be an organism. I think using it as a template in the code makes the most sense.

In Figma you could create a separate library for your team to use it as a component there.

Lastly, Given that this is considered to be a "row" makes me think there's opportunity to abstract this out further into some of the tabular layout conversations that have been happening. gitlab-org/gitlab#340029 (closed)

thanks @jeldergl that makes sense Thanks for the link to the tabular layout conversations as well. I'll close this issue.

closed