Following up on Issue https://github.com/petalframework/petal_components/issues/229, here's what I came up with. This takes advantage of the new naming convention to allow for new styles that are intended for the last item only. As described in the issue, the main use case I had in mind when wanting this was rounding the bottom of the accordion to allow for a fully border-radius'd appearance instead of rounded on top and flat on bottom. The problem is that sometimes the bottom of the table is the last accordion button itself and sometimes it's the last accordion item's content box. (Guessing this is why the accordion was made flat on the bottom to begin with)
This PR doesn't explicitly add styles for rounding the table by default, but it adds logic to apply an always on class: pc-accordion-item--last (let me know if you want to make this a different name, I'm slightly concerned about this conflicting with the old name for what is now all-except-last) as well as a conditional class: pc-accordion-item--last--closed, which is only applied when the last accordion item is closed.
This can be used in conjunction with pc-accordion-item__content-container--last to style the bottom of the table to be rounded via style overrides and some rounded-b-lg on them both. I tried my best to follow naming conventions here, and apologies if this is a bit rough around the edges. There's also a small range of frames where this does look a bit janky if you're using the smooth expand from Alpine. I don't think it's too bad, but any ideas on how to get around this would be great.
nhobes
commented
1 year ago
Following up on Issue https://github.com/petalframework/petal_components/issues/229, here's what I came up with. This takes advantage of the new naming convention to allow for new styles that are intended for the last item only. As described in the issue, the main use case I had in mind when wanting this was rounding the bottom of the accordion to allow for a fully border-radius'd appearance instead of rounded on top and flat on bottom. The problem is that sometimes the bottom of the table is the last accordion button itself and sometimes it's the last accordion item's content box. (Guessing this is why the accordion was made flat on the bottom to begin with)
This PR doesn't explicitly add styles for rounding the table by default, but it adds logic to apply an always on class:
pc-accordion-item--last(let me know if you want to make this a different name, I'm slightly concerned about this conflicting with the old name for what is nowall-except-last) as well as a conditional class:pc-accordion-item--last--closed, which is only applied when the last accordion item is closed.This can be used in conjunction with
pc-accordion-item__content-container--lastto style the bottom of the table to be rounded via style overrides and somerounded-b-lgon them both. I tried my best to follow naming conventions here, and apologies if this is a bit rough around the edges. There's also a small range of frames where this does look a bit janky if you're using the smooth expand from Alpine. I don't think it's too bad, but any ideas on how to get around this would be great.