@magento/venia-ui 10.3.0 → 11.3.0-beta.1

package/i18n/en_US.json

@@ -313,11 +313,15 @@
     "orderHistoryPage.ordersCount": "You have {count} orders in your history",
     "orderHistoryPage.search": "Search by Order Number",
     "orderItems.itemsHeading": "Items",
-    "orderProgressBar.deliveredText": "Delivered",
-    "orderProgressBar.processingText": "Processing",
+    "orderProgressBar.deliveredText": "complete",
+    "orderProgressBar.processingText": "processing",
+    "orderProgressBar.newText": "new",
+    "orderProgressBar.pendingPaymentText": "Pending Payment",
+    "orderProgressBar.paymentReviewText": "Payment Review",
     "orderProgressBar.readyToShipText": "Ready to ship",
     "orderProgressBar.shippedText": "Shipped",
-    "orderRow.deliveredText": "Delivered",
+    "orderRow.deliveredText": "complete",
+    "orderProgressBar.closedText": "Closed",
     "orderRow.orderDateText": "Order Date",
     "orderRow.orderNumberText": "Order #",
     "orderRow.orderTotalText": "Order Total",

package/lib/RootComponents/Category/category.module.css

@@ -45,7 +45,7 @@
 }
 
 .categoryInfo {
-    flex-basis: 100%;
+    composes: basis-full from global;
     composes: leading-tight from global;
     composes: max-w-[75vw] from global;
     composes: mx-0 from global;
@@ -60,7 +60,7 @@
     composes: flex from global;
     composes: justify-center from global;
     composes: pb-sm from global;
-    flex-basis: 100%;
+    composes: basis-full from global;
 
     composes: lg_justify-end from global;
     composes: lg_pb-0 from global;

package/lib/components/Accordion/accordion.module.css

@@ -2,5 +2,5 @@
     composes: border-2 from global;
     composes: border-solid from global;
     composes: border-subtle from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
 }

package/lib/components/Accordion/section.module.css

@@ -4,21 +4,15 @@
     composes: border-subtle from global;
 }
 
