feat(Accordion): new component #301

Haythamasalama · 2023-06-17T00:46:13Z

Accordion

✨ Introducing a new component for the NuxtLabs UI : Toggleable Accordion Panels! 🎉

📝 This pull request introduces the Disclosure component from the Headless UI library. It enables the display of interactive accordion panels for hiding and revealing content.

🚀 Key features of this component include:

Customizable labels, leading icons, and content for each panel.
Options to enable/disable individual panels.
Control over the initial open/closed state of the panels.
Ability to change the color and size of the accordion panels.
Flexible icon customization for opening and closing the panels.
Support for disabling specific panels.
Option to open all panels by default.
Slots for customizing the button and content items.

❤️ Please review the changes in this PR and provide feedback.

Resolves #156

Resolves nuxt#292

Co-authored-by: Benjamin Canac <[email protected]>

) Co-authored-by: Benjamin Canac <[email protected]>

nuxt-studio-dev · 2023-06-17T00:46:16Z

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	`f80b996`

vercel · 2023-06-17T00:46:16Z

@Haythamasalama is attempting to deploy a commit to the Nuxt Labs Team on Vercel.

A member of the Team first needs to authorize it.

nuxt-studio · 2023-06-17T00:46:16Z

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	`dcb4502`

benjamincanac · 2023-06-19T20:21:31Z

I had a quick look and I would rather call this component Accordion :)

Also, what would you think of using the UButton for the triggers? It would allow to handle all the styling and the props like here https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Notification.vue#L83 without configuring everything like the sizes, icons, etc.

Haythamasalama · 2023-06-20T08:19:14Z

I had a quick look and I would rather call this component Accordion :)

You're right, I don't like the Disclosure name It's nice to be accordion. I will work on these changes.

Haythamasalama · 2023-06-20T10:19:10Z

@benjamincanac done

Do you think we need to add as props for the content of the accordion?

Haythamasalama · 2023-06-25T23:22:24Z

@benjamincanac
Can we review this to work on new components like breadcrumbs ?

vercel · 2023-06-27T10:43:01Z

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

Name	Status	Preview	Updated (UTC)
ui	🔄 Building (Inspect)		Jun 27, 2023 7:53pm

benjamincanac · 2023-06-27T10:43:18Z

I've taken the liberty to make a few changes to your PR. Let me know what you think!

benjamincanac · 2023-06-27T10:45:49Z

I just have an issue with the disabled field on an item that doesn't get forwarded to the Button.

Haythamasalama · 2023-06-27T11:50:35Z

@benjamincanac
Nice changes. But what if we make the default variant soft and add this example of the default slot to showcase an alternative accordion design or style ?

I just have an issue with the disabled field on an item that doesn't get forwarded to the Button.

I will check it

Haythamasalama · 2023-06-27T12:09:25Z

@benjamincanac

Changing the as property from template to div in <HDisclosureButton as="div"> makes it work correctly

benjamincanac · 2023-06-27T12:46:19Z

I fixed it by passing the disabled prop to the DisclosureButton which works with as="template".

Do you still see an issue?

benjamincanac · 2023-06-27T14:49:48Z

I've updated the default slot example from your proposal.

Haythamasalama · 2023-06-27T17:45:11Z

@benjamincanac

disabled It's working well. I updated the default slot example and added the default variant soft. I think it looks very nice, rather than solid.

benjamincanac · 2023-06-27T19:44:37Z

I agree, just pushed some changes too. Let me know 😊

Haythamasalama · 2023-06-27T19:48:20Z

I agree, just pushed some changes too. Let me know 😊

Nice tweak! ❤️

benjamincanac · 2023-06-27T19:53:35Z

Let's merge this then!

arkhaiel · 2023-06-27T22:39:21Z

Nice component !
Is it possible to add an option that would let us choose if opening a panel should close the others ?
I have a usecase in which that would be helpful.

btw, thanks a lot for this amazing UI module !!! you guys are amazing

Haythamasalama · 2023-06-27T22:52:20Z

@mathieunicolas

Yes, it's existied!

You can open all items by enabling default-open props.

Check it here: https://ui.nuxtlabs.com/elements/accordion#open

Or open a specific item by passing defaultOpen in the items array.

Check it here: https://ui.nuxtlabs.com/elements/accordion#usage

arkhaiel · 2023-06-27T23:31:01Z

Hi @Haythamasalama thanks for your quick reply !
My question was about the behaviour of the accordion when you click on a panel to open it : it would be nice to have the previously opened one automatically closing, so you always have one panel opened !

For example :

all panels are closed
you click panel 2, it opens
you click panel 3, it opens, and panel 2 closes

Haythamasalama · 2023-06-27T23:37:54Z

@mathieunicolas
Open issue with this description

benjamincanac and others added 9 commits June 15, 2023 10:19

fix(module): let tailwindcss viewer enabled by default

07e471d

Resolves nuxt#292

docs: edge badges to new following 2.4.0

b4a02bc

