feat: compose legend labels

[abdelkd]

Description This PR adds the ability to customize legend labels through custom prop. The prop is renderItem and it takes a function or a component, renderItem provides an item string, a Circle component and index. item is the label that would be used in a normal legend while the Circle is the component that would typically render in the legend. the index is self-explanatory.

Related issue(s)

978

What kind of change does this PR introduce? (check at least one)

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New Feature (non-breaking change which adds functionality)
• [ ] New Feature (BREAKING CHANGE which adds functionality)
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [X] No

If yes, please describe the impact and migration path for existing applications:

How has this been tested?

Screenshots (if appropriate):

The PR fulfils these requirements:

• [X] It's submitted to the main branch
• [ ] When resolving a specific issue, it's referenced in the related issue section above
• [ ] My change requires a change to the documentation. (Managed by Tremor Team)
• [X] I have added tests to cover my changes
• [ ] Check the "Allow edits from maintainers" option while creating your PR.
• [ ] Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
• [X] By contributing to Tremor, you confirm that you have read and agreed to Tremor's CONTRIBUTING.md guideline. You also agree that your contributions will be licensed under the Apache License 2.0 license.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tremor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 21, 2024 3:01pm

[abdelkd]

Hey @severinlandolt do you think exporting a new CustomLegendLabel interface for using in other components with typescript? for example:

import { Legend, CustomLegendLabel } from '@tremor/react'

const MyCustomLabel = ({ item, index }: CustomLegendLabel) => {
  return <p>{index} - {item}</p>
}

const App = () => {
  return <Legend categories={["One", "Two", "Three"]} renderItem={MyCustomLabel} />
}

here the developer won't need to define props or use any

[nicostombros]

Wondering if having a Circle is the best naming here? May want to allow the dev to create a square or some other shape to as their legend

[abdelkd]

@nicostombros The Circle component is just a wrapper around the actual colored dot that you find in legends, maybe Dot or ColoredDot. Hello @severinlandolt , May I get your opinion.