search

skeletonlabs / floating-ui-svelte

A Floating UI wrapper for Svelte
https://floating-ui-svelte.vercel.app
MIT License
155 stars 7 forks source link

elemArrow style inheritance from elemFloating #87

Closed cycle4passion closed 4 months ago

cycle4passion commented 4 months ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

Styling of the elemArrow is usually going to match styling of the elemFloating element.

At first glance, you think it's not a big deal to apply a matching background-color to elemArrow. Things get more complicated once you wish to add a border, dropshadow, or outline to both the elemFloating and elemArrow.

I would propose that if there aren't any classes assigned to floatingArrow then it would inherit/copy z-index, background-color, border, outline, and dropshadow css properties from elemFloating. If any user defined classes are added, let them assume full control and do not apply any of these defaults.

I had done some of this work previously when hacking around with a previous V2 implementation. Lots has changed now that elemArrow is and SVG. Border and outline don't exist on SVGs , so would add via stroke and strokeWidth. Boxshadows can be added with filter.

Considerations of implementation: I realize there is a desire for parity with Floating-UI-Rect and I don't think they handle this, but I think it is important enough, and useful enough it implement independently and even offer it back to that package.

Provide relevant links or additional information.

No response

endigo9740 commented 4 months ago

@cycle4passion

Floating UI React supports this, and we've already provided parity for this. Keep an eye out for our next release which flushes out the documentation. The arrow is an SVG, so do you don't use background color, you use a fill color. There's both a dedicated fill prop, as well as a general class attribute support.

Quick correction: I misunderstood the original request. No, we're not interested in adding features beyond what Floating UI React provides. You're welcome to expand in a personal fork, but this goes against one of our primary goals - which is for this package to become an official part of Floating UI. The further we stray from that, the harder that discussion will be. I'd suggest taking your feature requests upstream instead.