docs: improve theming dark mode section

9d2d9eb

docs: add missing icons to override in theming

fa8b712

feat(definedShortcuts): chained shortcuts + docs update (nuxt#282)

45398d0

Co-authored-by: Benjamin Canac <[email protected]>

fix(forms): precise type assertion for onInput event handler (nuxt#293

5a31e79

) Co-authored-by: Benjamin Canac <[email protected]>

chore(deps): bump

8bda644

feat(Disclosure): new component

44b93cd

feat(docs): add docs for disclosure

dcb4502

Haythamasalama changed the title ~~feat(Disclosure): new component~~ feat(Accordion): new component Jun 20, 2023

refactor: rename to Accordion

2e5e081

benjamincanac force-pushed the dev branch 2 times, most recently from 3b81bea to 4863636 Compare June 21, 2023 17:09

Haythamasalama added 8 commits June 21, 2023 23:35

Merge branch 'dev' into feat/ements-disclosure

890a80a

fix: solve new eslint rules

3bc4298

wip

0ce9635

wip

31e3476

wip

225563c

wip

176e90d

Merge branch 'dev' into feat/ements-disclosure

59db007

style: fix format

06dcab6

up

275a913

up

47533ca

benjamincanac added 2 commits June 27, 2023 14:44

up

2acdebf

up

fe9b0e3

benjamincanac added 2 commits June 27, 2023 16:44

Merge branch 'dev' into feat/ements-disclosure

a94b26b

up

ef40ee8

Haythamasalama added 2 commits June 27, 2023 20:40

refactor: add border and padding

db57b37

refactor: add default variant soft

f21ba66

up

6b018f4

Merge branch 'dev' into feat/ements-disclosure

f80b996

benjamincanac merged commit e50f377 into nuxt:dev Jun 27, 2023

Haythamasalama deleted the feat/ements-disclosure branch June 27, 2023 19:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Accordion): new component #301

feat(Accordion): new component #301

Haythamasalama commented Jun 17, 2023 •

edited

Loading

nuxt-studio-dev bot commented Jun 17, 2023 •

edited by nuxt-studio bot

Loading

vercel bot commented Jun 17, 2023

nuxt-studio bot commented Jun 17, 2023

benjamincanac commented Jun 19, 2023

Haythamasalama commented Jun 20, 2023 •

edited

Loading

Haythamasalama commented Jun 20, 2023

Haythamasalama commented Jun 25, 2023

vercel bot commented Jun 27, 2023 •

edited

Loading

benjamincanac commented Jun 27, 2023

benjamincanac commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023 •

edited

Loading

Haythamasalama commented Jun 27, 2023 •

edited

Loading

benjamincanac commented Jun 27, 2023

benjamincanac commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023 •

edited

Loading

benjamincanac commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023 •

edited

Loading

benjamincanac commented Jun 27, 2023

arkhaiel commented Jun 27, 2023 •

edited

Loading

Haythamasalama commented Jun 27, 2023 •

edited

Loading

arkhaiel commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023

feat(Accordion): new component #301

feat(Accordion): new component #301

Conversation

Haythamasalama commented Jun 17, 2023 • edited Loading

Accordion

nuxt-studio-dev bot commented Jun 17, 2023 • edited by nuxt-studio bot Loading

✅ Live Preview ready!

vercel bot commented Jun 17, 2023

nuxt-studio bot commented Jun 17, 2023

✅ Live Preview ready!

benjamincanac commented Jun 19, 2023

Haythamasalama commented Jun 20, 2023 • edited Loading

Haythamasalama commented Jun 20, 2023

Haythamasalama commented Jun 25, 2023

vercel bot commented Jun 27, 2023 • edited Loading

benjamincanac commented Jun 27, 2023

benjamincanac commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023 • edited Loading

Haythamasalama commented Jun 27, 2023 • edited Loading

benjamincanac commented Jun 27, 2023

benjamincanac commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023 • edited Loading

benjamincanac commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023 • edited Loading

benjamincanac commented Jun 27, 2023

arkhaiel commented Jun 27, 2023 • edited Loading

Haythamasalama commented Jun 27, 2023 • edited Loading

arkhaiel commented Jun 27, 2023

Haythamasalama commented Jun 27, 2023

Haythamasalama commented Jun 17, 2023 •

edited

Loading

nuxt-studio-dev bot commented Jun 17, 2023 •

edited by nuxt-studio bot

Loading

Haythamasalama commented Jun 20, 2023 •

edited

Loading

vercel bot commented Jun 27, 2023 •

edited

Loading

Haythamasalama commented Jun 27, 2023 •

edited

Loading

Haythamasalama commented Jun 27, 2023 •

edited

Loading

Haythamasalama commented Jun 27, 2023 •

edited

Loading

Haythamasalama commented Jun 27, 2023 •

edited

Loading

arkhaiel commented Jun 27, 2023 •

edited

Loading

Haythamasalama commented Jun 27, 2023 •

edited

Loading