Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug - Label - Render prop doesn't allow link variant #11142

Open
Venefilyn opened this issue Oct 28, 2024 · 0 comments
Open

Bug - Label - Render prop doesn't allow link variant #11142

Venefilyn opened this issue Oct 28, 2024 · 0 comments

Comments

@Venefilyn
Copy link

Describe the problem
With Label component, if you were to use render prop because you're using React Router or TanStack Router, it becomes an issue when it comes to links as the Label component doesn't have an easy way to indicate that you are providing a link through the render class

Ideally I do not want to add the class name myself within the render function as it is sort of out of scope for React/TanStack routes that just provide a different component.

How do you reproduce the problem?
Provide steps to reproduce. A codesandbox demonstrating the problem is appreciated.

Expected behavior
With <Label> it currently has this in the v6 code:

const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;

It would be nice if there was a isClickable component prop boolean or otherwise provided data through the render prop to allow you to indicate this.

Is this issue blocking you?
Not blocking. Workaround is to add something to the Label.href prop to indicate it is clickable as it can be ignored in the render prop (but still giving the class).

href={props.link ? "#" : undefined}

Screenshots
Image showcasing how Route labels look with a render prop. There is no change to color on hover.
Image

Image showcasing the workaround described above. This workaround makes it work as expected with correct hover color.
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Needs triage
Development

No branches or pull requests

1 participant