@magento/venia-ui 11.6.0-alpha.8 → 11.6.0-beta.1

package/lib/components/ButtonTab/button.module.css

@@ -0,0 +1,123 @@
+.root {
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: cursor-pointer from global;
+    composes: font-bold from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: leading-tight from global;
+    composes: max-w-full from global;
+    composes: min-w-[10rem] from global;
+    composes: outline-none from global;
+    composes: pointer-events-auto from global;
+    composes: px-sm from global;
+    composes: rounded-button from global;
+    composes: text-center from global;
+    composes: text-sm from global;
+    composes: uppercase from global;
+    padding-top: calc(0.5rem + 1px); /* TODO @TW: review */
+    padding-bottom: calc(0.5rem - 1px); /* TODO @TW: review */
+    min-height: 2.5rem;
+    transition-duration: 256ms;
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--venia-global-anim-standard);
+
+    composes: disabled_bg-gray-400 from global;
+    composes: disabled_border-gray-400 from global;
+    composes: disabled_opacity-50 from global;
+    composes: disabled_pointer-events-none from global;
+    composes: disabled_text-white from global;
+
+    composes: focus_shadow-inputFocus from global;
+
+    composes: hover_disabled_pointer-events-none from global;
+}
+
+.root:active {
+    transition-duration: 128ms;
+}
+
+.root_lowPriority {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-gray-700 from global;
+    composes: text-gray-700 from global;
+
+    composes: active_border-gray-800 from global;
+    composes: active_text-gray-800 from global;
+
+    composes: hover_border-gray-800 from global;
+    composes: hover_text-gray-800 from global;
+}
+
+.root_normalPriority {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-brand-dark from global;
+    composes: text-brand-dark from global;
+
+    composes: active_border-brand-darkest from global;
+    composes: active_text-brand-darkest from global;
+
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-brand-darkest from global;
+}
+
+.root_highPriority {
+    composes: root;
+
+    composes: bg-brand-dark from global;
+    composes: border-brand-dark from global;
+    composes: text-white from global;
+
+    composes: active_bg-brand-darkest from global;
+    composes: active_border-brand-darkest from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-brand-darkest from global;
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-white from global;
+}
+
+.root_lowPriorityNegative,
+.root_normalPriorityNegative {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-red-600 from global;
+    composes: text-red-600 from global;
+
+    composes: active_border-red-700 from global;
+    composes: active_text-red-700 from global;
+
+    composes: hover_border-red-700 from global;
+    composes: hover_text-red-700 from global;
+}
+
+.root_highPriorityNegative {
+    composes: root;
+
+    composes: bg-red-600 from global;
+    composes: border-red-600 from global;
+    composes: text-white from global;
+
+    composes: active_bg-red-700 from global;
+    composes: active_border-red-700 from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-red-700 from global;
+    composes: hover_border-red-700 from global;
+    composes: hover_text-white from global;
+}
+
+.content {
+    composes: gap-1.5 from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-items-center from global;
+}

package/lib/components/ButtonTab/buttonTab.js

@@ -0,0 +1,99 @@
+import React, { useRef } from 'react';
+import { useButton } from 'react-aria';
+import { oneOf, shape, string, bool } from 'prop-types';
+
+import { useStyle } from '../../classify';
+import defaultClasses from './button.module.css';
+
+const getRootClassName = (priority, negative) =>
+    `root_${priority}Priority${negative ? 'Negative' : ''}`;
+
+/**
+ * A component for buttons.
+ *
+ * @typedef Button
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a single button.
+ */
+const Button = props => {
+    const {
+        children,
+        classes: propClasses,
+        priority,
+        negative,
+        disabled,
+        onPress,
+        ...restProps
+    } = props;
+
+    const buttonRef = useRef();
+
+    const { buttonProps } = useButton(
+        {
+            isDisabled: disabled,
+            onPress,
+            ...restProps
+        },
+        buttonRef
+    );
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClassName = classes[getRootClassName(priority, negative)];
+
+    return (
+        <button
+            ref={buttonRef}
+            className={rootClassName}
+            {...buttonProps}
+            {...restProps}
+        >
+            {children}
+        </button>
+    );
+};
+
+/**
+ * Props for {@link Button}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the
+ * Button component.
+ * @property {string} classes.content classes for the button content
+ * @property {string} classes.root classes for root container
+ * @property {string} classes.root_highPriority classes for Button if
+ * high priority.
+ * @property {string} classes.root_lowPriority classes for Button if
+ * low priority.
+ * @property {string} classes.root_normalPriority classes for Button if
+ * normal priority.
+ * @property {string} priority the priority/importance of the Button
+ * @property {string} type the type of the Button
+ * @property {bool} negative whether the button should be displayed in red for a negative action
+ * @property {bool} disabled is the button disabled
+ */
+Button.propTypes = {
+    classes: shape({
+        content: string,
+        root: string,
+        root_highPriority: string,
+        root_lowPriority: string,
+        root_normalPriority: string
+    }),
+    priority: oneOf(['high', 'low', 'normal']).isRequired,
+    type: oneOf(['button', 'reset', 'submit']).isRequired,
+    negative: bool,
+    disabled: bool
+};
+
+Button.defaultProps = {
+    priority: 'normal',
+    type: 'button',
+    negative: false,
+    disabled: false
+};
+
+export default Button;