-/* TODO @TW: cannot compose */
 .root:last-of-type {
-    /* composes: border-b-0 from global; */
-    border-bottom-width: 0;
+    @apply border-b-0;
 }
 
 .contents_container {
     composes: pb-sm from global;
     composes: pt-0 from global;
     composes: px-sm from global;
-}
-
-/* TODO @TW: cannot compose */
-.contents_container:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .contents_container_closed {

package/lib/components/AccountInformationPage/editForm.module.css

@@ -28,7 +28,7 @@
     composes: pt-xs from global;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     .firstname,
     .lastname,
     .password,

package/lib/components/AccountMenu/__tests__/__snapshots__/accountMenu.spec.js.snap

@@ -61,7 +61,7 @@ exports[`it renders create account component when the view is CREATE_ACCOUNT 1`]
 
 exports[`it renders empty aside element when accountMenuIsOpen is false 1`] = `
 <aside
-  className="root"
+  className="root_closed"
 >
   <div
     className="contents"

package/lib/components/AccountMenu/accountMenu.js

@@ -31,7 +31,9 @@ const AccountMenu = React.forwardRef((props, ref) => {
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
-    const rootClass = accountMenuIsOpen ? classes.root_open : classes.root;
+    const rootClass = accountMenuIsOpen
+        ? classes.root_open
+        : classes.root_closed;
     const contentsClass = accountMenuIsOpen
         ? classes.contents_open
         : classes.contents;
@@ -99,6 +101,7 @@ export default AccountMenu;
 AccountMenu.propTypes = {
     classes: shape({
         root: string,
+        root_closed: string,
         root_open: string,
         link: string,
         contents_open: string,

package/lib/components/AccountMenu/accountMenu.module.css

@@ -1,22 +1,25 @@
 .root {
     composes: absolute from global;
     composes: h-0 from global;
-    composes: left-[-100vw] from global;
     composes: max-w-[100vw] from global;
     composes: opacity-0 from global;
     composes: overflow-visible from global;
     composes: top-full from global;
     composes: z-menu from global;
+    composes: -translate-x-1/2 from global;
+
     transition: opacity 192ms var(--venia-global-anim-out),
         visibility 192ms var(--venia-global-anim-out),
         /* Adding delay to move container off the screen after previous transitions happened */
             left 0s 192ms;
-    width: calc(100vw - 2rem); /* TODO @TW: cannot compose */
-    transform: translate3d(-50%, 0, 0);
+    width: calc(100vw - theme(spacing.8));
+}
 
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
+.root_closed {
+    composes: root;
+
+    composes: left-[-100vw] from global;
+    @apply invisible;
 }
 
 .root_open {
@@ -27,9 +30,7 @@
     transition: opacity 224ms var(--venia-global-anim-in),
         visibility 224ms var(--venia-global-anim-in), left 0s;
 
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
+    @apply visible;
 }
 
 .contents {

package/lib/components/AddToCartDialog/addToCartDialog.module.css

@@ -26,14 +26,10 @@
 
 .price {
     composes: font-semibold from global;
-}
 
-/* TODO @TW: cannot compose */
-.price:empty {
-    /* composes: bg-subtle from global; */
-    background-color: rgb(var(--venia-global-color-gray));
-    min-height: 1rem;
-    width: 4rem;
+    composes: empty_bg-subtle from global;
+    composes: empty_w-16 from global;
+    composes: empty_min-h-4 from global;
 }
 
 .optionTitle {
@@ -48,7 +44,7 @@
 .dialogHeaderText {
     composes: headerText from '../Dialog/dialog.module.css';
 
-    composes: overflow-visible from global;
+    @apply overflow-visible;
 }
 
 .titleContainer {

package/lib/components/AddressBookPage/addEditDialog.module.css

@@ -11,7 +11,7 @@
     composes: lg_col-end-span2 from global;
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .lastname,
     .country,
     .default_address_check {

package/lib/components/AddressBookPage/addressBookPage.module.css

@@ -33,7 +33,7 @@
     composes: border-dashed from global;
     composes: border-subtle from global;
     composes: font-semibold from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     composes: text-brand-dark from global;
     composes: text-sm from global;
     transition: border-color 384ms var(--venia-global-anim-standard);

package/lib/components/AddressBookPage/addressCard.module.css

@@ -6,7 +6,7 @@
     composes: grid from global;
     composes: p-xs from global;
     composes: relative from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     grid-template-columns: 1fr max-content;
 
     composes: sm_px-md from global;
@@ -37,7 +37,7 @@
     composes: sm_py-5 from global;
 }
 
-@media (min-width: 640px) {
+@media screen(sm) {
     .confirmDeleteContainer {
         grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
     }
@@ -46,7 +46,7 @@
 .confirmDeleteButton {
     composes: root_normalPriorityNegative from '../Button/button.module.css';
 
-    composes: bg-white from global;
+    @apply bg-white;
     composes: order-first from global;
     composes: sm_order-1 from global;
 }
@@ -54,7 +54,7 @@
 .cancelDeleteButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    composes: bg-white from global;
+    @apply bg-white;
 }
 
 .contentContainer {
@@ -77,7 +77,7 @@
     composes: mb-2xs from global;
     composes: px-sm from global;
     composes: py-1.5 from global;
-    composes: rounded-md from global;
+    composes: rounded-badge from global;
     composes: text-xs from global;
     composes: w-max from global;
 }
@@ -93,7 +93,8 @@
 .linkButton {
     composes: root from '../LinkButton/linkButton.module.css';
 
-    composes: no-underline from global;
+    @apply no-underline;
+    @apply hover_underline;
 }
 
 .editButton {

package/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -5,12 +5,11 @@
     composes: ml-xs from global;
     /* Show ellipses when overflowing. */
     composes: overflow-hidden from global;
-    composes: overflow-ellipsis from global;
+    composes: text-ellipsis from global;
     composes: pt-[0.625rem] from global;
     composes: pb-[1rem] from global;
     composes: text-sm from global;
     composes: whitespace-nowrap from global;
-    composes: -mb-[1rem] from global;
 }
 
 .text {

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

@@ -12,7 +12,7 @@
     composes: outline-none from global;
     composes: pointer-events-auto from global;
     composes: px-sm from global;
-    composes: rounded-full from global;
+    composes: rounded-button from global;
     composes: text-center from global;
     composes: text-sm from global;
     composes: uppercase from global;
@@ -30,21 +30,14 @@
     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;
 }
 
-/**
- * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after
- * being clicked it will be visually disabled.
- */
-.root:hover:disabled {
-    /* TODO @TW: cannot compose. This may not be possible with two variants. */
-    pointer-events: none;
-}
-
 .root_lowPriority {
     composes: root;
 

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

@@ -34,15 +34,15 @@
     transition-duration: 128ms;
 }
 
-/* TODO @TW: cannot compose */
 .root:nth-of-type(1) {
-    border-radius: 0.25rem 0 0 0.25rem;
-    margin-left: 0;
+    @apply ml-0;
+    @apply rounded-tl;
+    @apply rounded-bl;
 }
 
-/* TODO @TW: cannot compose */
 .root:nth-last-of-type(1) {
-    border-radius: 0 0.25rem 0.25rem 0;
+    @apply rounded-tr;
+    @apply rounded-br;
 }
 
 .content {

package/lib/components/CartPage/GiftCards/giftCards.module.css

@@ -30,7 +30,7 @@
     composes: lg_grid-cols-autoLast from global;
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .card {
         grid-template-areas:
             'card_entry apply_button'
@@ -42,27 +42,20 @@
 }
 
 .invalid_card_error {
-    color: red;
+    composes: text-red-700 from global;
 }
 
-/* TODO @TW: cannot compose */
 .card_input_container_error input {
-    /* composes: border-error from global; */
-    border-color: rgb(var(--venia-global-color-red-400));
+    @apply border-error;
 }
 
-/* TODO @TW: cannot compose */
 .card_input_container_error input:focus {
-    /* composes: border-gray-600 from global; */
-    border-color: rgb(var(--venia-global-color-gray-600));
+    @apply border-inputFocus;
 }
 
-/* TODO @TW: cannot compose */
 .card_input_container_error p {
-    /* composes: text-error from global; */
-    color: rgb(var(--venia-global-color-error));
-    /* composes: font-semibold from global; */
-    font-weight: 600;
+    @apply text-error;
+    @apply font-semibold;
 }
 
 .cards_container {
@@ -95,7 +88,7 @@
 .applyLabel {
     composes: label from '../../Field/field.module.css';
 
-    composes: hidden from global;
+    @apply hidden;
 
-    composes: lg_block from global;
+    @apply lg_block;
 }

package/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css

@@ -7,7 +7,7 @@
 }
 
 /* on mobile... */
-@media (max-width: 959px) {
+@media screen(-lg) {
     .entryForm,
     .entryFormError {
         /* switch to rows. */
@@ -16,24 +16,17 @@
     }
 }
 
-/* TODO @TW: cannot compose */
 .entryFormError input {
-    /* composes: border-error from global; */
-    border-color: rgb(var(--venia-global-color-red-400));
+    @apply border-error;
 }
 
-/* TODO @TW: cannot compose */
 .entryFormError input:focus {
-    /* composes: border-gray-600 from global; */
-    border-color: rgb(var(--venia-global-color-gray-600));
+    @apply border-inputFocus;
 }
 
-/* TODO @TW: cannot compose */
 .entryFormError p {
-    /* composes: text-error from global; */
-    color: rgb(var(--venia-global-color-error));
-    /* composes: font-semibold from global; */
-    font-weight: 600;
+    @apply text-error;
+    @apply font-semibold;
 }
 
 .errorContainer {

package/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.module.css

@@ -23,7 +23,7 @@
     composes: justify-self-start from global;
 }
 
-@media (max-width: 639px) {
+@media screen(-sm) {
     .root {
         /* Only one column in mobile view. */
         grid-template-columns: 100%;

package/lib/components/CartPage/ProductListing/EditModal/productForm.module.css

@@ -37,7 +37,7 @@
     composes: text-center from global;
     composes: top-2/4 from global;
     composes: z-mask from global;
-    transform: translateY(-50%);
+    composes: -translate-y-1/2 from global;
 }
 
 .dataError {

package/lib/components/CartPage/ProductListing/product.module.css

@@ -20,11 +20,7 @@
 .errorText {
     composes: leading-normal from global;
     composes: text-error from global;
-}
-
-/* TODO @TW: cannot compose */
-.errorText:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .imageContainer {
@@ -53,7 +49,7 @@
     composes: sm_grid from global;
 }
 
-@media (min-width: 640px) {
+@media screen(sm) {
     .details {
         grid-area: details;
         grid-template-areas:
@@ -114,11 +110,8 @@
     composes: text-error from global;
     composes: text-sm from global;
     grid-area: stock;
-}
 
-/* TODO @TW: cannot compose */
-.stockStatusMessage:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .addToListButton {
@@ -137,7 +130,7 @@
     composes: hidden from global;
 }
 
-@media (max-width: 639px) {
+@media screen(-sm) {
     .name,
     .options,
     .price,

package/lib/components/CartPage/cartPage.module.css

@@ -28,9 +28,8 @@
     composes: leading-tight from global;
 }
 
-/* TODO @TW: cannot compose */
-.stockStatusMessageContainer:empty {
-    display: none;
+.stockStatusMessageContainer {
+    composes: empty_hidden from global;
 }
 
 .items_container {
@@ -56,7 +55,7 @@
     composes: top-[5.5rem] from global; /* TODO @TW: review */
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     .body {
         /* Only one column in mobile view. */
         grid-template-columns: 100%;

package/lib/components/CategoryTree/categoryLeaf.module.css

@@ -22,6 +22,6 @@
 .text {
     composes: inline-block from global;
     composes: overflow-hidden from global;
-    composes: overflow-ellipsis from global;
+    composes: text-ellipsis from global;
     composes: whitespace-nowrap from global;
 }

package/lib/components/Checkbox/checkbox.module.css

@@ -26,6 +26,12 @@
 
     /* TODO @TW: review, replaces input:disabled. Check if working. */
     composes: disabled_cursor-not-allowed from global;
+
+    composes: active_enabled_shadow-radioActive from global;
+    composes: active_enabled_outline-0 from global;
+
+    composes: focus_enabled_shadow-radioFocus from global;
+    composes: focus_enabled_outline-0 from global;
 }
 
 .icon {
@@ -47,24 +53,14 @@
 }
 
 /* When the input is disabled, update the cursor on the sibling label element. */
-/* TODO @TW: cannot compose */
 .input:disabled ~ .label {
-    cursor: default;
+    @apply cursor-default;
 }
 
 .input:checked:enabled + .icon {
     --stroke: var(--venia-brand-color-1-700);
 }
 
-/* TODO @TW: cannot compose, needs "checked" variant enabled. Cannot combine variants. */
-.input:active:enabled,
-.input:focus:enabled {
-    /* composes: active_shadow-radioActive from global; */
-    /* composes: focus_shadow-radioFocus from global; */
-    box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
-    outline: none;
-}
-
 .input_shimmer {
     composes: h-[1.5rem] from global;
     composes: rounded from global;

package/lib/components/Checkout/form.module.css

@@ -4,8 +4,8 @@
 .body {
     composes: body from './flow.module.css';
 
-    composes: gap-0 from global;
-    composes: p-0 from global;
+    @apply gap-0;
+    @apply p-0;
 }
 
 .footer {
@@ -31,11 +31,7 @@
     /* The ::first-letter pseudo element below only works on block elements */
     composes: block from global;
     composes: lowercase from global;
-}
-
-/* TODO @TW: cannot compose */
-.paymentDisplaySecondary::first-letter {
-    composes: uppercase from global;
+    composes: first-letter_uppercase from global;
 }
 
 @keyframes enter {

package/lib/components/Checkout/paymentsForm.module.css

@@ -8,7 +8,7 @@
 .body {
     composes: body from './flow.module.css';
 
-    composes: h-[30rem] from global;
+    @apply h-[30rem];
 }
 
 .footer {
@@ -78,7 +78,6 @@
     z-index: unset;
 }
 
-/* TODO @TW: cannot compose */
 :global .braintree-placeholder {
-    display: none;
+    @apply hidden;
 }

package/lib/components/Checkout/section.module.css

@@ -35,7 +35,7 @@
     composes: justify-self-stretch from global;
     composes: leading-normal from global;
     composes: overflow-hidden from global;
-    composes: overflow-ellipsis from global;
+    composes: text-ellipsis from global;
     composes: text-sm from global;
     composes: whitespace-nowrap from global;
 }

package/lib/components/CheckoutPage/AddressBook/addressBook.module.css

@@ -37,10 +37,9 @@
     composes: lg_row-start-1 from global;
 }
 
-@media (max-width: 479px) {
-    /* TODO @TW: cannot compose */
+@media screen(-xs) {
     .buttonContainer button {
-        min-width: 8rem;
+        @apply min-w-32;
     }
 }
 
@@ -66,7 +65,7 @@
     composes: border-dashed from global;
     composes: border-subtle from global;
     composes: font-semibold from global;
-    composes: rounded-md from global;
+    composes: rounded-button from global;
     composes: text-brand-dark from global;
     composes: text-sm from global;
     transition: border-color 384ms var(--venia-global-anim-standard);

package/lib/components/CheckoutPage/AddressBook/addressCard.module.css

@@ -10,7 +10,7 @@
     composes: px-5 from global;
     composes: py-xs from global;
     composes: relative from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     composes: shadow-none from global;
     composes: text-colorDefault from global;
     transition: border-color 384ms var(--venia-global-anim-in);
@@ -26,8 +26,8 @@
 .root_selected {
     composes: root;
 
-    composes: border-brand-dark from global;
-    composes: cursor-default from global;
+    @apply border-brand-dark;
+    @apply cursor-default;
 }
 
 .root_updated {
@@ -67,7 +67,7 @@
     composes: mb-1 from global;
     composes: px-sm from global;
     composes: py-1.5 from global;
-    composes: rounded-md from global;
+    composes: rounded-badge from global;
     composes: text-xs from global;
     composes: w-max from global;
 }