Merge pull request #78 from buildo/bleed

gabro · web-flow · commit 867397deddbc · 2022-03-11T16:13:35.000+01:00
diff --git a/src/Layout/createBleed.tsx b/src/Layout/createBleed.tsx
@@ -0,0 +1,58 @@
+import { BoxProps, BoxType, Children } from "..";
+import { bentoSprinkles } from "../internal";
+
+export function createBleed<AtomsFn extends typeof bentoSprinkles>(Box: BoxType<AtomsFn>) {
+  type ResponsiveSpace = BoxProps<AtomsFn>["gap"];
+
+  type BleedProps = {
+    children: Children;
+    space?: ResponsiveSpace;
+    spaceX?: ResponsiveSpace;
+    spaceY?: ResponsiveSpace;
+    spaceRight?: ResponsiveSpace;
+    spaceLeft?: ResponsiveSpace;
+    spaceTop?: ResponsiveSpace;
+    spaceBottom?: ResponsiveSpace;
+  };
+
+  type ResponsiveNegativeSpace = BoxProps<AtomsFn>["margin"];
+
+  function negateSpace(space: ResponsiveSpace | undefined): ResponsiveNegativeSpace | undefined {
+    if (typeof space === "number") {
+      return `negative${space}`;
+    } else if (!!space) {
+      return {
+        desktop: space.desktop ? `negative${space.desktop}` : undefined,
+        tablet: space.tablet ? `negative${space.tablet}` : undefined,
+        mobile: space.mobile ? `negative${space.mobile}` : undefined,
+      };
+    } else {
+      return undefined;
+    }
+  }
+
+  return function Bleed({
+    space,
+    spaceX,
+    spaceY,
+    spaceRight,
+    spaceLeft,
+    spaceTop,
+    spaceBottom,
+    children,
+  }: BleedProps) {
+    return (
+      <Box
+        margin={negateSpace(space)}
+        marginX={negateSpace(spaceX)}
+        marginY={negateSpace(spaceY)}
+        marginRight={negateSpace(spaceRight)}
+        marginLeft={negateSpace(spaceLeft)}
+        marginTop={negateSpace(spaceTop)}
+        marginBottom={negateSpace(spaceBottom)}
+      >
+        {children}
+      </Box>
+    );
+  };
+}
diff --git a/src/Layout/createLayoutComponents.tsx b/src/Layout/createLayoutComponents.tsx
@@ -4,6 +4,7 @@ import { createInline } from "./createInline";
 import { createStack } from "./createStack";
 import { createColumns } from "./createColumns";
 import { createInset } from "./createInset";
