Is your feature request related to a problem? Please describe.
I am unable to left and right justify content in the trigger slot.
Describe the solution you'd like
I would like to be able to specify an addition option like justifyRight but for having the div under the triggerContentWrapper fill the width of its parent.
`
// This would fill the wrapper
`
Describe alternatives you've considered
We might be able to inline-block our content and calculate the width to force the div bigger but that wouldn't be ideal
Additional context
We are trying to have the content inline with the chevron on both the left and the right
This came up for a design that has an accordion like this (red and blue boxes are my annotations), where there's additional content at the end of the slot:
My team implemented this on one of our projects, and now Corigan's team needs something similar. Because of how the component's slots are structured, it's hard to make content fill the entire slot like this. When we implemented it, I had to use absolute positioning on the auro-badge since a flex container doesn't work.
With that change, instead of the slotted content only taking up the red box in the above screenshot, it could take up the blue box. Then the design could be implemented easily using flexbox.
This was a little hard to put into words -- happy to jump onto a call to explain if necessary.
The scope of this issue is to address the box model for the trigger slot, as well as add a quick demo for inserting additional content into the slot that can be managed by the user of the element.
Is your feature request related to a problem? Please describe.
I am unable to left and right justify content in the trigger slot.
Describe the solution you'd like
I would like to be able to specify an addition option like
justifyRightbut for having the div under thetriggerContentWrapperfill the width of its parent.`
`
Describe alternatives you've considered
We might be able to inline-block our content and calculate the width to force the div bigger but that wouldn't be ideal
Additional context
We are trying to have the content inline with the chevron on both the left and the right
Is there a design spec you are going for that the current accordion does not allow for?
This came up for a design that has an accordion like this (red and blue boxes are my annotations), where there's additional content at the end of the slot:
My team implemented this on one of our projects, and now Corigan's team needs something similar. Because of how the component's slots are structured, it's hard to make content fill the entire slot like this. When we implemented it, I had to use absolute positioning on the auro-badge since a flex container doesn't work.
I don't think this needs to be a flag. In my mind a solution would be always applying
flex: 1to this div: https://github.com/AlaskaAirlines/auro-accordion/blob/e0f237f5cc4ff3354c037b62fdc7d213487f774f/src/auro-accordion.js#L145-L149With that change, instead of the slotted content only taking up the red box in the above screenshot, it could take up the blue box. Then the design could be implemented easily using flexbox.
This was a little hard to put into words -- happy to jump onto a call to explain if necessary.
That makes perfect sense. I would argue that this can be addressed with a patch release.
The scope of this issue is to address the box model for the trigger slot, as well as add a quick demo for inserting additional content into the slot that can be managed by the user of the element.