Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Core] Logical side placements

See original GitHub issue

I see that alignment has first class support for RTL: https://github.com/floating-ui/floating-ui/blob/a8de472098fdae2e7b45353402f56ae249a9d906/packages/core/src/computeCoordsFromPlacement.ts#L38-L45

Should this also be done for the side ? i.e. left becomes right and vice versa. I can’t speak for all users of the library but we are currently switching the side placement for rtl handling always. Is this a valid scenario for floating ui ?

Issue Analytics

State:
Created 2 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

3reactions

atomikscommented, Mar 3, 2022

Decided to leave side physical for these reasons here: https://github.com/floating-ui/floating-ui/discussions/1549

I also think physical sides are much easier for styling arrows too because you need to know the physical side for the static offset; something like inline-end does not provide that info.

Which means this could be an external function that maps to a placement, like this:

computePosition(a, b, {
  // infers dir from body/html, or you could pass rtl explicitly
  placement: logical({
    side: 'inline-end',
    align: 'start',
  }), // => 'right-start' for LTR, 'left-start' for RTL
});

We could technically export this

1reaction

atomikscommented, Apr 2, 2022

Reopening because this is kinda bothering me leading up to v1 given it’s a breaking change. 😅 I feel like it should be supported by default with space-separated syntax (like CSS). I hope it’s not too costly to support by default though. I’ll investigate, but at minimum I think it should be supported via an export as mentioned, though built-in would be better.

e.g. placement: 'inline-start end'

Note: I think physical sides should still be supported as a syntax too. The main breaking change would be using space as a separator rather than -

You would be able to mix and match physical/logical sides and alignments

'top right' // all physical
'top end' // like the current API
'block-start end' // all logical

Top Results From Across the Web

Placement - Orchard Core Documentation

Placement information consists of: place (Optional): The actual location of the shape in the rendered zone. A value of - will hide the...

What's the difference between an edge router vs. core router?

core router is the placement of the routers within an enterprise network. A traditional LAN architecture has three distinct and logical tiers: core, ......

Coordinated Entry Core Elements | HUD Exchange

Introduction—Provides an overview of coordinated entry concepts and establishes coordinated entry as a framework for achieving CoC systems change.

Shared Logic in Example Design - 4.3 English - Xilinx

Select Include Shared Logic in example design if: There should be at least one MIPI ... This is the second MIPI D-PHY core...

Modifiers - Popper

Popper's modifiers lifecycle is divided into 3 core phases: read , main , and write . This is done to optimize the library...