@automattic/vip-design-system 0.9.0 → 0.9.3

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

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Validation, Label } from '../';
 
-const InputComponent = ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+const Input = React.forwardRef( ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
 	<React.Fragment>
 		{ label &&
 			<Label htmlFor={ forLabel }>
@@ -28,7 +28,7 @@ const InputComponent = ( { variant, label, forLabel, hasError, required, errorMe
 			required={ required }
 			sx={ {
 				border: '1px solid',
-				borderColor: 'grey.60',
+				borderColor: 'border',
 				backgroundColor: 'card',
 				borderRadius: 1,
 				lineHeight: 'inherit',
@@ -47,7 +47,7 @@ const InputComponent = ( { variant, label, forLabel, hasError, required, errorMe
 					bg: 'backgroundSecondary',
 				},
 				'&::placeholder': {
-					color: 'grey.30',
+					color: 'placeholder',
 				},
 			} }
 		/>
@@ -55,9 +55,9 @@ const InputComponent = ( { variant, label, forLabel, hasError, required, errorMe
 			<Validation>{ errorMessage }</Validation>
 		}
 	</React.Fragment>
-);
+) );
 
-InputComponent.propTypes = {
+Input.propTypes = {
 	variant: PropTypes.string,
 	label: PropTypes.string,
 	hasError: PropTypes.bool,
@@ -66,6 +66,6 @@ InputComponent.propTypes = {
 	errorMessage: PropTypes.string,
 };
 
-const Input = React.forwardRef( InputComponent );
+Input.displayName = 'Input';
 
 export { Input };

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/Form/Textarea.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Validation, Label } from '../';
 
-const TextareaComponent = ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+const Textarea = React.forwardRef( ( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
 	<React.Fragment>
 		{ label &&
 			<Label htmlFor={ forLabel }>
@@ -50,9 +50,9 @@ const TextareaComponent = ( { variant, label, forLabel, hasError, required, erro
 			<Validation>{ errorMessage }</Validation>
 		}
 	</React.Fragment>
-);
+) );
 
-TextareaComponent.propTypes = {
+Textarea.propTypes = {
 	variant: PropTypes.string,
 	label: PropTypes.string,
 	hasError: PropTypes.bool,
@@ -61,6 +61,6 @@ TextareaComponent.propTypes = {
 	errorMessage: PropTypes.string,
 };
 
-const Textarea = React.forwardRef( TextareaComponent );
+Textarea.displayName = 'Textarea';
 
 export { Textarea };

package/src/system/Timeline/index.js

@@ -0,0 +1,46 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { Flex } from 'theme-ui';
+import { MdWatchLater } from 'react-icons/md';
+import PropTypes from 'prop-types';
+
+const VerticalLine = () => {
+	return (
+		<div
+			sx={ {
+				borderLeft: '2px solid',
+				borderColor: 'border',
+				height: 'calc( 50% - 16px )',
+				borderRadius: '2px',
+			} }>
+		</div>
+	);
+};
+
+const Timeline = ( { time, first = false, last = false, ...props } ) => (
+	<Flex { ...props }>
+		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
+			{ ! first && (
+				<VerticalLine />
+			) }
+			<MdWatchLater sx={ { color: 'border' } } size={ 18 }/>
+			{ ! last && (
+				<VerticalLine />
+			) }
+		</Flex>
+		<Flex sx={ { alignItems: 'center', ml: 2 } }>
+			<span>{ time }</span>
+		</Flex>
+	</Flex>
+);
+
+Timeline.propTypes = {
+	first: PropTypes.bool,
+	time: PropTypes.string,
+	last: PropTypes.bool,
+};
+
+export { Timeline };

package/src/system/index.js

@@ -41,6 +41,7 @@ import { Spinner } from './Spinner';
 import { ResourceList, ResourceItem } from './ResourceList';
 import { Tooltip } from './Tooltip';
 import { Time } from './Time';
+import { Timeline } from './Timeline';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
 import { Table, TableRow } from './Table';
@@ -93,6 +94,7 @@ export {
 	ToggleGroup,
 	TabItem,
 	Time,
+	Timeline,
 	Validation,
 	Wizard,
 	WizardStep,

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)',