Merge branch 'main' into mikeguoynes/style/percentage-icon

.changeset/orange-falcons-shake.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/box": patch
+---
+
+Support `className` for `Box`

.nvmrc

@@ -1 +1 @@
-20.17.0
+20.18.0

apps/vscode/package.json

@@ -17,7 +17,7 @@
 	"license": "SEE LICENSE IN LICENSE.txt",
 	"keywords": ["launchpad", "launchdarkly", "design system", "design tokens"],
 	"engines": {
-		"vscode": "^1.93.1"
+		"vscode": "^1.94.0"
 	},
 	"categories": ["Other"],
 	"icon": "images/osmo.png",
@@ -41,7 +41,7 @@
 		"vscode-languageserver-textdocument": "^1.0.11"
 	},
 	"devDependencies": {
-		"@types/vscode": "^1.90.0",
+		"@types/vscode": "^1.94.0",
 		"esbuild": "0.24.0",
 		"style-dictionary": "^4.0.1"
 	}

nx.json

@@ -4,20 +4,11 @@
 		"appsDir": "apps",
 		"libsDir": "packages"
 	},
-	"tasksRunnerOptions": {
-		"default": {
-			"runner": "nx/tasks-runners/default",
-			"options": {
-				"cacheableOperations": ["build", "lint", "test", "e2e"],
-				"canTrackAnalytics": false,
-				"runtimeCacheInputs": ["node -v"],
-				"parallel": 10
-			}
-		}
-	},
+	"parallel": 10,
 	"targetDefaults": {
 		"build": {
-			"dependsOn": ["^build"]
+			"dependsOn": ["^build"],
+			"cache": true
 		}
 	},
 	"$schema": "./node_modules/nx/schemas/nx-schema.json",

package.json

@@ -74,7 +74,7 @@
 		"jsdom": "^25.0.0",
 		"lightningcss": "^1.27.0",
 		"lint-staged": "^15.2.0",
-		"nx": "^19.8.0",
+		"nx": "^20.0.0",
 		"plop": "^4.0.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
@@ -87,7 +87,7 @@
 		"vite": "^5.4.0",
 		"vitest": "^2.1.1"
 	},
-	"packageManager": "pnpm@9.11.0",
+	"packageManager": "pnpm@9.12.0",
 	"pnpm": {
 		"peerDependencyRules": {
 			"allowedVersions": {

packages/box/package.json

@@ -37,6 +37,7 @@
 		"@launchpad-ui/vars": "workspace:~",
 		"@radix-ui/react-slot": "1.1.0",
 		"@vanilla-extract/dynamic": "2.1.0",
+		"class-variance-authority": "0.7.0",
 		"rainbow-sprinkles": "0.17.3"
 	},
 	"peerDependencies": {

packages/box/src/Box.tsx

@@ -1,27 +1,21 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import type { Sprinkles } from './styles/rainbow-sprinkles.css';
 
 import { Slot } from '@radix-ui/react-slot';
+import { cx } from 'class-variance-authority';
 
 import { rainbowSprinkles } from './styles/rainbow-sprinkles.css';
 
-type BoxProps = Sprinkles & {
-	children?: ReactNode;
+interface BoxProps extends Sprinkles, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
 	asChild?: boolean;
-	'data-test-id'?: string;
-};
+}
 
-const Box = ({
-	asChild,
-	children,
-	'data-test-id': testId = asChild ? undefined : 'box',
-	...props
-}: BoxProps) => {
+const Box = ({ asChild, children, className, ...props }: BoxProps) => {
 	const Component = asChild ? Slot : 'div';
-	const { className, style, otherProps } = rainbowSprinkles(props);
+	const { className: classes, style, otherProps } = rainbowSprinkles(props);
 
 	return (
-		<Component className={className} style={style} data-test-id={testId} {...otherProps}>
+		<Component className={cx(className, classes)} style={style} {...otherProps}>
 			{children}
 		</Component>
 	);

packages/box/src/styles/rainbow-sprinkles.css.ts

@@ -45,6 +45,12 @@ const responsiveProperties = defineProperties({
 		paddingRight: vars.spacing,
 		paddingTop: vars.spacing,
 		paddingBottom: vars.spacing,
+		paddingBlock: vars.spacing,
+		paddingBlockEnd: vars.spacing,
+		paddingBlockStart: vars.spacing,
+		paddingInline: vars.spacing,
+		paddingInlineEnd: vars.spacing,
+		paddingInlineStart: vars.spacing,
 		top: vars.spacing,
 		left: vars.spacing,
 		right: vars.spacing,
@@ -55,6 +61,12 @@ const responsiveProperties = defineProperties({
 		marginLeft: vars.spacing,
 		marginRight: vars.spacing,
 		marginBottom: vars.spacing,
+		marginBlock: vars.spacing,
+		marginBlockEnd: vars.spacing,
+		marginBlockStart: vars.spacing,
+		marginInline: vars.spacing,
+		marginInlineEnd: vars.spacing,
+		marginInlineStart: vars.spacing,
 		borderRadius: vars.borderRadius,
 		borderWidth: vars.borderWidth,
 		font: typographies,

packages/box/stories/Box.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 
-import { Button } from '@launchpad-ui/button';
+import { Button } from '@launchpad-ui/components';
 
 import { Box } from '../src';
 

packages/drawer/package.json

@@ -41,7 +41,7 @@
 		"@react-aria/interactions": "3.22.3",
 		"@react-aria/overlays": "3.23.3",
 		"classix": "2.2.0",
-		"framer-motion": "11.9.0"
+		"framer-motion": "11.11.1"
 	},
 	"peerDependencies": {
 		"react": "18.3.1",

packages/modal/package.json

@@ -40,7 +40,7 @@
 		"@react-aria/interactions": "3.22.3",
 		"@react-aria/overlays": "3.23.3",
 		"classix": "2.2.0",
-		"framer-motion": "11.9.0"
+		"framer-motion": "11.11.1"
 	},
 	"peerDependencies": {
 		"react": "18.3.1",

packages/popover/package.json

@@ -38,7 +38,7 @@
 		"@launchpad-ui/overlay": "workspace:~",
 		"@launchpad-ui/tokens": "workspace:~",
 		"classix": "2.2.0",
-		"framer-motion": "11.9.0"
+		"framer-motion": "11.11.1"
 	},
 	"peerDependencies": {
 		"react": "18.3.1",