[Feature]: Add support for custom element as child for BarList list element

[Lucas Verdiell]

What problem does this feature solve?

Problem

The BarList is a great component to display data but a little bit more flexibility can be added to it allowing devs to add a custom component to be rendered for the list element instead of the defaults a or p tags.

Motivation / use case.

Some of frameworks out there implement their own Link components for different functionalities, which leaves the standard a element insufficient.

For example, NextJS allows you to implement parallel routes and intercepting routes by using their own Link component instead of a elements.

MUI has a great work on addressing this by using the prop component which accepts an string of any HTML default element and/or pass any ReactElement to be rendered instead of the a tag.

Suggested solution

Adding a prop to allow devs to pass a component to be rendered instead of the default elements. Scope could centered only on the link component (when an href is passed) or for the whole list element.

What does the proposed API look like?

const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
  const {
    component,
    ...other
  } = props;
  
  const CustomComponent = ({ children, ...props }) => {
    const Element = component ?? props.href ? "a" : "p"
    return <Element {...props}>{children}</Element>
  }

return (
....
            {item.href ? (
                  <CustomComponent
                    href={item.href}
                    target={item.target ?? "_blank"}
                    rel="noreferrer"
                    className={tremorTwMerge(
                      makeBarListClassName("barLink"),
                      // common
                      "whitespace-nowrap hover:underline truncate text-tremor-default",
                      // light
                      "text-tremor-content-emphasis",
                      // dark
                      "dark:text-dark-tremor-content-emphasis",
                    )}
                  >
                    {item.name}
                  </CustomComponent>
                  ) : 
....
)

[Severin Landolt]

Hey @lukasver, thank your for your suggestion. I totally understand where you are coming from, but we won't be allowing this.

The particular reason is: Some elements need different spacing properties because of their layout algorithm → e.g button vs anchor.

However: We recently launched Tremor Raw, a copy & paste library for React components. There we have a new version of the BarList, where you have full control over this. Happy coding ⌨️