Negative spacing values

[tamlyn]

Is there a way to specify negative spacing values?

Assuming I have my theme spacing set up with t-shirt sizes, I'd love to be able to do something like

<Box marginVertical="m" marginHorizontal="-m"> ... </Box>

If it's not currently possible, is it something you would be open to PRs for?

[gyllenfrans]

You could add negative spacing values manually like so

const spacing = {
 "-m": -8,
  "-sm": -4,
  sm: 4,
  m: 8
}

but it's not ideal for a few reasons (you will probably enable padding to be negative, unwanted mirroring/duplication of tokens, semantics, etc).

As for me, I added style prop bleed that flips the sign of my space token and applies it to margin.

import {
  createBox,
  createRestyleComponent,
  createRestyleFunction,
  boxRestyleFunctions,
  ResponsiveValue,
} from "@shopify/restyle";
import { Theme } from "../../theme.config";

type BleedTransform = { value: keyof Theme["spacing"]; theme: Theme };

const SHORTHANDS = ["", "Horizontal", "Vertical"] as const;

const bleedRestyleFunctions = SHORTHANDS.map((shorthand) =>
  createRestyleFunction({
    property: ("bleed" + shorthand) as `bleed${typeof shorthand}`,
    styleProperty: ("margin" + shorthand) as `margin${typeof shorthand}`,
    transform: ({ value, theme }: BleedTransform) => -theme.spacing[value],
  })
);

type BleedProps = {
  [key in typeof bleedRestyleFunctions[number]["property"]]?: ResponsiveValue<
    BleedTransform["value"],
    Theme
  >;
};

const BaseBox = createBox<Theme>();

const restyleFns = [
  // Default
  ...boxRestyleFunctions,
  // Extensions
  ...bleedRestyleFunctions,
];

export interface BoxProps
  extends React.ComponentProps<typeof BaseBox>,
    BleedProps {}

export const Box = createRestyleComponent<BoxProps, Theme>(restyleFns, BaseBox);

Edit: While it's probably the correct way of dealing with negative margin, I realise it doesn't provide an answer to your exact question.

If you want the syntax marginHorizontal="-m" you can probably achieve it by overriding like so

type MarginTransform = {
  value: keyof Theme["spacing"] | `-${keyof Theme["spacing"]}`;
  theme: Theme;
};

const marginRestyleFn = createRestyleFunction({
  property: "margin",
  transform: ({ value, theme }: MarginTransform) => {
    if (value[0] === "-") {
      return -theme.spacing[value as keyof Theme["spacing"]];
    }
    return theme.spacing[value as keyof Theme["spacing"]];
  },
});

[fortmarek]

Thanks for the examples!

As you mention, the negative value could sometimes lead to undesired behaviour. We lean to explicitness when possible, so I'd rather not implement this in restyle itself (but definitely go for it and add it to your repo!)