@automattic/vip-design-system 2.15.5 → 2.15.7

package/build/system/NewForm/FormAutocomplete.js

@@ -85,6 +85,12 @@ const inlineStyles = {
 	borderWidth: 0,
 };
 
+const allowCustomStyles = {
+	'& .autocomplete__option--no-results': {
+		cursor: 'pointer',
+	},
+};
+
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
 		paddingLeft: 6,
@@ -120,6 +126,7 @@ const FormAutocomplete = React.forwardRef(
 			resetOnBlur = false, // resets the input value to the selection if the input is blurred. Returns null if selection is empty
 			source,
 			value,
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -199,9 +206,13 @@ const FormAutocomplete = React.forwardRef(
 
 		const handleTypeChange = useCallback(
 			query => {
-				return options.filter(
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
 				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
 			},
 			[ options ]
 		);
@@ -319,6 +330,7 @@ const FormAutocomplete = React.forwardRef(
 						...defaultStyles,
 						...( isInline && inlineStyles ),
 						...( searchIcon && searchIconStyles ),
+						...( allowCustom && allowCustomStyles ),
 						...( hasError ? { borderColor: 'input.border.error' } : {} ),
 					} }
 				>
@@ -382,6 +394,7 @@ FormAutocomplete.propTypes = {
 	source: PropTypes.func,
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

package/build/system/NewForm/FormAutocomplete.stories.d.ts

@@ -58,42 +58,51 @@ export function Default({ label, width, ...rest }: {
 export namespace Default {
     export { args };
 }
-export function Inline({ label, width, ...rest }: {
+export function WithAllowCustom({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace Inline {
+export namespace WithAllowCustom {
     let args_1: any;
     export { args_1 as args };
 }
-export function WithDefaultValue({ label, width, ...rest }: {
+export function Inline({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace WithDefaultValue {
+export namespace Inline {
     let args_2: any;
     export { args_2 as args };
 }
-export function WithSearchIcon({ label, width, ...rest }: {
+export function WithDefaultValue({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace WithSearchIcon {
+export namespace WithDefaultValue {
     let args_3: any;
     export { args_3 as args };
 }
-export function WithLoading({ label, width, ...rest }: {
+export function WithSearchIcon({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace WithLoading {
+export namespace WithSearchIcon {
     let args_4: any;
     export { args_4 as args };
 }
+export function WithLoading({ label, width, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+}): import("react").JSX.Element;
+export namespace WithLoading {
+    let args_5: any;
+    export { args_5 as args };
+}
 export function WithDebounce(): import("react").JSX.Element;
 export function WithSlowSearchAndDebounce({ label, width, ...rest }: {
     [x: string]: any;
@@ -101,8 +110,8 @@ export function WithSlowSearchAndDebounce({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithSlowSearchAndDebounce {
-    let args_5: any;
-    export { args_5 as args };
+    let args_6: any;
+    export { args_6 as args };
 }
 export function WithCustomMessages({ label, width, ...rest }: {
     [x: string]: any;
@@ -110,8 +119,8 @@ export function WithCustomMessages({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithCustomMessages {
-    let args_6: any;
-    export { args_6 as args };
+    let args_7: any;
+    export { args_7 as args };
 }
 export function WithErrors({ label, width, ...rest }: {
     [x: string]: any;
@@ -119,8 +128,8 @@ export function WithErrors({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithErrors {
-    let args_7: any;
-    export { args_7 as args };
+    let args_8: any;
+    export { args_8 as args };
 }
 export function WithArrow({ label, width, ...rest }: {
     [x: string]: any;
@@ -128,8 +137,8 @@ export function WithArrow({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithArrow {
-    let args_8: any;
-    export { args_8 as args };
+    let args_9: any;
+    export { args_9 as args };
 }
 export function WithCustomArrow({ label, width, ...rest }: {
     [x: string]: any;
@@ -137,8 +146,8 @@ export function WithCustomArrow({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithCustomArrow {
-    let args_9: any;
-    export { args_9 as args };
+    let args_10: any;
+    export { args_10 as args };
     export let displayName: string;
 }
 declare namespace args {

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

@@ -67,6 +67,12 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => {
 export const Default = DefaultComponent.bind( {} );
 Default.args = args;
 
+export const WithAllowCustom = DefaultComponent.bind( {} );
+WithAllowCustom.args = {
+	...Default.args,
+	allowCustom: true,
+};
+
 export const Inline = DefaultComponent.bind( {} );
 Inline.args = {
 	...Default.args,

package/build/system/NewForm/FormAutocompleteMultiselect.js

@@ -155,6 +155,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			value,
 			listType = 'button',
 			initialValue = [],
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -245,11 +246,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 		);
 
 		const handleTypeChange = useCallback(
-			query =>
-				options.filter(
+			query => {
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-				),
-			[ options ]
+				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
+			},
+			[ options, allowCustom ]
 		);
 
 		const handleInputChange = useCallback(
@@ -384,7 +390,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 						</Validation>
 					) }
 					<div sx={ { fontSize: 1 } }>
-						{ selectedOptions.length } item{ selectedOptions.length > 1 ? 's' : '' } selected
+						{ selectedOptions.length } item{ selectedOptions.length === 1 ? '' : 's' } selected
 					</div>
 				</Flex>
 				<div sx={ { display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%' } }>
@@ -428,6 +434,7 @@ FormAutocompleteMultiselect.propTypes = {
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

package/build/system/NewForm/FormAutocompleteMultiselect.stories.d.ts

@@ -29,6 +29,7 @@ declare namespace _default {
 }
 export default _default;
 export function Default(): import("react").JSX.Element;
+export function WithAllowCustom(): import("react").JSX.Element;
 export function WithBadges(): import("react").JSX.Element;
 export function WithInitialValueBadges(): import("react").JSX.Element;
 export function Inline(): import("react").JSX.Element;

package/build/system/NewForm/FormAutocompleteMultiselect.stories.jsx

@@ -86,6 +86,15 @@ export const Default = () => {
 	);
 };
 
+export const WithAllowCustom = () => {
+	const customArgs = {
+		...args,
+		allowCustom: true,
+	};
+
+	return <DefaultComponent { ...customArgs } />;
+};
+
 export const WithBadges = () => {
 	const customArgs = {
 		...args,

package/build/system/NewForm/FormSelect.d.ts

@@ -10,6 +10,7 @@ interface Option {
     options?: Option[];
 }
 interface FormSelectProps {
+    disabled?: boolean;
     isInline?: boolean;
     placeholder?: string;
     forLabel?: string;
@@ -23,7 +24,6 @@ interface FormSelectProps {
     errorMessage?: string;
     wrapperSx?: ThemeUIStyleObject;
     value?: string | number;
-    disabled?: boolean;
     className?: string;
     'aria-describedby'?: string;
     'aria-required'?: boolean;

package/build/system/NewForm/FormSelect.js

@@ -1,4 +1,4 @@
-var _excluded = ["isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange", "hasError", "errorMessage", "wrapperSx"],
+var _excluded = ["disabled", "isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange", "hasError", "errorMessage", "wrapperSx"],
   _excluded2 = ["options"];
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -49,7 +49,8 @@ var renderGroup = function renderGroup(groupLabel, groupOptions) {
   }, groupLabel);
 };
 var FormSelect = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
-  var isInline = _ref2.isInline,
+  var disabled = _ref2.disabled,
+    isInline = _ref2.isInline,
     placeholder = _ref2.placeholder,
     _ref2$forLabel = _ref2.forLabel,
     forLabel = _ref2$forLabel === void 0 ? 'vip-form-select' : _ref2$forLabel,
@@ -109,8 +110,11 @@ var FormSelect = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
       children: [_jsxs("select", _extends({
         onChange: onValueChange,
         ref: forwardRef,
-        sx: defaultStyles,
+        sx: _extends({
+          cursor: disabled ? 'not-allowed' : 'pointer'
+        }, defaultStyles),
         required: required,
+        disabled: disabled,
         "aria-required": required,
         "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
         id: forLabel

package/build/system/NewForm/FormSelect.stories.d.ts

@@ -43,23 +43,40 @@ export namespace Default {
         export { options };
     }
 }
-export function WithErrors({ label, width, onChange, ...rest }: {
+export function Disabled({ label, width, onChange, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
     onChange: any;
 }): import("react").JSX.Element;
-export namespace WithErrors {
+export namespace Disabled {
     export namespace args_1 {
         let placeholder_2: string;
         export { placeholder_2 as placeholder };
         let required_3: boolean;
         export { required_3 as required };
+        export let disabled: boolean;
+        export { options };
+    }
+    export { args_1 as args };
+}
+export function WithErrors({ label, width, onChange, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+    onChange: any;
+}): import("react").JSX.Element;
+export namespace WithErrors {
+    export namespace args_2 {
+        let placeholder_3: string;
+        export { placeholder_3 as placeholder };
+        let required_4: boolean;
+        export { required_4 as required };
         export let hasError: boolean;
         export let errorMessage: string;
         export { options };
     }
-    export { args_1 as args };
+    export { args_2 as args };
 }
 export function WithGroup({ label, width, onChange, ...rest }: {
     [x: string]: any;
@@ -68,7 +85,7 @@ export function WithGroup({ label, width, onChange, ...rest }: {
     onChange: any;
 }): import("react").JSX.Element;
 export namespace WithGroup {
-    export namespace args_2 {
+    export namespace args_3 {
         let label_1: string;
         export { label_1 as label };
         let options_1: ({
@@ -83,7 +100,7 @@ export namespace WithGroup {
         })[];
         export { options_1 as options };
     }
-    export { args_2 as args };
+    export { args_3 as args };
 }
 export function IsInline({ label, width, onChange, ...rest }: {
     [x: string]: any;
@@ -92,14 +109,14 @@ export function IsInline({ label, width, onChange, ...rest }: {
     onChange: any;
 }): import("react").JSX.Element;
 export namespace IsInline {
-    export namespace args_3 {
+    export namespace args_4 {
         let label_2: string;
         export { label_2 as label };
         export let isInline: boolean;
         export let width: string;
         export { groupedOptions as options };
     }
-    export { args_3 as args };
+    export { args_4 as args };
 }
 export function WithOptionLabelAndValue({ label, width, onChange, ...rest }: {
     [x: string]: any;
@@ -108,7 +125,7 @@ export function WithOptionLabelAndValue({ label, width, onChange, ...rest }: {
     onChange: any;
 }): import("react").JSX.Element;
 export namespace WithOptionLabelAndValue {
-    export namespace args_4 {
+    export namespace args_5 {
         let label_3: string;
         export { label_3 as label };
         let width_1: string;
@@ -121,7 +138,7 @@ export namespace WithOptionLabelAndValue {
         export function getOptionLabel(option: any): any;
         export function getOptionValue(option: any): any;
     }
-    export { args_4 as args };
+    export { args_5 as args };
 }
 export function WithOnChange(): import("react").JSX.Element;
 declare const options: {

package/build/system/NewForm/FormSelect.stories.jsx

@@ -76,6 +76,14 @@ Default.args = {
 	options,
 };
 
+export const Disabled = DefaultComponent.bind( {} );
+Disabled.args = {
+	placeholder: '- Select -',
+	required: true,
+	disabled: true,
+	options,
+};
+
 export const WithErrors = DefaultComponent.bind( {} );
 WithErrors.args = {
 	placeholder: '- Select -',

package/build/system/Wizard/Wizard.stories.js

@@ -172,20 +172,31 @@ export var WithTitleAutoFocus = function WithTitleAutoFocus() {
   });
 };
 export var HideStepText = function HideStepText() {
+  var _React$useState3 = React.useState(undefined),
+    activeStep = _React$useState3[0],
+    setActiveStep = _React$useState3[1];
   var steps = [{
     title: 'Included Logs',
     titleVariant: 'h2',
     subTitle: '',
     children: _jsx(Text, {
+      sx: {
+        mb: 0
+      },
       children: "Error Logs"
-    })
+    }),
+    onChange: function onChange() {
+      setActiveStep(0);
+    },
+    actionLabel: 'Edit',
+    actionIcon: _jsx(BsPencil, {})
   }];
   return _jsx(React.Fragment, {
     children: _jsx(Box, {
       mt: 4,
       children: _jsx(Wizard, {
         showStepText: false,
-        activeStep: 0,
+        activeStep: activeStep,
         steps: steps,
         completed: [0],
         className: "vip-wizard-xyz"

package/build/system/Wizard/WizardStep.js

@@ -85,7 +85,8 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
       },
       borderColor: 'wizard.step.border.default',
       borderLeftColor: borderLeftColor,
-      overflow: 'inherit'
+      overflow: 'inherit',
+      py: 1
     },
     "data-step": order,
     "data-active": active || undefined,
@@ -93,13 +94,12 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
     ref: forwardRef,
     children: [_jsxs(Flex, {
       sx: {
-        alignItems: 'flex-end',
-        mb: 2
+        alignItems: 'center'
       },
       children: [_jsxs(Heading, {
         variant: titleVariant,
         sx: {
-          mb: 1,
+          mb: 0,
           color: headingColor,
           fontSize: 2,
           fontWeight: 'heading',
@@ -111,14 +111,14 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
         children: [showStepText && _jsx(Text, {
           sx: {
             fontSize: 1,
-            color: 'wizard.step.number.color'
+            color: 'wizard.step.number.color',
+            pb: 1
           },
           "aria-hidden": "true",
           children: stepText
         }), _jsxs(Flex, {
           as: "span",
           sx: {
-            mt: showStepText ? 3 : 2,
             alignItems: 'center'
           },
           "aria-hidden": "true",
@@ -155,14 +155,21 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
     }), !active && (complete || skipped) && (summary || summaryTitle) && _jsx(DescriptionList, {
       as: summaryAs,
       list: summary || [],
-      title: summaryTitle
-    }), subTitle && active && _jsx(Text, {
+      title: summaryTitle,
       sx: {
-        mb: 3,
         mt: 2
+      }
+    }), subTitle && active && _jsx(Text, {
+      sx: {
+        my: 3
       },
       children: subTitle
-    }), active && children]
+    }), active && Boolean(children) && _jsx(Box, {
+      sx: {
+        pt: 2
+      },
+      children: children
+    })]
   });
 });
 WizardStep.displayName = 'WizardStep';

package/package.json

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

package/src/system/NewForm/FormAutocomplete.js

@@ -85,6 +85,12 @@ const inlineStyles = {
 	borderWidth: 0,
 };
 
+const allowCustomStyles = {
+	'& .autocomplete__option--no-results': {
+		cursor: 'pointer',
+	},
+};
+
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
 		paddingLeft: 6,
@@ -120,6 +126,7 @@ const FormAutocomplete = React.forwardRef(
 			resetOnBlur = false, // resets the input value to the selection if the input is blurred. Returns null if selection is empty
 			source,
 			value,
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -199,9 +206,13 @@ const FormAutocomplete = React.forwardRef(
 
 		const handleTypeChange = useCallback(
 			query => {
-				return options.filter(
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
 				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
 			},
 			[ options ]
 		);
@@ -319,6 +330,7 @@ const FormAutocomplete = React.forwardRef(
 						...defaultStyles,
 						...( isInline && inlineStyles ),
 						...( searchIcon && searchIconStyles ),
+						...( allowCustom && allowCustomStyles ),
 						...( hasError ? { borderColor: 'input.border.error' } : {} ),
 					} }
 				>
@@ -382,6 +394,7 @@ FormAutocomplete.propTypes = {
 	source: PropTypes.func,
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

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

@@ -67,6 +67,12 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => {
 export const Default = DefaultComponent.bind( {} );
 Default.args = args;
 
+export const WithAllowCustom = DefaultComponent.bind( {} );
+WithAllowCustom.args = {
+	...Default.args,
+	allowCustom: true,
+};
+
 export const Inline = DefaultComponent.bind( {} );
 Inline.args = {
 	...Default.args,

package/src/system/NewForm/FormAutocompleteMultiselect.js

@@ -155,6 +155,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			value,
 			listType = 'button',
 			initialValue = [],
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -245,11 +246,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 		);
 
 		const handleTypeChange = useCallback(
-			query =>
-				options.filter(
+			query => {
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-				),
-			[ options ]
+				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
+			},
+			[ options, allowCustom ]
 		);
 
 		const handleInputChange = useCallback(
@@ -384,7 +390,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 						</Validation>
 					) }
 					<div sx={ { fontSize: 1 } }>
-						{ selectedOptions.length } item{ selectedOptions.length > 1 ? 's' : '' } selected
+						{ selectedOptions.length } item{ selectedOptions.length === 1 ? '' : 's' } selected
 					</div>
 				</Flex>
 				<div sx={ { display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%' } }>
@@ -428,6 +434,7 @@ FormAutocompleteMultiselect.propTypes = {
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

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

@@ -86,6 +86,15 @@ export const Default = () => {
 	);
 };
 
+export const WithAllowCustom = () => {
+	const customArgs = {
+		...args,
+		allowCustom: true,
+	};
+
+	return <DefaultComponent { ...customArgs } />;
+};
+
 export const WithBadges = () => {
 	const customArgs = {
 		...args,

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

@@ -76,6 +76,14 @@ Default.args = {
 	options,
 };
 
+export const Disabled = DefaultComponent.bind( {} );
+Disabled.args = {
+	placeholder: '- Select -',
+	required: true,
+	disabled: true,
+	options,
+};
+
 export const WithErrors = DefaultComponent.bind( {} );
 WithErrors.args = {
 	placeholder: '- Select -',

package/src/system/NewForm/FormSelect.tsx

@@ -39,6 +39,7 @@ interface Option {
 }
 
 interface FormSelectProps {
+	disabled?: boolean;
 	isInline?: boolean;
 	placeholder?: string;
 	forLabel?: string;
@@ -52,7 +53,6 @@ interface FormSelectProps {
 	errorMessage?: string;
 	wrapperSx?: ThemeUIStyleObject;
 	value?: string | number;
-	disabled?: boolean;
 	className?: string;
 	'aria-describedby'?: string;
 	'aria-required'?: boolean;
@@ -78,6 +78,7 @@ const renderGroup = ( groupLabel: string, groupOptions: Option[] ) => {
 const FormSelect = React.forwardRef< HTMLSelectElement, FormSelectProps >(
 	(
 		{
+			disabled,
 			isInline,
 			placeholder,
 			forLabel = 'vip-form-select',
@@ -149,8 +150,9 @@ const FormSelect = React.forwardRef< HTMLSelectElement, FormSelectProps >(
 					<select
 						onChange={ onValueChange }
 						ref={ forwardRef }
-						sx={ defaultStyles }
+						sx={ { cursor: disabled ? 'not-allowed' : 'pointer', ...defaultStyles } }
 						required={ required }
+						disabled={ disabled }
 						aria-required={ required }
 						aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
 						id={ forLabel }

package/src/system/Wizard/Wizard.stories.tsx

@@ -152,12 +152,19 @@ export const WithTitleAutoFocus = () => {
 };
 
 export const HideStepText = () => {
+	const [ activeStep, setActiveStep ] = React.useState< number | undefined >( undefined );
+
 	const steps: WizardStepProps[] = [
 		{
 			title: 'Included Logs',
 			titleVariant: 'h2',
 			subTitle: '',
-			children: <Text>Error Logs</Text>,
+			children: <Text sx={ { mb: 0 } }>Error Logs</Text>,
+			onChange: () => {
+				setActiveStep( 0 );
+			},
+			actionLabel: 'Edit',
+			actionIcon: <BsPencil />,
 		},
 	];
 
@@ -166,7 +173,7 @@ export const HideStepText = () => {
 			<Box mt={ 4 }>
 				<Wizard
 					showStepText={ false }
-					activeStep={ 0 }
+					activeStep={ activeStep }
 					steps={ steps }
 					completed={ [ 0 ] }
 					className="vip-wizard-xyz"

package/src/system/Wizard/WizardStep.tsx

@@ -112,17 +112,18 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 					borderColor: 'wizard.step.border.default',
 					borderLeftColor,
 					overflow: 'inherit',
+					py: 1,
 				} }
 				data-step={ order }
 				data-active={ active || undefined }
 				className={ `wizard-step-${ status }` }
 				ref={ forwardRef }
 			>
-				<Flex sx={ { alignItems: 'flex-end', mb: 2 } }>
+				<Flex sx={ { alignItems: 'center' } }>
 					<Heading
 						variant={ titleVariant }
 						sx={ {
-							mb: 1,
+							mb: 0,
 							color: headingColor,
 							fontSize: 2,
 							fontWeight: 'heading',
@@ -133,16 +134,15 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 						aria-current={ active ? 'step' : undefined }
 					>
 						{ showStepText && (
-							<Text sx={ { fontSize: 1, color: 'wizard.step.number.color' } } aria-hidden="true">
+							<Text
+								sx={ { fontSize: 1, color: 'wizard.step.number.color', pb: 1 } }
+								aria-hidden="true"
+							>
 								{ stepText }
 							</Text>
 						) }
 
-						<Flex
-							as="span"
-							sx={ { mt: showStepText ? 3 : 2, alignItems: 'center' } }
-							aria-hidden="true"
-						>
+						<Flex as="span" sx={ { alignItems: 'center' } } aria-hidden="true">
 							{ complete ? (
 								<BsFillCheckCircleFill sx={ statusIconStyles } />
 							) : (
@@ -174,12 +174,17 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 					) }
 				</Flex>
 				{ ! active && ( complete || skipped ) && ( summary || summaryTitle ) && (
-					<DescriptionList as={ summaryAs } list={ summary || [] } title={ summaryTitle } />
+					<DescriptionList
+						as={ summaryAs }
+						list={ summary || [] }
+						title={ summaryTitle }
+						sx={ { mt: 2 } }
+					/>
 				) }
 
-				{ subTitle && active && <Text sx={ { mb: 3, mt: 2 } }>{ subTitle }</Text> }
+				{ subTitle && active && <Text sx={ { my: 3 } }>{ subTitle }</Text> }
 
-				{ active && children }
+				{ active && Boolean( children ) && <Box sx={ { pt: 2 } }>{ children }</Box> }
 			</Card>
 		);
 	}