+import { createBleed } from "./createBleed";
 
 export function createLayoutComponents<AtomsFn extends typeof bentoSprinkles>(
   Box: BoxType<AtomsFn>
@@ -12,12 +13,14 @@ export function createLayoutComponents<AtomsFn extends typeof bentoSprinkles>(
   const Inset = createInset(Box);
   const Stack = createStack(Box);
   const { Column, Columns } = createColumns(Box);
+  const Bleed = createBleed(Box);
 
   return {
     Inline,
     Stack,
     Inset,
     Column,
     Columns,
+    Bleed,
   };
 }
diff --git a/src/Toast/createToast.tsx b/src/Toast/createToast.tsx
@@ -6,13 +6,11 @@ import { createToastContainer } from "./createToastContainer";
 import { createToastProvider } from "./createToastProvider";
 
 export type ToastConfig = {
-  paddingX?: {
-    withAction: BentoSprinkles["paddingX"];
-    withoutAction: BentoSprinkles["paddingX"];
-  };
+  paddingX?: BentoSprinkles["paddingX"];
   paddingY?: BentoSprinkles["paddingY"];
   radius?: BentoSprinkles["borderRadius"];
   messageSize?: ComponentProps<typeof Body>["size"];
+  mediumButtonPaddingX: BentoSprinkles["paddingY"];
 };
 
 export type ToastProps = {
@@ -24,16 +22,20 @@ export type ToastProps = {
 export function createToast(
   Button: FunctionComponent<ButtonProps>,
   {
-    paddingX = {
-      withAction: 0,
-      withoutAction: 16,
-    },
+    paddingX = 16,
     paddingY = 16,
     radius = 8,
     messageSize = "medium",
+    mediumButtonPaddingX,
   }: ToastConfig
 ) {
-  const Toast = createToastInternal(Button, { paddingX, paddingY, radius, messageSize });
+  const Toast = createToastInternal(Button, {
+    paddingX,
+    paddingY,
+    mediumButtonPaddingX,
+    radius,
+    messageSize,
+  });
   const ToastContainer = createToastContainer(Toast);
   const ToastProvider = createToastProvider(ToastContainer);
 
diff --git a/src/Toast/createToastInternal.tsx b/src/Toast/createToastInternal.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import { Box, Column, Columns } from "../internal";
+import { Box, Column, Columns, Bleed } from "../internal";
 import { Body, ButtonProps, ToastProps } from "..";
 import { toastRecipe } from "./Toast.css";
 import { ToastConfig } from "./createToast";
@@ -20,16 +20,17 @@ export function createToastInternal(
         className={toastRecipe({ kind })}
         borderRadius={config.radius}
         paddingY={config.paddingY}
-        paddingLeft={config.paddingX.withoutAction}
-        paddingRight={!!action ? config.paddingX.withAction : config.paddingX.withoutAction}
+        paddingX={config.paddingX}
       >
         <Columns space={16} alignY="center">
           <Body size={config.messageSize} color={kind === "secondary" ? "default" : kind}>
             {message}
           </Body>
           {action && (
             <Column width="content">
-              <Button size="medium" kind="transparent" hierarchy="secondary" {...action} />
+              <Bleed spaceRight={config.mediumButtonPaddingX}>
+                <Button size="medium" kind="transparent" hierarchy="secondary" {...action} />
+              </Bleed>
             </Column>
           )}
         </Columns>
diff --git a/src/internal/index.ts b/src/internal/index.ts
@@ -6,4 +6,4 @@ import { Box } from "./Box/Box";
 export { bentoSprinkles } from "./sprinkles.css";
 export type { BentoSprinkles } from "./sprinkles.css";
 export * from "./Box/Box";
-export const { Column, Columns, Inline, Inset, Stack } = createLayoutComponents(Box);
+export const { Column, Columns, Inline, Inset, Stack, Bleed } = createLayoutComponents(Box);
diff --git a/src/sprinkles.ts b/src/sprinkles.ts
@@ -38,6 +38,9 @@ export function createDefineBentoSprinklesFn() {
         padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
         paddingX: ["paddingLeft", "paddingRight"],
         paddingY: ["paddingTop", "paddingBottom"],
+        margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
+        marginX: ["marginLeft", "marginRight"],
+        marginY: ["marginTop", "marginBottom"],
       },
     });
 
diff --git a/src/util/atoms.ts b/src/util/atoms.ts
@@ -73,6 +73,10 @@ export const responsiveProperties = {
   bottom: vars.space,
   left: vars.space,
   right: vars.space,
+  marginTop: vars.negativeSpace,
+  marginBottom: vars.negativeSpace,
+  marginLeft: vars.negativeSpace,
+  marginRight: vars.negativeSpace,
 } as const;
 
 const color = {
diff --git a/src/vars.css.ts b/src/vars.css.ts
@@ -56,6 +56,18 @@ export const vars = createThemeContract({
     40: null,
     80: null,
   },
+  negativeSpace: {
+    "0": null,
+    // NOTE(gabro): ideally we would use "-4" and so on here, but we can't due to
+    // https://github.com/Swatinem/rollup-plugin-dts/issues/201
+    negative4: null,
+    negative8: null,
+    negative16: null,
+    negative24: null,
+    negative32: null,
+    negative40: null,
+    negative80: null,
+  },
   radius: {
     4: null,
     8: null,
diff --git a/stories/Layout/Bleed.stories.tsx b/stories/Layout/Bleed.stories.tsx
@@ -0,0 +1,43 @@
+import { JSXElementConstructor } from "react";
+import { Bleed, Box, Inset, Placeholder } from "..";
+import { createComponentStories, spaceArgType } from "../util";
+
+const { defaultExport, createStory } = createComponentStories({
+  component: Bleed,
+  args: {
+    children: <Placeholder height={100} width={100} />,
+  },
+  argTypes: {
+    space: spaceArgType,
+    spaceX: spaceArgType,
+    spaceY: spaceArgType,
+  },
+  decorators: [
+    (Story: JSXElementConstructor<unknown>) => (
+      <Box background="softViolet" style={{ width: "fit-content" }}>
+        <Inset space={24}>
+          <Story />
+        </Inset>
+      </Box>
+    ),
+  ],
+});
+
+export default defaultExport;
+
+export const allAxis = createStory({
+  space: 40,
+});
+
+export const horizontal = createStory({
+  spaceX: 40,
+});
+
+export const vertical = createStory({
+  spaceY: 40,
+});
+
+export const horizontalAndVertical = createStory({
+  spaceX: 40,
+  spaceY: 16,
+});
diff --git a/stories/index.tsx b/stories/index.tsx
@@ -35,7 +35,7 @@ import { sprinkles } from "./sprinkles.css";
 
 export * from "../src";
 export const Box = createBentoBox(sprinkles);
-export const { Stack, Column, Columns, Inline, Inset } = createLayoutComponents(Box);
+export const { Stack, Column, Columns, Inline, Inset, Bleed } = createLayoutComponents(Box);
 export const Tooltip = createTooltip();
 export const {
   Field,
@@ -50,7 +50,9 @@ export const { Button, ButtonLink } = createButtons();
 export const Banner = createBanner(Button, {});
 export const Actions = createActions(Button, Banner);
 export const { Form, FormSection, FormRow } = createFormLayoutComponents(Actions);
-export const { Toast, ToastProvider } = createToast(Button, {});
+export const { Toast, ToastProvider } = createToast(Button, {
+  mediumButtonPaddingX: 16,
+});
 export const BentoProvider = createBentoProvider(ToastProvider);
 export const Card = createCard<24 | 32 | 40>({});
 export const Link = createLink();
diff --git a/stories/theme.css.ts b/stories/theme.css.ts
@@ -119,6 +119,16 @@ const commonTheme = {
     "40": "40px",
     "80": "80px",
   },
+  negativeSpace: {
+    "0": "0",
+    negative4: "-4px",
+    negative8: "-8px",
+    negative16: "-16px",
+    negative24: "-24px",
+    negative32: "-32px",
+    negative40: "-40px",
+    negative80: "-80px",
+  },
   radius: {
     "4": "4px",
     "8": "8px",
