search

Frontify / fondue

Design System of Frontify
https://fondue-components.frontify.com/
20 stars 4 forks source link

Popper: tw-fit #1474

Closed getflourish closed 1 year ago

getflourish commented 1 year ago

I have a use case for Popper where I need to size the Reference element to take up the available space (width: 100%).

Unfortunately, that element is wrapped in a div with tw-fit which takes over control and changes the intended layout, also restricting any change.

I wonder if that class is necessary and if yes, if there might be a prop like in other components (fit, hug, etc.) to provide control over that.

https://github.com/Frontify/fondue/blob/c4925163b561eb4746c6b57cad5cff4204d43685/src/components/Popper/Popper.tsx#LL77C19-L77C20

imoutaharik commented 1 year ago

Thanks for the feedback @getflourish, I fixed it here but would probably create a separate PR for it so it can get released way sooner.

getflourish commented 1 year ago

@imoutaharik Thanks for addressing this.

I’m wondering wether we could get rid of any kind of wrapping div and instead use a Fragment? That way, there would be no interference with the DOM hierarchy and any kinds of attributes passed as children would remain intact?

So instead of

<Popper.Reference>
  <div id={id}>{child}</div>
</Popper.Reference>

This:

<Popper.Reference>
  <React.Fragment id={id}>{child}</React.Fragment>
</Popper.Reference>

https://github.com/Frontify/fondue/pull/1477/commits/9decc9337011baa942329a7feb99abfcd24aacdb