@automattic/vip-design-system 0.32.0 → 0.32.2

package/README.md

@@ -92,7 +92,7 @@ npm run build
 npm publish
 ```
 
-Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process.
+Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process. You can also add `--otp=CODE` to the `npm publish` command if you already have the code.
 
 7. Push the tags to the repository and trunk updates.
 
@@ -103,6 +103,8 @@ git push origin trunk
 
 8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
 
+Ps: Add a `BREAKING CHANGES` section to the release. This will avoid folks trying to figure out why their code is not working on the VIP Dashboard or any other system.
+
 ### Troubleshooting
 
 ### Dialog + Dropdown usage

package/build/system/Form/RadioBoxGroup.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
+var _Label = require("./Label");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
@@ -43,8 +45,12 @@ var RadioOption = function RadioOption(_ref) {
       name = _ref.name,
       onChangeHandler = _ref.onChangeHandler;
   var forLabel = id || value;
+  var checked = "" + defaultValue === "" + value;
+
+  var ref = _react["default"].useRef(null);
+
+  var describedById = "input-radio-box-" + forLabel + "-description";
   return (0, _jsxRuntime.jsxs)("div", {
-    value: value,
     id: "o" + forLabel,
     sx: (0, _extends2["default"])({
       width: width,
@@ -62,13 +68,19 @@ var RadioOption = function RadioOption(_ref) {
         backgroundColor: 'input.radio-box.background.hover',
         borderColor: 'input.radio-box.border.default'
       }
-    }, "" + defaultValue === "" + value && {
+    }, checked && {
       borderColor: 'input.radio-box.border.active'
     }, disabled && {
       borderColor: 'input.radio-box.border.disabled'
     }),
+    onClick: function onClick() {
+      var _ref$current;
+
+      (_ref$current = ref.current) == null ? void 0 : _ref$current.click();
+    },
     children: [(0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({
-      checked: "" + defaultValue === "" + value,
+      ref: ref,
+      checked: checked,
       type: "radio",
       name: name,
       id: forLabel,
@@ -77,32 +89,32 @@ var RadioOption = function RadioOption(_ref) {
       sx: {
         mr: 3,
         mt: 3
-      }
-    }, restOption)), (0, _jsxRuntime.jsxs)("label", (0, _extends2["default"])({
-      htmlFor: forLabel,
+      },
+      "aria-describedby": describedById
+    }, restOption)), (0, _jsxRuntime.jsxs)("div", {
       sx: {
         mb: 0,
         color: 'input.radio-box.label.primary.default',
         p: 3,
         pr: 0,
         flex: 'auto'
-      }
-    }, labelProps, {
-      children: [label, description && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
-          children: "."
-        }), (0, _jsxRuntime.jsx)("span", {
-          sx: {
-            color: 'input.radio-box.label.secondary.default',
-            mb: 0,
-            fontSize: 1,
-            display: 'block'
-          },
-          children: description
-        })]
+      },
+      children: [(0, _jsxRuntime.jsx)("label", (0, _extends2["default"])({
+        htmlFor: forLabel
+      }, labelProps, {
+        children: label
+      })), description && (0, _jsxRuntime.jsx)("span", {
+        sx: {
+          color: 'input.radio-box.label.secondary.default',
+          mb: 0,
+          fontSize: 1,
+          display: 'block'
+        },
+        id: describedById,
+        children: description
       })]
-    }))]
-  }, value);
+    })]
+  });
 };
 
 RadioOption.propTypes = {
@@ -144,18 +156,26 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
   });
   return (0, _jsxRuntime.jsxs)("fieldset", (0, _extends2["default"])({
     sx: {
-      display: 'flex',
-      gap: 2,
       border: 0,
       padding: 0
     },
     ref: forwardRef
   }, props, {
-    children: [groupLabel ? (0, _jsxRuntime.jsx)("legend", {
+    children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
+      as: "legend",
+      sx: {
+        mb: 2
+      },
       children: groupLabel
     }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
       children: "Choose an option"
-    }), renderedOptions]
+    }), (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        display: 'flex',
+        gap: 2
+      },
+      children: renderedOptions
+    })]
   }));
 });
 

package/package.json

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

package/src/system/Form/RadioBoxGroup.js

@@ -6,6 +6,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import ScreenReaderText from '../ScreenReaderText';
+import { Label } from './Label';
 
 /**
  * Internal dependencies
@@ -20,10 +21,12 @@ const RadioOption = ( {
 	onChangeHandler,
 } ) => {
 	const forLabel = id || value;
+	const checked = `${ defaultValue }` === `${ value }`;
+	const ref = React.useRef( null );
+	const describedById = `input-radio-box-${ forLabel }-description`;
+
 	return (
 		<div
-			key={ value }
-			value={ value }
 			id={ `o${ forLabel }` }
 			sx={ {
 				width,
@@ -41,46 +44,49 @@ const RadioOption = ( {
 					backgroundColor: 'input.radio-box.background.hover',
 					borderColor: 'input.radio-box.border.default',
 				},
-				...( `${ defaultValue }` === `${ value }` && {
+				...( checked && {
 					borderColor: 'input.radio-box.border.active',
 				} ),
 				...( disabled && {
 					borderColor: 'input.radio-box.border.disabled',
 				} ),
 			} }
+			onClick={ () => {
+				ref.current?.click();
+			} }
 		>
 			<input
-				checked={ `${ defaultValue }` === `${ value }` }
+				ref={ ref }
+				checked={ checked }
 				type="radio"
 				name={ name }
 				id={ forLabel }
 				onChange={ onChangeHandler }
 				value={ `${ value }` }
 				sx={ { mr: 3, mt: 3 } }
+				aria-describedby={ describedById }
 				{ ...restOption }
 			/>
-			<label
-				htmlFor={ forLabel }
+			<div
 				sx={ { mb: 0, color: 'input.radio-box.label.primary.default', p: 3, pr: 0, flex: 'auto' } }
-				{ ...labelProps }
 			>
-				{ label }
+				<label htmlFor={ forLabel } { ...labelProps }>
+					{ label }
+				</label>
 				{ description && (
-					<>
-						<ScreenReaderText>.</ScreenReaderText>
-						<span
-							sx={ {
-								color: 'input.radio-box.label.secondary.default',
-								mb: 0,
-								fontSize: 1,
-								display: 'block',
-							} }
-						>
-							{ description }
-						</span>
-					</>
+					<span
+						sx={ {
+							color: 'input.radio-box.label.secondary.default',
+							mb: 0,
+							fontSize: 1,
+							display: 'block',
+						} }
+						id={ describedById }
+					>
+						{ description }
+					</span>
 				) }
-			</label>
+			</div>
 		</div>
 	);
 };
@@ -134,8 +140,6 @@ const RadioBoxGroup = React.forwardRef(
 		return (
 			<fieldset
 				sx={ {
-					display: 'flex',
-					gap: 2,
 					border: 0,
 					padding: 0,
 				} }
@@ -143,11 +147,20 @@ const RadioBoxGroup = React.forwardRef(
 				{ ...props }
 			>
 				{ groupLabel ? (
-					<legend>{ groupLabel }</legend>
+					<Label as="legend" sx={ { mb: 2 } }>
+						{ groupLabel }
+					</Label>
 				) : (
 					<ScreenReaderText>Choose an option</ScreenReaderText>
 				) }
-				{ renderedOptions }
+				<div
+					sx={ {
+						display: 'flex',
+						gap: 2,
+					} }
+				>
+					{ renderedOptions }
+				</div>
 			</fieldset>
 		);
 	}