@magento/venia-ui 9.3.0 → 9.4.0-alpha.1

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css

@@ -1,12 +1,13 @@
 .root {
-    display: grid;
-    gap: 0.5rem 1.5rem;
-    grid-template-columns: 1fr 1fr;
-    width: 100%;
+    composes: gap-x-2xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-cols-2 from global;
+    composes: w-full from global;
 }
 
 .field {
-    grid-column-end: span 2;
+    composes: col-end-span2 from global;
 }
 
 .email,
@@ -22,19 +23,20 @@
 
 .firstname,
 .lastname {
-    grid-column-end: span 1;
+    composes: col-end-span1 from global;
 }
 
 .buttons {
     composes: field;
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
-    justify-self: center;
-    padding: 1rem;
+
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-center from global;
+    composes: p-xs from global;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;
     }

package/lib/components/CheckoutPage/ShippingInformation/card.module.css

@@ -1,12 +1,12 @@
 .root {
-    display: grid;
-    font-size: 1rem;
-    row-gap: 0.5rem;
-    padding-top: 1.125rem;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
 }
 
 .address {
-    display: grid;
-    gap: 0.5rem;
-    padding-top: 1.125rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: pt-xs from global;
 }

package/lib/components/CheckoutPage/ShippingInformation/editModal.module.css

