@automattic/vip-design-system 0.9.2 → 0.9.3

package/build/system/Form/Select.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.Select = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _SearchSelect = require("./SearchSelect");
@@ -11,7 +13,7 @@ var _InlineSelect = require("./InlineSelect");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isMulti", "isInline", "options", "label", "isSearch"];
+var _excluded = ["isMulti", "isInline", "options", "label", "isSearch", "usePortal"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -26,21 +28,35 @@ var Select = function Select(_ref) {
       options = _ref.options,
       label = _ref.label,
       isSearch = _ref.isSearch,
+      usePortal = _ref.usePortal,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  if (isInline) {
-    return (0, _jsxRuntime.jsx)(_InlineSelect.InlineSelect, _extends({
+  var selectRef = _react["default"].useRef();
+
+  var portalProps = {};
+
+  if (usePortal !== undefined) {
+    var _selectRef$current;
+
+    portalProps.menuPortalTarget = selectRef == null ? void 0 : (_selectRef$current = selectRef.current) == null ? void 0 : _selectRef$current.querySelector('.select__control').parentElement;
+    portalProps.styles = {
+      menuPortal: function menuPortal(base) {
+        return _extends({}, base, {
+          position: 'fixed'
+        });
+      }
+    };
+  }
+
+  var Component = isInline ? _InlineSelect.InlineSelect : _SearchSelect.SearchSelect;
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: selectRef,
+    children: (0, _jsxRuntime.jsx)(Component, _extends({
       isMulti: isMulti,
       label: label,
       options: options
-    }, props));
-  }
-
-  return (0, _jsxRuntime.jsx)(_SearchSelect.SearchSelect, _extends({
-    isMulti: isMulti,
-    label: label,
-    options: options
-  }, props));
+    }, portalProps, props))
+  });
 };
 
 exports.Select = Select;
@@ -49,5 +65,6 @@ Select.propTypes = {
   isMulti: _propTypes["default"].bool,
   isSearch: _propTypes["default"].bool,
   label: _propTypes["default"].string,
-  options: _propTypes["default"].array
+  options: _propTypes["default"].array,
+  usePortal: _propTypes["default"].bool
 };

package/build/system/theme/index.js

