Default margins

[duncanbeevers]

Margins seem to be behaving inconsistently.

Let me know if I'm misunderstanding something here, but it seems like the behavior of these two examples should be equivalent.

Example 1 – Correct margins

function App() {
  const [isToggled, setToggle] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setToggle(!isToggled);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [setToggle, isToggled]);

  if (isToggled) {
    return <Box margin={0}>ON</Box>;
  } else {
    return <Box margin={1}>OFF</Box>;
  }
}

Example 2 – Incorrect margins

  if (isToggled) {
    return <Box>ON</Box>;
  } else {
    return <Box margin={1}>OFF</Box>;
  }

Is this expected behavior? Am I holding it wrong?

[vadimdemedes]

Yep, output in your demos is correct. Keep in mind that Ink operates in the terminal, where there are no pixels. Vertical and horizontal margins will never look the same, because Ink uses a space for horizontal margins and an empty line for vertical margins.

[vadimdemedes]

You can reproduce the same output via console.log('\n ON').

[sindresorhus]

@vadimdemedes We should at least document that. I think horizontal margin needs to be 3 times vertical margin to look even (at least that's what I'm using in boxen).

[vadimdemedes]

We should at least document that

Agree.

I think horizontal margin needs to be 3 times vertical margin to look even (at least that's what I'm using in boxen).

Hm, how would you have 1 space margin in that case? E.g.

<Box>
	<Box marginRight={1}>X</Box>
	Y
</Box>

=> X Y

[sindresorhus]

Hm, how would you have 1 space margin in that case? E.g.

You wouldn't. One vertical space is the same as three horizontal spaces.

[vadimdemedes]

But if there was no ability to create 1 or 2 space horizontal margins, you wouldn't be able to create a layout like https://twitter.com/vadimdemedes/status/1103345757434736641 without using {' '}, which is kind of the whole point of having margins in Ink.

[sindresorhus]

I'm not saying that Ink should handle this (It shouldn't). Just sharing my experience from creating boxen.

[duncanbeevers]

My concern here isn't about the specific size. Rather, when an explicit 0 margin is specified output is rendered flush with the terminal edge. When no margin is specified, the output is first rendered flush with the terminal edge, then when bumped away from the edge with 1 margin, and then remains fixed at the 1 margin position when rendering switches back to the unspecified margin mode.

[vadimdemedes]

Oooh I didn't get that. Will look into it, @duncanbeevers!

[vadimdemedes]

This seems to be the same issue as #228, where Ink didn't unset props properly. Will be fixed in the next release.

[vadimdemedes]

Fixed in 2.5.0.