package/lib/components/ButtonTab/index.js

@@ -0,0 +1 @@
+export { default } from './buttonTab';

package/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap

@@ -87,7 +87,6 @@ exports[`renders PriceSummary correctly on cart page 1`] = `
       onTouchCancel={[Function]}
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
-      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -283,7 +282,6 @@ exports[`renders summary with loading state if query is loading 1`] = `
       onTouchCancel={[Function]}
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
-      onTouchStart={[Function]}
       type="button"
     >
       <span

package/lib/components/CartPage/PriceSummary/priceSummary.js

@@ -91,6 +91,7 @@ const PriceSummary = props => {
                 disabled={isPriceUpdating}
                 priority={'high'}
                 onClick={handleProceedToCheckout}
+                onTouchStart={handleProceedToCheckout}
                 onKeyDown={handleEnterKeyPress}
                 data-cy="PriceSummary-checkoutButton"
             >

package/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.js

@@ -179,7 +179,7 @@ const CreateAccount = props => {
                 <GoogleReCaptcha {...recaptchaWidgetProps} />
                 <div className={classes.actions}>
                     <Button
-                        disabled={isDisabled}
+                        disabled={Boolean(isDisabled)}
                         type="submit"
                         className={classes.create_account_button}
                         data-cy="OrderConfirmationPage-CreateAccount-createAccountButton"

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap

@@ -451,11 +451,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Continue to Shipping Method
-        </span>
+        Continue to Shipping Method
       </button>
     </div>
   </form>,
@@ -917,11 +913,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Continue to Shipping Method
-        </span>
+        Continue to Shipping Method
       </button>
     </div>
   </form>,
@@ -1371,14 +1363,10 @@ Array [
         onTouchStart={[Function]}
         type="button"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Cancel"
-            id="global.cancelButton"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Cancel"
+          id="global.cancelButton"
+        />
       </button>
       <button
         className="root_highPriority"
@@ -1396,11 +1384,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Update
-        </span>
+        Update
       </button>
     </div>
   </form>,
@@ -1850,14 +1834,10 @@ Array [
         onTouchStart={[Function]}
         type="button"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Cancel"
-            id="global.cancelButton"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Cancel"
+          id="global.cancelButton"
+        />
       </button>
       <button
         className="root_highPriority"
@@ -1875,11 +1855,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Update
-        </span>
+        Update
       </button>
     </div>
   </form>,

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js

@@ -8,7 +8,7 @@ import { useToasts } from '@magento/peregrine';
 
 import { useStyle } from '../../../../classify';
 import { isRequired } from '../../../../util/formValidators';
-import Button from '../../../Button';
+import Button from '../../../ButtonTab';
 import Country from '../../../Country';
 import Field, { Message } from '../../../Field';
 import FormError from '../../../FormError';

package/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap

@@ -107,14 +107,10 @@ exports[`it disables inputs when the page is updating 1`] = `
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Continue to Payment Information"
-            id="shippingMethod.continueToNextStep"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Continue to Payment Information"
+          id="shippingMethod.continueToNextStep"
+        />
       </button>
     </div>
   </form>
@@ -228,14 +224,10 @@ exports[`it renders correctly 1`] = `
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Continue to Payment Information"
-            id="shippingMethod.continueToNextStep"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Continue to Payment Information"
+          id="shippingMethod.continueToNextStep"
+        />
       </button>
     </div>
   </form>

package/lib/components/CheckoutPage/ShippingMethod/shippingMethod.js

@@ -9,7 +9,7 @@ import {
 } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod';
 
 import { useStyle } from '../../../classify';
-import Button from '../../Button';
+import Button from '../../ButtonTab';
 import FormError from '../../FormError';
 import LoadingIndicator from '../../LoadingIndicator';
 import CompletedView from './completedView';

package/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -173,7 +173,7 @@ exports[`CheckoutPage renders an error and disables review order button if there
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span
@@ -237,7 +237,6 @@ exports[`CheckoutPage renders an error and disables review order button if there
       onTouchCancel={[Function]}
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
-      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -538,7 +537,7 @@ exports[`CheckoutPage renders checkout content for guest on desktop 1`] = `
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span
@@ -680,7 +679,7 @@ exports[`CheckoutPage renders checkout content for guest on mobile 1`] = `
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span
@@ -890,6 +889,7 @@ Object {
   "negative": false,
   "onClick": [MockFunction handleReviewOrder],
   "onKeyDown": undefined,
+  "onTouchStart": [MockFunction handleReviewOrder],
   "priority": "high",
   "type": "button",
 }

package/lib/components/CheckoutPage/checkoutPage.js

@@ -177,6 +177,7 @@ const CheckoutPage = props => {
                     className={classes.signInButton}
                     data-cy="CheckoutPage-signInButton"
                     onClick={toggleSignInContent}
+                    onTouchStart={toggleSignInContent}
                     priority="normal"
                 >
                     <FormattedMessage
@@ -253,6 +254,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.PAYMENT ? (
                 <Button
                     onClick={handleReviewOrder}
+                    onTouchStart={handleReviewOrder}
                     onKeyDown={handleReviewOrderEnterKeyPress}
                     priority="high"
                     className={classes.review_order_button}
@@ -281,6 +283,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.REVIEW ? (
                 <Button
                     onClick={handlePlaceOrder}
+                    onTouchStart={handlePlaceOrder}
                     onKeyDown={handlePlaceOrderEnterKeyPress}
                     priority="high"
                     className={classes.place_order_button}

package/lib/components/CreateAccount/createAccount.js

@@ -46,7 +46,7 @@ const CreateAccount = props => {
         <Button
             data-cy="CreateAccount-cancelButton"
             className={classes.cancelButton}
-            disabled={isDisabled}
+            disabled={Boolean(isDisabled)}
             type="button"
             priority="low"
             onClick={handleCancel}
@@ -62,7 +62,7 @@ const CreateAccount = props => {
     const submitButton = (
         <Button
             className={classes.submitButton}
-            disabled={isDisabled}
+            disabled={Boolean(isDisabled)}
             type="submit"
             priority="high"
             onKeyDown={handleEnterKeyPress}

package/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -44,7 +44,7 @@ const CurrentFilter = props => {
         <span className={classes.root} data-cy="CurrentFilter-root">
             <Trigger
                 action={handleClick}
-                ariaLabel={ariaLabel}
+                aria-label={ariaLabel}
                 data-cy="CurrentFilter-trigger"
             >
                 <Icon size={20} src={Remove} />

package/lib/components/FilterModal/FilterList/filterDefault.js

@@ -57,7 +57,7 @@ const FilterDefault = props => {
             field={`${label}-${value_index}`}
             fieldValue={!!isSelected}
             label={title}
-            ariaLabel={ariaLabel}
+            aria-label={ariaLabel}
             data-cy="FilterDefault-checkbox"
             onClick={onMouseDown}
             {...restProps}

package/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -45,7 +45,7 @@ const FilterItemRadio = props => {
             value={value}
             onChange={handleOnchange}
             data-cy="FilterDefault-radio"
-            ariaLabel={ariaLabel}
+            aria-label={ariaLabel}
         />
     );
 

package/lib/components/FilterModal/FilterList/filterList.js

@@ -36,8 +36,8 @@ const FilterList = props => {
         var maxRange = Number(items[items.length - 1].value.split('_')[1]);
         if (filterState !== undefined) {
             const filterArray = [...filterState];
-            var currentMinVal = Number(filterArray[0].value.split('_')[0]);
-            var currentMaxVal = Number(filterArray[0].value.split('_')[1]);
+            var currentMinVal = Number(filterArray[0]?.value?.split('_')[0]);
+            var currentMaxVal = Number(filterArray[0]?.value?.split('_')[1]);
         }
     }
 

package/lib/components/FilterModal/filterFooter.js

@@ -26,6 +26,7 @@ const FilterFooter = props => {
             <Button
                 disabled={!touched}
                 onClick={applyFilters}
+                onTouchStart={applyFilters}
                 data-cy="FilterFooter-button"
                 aria-label={buttonLabel}
                 aria-disabled={!touched}

package/lib/components/FilterModal/filterModal.js

@@ -80,7 +80,7 @@ const FilterModal = props => {
             <LinkButton
                 type="button"
                 onClick={handleReset}
-                ariaLabel={clearAllAriaLabel}
+                aria-label={clearAllAriaLabel}
                 data-cy="FilterModal-clearButton"
             >
                 <FormattedMessage

package/lib/components/FilterModalOpenButton/filterModalOpenButton.js

@@ -24,6 +24,7 @@ const FilterModalOpenButton = props => {
             }}
             data-cy="FilterModalOpenButton-button"
             onClick={handleOpen}
+            onTouchStart={handleOpen}
             onKeyDown={handleKeypress}
             type="button"
             aria-live="polite"

package/lib/components/Newsletter/__tests__/__snapshots__/newsletter.spec.js.snap

@@ -39,7 +39,7 @@ exports[`#Newsletter display renders correctly 1`] = `
     >
       <label
         className="label"
-        htmlFor="email"
+        htmlFor="emailNews"
       >
         Email
       </label>
@@ -58,7 +58,7 @@ exports[`#Newsletter display renders correctly 1`] = `
           <input
             autoComplete="email"
             className="input"
-            id="email"
+            id="emailNews"
             name="email"
             onBlur={[Function]}
             onChange={[Function]}
@@ -126,7 +126,7 @@ exports[`#Newsletter submit displays an error message if the email already subsc
     >
       <label
         className="label"
-        htmlFor="email"
+        htmlFor="emailNews"
       >
         Email
       </label>
@@ -145,7 +145,7 @@ exports[`#Newsletter submit displays an error message if the email already subsc
           <input
             autoComplete="email"
             className="input"
-            id="email"
+            id="emailNews"
             name="email"
             onBlur={[Function]}
             onChange={[Function]}

package/lib/components/Newsletter/newsletter.js

@@ -96,7 +96,7 @@ const Newsletter = props => {
                 onSubmit={handleSubmit}
             >
                 <Field
-                    id="email"
+                    id="emailNews"
                     label={formatMessage({
                         id: 'global.email',
                         defaultMessage: 'Email'
@@ -105,7 +105,7 @@ const Newsletter = props => {
                     <TextInput
                         autoComplete="email"
                         field="email"
-                        id="email"
+                        id="emailNews"
                         validate={isRequired}
                     />
                 </Field>

package/lib/components/OrderHistoryPage/OrderDetails/items.js

@@ -13,7 +13,7 @@ const Items = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     const itemsComponent = items.map(item => (
-        <Item key={item.id} {...item} {...imagesData[item.product_sku]} />
+        <Item key={item.id} {...item} {...imagesData[0][item.product_sku]} />
     ));
 
     return (

package/lib/components/OrderHistoryPage/OrderDetails/orderDetails.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { arrayOf, number, shape, string } from 'prop-types';
+import PropTypes, { shape, string, number, arrayOf } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import { Printer } from 'react-feather';
@@ -38,6 +38,8 @@ const OrderDetails = props => {
 
     const hasTotals = total.grand_total && total.grand_total.currency;
 
+    const imagesArray = Array.isArray(imagesData) ? imagesData : [imagesData];
+
     return (
         <div className={classes.root}>
             <div className={classes.shippingInformationContainer}>
@@ -64,7 +66,7 @@ const OrderDetails = props => {
             </div>
             <div className={classes.itemsContainer}>
                 <ConditionalWrapper condition={items && items.length}>
-                    <Items data={{ imagesData, items }} />
+                    <Items data={{ imagesData: imagesArray, items }} />
                 </ConditionalWrapper>
             </div>
             <div className={classes.orderTotalContainer}>
@@ -91,8 +93,6 @@ const OrderDetails = props => {
     );
 };
 
-export default OrderDetails;
-
 OrderDetails.propTypes = {
     classes: shape({
         root: string,
@@ -105,7 +105,18 @@ OrderDetails.propTypes = {
         printButton: string,
         printLabel: string
     }),
-    imagesData: arrayOf(
+    imagesData: PropTypes.oneOfType([
+        arrayOf(
+            shape({
+                id: number,
+                sku: string,
+                thumbnail: shape({
+                    url: string
+                }),
+                url_key: string,
+                url_suffix: string
+            })
+        ),
         shape({
             id: number,
             sku: string,
@@ -115,7 +126,7 @@ OrderDetails.propTypes = {
             url_key: string,
             url_suffix: string
         })
-    ),
+    ]),
     orderData: shape({
         billing_address: shape({
             city: string,
@@ -205,3 +216,5 @@ OrderDetails.propTypes = {
         })
     })
 };
+
+export default OrderDetails;

package/lib/components/OrderHistoryPage/collapsedImageGallery.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { arrayOf, object, shape, string } from 'prop-types';
+import PropTypes from 'prop-types';
 
 import { useStyle } from '../../classify';
 import Image from '../Image';
@@ -27,7 +27,7 @@ const CollapsedImageGallery = props => {
 
                     return (
                         <Image
-                            key={Object.keys(items)[index]}
+                            key={name || index}
                             alt={name}
                             src={url}
                             width={48}
@@ -58,9 +58,9 @@ const CollapsedImageGallery = props => {
 export default CollapsedImageGallery;
 
 CollapsedImageGallery.propTypes = {
-    classes: shape({
-        root: string,
-        remainderCount: string
+    classes: PropTypes.shape({
+        root: PropTypes.string,
+        remainderCount: PropTypes.string
     }),
-    items: arrayOf(object)
+    items: PropTypes.object.isRequired
 };

package/lib/components/ProductSort/productSort.js

@@ -185,6 +185,7 @@ const ProductSort = props => {
                     root_lowPriority: classes.sortButton
                 }}
                 onClick={handleSortClick}
+                onTouchStart={handleSortClick}
                 data-cy="ProductSort-sortButton"
                 onKeyDown={handleKeypress}
                 aria-label={result}

package/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap

@@ -37,7 +37,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
     >
       <label
         className="label"
-        htmlFor="email"
+        htmlFor="emailSignIn"
       >
         Email address
       </label>
@@ -57,7 +57,7 @@ exports[`displays an error message if there is a sign in error 1`] = `
             aria-label="Email Required"
             autoComplete="email"
             className="input"
-            id="email"
+            id="emailSignIn"
             name="email"
             onBlur={[Function]}
             onChange={[Function]}
@@ -169,7 +169,7 @@ exports[`renders correctly 1`] = `
     >
       <label
         className="label"
-        htmlFor="email"
+        htmlFor="emailSignIn"
       >
         Email address
       </label>
@@ -189,7 +189,7 @@ exports[`renders correctly 1`] = `
             aria-label="Email Required"
             autoComplete="email"
             className="input"
-            id="email"
+            id="emailSignIn"
             name="email"
             onBlur={[Function]}
             onChange={[Function]}
@@ -301,7 +301,7 @@ exports[`renders prefilled form with initial values 1`] = `
     >
       <label
         className="label"
-        htmlFor="email"
+        htmlFor="emailSignIn"
       >
         Email address
       </label>
@@ -321,7 +321,7 @@ exports[`renders prefilled form with initial values 1`] = `
             aria-label="Email Required"
             autoComplete="email"
             className="input"
-            id="email"
+            id="emailSignIn"
             name="email"
             onBlur={[Function]}
             onChange={[Function]}

package/lib/components/SignIn/signIn.js

@@ -67,14 +67,14 @@ const SignIn = props => {
                 initialValues={initialValues && initialValues}
             >
                 <Field
-                    id="email"
+                    id="emailSignIn"
                     label={formatMessage({
                         id: 'signIn.emailAddressText',
                         defaultMessage: 'Email address'
                     })}
                 >
                     <TextInput
-                        id="email"
+                        id="emailSignIn"
                         data-cy="SignIn-email"
                         autoComplete="email"
                         field="email"
@@ -124,7 +124,7 @@ const SignIn = props => {
                         type="submit"
                         onKeyDown={signinHandleEnterKeyPress}
                         data-cy="SignInButton-root_highPriority"
-                        disabled={isBusy}
+                        disabled={Boolean(isBusy)}
                     >
                         <FormattedMessage
                             id={'signIn.signInText'}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.6.0-alpha.8",
+  "version": "11.6.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -80,8 +80,8 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "14.5.1-alpha.8",
-    "@magento/pwa-buildpack": "11.5.4-alpha.8",
+    "@magento/peregrine": "14.5.1-beta.1",
+    "@magento/pwa-buildpack": "11.5.4-beta.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.43.0",
     "graphql": "~15.5.0",