primer/brand

[Feature request] Add "boxed" variant to the Testimonial

seangolob opened this issue · 4 comments

seangolob commented

Hi PB Team!

I have noticed a few pages that have testimonials that have a boxed wrapper around them:

Single Testimonial:

https://github.com/features/actions
https://github.com/features/issues

Image
Image

Two Testimonials:

https://github.com/features/codespaces
https://github.com/features/code-search

Image
Image

Can we consider adding a "boxed" variant to the Testimonial component to support these use cases?

The Single Testimonial page examples have a somewhat transparent background with a blur which should probably exist at the implementation level. However, it would be nice to have the spacing defined in the PB library to have future testimonials share the same spacing.

CC @simmonsjenna CC @jesussandreas

Thank you for your help!

rezrah commented

Thanks for opening this feature request @seangolo ❤

A couple of options here:

  1. Add a Storybook example for your team to reference as the design can be achieved using the Box component today
  2. Add a variant prop to the Testimonial component to add first-class support

My preference would be the latter (option 2) assuming Site Design plan to continue using this design approach in future.

There's a lot of detail here that would be difficult to expect users to implement on their own each time. E.g. responsive paddings, responsive filter effects, etc.

I think it's reasonable to add first-class support to Testimonial for this using the variant prop.

E.g. of new API

type TesimonialProps {
  variant?: 'default' | 'minimal' | 'frost'
}

Like the Card component, 'minimal' would be the correspond to the current version of the Testimonial and be made default to avoid a breaking change. 'default' value would be inclusive of a background color and padded, and frost being the same with a background filter applied.

Final API will likely differ, but I'll bring this to other maintainers and provide an update here when that's available.

  • ❤️1
  • 👀1
seangolob commented

@rezrah Thank you for your feedback! ❤

Depending on the priority of this issue for the SWP team, we may build this internally and potentially port over to the PB API if/when it becomes available.

For full transparency, this feature request is to support the flex template. In an ideal world, the flex template leverages the built in features from PB and has as few bespoke features built as possible. This should make the template easier to adopt and should make the communication around feature support more clear.

rezrah commented

@seangolob - thanks for your patience. Sorry for the delay in responding to you.

Update:

  • Testimonial will support the 'boxed' version as an additional variant alongside minimal
  • We'll separately ship a GlassEffect component that handles the filter visual effect.
  • Timeline is ~2 weeks for building and shipping these, so you're welcome to find a workaround if you need these sooner.
rezrah commented

Update:

Feel free to reopen if there's anything that was missed.

  • ❤️1