Box' gap not removed on wrapping

When using Box with gap and wrap and justify="center" the StyledBoxGap is not removed on wrapping.

Expected Behavior

Gaps at wrapped lines have to be removed.

Actual Behavior

Gaps are not removed and appear as a left-margin in the next line and sometimes as a right-margin of the previous line (depending on the width of the content and the width of the window).

URL, screen shot, or Codepen exhibiting the issue

With this codesandbox all the problems can be reproduced: https://codesandbox.io/s/box-gap-wrap-issue-e9xgyl

Here also some screenshots to give you an idea:

With no needless gap because no wrapping is necessary:

With needless gap placed right-side next to box “Fifth” and box “Six” is centered as it should be:

With:

• needless gap placed left-side next to box “Sixth” and boxes “Third” to “Fifth” are centered as it should be:
• needless gap placed left-side next to box “First” because for sample 1 direction="row-reverse" is used.

Steps to Reproduce

Load the sandbox and resize the window the reproduce the problem.

Your Environment

• Grommet version: 2.25.1
• Browser Name and version: FireFox 107.0
• Operating System and version (desktop or mobile): Ubuntu 22.04

[ericsoderberghp]

I understand the intent of the issue. Unfortunately, the current implementation of gap does not work with wrap, as is documented at https://v2.grommet.io/box#gap. A better approach would be to use https://developer.mozilla.org/en-US/docs/Web/CSS/gap, which came into being last year. It’s not as easy though as just changing the current Box implementation to use it as the CSS property applies to DOM elements while the current grommet Box approach applies to react children of the Box. When a Fragment is used for a child, react will expand the Fragment’s children when rendering in the DOM. So, it would not be backwards compatible to do a straight change. Instead, I think we need to find a way to let the caller opt-in to the new CSS method. On suggestion would be use the options property of Grommet: https://v2.grommet.io/grommet#options to support something like options={{ box: { gap: 'css' } }}.

[stephanpelikan]

Awesome! I’m looking forward to the next release 😃