@@ -90,7 +90,7 @@ var _default = {
     muted: _colors.light.grey['90'],
     link: _colors.light.brand['90'],
     card: '#fff',
-    border: _colors.light.grey['20'],
+    border: _colors.light.grey['60'],
     hover: 'rgba(0,0,0,.02)',
     lightenBackground: 'rgba(255,255,255,.5)',
     darken: 'rgba(0,0,0,.05)',

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"build": "cross-env NODE_ENV=production babel src --out-dir build",
 		"format": "eslint . --fix",
 		"jest": "NODE_ENV=test jest --detectOpenHandles",
+		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
 		"lint": "eslint . -f json | eslines --quiet",
 		"storybook": "start-storybook -p 6006",
@@ -34,12 +35,21 @@
 		"**/react-dom": "17.0.1"
 	},
 	"jest": {
+		"collectCoverage": true,
+		"coverageReporters": [
+			"json",
+			"html"
+		],
 		"testURL": "http://localhost",
+		"roots": [
+			"<rootDir>/src",
+			"<rootDir>/test"
+		],
 		"setupFiles": [
-			"./test/setupTests.js"
+			"<rootDir>/test/setupTests.js"
 		],
 		"setupFilesAfterEnv": [
-			"./test/setupAfterEnv.js"
+			"<rootDir>/test/setupAfterEnv.js"
 		],
 		"transformIgnorePatterns": [
 			".*.stories.js$"
@@ -49,7 +59,6 @@
 		}
 	},
 	"devDependencies": {
-		"immer": ">=9.0.6",
 		"@axe-core/react": "4.3.2",
 		"@babel/cli": "^7.14.3",
 		"@babel/core": "7.14.0",
@@ -85,7 +94,9 @@
 		"eslint-plugin-no-async-foreach": "0.1.1",
 		"eslint-plugin-react": "7.25.3",
 		"eslint-plugin-wpcalypso": "4.1.0",
+		"immer": ">=9.0.6",
 		"jest-axe": "5.0.1",
+		"open-cli": "^7.0.1",
 		"optimize-css-assets-webpack-plugin": "^6.0.1",
 		"react-input-autosize": "^3.0.0",
 		"react-refresh": "^0.9.0",

package/src/system/Avatar/Avatar.test.js

@@ -10,22 +10,21 @@ import { axe } from 'jest-axe';
 import { Avatar } from './Avatar';
 
 describe( '<Avatar />', () => {
-	it( 'renders the Avatar without an image', () => {
-		render( <Avatar name="John Doe" /> );
+	it( 'renders the Avatar without an image', async () => {
+		const { container } = render( <Avatar name="John Doe" /> );
 
 		expect( screen.getByText( 'J' ) ).toBeInTheDocument();
-	} );
-
-	it( 'renders the Avatar with image', () => {
-		render( <Avatar name="John Doe" src="path/to/image" /> );
 
-		expect( screen.getByAltText( 'Avatar image from John Doe' ) ).toBeInTheDocument();
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
-	it( 'should not have basic accessibility issues', async () => {
+	it( 'renders the Avatar with image', async () => {
 		const { container } = render( <Avatar name="John Doe" src="path/to/image" /> );
-		const results = await axe( container );
 
-		expect( results ).toHaveNoViolations();
+		expect( screen.getByAltText( 'Avatar image from John Doe' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Badge/Badge.test.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Badge } from './Badge';
+
+describe( '<Badge />', () => {
+	it( 'renders the Badge component', async () => {
+		const { container } = render( <Badge>Badge text</Badge> );
+
+		expect( screen.getByText( 'Badge text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the Badge component with a different variant', async () => {
+		const { container } = render( <Badge variant="primary">Badge text</Badge> );
+
+		expect( screen.getByText( 'Badge text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/BlankState/BlankState.js

@@ -10,10 +10,17 @@ import PropTypes from 'prop-types';
  */
 import { Box, Heading, Text } from '..';
 
-const BlankState = ( { image, icon, title, body, cta } ) => {
+const BlankState = ( {
+	body,
+	cta,
+	icon,
+	image,
+	imageAlt = 'Image representing the blank state',
+	title,
+} ) => {
 	return (
 		<Box sx={{ textAlign: 'center', padding: 5 }}>
-			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt="Icon representing the blank state" />}
+			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt={imageAlt} />}
 			<Heading variant="h4">{title}</Heading>
 			<Text>{body}</Text>
 			<Box sx={{ mt: 3 }}>{cta}</Box>
@@ -22,11 +29,12 @@ const BlankState = ( { image, icon, title, body, cta } ) => {
 };
 
 BlankState.propTypes = {
-	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
-	icon: PropTypes.node,
-	title: PropTypes.node,
 	body: PropTypes.node,
 	cta: PropTypes.node,
+	icon: PropTypes.node,
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
+	imageAlt: PropTypes.string,
+	title: PropTypes.node,
 };
 
 export { BlankState };

package/src/system/BlankState/BlankState.test.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { MdContentCopy } from 'react-icons/md';
+
+/**
+ * Internal dependencies
+ */
+import { BlankState } from './BlankState';
+import { Link } from '../Link';
+
+// eslint-disable-next-line max-len
+const image = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
+
+const defaultProps = {
+	body: 'Sorry, there\'s nothing here yet.',
+	cta: <Link as="a">Explore add-ons →</Link>,
+	image,
+	imageAlt: 'This is the image alt',
+	title: 'Power up your application',
+};
+
+describe( '<BlankState />', () => {
+	it( 'renders the BlankState component', async () => {
+		const { container } = render( <BlankState { ...defaultProps } /> );
+
+		expect( screen.getByText( defaultProps.body ) ).toBeInTheDocument();
+		expect( screen.getByText( defaultProps.title ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Explore add-ons →' ) ).toBeInTheDocument();
+		expect( screen.getByAltText( defaultProps.imageAlt ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the BlankState component with default alt text for the given image', async () => {
+		const props = { ...defaultProps, imageAlt: undefined };
+		const { container } = render( <BlankState { ...props } /> );
+
+		expect( screen.getByAltText( 'Image representing the blank state' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the BlankState component with an icon', async () => {
+		const icon = <MdContentCopy title="this is an icon" />;
+		const props = { ...defaultProps, icon };
+		const { container } = render( <BlankState { ...props } /> );
+
+		expect( screen.getByTitle( 'this is an icon' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Button/Button.test.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from './Button';
+
+describe( '<Button />', () => {
+	it( 'renders the Button component', async () => {
+		const { container } = render( <Button>Button text</Button> );
+
+		expect( screen.getByText( 'Button text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Card/Card.test.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { MdContentCopy } from 'react-icons/md';
+
+/**
+ * Internal dependencies
+ */
+import { Card } from './Card';
+
+const defaultProps = {};
+
+describe( '<Card />', () => {
+	it( 'renders the Card component', async () => {
+		const { container } = render( <Card { ...defaultProps }>This is a Card</Card> );
+
+		expect( screen.getByText( 'This is a Card' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the Card component with a different variant', async () => {
+		const { container } = render( <Card variant="primary">Card text</Card> );
+
+		expect( screen.getByText( 'Card text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Code/Code.js

@@ -47,18 +47,21 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, ...props } ) =
 		>
 			{ codeDom }
 			{
-				<span
+				<button
+					aria-label="Copy"
 					sx={ {
-						position: 'absolute',
-						top: 0,
 						bg: 'grey.10',
-						right: 0,
-						paddingRight: 2,
-						paddingLeft: 2,
-						paddingTop: 1,
-						paddingBottom: 1,
 						borderTopRightRadius: 1,
+						borderWidth: 0,
+						color: 'muted',
 						opacity: 0.8,
+						paddingBottom: 1,
+						paddingLeft: 2,
+						paddingRight: 2,
+						paddingTop: 1,
+						position: 'absolute',
+						right: 0,
+						top: '-1px',
 						'&:hover': {
 							opacity: 1,
 							cursor: 'pointer',
@@ -75,7 +78,7 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, ...props } ) =
 					} }
 				>
 					{ copied ? 'Copied!' : <MdContentCopy /> }
-				</span>
+				</button>
 			}
 		</div>
 	);

package/src/system/Code/Code.stories.js

@@ -16,7 +16,9 @@ export default {
 export const Default = () => (
 	<React.Fragment>
 		<Code>Code</Code>
+		<br />
 		<Code showCopy={true}>Code with Icon</Code>
+		<br />
 		<Code showCopy={true} onCopy={
 			// eslint-disable-next-line no-console
 			() => console.info( 'Hello world' )

package/src/system/Code/Code.test.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { MdContentCopy } from 'react-icons/md';
+
+/**
+ * Internal dependencies
+ */
+import { Code } from './Code';
+
+const defaultProps = {
+	showCopy: false,
+};
+
+// Mock navigator.clipboard because jsdom doesn't support it
+Object.defineProperty( window.navigator, 'clipboard', {
+	value: {
+		writeText: () => {},
+	},
+} );
+
+describe( '<Code />', () => {
+	it( 'renders the Code component', async () => {
+		const { container } = render( <Code { ...defaultProps }>This is a code</Code> );
+
+		expect( screen.getByText( 'This is a code' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	// jsdom currently doesn't support pseudo-elements with getComputedStyle
+	it.skip( 'renders "$" in front of the code when in prompt mode', async () => {
+		const props = { ...defaultProps, prompt: true };
+		const { container } = render( <Code { ...props }>This is a code</Code> );
+		const codeElement = screen.getByText( 'This is a code' );
+
+		expect( window.getComputedStyle( codeElement, ':before' ).content ).toEqual( '$' );
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the Code component with a copy button', async () => {
+		const props = { ...defaultProps, showCopy: true };
+		const { container } = render( <Code { ...props }>This is a code</Code> );
+
+		expect( screen.getByRole( 'button', { name: 'Copy' } ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'updates the the UI after clicking on "Copy"', async () => {
+		const props = { ...defaultProps, showCopy: true };
+		const { container } = render( <Code { ...props }>This is a code</Code> );
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Copy' } ) );
+
+		await waitFor( () => new Promise( res => setTimeout( res, 0 ) ) );
+
+		expect( screen.getByText( 'Copied!' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Dialog/DialogContent.js

@@ -133,6 +133,8 @@ const DialogMotion = ( { variant, position, ...props } ) => {
 				padding: 0,
 				display: 'inline-block',
 				variant: `dialog.${ variant }`,
+				overflow: 'auto',
+				maxHeight: variant === 'modal' ? '90%' : '',
 			} }
 		/>
 	);

package/src/system/Form/Input.js

@@ -28,7 +28,7 @@ const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required
 			required={ required }
 			sx={ {
 				border: '1px solid',
-				borderColor: 'grey.60',
+				borderColor: 'border',
 				backgroundColor: 'card',
 				borderRadius: 1,
 				lineHeight: 'inherit',
@@ -47,7 +47,7 @@ const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required
 					bg: 'backgroundSecondary',
 				},
 				'&::placeholder': {
-					color: 'grey.30',
+					color: 'placeholder',
 				},
 			} }
 		/>

package/src/system/Form/Select.js

@@ -3,19 +3,28 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
-  * Internal dependencies
-  */
+ * Internal dependencies
+ */
 import { SearchSelect } from './SearchSelect';
 import { InlineSelect } from './InlineSelect';
 
-const Select = ( { isMulti = false, isInline, options, label, isSearch, ...props } ) => {
-	if ( isInline ) {
-		return <InlineSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
+const Select = ( { isMulti = false, isInline, options, label, isSearch, usePortal, ...props } ) => {
+	const selectRef = React.useRef();
+	const portalProps = {};
+
+	if ( usePortal !== undefined ) {
+		portalProps.menuPortalTarget =
+			selectRef?.current?.querySelector( '.select__control' ).parentElement;
+		portalProps.styles = { menuPortal: base => ( { ...base, position: 'fixed' } ) };
 	}
-	return <SearchSelect isMulti={ isMulti } label={ label } options={ options } { ...props } />;
+
+	const Component = isInline ? InlineSelect : SearchSelect;
+
+	return <div ref={selectRef}><Component isMulti={isMulti} label={label} options={options} {...portalProps} {...props} /></div>;
 };
 
 Select.propTypes = {
@@ -24,6 +33,7 @@ Select.propTypes = {
 	isSearch: PropTypes.bool,
 	label: PropTypes.string,
 	options: PropTypes.array,
+	usePortal: PropTypes.bool,
 };
 
 export { Select };

package/src/system/Form/Select.stories.js

@@ -6,15 +6,7 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	Box,
-	Dialog,
-	DialogMenu,
-	DialogMenuItem,
-	DialogDivider,
-	Select,
-	Button,
-} from '..';
+import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
 
 export default {
 	title: 'Select',
@@ -44,43 +36,79 @@ const DropdownContent = (
 const DropdownTrigger = <Button variant="secondary">Trigger Dropdown</Button>;
 
 export const Multi = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 400 } }>
-			<Select label="Type" value={ value } isMulti placeholder="Select domains..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 400 }}>
+			<Select
+				label="Type"
+				value={value}
+				isMulti
+				placeholder="Select domains..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
+		</Box>
+	);
+};
+
+export const usePortal = () => {
+	const [ value, setValue ] = useState( [] );
+
+	return (
+		<Box sx={{ mr: 2, width: 400 }}>
+			<Select
+				label="Type"
+				value={value}
+				isMulti
+				placeholder="Select domains..."
+				usePortal
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const Single = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Select label="User" value={ value } placeholder="Select a domain..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="User"
+				value={value}
+				placeholder="Select a domain..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const Inline = () => {
-	const [ value, setValue ] = useState( [ ] );
+	const [ value, setValue ] = useState( [] );
 
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Select label="User" value={ value } isInline isMulti noneLabel="Everyone" placeholder="Filter by user..." options={ options } onChange={ newValue => setValue( newValue ) } />
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Select
+				label="User"
+				value={value}
+				isInline
+				isMulti
+				noneLabel="Everyone"
+				placeholder="Filter by user..."
+				options={options}
+				onChange={newValue => setValue( newValue )}
+			/>
 		</Box>
 	);
 };
 
 export const DropdownMenu = () => {
 	return (
-		<Box sx={ { mr: 2, width: 200 } }>
-			<Dialog
-				trigger={DropdownTrigger}
-				content={DropdownContent}
-				sx={{ width: 200 }}
-			/>
+		<Box sx={{ mr: 2, width: 200 }}>
+			<Dialog trigger={DropdownTrigger} content={DropdownContent} sx={{ width: 200 }} />
 		</Box>
 	);
 };

package/src/system/theme/index.js

@@ -88,7 +88,7 @@ export default {
 		muted: light.grey[ '90' ],
 		link: light.brand[ '90' ],
 		card: '#fff',
-		border: light.grey[ '20' ],
+		border: light.grey[ '60' ],
 		hover: 'rgba(0,0,0,.02)',
 		lightenBackground: 'rgba(255,255,255,.5)',
 		darken: 'rgba(0,0,0,.05)',