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

Fieldset: toggle icon does not work if there is a legend slot #6144

Closed
brian-izaki opened this issue Jul 29, 2024 · 3 comments
Closed

Fieldset: toggle icon does not work if there is a legend slot #6144

brian-izaki opened this issue Jul 29, 2024 · 3 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@brian-izaki
Copy link

Describe the bug

When I use a fieldset and enable toggleable, and if I put a slot for the legend, the button to toggle does not show.

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-8wikdd?file=package.json

PrimeVue version

4.0.2

Vue version

3.x

Language

TypeScript

Build / Runtime

TypeScript

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

Have the minus icon when have a custom legend slot in fieldset

@brian-izaki brian-izaki added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 29, 2024
@brian-izaki brian-izaki changed the title Fieldset: toggleicon slot not work if have legend slot in same Fieldset Fieldset: toggleicon not work if have legend slot Jul 29, 2024
@brian-izaki brian-izaki changed the title Fieldset: toggleicon not work if have legend slot Fieldset: toggle icon does not work if there is a legend slot Jul 29, 2024
@avramz
Copy link
Contributor

avramz commented Jul 30, 2024

You need to add the button (or whatever you'd like) yourself, legend slot has toggleCallback in it's scope, and you can use it like this: https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-uzyqn6?file=src%2FApp.vue

Legend slot documentation: https://primevue.org/fieldset/#api.fieldset.slots.legend

@brian-izaki
Copy link
Author

brian-izaki commented Jul 30, 2024

Thanks!! It's an option for me now.

But if I try to add the #toggleicon slot, its content does not show.

image

I updated the code in stackblitz, adding the #toggleicon slot
https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-8wikdd?file=src%2FApp.vue

@avramz
Copy link
Contributor

avramz commented Jul 30, 2024

I see. Based on the current Fieldset component implementation toggleicon slot is inside the legend slot, hence not existing if you provide your own.

If the template structure is to remain the same, collapsed should at the very least be in the legend slot scope, so we could easily update the icon (or something else). Documentation should also be updated.

As a workaround, you can implemment it like this: https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-vnd5uj?file=src%2FApp.vue

I'd be happy to put a PR for this, if this is the desired direction cc @tugcekucukoglu

@tugcekucukoglu tugcekucukoglu added this to the 4.0.4 milestone Aug 2, 2024
@tugcekucukoglu tugcekucukoglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Aug 2, 2024
@tugcekucukoglu tugcekucukoglu self-assigned this Aug 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

3 participants