[labs] Introduce <Box>and <Flex> components (#7595)

Author: ggdouglas

packages/demo-app/package.json

@@ -20,6 +20,7 @@
         "@blueprintjs/core": "workspace:^",
         "@blueprintjs/datetime": "workspace:^",
         "@blueprintjs/icons": "workspace:^",
+        "@blueprintjs/labs": "workspace:^",
         "@blueprintjs/select": "workspace:^",
         "@blueprintjs/table": "workspace:^",
         "classnames": "^2.3.1",

packages/demo-app/src/examples/BoxExample.tsx

@@ -0,0 +1,28 @@
+/* !
+ * (c) Copyright 2025 Palantir Technologies Inc. All rights reserved.
+ */
+
+import { H1 } from "@blueprintjs/core";
+import { Box } from "@blueprintjs/labs";
+
+import { ExampleCard } from "./ExampleCard";
+
+export function BoxExample() {
+    return (
+        <ExampleCard label="Box">
+            <Box
+                asChild={true}
+                className="box-example"
+                display="flex"
+                justifyContent="center"
+                marginBottom={0}
+                paddingX={5}
+                paddingY={2}
+            >
+                <H1>BOX</H1>
+            </Box>
+        </ExampleCard>
+    );
+}
+
+BoxExample.displayName = "DemoApp.BoxExample";

packages/demo-app/src/examples/ExampleCard.tsx

@@ -17,6 +17,7 @@
 import classNames from "classnames";
 
 import { Card, H5 } from "@blueprintjs/core";
+import { Box, Flex } from "@blueprintjs/labs";
 
 export interface ExampleCardProps {
     children: React.ReactNode;
@@ -38,9 +39,15 @@ export const ExampleCard: React.FC<ExampleCardProps> = ({
     return (
         <div className="example-card-container">
             <H5>{label}</H5>
-            {subLabel && <H5>{subLabel}</H5>}
+            {subLabel && (
+                <Box asChild={true} marginYEnd={2}>
+                    <p>{subLabel}</p>
+                </Box>
+            )}
             <Card className={classNames("example-card", { horizontal })} elevation={0} style={{ width }}>
-                {children}
+                <Flex flexDirection={horizontal ? "row" : "column"} gap={2}>
+                    {children}
+                </Flex>
             </Card>
         </div>
     );

packages/demo-app/src/examples/Examples.tsx

@@ -18,6 +18,7 @@ import classNames from "classnames";
 
 import { Classes } from "@blueprintjs/core";
 
+import { BoxExample } from "./BoxExample";
 import { BreadcrumbExample } from "./BreadcrumbExample";
 import { ButtonExample } from "./ButtonExample";
 import { ButtonGroupExample } from "./ButtonGroupExample";
@@ -62,6 +63,7 @@ const ExamplesContainer: React.FC<{ isDark?: boolean }> = ({ isDark = false }) =
     const className = isDark ? Classes.DARK : undefined;
     return (
         <div className={classNames("examples-container", className)}>
+            <BoxExample />
             <BreadcrumbExample />
             <ButtonExample />
             <ButtonGroupExample />

packages/demo-app/src/index.scss

@@ -1,6 +1,7 @@
 @import "@blueprintjs/core/lib/css/blueprint.css";
 @import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
 @import "@blueprintjs/table/lib/css/table.css";
+@import "@blueprintjs/labs/lib/css/blueprint-labs.css";
 
 @import "./styles/examples";
 

packages/demo-app/src/styles/_examples.scss

@@ -46,23 +46,6 @@ $dark-intent-danger-text: $red5;
 
 .example-card {
   background-color: $light-gray4;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $pt-spacing * 2;
-
-  > :not(:last-child) {
-    margin-bottom: $pt-spacing * 2;
-  }
-
-  &.horizontal {
-    flex-direction: row;
-    justify-content: center;
-
-    > :not(:last-child) {
-      margin-bottom: 0;
-      margin-right: $pt-spacing * 2;
-    }
-  }
 }
 
 .tag-container {
@@ -146,3 +129,8 @@ $dark-intent-danger-text: $red5;
 .#{$ns}-toast {
   margin: ($pt-spacing * 2) 0;
 }
+
+.box-example {
+  background-color: $gray1;
+  color: $white;
+}

packages/docs-app/src/examples/labs-examples/box/BoxAsChild.tsx

@@ -0,0 +1,10 @@
+import { H4 } from "@blueprintjs/core";
+import { Box } from "@blueprintjs/labs";
+
+export default function BoxAsChild() {
+    return (
+        <Box asChild={true} marginYEnd={0}>
+            <H4>This heading has no margin.</H4>
+        </Box>
+    );
+}

packages/docs-app/src/examples/labs-examples/box/BoxAsChild.tsx.preview

@@ -0,0 +1,3 @@
+<Box asChild={true} marginYEnd={0}>
+    <H4>This heading has no margin.</H4>
+</Box>

packages/docs-app/src/examples/labs-examples/box/BoxBasic.tsx

@@ -0,0 +1,18 @@
+import { Colors } from "@blueprintjs/core";
+import { Box } from "@blueprintjs/labs";
+
+const boxStyle: React.CSSProperties = {
+    backgroundColor: Colors.BLUE3 + "1A",
+    borderColor: Colors.BLUE3,
+    borderRadius: 2,
+    borderStyle: "dashed",
+    borderWidth: 1,
+};
+
+export default function BoxBasic() {
+    return (
+        <Box marginX={3} padding={5} style={boxStyle}>
+            Content
+        </Box>
+    );
+}

packages/docs-app/src/examples/labs-examples/box/BoxBasic.tsx.preview

@@ -0,0 +1,3 @@
+<Box marginX={3} padding={5}>
+    Content
+</Box>