AlaskaAirlines / auro-accordion

Custom element that allows users to toggle the display for sections of content
https://auro.alaskaair.com/components/auro/accordion
Apache License 2.0
1 stars 1 forks source link

Create showOverflow to allow z-indexed content to display outside of the component #40

Closed aesthetiques closed 2 years ago

aesthetiques commented 2 years ago

create attr/prop to show overflow from the details of the accordion, and override any other defined overflow terms on a given accordion set noanimation to reflect to prevent extra steps for consumers using Preact/Svelte/etc

Fixes: #39

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

Type of change:

Please delete options that are not relevant.

Checklist:

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!
-- Auro Design System Team

aesthetiques commented 2 years ago

https://user-images.githubusercontent.com/25255197/142685297-f1cfa636-af72-4f5c-8453-11e14571f079.mov

https://user-images.githubusercontent.com/25255197/142685315-4efb3fc7-44e8-432f-85f2-c89ad46e5c4f.mov

blackfalcon commented 2 years ago

I want to take this opportunity to bring back the solution I had presented using CSS Parts to address this fix. The scenario we find ourselves in is that what we thought was the solution is not really the solution needed.

I reviewed the issue with @aesthetiques and it ends at the point that the styling for the noanimation attribute we added is not exactly the solution we needed. All that is needed is a trigger to update overflow to visible. There is no need for a change in the animation timing.

Ok, so we can make that update, but then the noanimation attribute is meaningless. So where do we go from here?

There is an argument to be had that this feature was asked for by a single team and they have the only use case. So we could just update the CSS and the attribute name. Done. But I want to think about this in a larger context.

Why did we have to make this an attribute in the first place? if this is truly a one-off, why is it not ok to have a CSS Parts API and put the responsibility of the individual use case onto the consumer? After all, that is what CSS Parts is for.

I see no difference in how I proposed to address this one-off situation or in how Shoelace promotes the same flexibility with allowing users to edit the body of their dialog.

AuroDesignSystem commented 2 years ago

:tada: This PR is included in version 1.5.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: