@automattic/vip-design-system 0.26.0 → 0.26.2

package/src/system/NewForm/FormAutocomplete.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Label } from '../Form/Label';
 import Autocomplete from 'accessible-autocomplete/react';
@@ -42,6 +42,7 @@ const defaultStyles = {
 		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
 		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
 		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
+		'&.autocomplete__input--show-all-values': { paddingRight: '40px' },
 	},
 	'& .autocomplete__menu': {
 		borderWidth: '1px',
@@ -56,7 +57,6 @@ const defaultStyles = {
 	},
 	'& .autocomplete__wrapper': {
 		width: '100%',
-		paddingRight: '40px',
 	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
@@ -85,6 +85,8 @@ const FormAutocomplete = React.forwardRef(
 		},
 		forwardRef
 	) => {
+		const [ isDirty, setIsDirty ] = useState( false );
+
 		const SelectLabel = () => <Label htmlFor={ forLabel || id }>{ label }</Label>;
 
 		const inlineLabel = !! ( isInline && label );
@@ -120,12 +122,15 @@ const FormAutocomplete = React.forwardRef(
 
 		const suggest = useCallback(
 			( query, populateResults ) => {
-				const data = options.filter(
-					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-				);
+				let data = options;
+				if ( isDirty ) {
+					data = options.filter(
+						option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
+					);
+				}
 				populateResults( data.map( option => optionLabel( option ) ) );
 			},
-			[ options ]
+			[ options, isDirty ]
 		);
 
 		useEffect( () => {
@@ -140,6 +145,12 @@ const FormAutocomplete = React.forwardRef(
 				.setAttribute( 'aria-label', `${ label } list` );
 		}, [ label ] );
 
+		useEffect( () => {
+			global.document.querySelector( `#${ id }` ).addEventListener( 'keydown', () => {
+				setIsDirty( true );
+			} );
+		}, [ setIsDirty ] );
+
 		return (
 			<>
 				{ label && ! isInline && <SelectLabel /> }

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -61,3 +61,16 @@ export const Inline = () => {
 		</>
 	);
 };
+
+export const WithDefaultValue = () => {
+	const customArgs = {
+		...args,
+		value: 'Chocolate',
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};

package/src/system/NewForm/index.js

@@ -4,12 +4,15 @@
 
 import { FormSelect } from './FormSelect';
 import { FormAutocomplete } from './FormAutocomplete';
+import { Textarea } from '../Form/Textarea';
+import { Input } from '../Form/Input';
 import { Form } from './Form';
+import { Label } from '../Form/Label';
 
 const Select = FormSelect;
 const Autocomplete = FormAutocomplete;
 const Root = Form;
 
-export { Root, Select, Autocomplete };
+export { Root, Select, Autocomplete, Textarea, Input, Label };
 
 export default Root;

package/src/system/NewTabs/Tabs.stories.jsx

@@ -4,7 +4,7 @@
 import { NewTabs, TabsTrigger, TabsList, TabsContent, Text } from '..';
 
 export default {
-	title: 'NewTabs',
+	title: 'Tabs',
 	component: NewTabs,
 };
 
@@ -19,11 +19,15 @@ export const Default = () => (
 			</TabsTrigger>
 		</TabsList>
 		<TabsContent value="all">
-			<Text>All content</Text>
+			<Text>
+				All content <a href="https://google.com">https://google.com</a>
+			</Text>
 		</TabsContent>
 		<TabsContent value="live">Live content</TabsContent>
 		<TabsContent value="dev">
-			<Text>In Development content</Text>
+			<Text>
+				In Development content <button type="button">Hey I am a button</button>{ ' ' }
+			</Text>
 		</TabsContent>
 	</NewTabs>
 );

package/src/system/NewTabs/TabsList.js

@@ -18,7 +18,7 @@ const TabsList = ( { children, title, sx } ) => (
 			display: 'flex',
 			...sx,
 		} }
-		title={ title }
+		aria-label={ title }
 	>
 		{ children }
 	</TabsPrimitive.List>

package/src/system/Tabs/Tabs.stories.jsx

@@ -4,7 +4,7 @@
 import { Tabs, TabItem } from '..';
 
 export default {
-	title: 'Tabs',
+	title: 'Deprecated/Tabs',
 	component: Tabs,
 };