@@ -1,73 +1,90 @@
 .root {
-    background-color: white;
-    display: grid;
-    left: calc(50% - 370px);
-    grid-template-rows: auto 1fr;
-    max-height: 90vh;
-    max-width: 740px;
-    opacity: 0;
-    overflow: hidden;
-    position: fixed;
-    top: 5vh;
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: fixed from global;
+    composes: grid from global;
+    composes: grid-rows-autoFirst from global;
+    composes: h-full from global;
+    composes: left-auto from global;
+    composes: max-w-modal from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
     transform: scale(1.15);
     transition-duration: 192ms;
     transition-timing-function: var(--venia-global-anim-out);
     transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
     visibility: hidden;
-    width: 100%;
-    z-index: 3;
+
+    composes: lg_h-auto from global;
+    composes: lg_max-h-modal from global;
+    composes: lg_max-w-[740px] from global;
+    composes: lg_top-[5vh] from global;
+}
+
+@media (max-width: 959px) {
+    .root {
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@media (min-width: 960px) {
+    /* TODO @TW: review */
+    .root {
+        left: calc(50% - 370px);
+    }
 }
 
 .root_open {
     composes: root;
-    box-shadow: 1px 0 rgb(var(--venia-global-color-border));
-    opacity: 1;
+
+    composes: opacity-100 from global;
+    composes: shadow-modal from global;
     transform: scale(1);
     transition-duration: 224ms;
     transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
 }
 
-.body {
-    overflow: auto;
-    padding: 0.5rem 2rem;
-}
+@media (max-width: 959px) {
+    .root_open {
+        composes: root;
 
-.header {
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: space-between;
-    padding: 0.875rem 2rem;
+        transform: translate3d(0, 0, 0);
+    }
 }
 
-.headerText {
-    align-self: center;
-    color: rgb(var(--venia-global-color-text-alt));
-}
+.body {
+    composes: overflow-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
 
-@media (max-width: 960px) {
-    .root {
-        bottom: 0;
-        height: 100%;
-        left: auto;
-        max-height: none;
-        max-width: 360px;
-        right: 0;
-        top: 0;
-        transform: translate3d(100%, 0, 0);
-    }
+    composes: lg_px-md from global;
+}
 
-    .root_open {
-        composes: root;
-        transform: translate3d(0, 0, 0);
-    }
+.header {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-between from global;
+    composes: p-3.5 from global;
 
-    .body {
-        padding: 0.5rem 1rem;
-    }
+    composes: lg_px-md from global;
+    composes: lg_py-3.5 from global;
+}
 
-    .header {
-        padding: 0.875rem;
-    }
+.headerText {
+    composes: self-center from global;
+    composes: text-subtle from global;
 }

package/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css

@@ -1,62 +1,73 @@
 .root {
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    padding: 2rem;
+    /* TODO @TW: review (B6) */
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: p-md from global;
+    composes: rounded-md from global;
 }
 
 .root_editMode {
     composes: root;
-    border: none;
-    border-radius: 0px;
-    border-bottom: 2px solid rgb(var(--venia-global-color-gray-400));
-    padding: 0;
+
+    /* TODO @TW: review (B6) */
+    composes: border-0 from global;
+    composes: border-b-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: p-0 from global;
+    composes: rounded-none from global;
 }
 
 .root_updated {
     composes: root;
+
     animation: flash var(--venia-global-anim-bounce) 640ms 2;
 }
 
 .cardHeader {
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
 }
 
 .cardTitle {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .editButton {
-    padding: 1rem;
-    margin: -1rem;
-    color: rgb(var(--venia-brand-color-1-700));
+    composes: -m-xs from global;
+    composes: p-xs from global;
+    composes: text-brand-dark from global;
 }
 
 .editWrapper {
-    display: grid;
-    padding: 1rem 0 1.5rem;
-    row-gap: 0.5rem;
+    composes: grid from global;
+    composes: pb-sm from global;
+    composes: pt-xs from global;
+    composes: px-0 from global;
+    composes: gap-y-2xs from global;
 }
 
 .editTitle {
-    font-weight: 600;
-    text-transform: uppercase;
+    composes: font-semibold from global;
+    composes: uppercase from global;
 }
 
 .editIcon {
-    stroke: rgb(var(--venia-brand-color-1-700));
+    composes: stroke-brand-base from global;
+}
+
+.editText {
+    composes: hidden from global;
+
+    composes: lg_inline from global;
 }
 
 .loading {
     composes: root from '../../LoadingIndicator/indicator.module.css';
-    text-align: center;
-}
 
-@media (max-width: 960px) {
-    .editText {
-        display: none;
-    }
+    composes: text-center from global;
 }
 
 @keyframes flash {

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

@@ -25,6 +25,7 @@ exports[`it disables inputs when the page is updating 1`] = `
       className="root"
     >
       <label
+        aria-label=""
         className="root"
         htmlFor="shipping_method--flatrate|flatrate"
       >
@@ -146,6 +147,7 @@ exports[`it renders correctly 1`] = `
       className="root"
     >
       <label
+        aria-label=""
         className="root"
         htmlFor="shipping_method--flatrate|flatrate"
       >

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

@@ -89,6 +89,7 @@ exports[`it disables the submit button while loading 1`] = `
               className="root"
             >
               <label
+                aria-label=""
                 className="root"
                 htmlFor="shipping_method--flatrate|flatrate"
               >
@@ -298,6 +299,7 @@ exports[`it renders correctly 1`] = `
               className="root"
             >
               <label
+                aria-label=""
                 className="root"
                 htmlFor="shipping_method--flatrate|flatrate"
               >

package/lib/components/CheckoutPage/ShippingMethod/completedView.module.css

@@ -1,50 +1,47 @@
 .root {
-    height: 100%;
+    composes: h-full from global;
 }
 
 .contents {
-    display: grid;
     grid-template-rows: auto auto;
-    margin-top: 1.125rem;
-    row-gap: 0.5rem;
-    text-align: left;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+    composes: mt-xs from global;
+    composes: text-left from global;
 }
 
 .editButton {
-    color: rgb(var(--venia-brand-color-1-700));
-    padding: 1rem;
-    margin: -1rem;
+    composes: p-xs from global;
+    composes: -m-xs from global;
+    composes: text-brand-dark from global;
+}
+
+.editButtonText {
+    composes: hidden from global;
+
+    composes: lg_inline from global;
 }
 
 .editIcon {
-    stroke: rgb(var(--venia-brand-color-1-700));
+    composes: stroke-brand-base from global;
 }
 
 .error {
-    align-self: center;
-    color: rgb(var(--venia-global-color-error));
-    line-height: var(--venia-global-lineHeight-300);
+    composes: leading-normal from global;
+    composes: self-center from global;
+    composes: text-error from global;
 }
 
 .free {
-    text-transform: uppercase;
+    composes: uppercase from global;
 }
 
 .heading {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .titleContainer {
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
-}
-
-/*
- *  Mobile-specific styles.
- */
-@media (max-width: 960px) {
-    .editButtonText {
-        display: none;
-    }
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
 }

package/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css

@@ -1,30 +1,32 @@
 .root {
-    border: none;
-    border-radius: 0px;
-    border-bottom: 2px solid rgb(var(--venia-global-color-gray-400));
-    padding: 2rem 0rem;
-    display: grid;
-    row-gap: 1rem;
+    composes: border-b-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: gap-y-xs from global;
+    composes: p-md from global;
+    composes: rounded-md from global;
 }
 
 .done {
     composes: root;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    padding: 2rem;
+
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
 }
 
 .editingHeading {
-    text-transform: uppercase;
+    composes: uppercase from global;
 }
 
 .form {
-    display: grid;
-    grid-template-rows: 1fr auto;
-    row-gap: 1.5rem;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-rows-autoLast from global;
 }
 
 .formButtons {
-    display: flex;
-    justify-content: center;
+    composes: flex from global;
+    composes: justify-center from global;
 }

package/lib/components/CheckoutPage/ShippingMethod/shippingRadios.module.css

@@ -1,33 +1,22 @@
-.error {
-    color: rgb(var(--venia-global-color-error));
-    line-height: var(--venia-global-lineHeight-300);
+.radioRoot {
+    composes: gap-2xs from global;
+    composes: grid from global;
 }
 
 .radioLabel {
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 1rem 0.5rem;
-    justify-content: start;
-}
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-[100%] from global;
+    composes: justify-start from global;
 
-.radioMessage {
-    display: none;
+    composes: sm_grid-cols-autoAuto from global;
 }
 
-.radioRoot {
-    /* We explicitly want one radio item per row. */
-    composes: root from '../../RadioGroup/radioGroup.module.css';
-    grid-template-columns: auto;
+.radioMessage {
+    composes: hidden from global;
 }
 
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 640px) {
-    .radioLabel {
-        display: grid;
-        grid-template-columns: 100%;
-        gap: 0.5rem;
-    }
+.error {
+    composes: leading-normal from global;
+    composes: text-error from global;
 }

package/lib/components/CheckoutPage/ShippingMethod/updateModal.module.css

@@ -1,3 +1,3 @@
 .errorContainer {
-    padding-bottom: 1rem;
+    composes: pb-xs from global;
 }