search

patternfly / patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
114 stars 105 forks source link

Add 'With icon' variant of accordion #1264

Open maryshak1996 opened 1 year ago

maryshak1996 commented 1 year ago

I'm not sure if this isn't a variant of the 'accordion' or if it's more a variant of the 'expandable' component, but I wanted to contribute this concept that we are using in our console landing page templates (having it be a PF component would make it even easier for folks to adhere to our landing page guidance). Several examples of usage for this component can be seen in this Sketch here. Here is the component itself, consisiting of ...

  1. Relevant icon
  2. Toggle header
  3. Expandable content
  4. (Optional) Right-aligned quick action in the toggle header image
andrew-ronaldson commented 1 year ago

Thanks for this Mary. I see this as a variant but I'll look more closely at your Sketch file. Are the newly added icons just a visual feature or are they clickable? Saw the blue and brain went to a link.

maryshak1996 commented 1 year ago

@andrew-ronaldson They aren't clickable, but rather a stylistic decision to add some visual interest since this pattern will be used on ConsoleDot to show key features and use cases of a service (so we want to add some visual weight there)

andrew-ronaldson commented 10 months ago

@mcoker any thoughts on this addition to the component? Seems doable as an optional feature.

mcoker commented 10 months ago

I can't see the sketch file, but the screenshot looks like an expandable data-list and table, minus the blue border on the left. That border used to be on tables/data-lists, but it was removed.

Adding an icon would be really straight forward, it could be as simple as a prop on an <AccordionItem />, and we just add a new element to support it for spacing/alignment.

Adding additional actions is a bit of a bigger ask since in the accordion, all of the styling on the toggle is on a <button> that serves as the toggle. The actions would need to go beside the toggle, but the toggle should still have some styles on interaction, even when interacting with the adjacent actions, similar to a menu item with actions.

andrew-ronaldson commented 10 months ago

Correct me if I'm wrong @maryshak1996 but I think this seems like a prop that adds a decorator which is separate from any actions so it would just follow the accordion button. Maybe this would need a tooltip to identify the icon as a specific service?

maryshak1996 commented 10 months ago

hey yes that's correct @andrew-ronaldson :) it's just a decorator icon! I don't even think it would need a tooltip since the text next to it would provide that context

mcoker commented 10 months ago

@andrew-ronaldson @maryshak1996 ah - just an icon like this? https://codesandbox.io/s/naughty-nova-d8tgl7?file=/index.html

maryshak1996 commented 10 months ago

@mcoker yup exactly! If it was possible to choose which side (left or right) the expandable icon could be located on the accordion toggle that would be great, but definitely not a hill I'm going to die on! When the accordion is at full-width, it feels like the expandable toggle is pretty far away from the title it's expanding is all.

mcoker commented 10 months ago

@maryshak1996 cool! @andrew-ronaldson both of those enhancements should be pretty straight forward.

andrew-ronaldson commented 9 months ago

@lboehling @blfetche do we want to get this in the penta work?