patternfly-elements
patternfly-elements copied to clipboard
patternfly
[1:1] pfe-accordion
Component name: <pfe-accordion>
Design specification updates
@bennypowers @coreyvickery - Hey Corey, this is currently being worked on now and being matched with PF4's styles at the moment. Took a little detour with setting up rh-tooltip but I can hop on a call if you would like to see where I'm currently at.
@coreyvickery @marionnegp - Have a demo up here https://deploy-preview-2114--patternfly-elements.netlify.app/components/accordion/demo/ for comparison to patternfly 1:1 if either of you have time to look at it and compare. Most of the visual difference seems to come from the fonts coming in different in pfe vs patternfly (pfe looks like it resolves it as Red Hat Text whereas patternfly uses RedHatTextUpdated, not sure if this is a known issue @bennypowers ?)
@markcaron @bennypowers with regards to using the details html element for pfe-accordion currently the html setup looks like this:
<pfe-accordion>
<pfe-accordion-header>
<h3>Item one</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>Lorem Ipsum Text</p>
</pfe-accordion-panel>
</pfe-accordion>
Right now with the code we have pfe-accordion is looking for it's nearest neighbor and then collapsing / expanding it based on that. This could be worked in a few ways I think from the light / shadow dom so wanted to see what you were both thinking there based on our conversation this morning.
Also, side question @marionnegp @coreyvickery, do we need to take design considerations for having an accordion inside of an accordion anymore?
From looking at patternfly they default to the single open behavior and it does not appear to support nested accordions. Looking at https://ux.redhat.com/components/accordion/ I didn't see it outlined where an accordion could have an accordion nested either, so I wanted to double check with you all on that and whether or not we needed to take it into consideration while working on the rh-accordion piece.
If we didn't have to support nested accordions that could potentially help in making things a little simpler for the move over to using the details element depending on how we choose to implement it there.
@brianferry @marionnegp I believe the Agenda component designed by Marionne features nested accordions which we still need to support. Below are examples of the states that we should represent.
https://xd.adobe.com/view/d20a1c17-375c-4c7f-6827-5fe2f8c2d92f-a43b/screen/d1bad3d6-75c3-455a-a26f-c135517ed131
@marionnegp @coreyvickery - I have moved the PR out of Draft status & it is ready for review currently.