@automattic/vip-design-system 0.26.4 → 0.26.6

package/build/system/Form/Validation.js

@@ -27,7 +27,6 @@ var Validation = function Validation(_ref) {
       describedId = _ref$describedId === void 0 ? null : _ref$describedId,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var Icon = isValid ? _md.MdCheckCircle : _md.MdErrorOutline;
-  var IconLabel = isValid ? 'Valid' : 'Invalid';
   return (0, _jsxRuntime.jsxs)("p", (0, _extends2["default"])({
     sx: {
       color: isValid ? 'success' : 'error',
@@ -42,8 +41,7 @@ var Validation = function Validation(_ref) {
       sx: {
         mr: 1
       },
-      role: "img",
-      "aria-label": IconLabel
+      "aria-hidden": "true"
     }), children]
   }));
 };

package/build/system/NewForm/Form.js

@@ -13,15 +13,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["children"];
+var _excluded = ["children", "className"];
 
 var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var children = _ref.children,
+      className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)("form", (0, _extends2["default"])({
-    ref: forwardRef
+    ref: forwardRef,
+    className: (0, _classnames["default"])('vip-form-component', className),
+    noValidate: true
   }, props, {
     children: children
   }));
@@ -29,6 +34,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
 
 exports.Form = Form;
 Form.propTypes = {
-  children: _propTypes["default"].any
+  children: _propTypes["default"].any,
+  className: _propTypes["default"].any
 };
 Form.displayName = 'Form';

package/build/system/NewForm/FormAutocomplete.js

@@ -13,10 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Label = require("../Form/Label");
-
 var _react2 = _interopRequireDefault(require("accessible-autocomplete/react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _FormAutocomplete = _interopRequireDefault(require("./FormAutocomplete.css"));
 
 exports.css = _FormAutocomplete["default"];
@@ -25,9 +25,11 @@ var _FormSelectContent = require("./FormSelectContent");
 
 var _FormSelectArrow = require("./FormSelectArrow");
 
+var _Label = require("../Form/Label");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "value", "showAllValues", "displayMenu", "id"];
+var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "value", "showAllValues", "displayMenu", "id", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -122,6 +124,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
+      className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -184,7 +187,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       setIsDirty(true);
     });
   }, [setIsDirty]);
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
       sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles),
       children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
@@ -216,6 +220,7 @@ FormAutocomplete.propTypes = {
   options: _propTypes["default"].array,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };
 FormAutocomplete.displayName = 'FormAutocomplete';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.26.4",
+	"version": "0.26.6",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Form/Validation.js

@@ -12,7 +12,6 @@ import { MdErrorOutline, MdCheckCircle } from 'react-icons/md';
 
 const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
-	const IconLabel = isValid ? 'Valid' : 'Invalid';
 
 	return (
 		<p
@@ -26,7 +25,7 @@ const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 			id={ describedId ? `describe-${ describedId }-validation` : undefined }
 			{ ...props }
 		>
-			<Icon sx={ { mr: 1 } } role="img" aria-label={ IconLabel } />
+			<Icon sx={ { mr: 1 } } aria-hidden="true" />
 			{ children }
 		</p>
 	);

package/src/system/NewForm/Form.js

@@ -3,15 +3,22 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Form = React.forwardRef( ( { children, ...props }, forwardRef ) => (
-	<form ref={ forwardRef } { ...props }>
+const Form = React.forwardRef( ( { children, className, ...props }, forwardRef ) => (
+	<form
+		ref={ forwardRef }
+		className={ classNames( 'vip-form-component', className ) }
+		noValidate
+		{ ...props }
+	>
 		{ children }
 	</form>
 ) );
 
 Form.propTypes = {
 	children: PropTypes.any,
+	className: PropTypes.any,
 };
 
 Form.displayName = 'Form';

package/src/system/NewForm/FormAutocomplete.js

@@ -5,8 +5,8 @@
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Label } from '../Form/Label';
 import Autocomplete from 'accessible-autocomplete/react';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -14,6 +14,7 @@ import Autocomplete from 'accessible-autocomplete/react';
 import css from './FormAutocomplete.css';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectArrow } from './FormSelectArrow';
+import { Label } from '../Form/Label';
 
 const defaultStyles = {
 	width: '100%',
@@ -81,6 +82,7 @@ const FormAutocomplete = React.forwardRef(
 			showAllValues = true,
 			displayMenu = 'overlay',
 			id = 'vip-autocomplete',
+			className,
 			...props
 		},
 		forwardRef
@@ -152,7 +154,7 @@ const FormAutocomplete = React.forwardRef(
 		}, [ setIsDirty ] );
 
 		return (
-			<>
+			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
 
 				<div sx={ { ...defaultStyles, ...( isInline && inlineStyles ) } }>
@@ -173,7 +175,7 @@ const FormAutocomplete = React.forwardRef(
 						<FormSelectArrow />
 					</FormSelectContent>
 				</div>
-			</>
+			</div>
 		);
 	}
 );
@@ -190,6 +192,7 @@ FormAutocomplete.propTypes = {
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
 	onChange: PropTypes.func,
+	className: PropTypes.any,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';