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

package/lib/components/RadioGroup/radio.module.css

@@ -1,64 +1,68 @@
 .root {
-    align-items: center;
-    color: rgb(var(--venia-global-color-gray-900));
-    display: grid;
-    gap: 0.75rem;
-    grid-auto-flow: column;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: m-0 from global;
+    composes: text-colorDefault from global;
     grid-template-areas: 'input label';
     grid-template-columns: min-content 1fr;
-    margin: 0;
-    justify-items: center;
-    line-height: 1.5rem;
-}
-
-.input_base {
-    border-radius: 50%;
-    height: 1.5rem;
-    margin: 0;
-    width: 1.5rem;
-    z-index: 2;
 }
 
 .input {
-    composes: input_base;
-    -webkit-appearance: none;
-    background: none;
-    background-clip: content-box;
-    border: 7px solid transparent;
+    composes: appearance-none from global;
+    composes: bg-clip-content from global;
+    composes: bg-transparent from global;
+    composes: border-8 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: h-[1.5rem] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[1.5rem] from global;
+    composes: z-foreground from global;
     grid-area: input;
+
+    composes: active_outline-none from global;
+    composes: active_shadow-radioActive from global;
+
+    composes: checked_bg-brand-dark from global;
+
+    composes: focus_outline-none from global;
+    composes: focus_shadow-radioFocus from global;
 }
 
 .icon {
+    composes: h-[1.5rem] from global;
+    composes: w-[1.5rem] from global;
+    composes: z-surface from global;
     grid-area: input;
-    height: 1.5rem;
-    width: 1.5rem;
-    z-index: 1;
 }
 
+/* TODO @TW: cannot compose */
 .icon svg {
+    /* composes: stroke-gray-600 from global; */
     stroke: rgb(var(--venia-global-color-gray-600));
 }
 
 .label {
-    font-size: var(--venia-typography-body-S-fontSize);
+    composes: justify-self-start from global;
+    composes: text-sm from global;
     grid-area: label;
-    justify-self: start;
-}
-
-.input:checked {
-    background-color: rgb(var(--venia-brand-color-1-700));
 }
 
+/* TODO @TW: cannot compose */
 .input:checked + .icon svg {
+    /* composes: stroke-brand-base from global; */
     stroke: rgb(var(--venia-brand-color-1-700));
 }
 
-.input:active,
-.input:focus {
-    box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
-    outline: none;
-}
-
 .input_shimmer {
-    composes: input_base;
+    composes: h-[1.5rem] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[1.5rem] from global;
+    composes: z-foreground from global;
 }

package/lib/components/RadioGroup/radioGroup.module.css

@@ -1,28 +1,24 @@
 .root {
-    /*
-     * Each grid item gets at least 125px.
-     * Wrap the grid items.
-     */
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-    gap: 0.5rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
 }
 
 .radioContainer {
-    display: grid;
-    gap: 0.75rem;
-    grid-auto-flow: column;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: leading-normal from global;
     grid-template-areas: 'input label';
     grid-template-columns: min-content 1fr;
-    justify-content: center;
-    line-height: 1.5rem;
 }
 
 .message {
-    font-size: 1rem;
-    margin-top: 1rem;
+    composes: mt-xs from global;
+    composes: text-colorDefault from global;
 }
 
+/* TODO @TW: cannot compose */
 .message:empty {
     display: none;
 }

package/lib/components/RichContent/plainHtmlRenderer.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import htmlStringImgUrlConverter from '@magento/peregrine/lib/util/htmlStringImgUrlConverter';
 
-const toHTML = str => ({ __html: str });
+const toHTML = str => ({ __html: htmlStringImgUrlConverter(str) });
 
 function PlainHtmlRenderer({ html, classes }) {
     // Even if empty, render a div with no content, for styling purposes.

package/lib/components/RichContent/richContent.module.css

@@ -71,11 +71,15 @@
     margin-top: 0;
 }
 
+/* TODO @TW: cannot compose */
 .root ol {
+    /* composes: list-decimal from global; */
     list-style-type: decimal;
 }
 
+/* TODO @TW: cannot compose */
 .root ul {
+    /* composes: list-disc from global; */
     list-style-type: disc;
 }
 
@@ -96,18 +100,26 @@
 
 .root pre {
     padding: 1rem;
+    /* composes: border from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
     border: 1px solid rgb(var(--venia-global-color-border));
+    /* composes: bg-gray-900 from global; */
     background: rgb(var(--venia-global-color-gray));
 }
 
 .root :global .cms-content-important {
     padding: 1rem;
+    /* composes: border from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
     border: 1px solid rgb(var(--venia-global-color-border));
+    /* composes: bg-gray-900 from global; */
     background: rgb(var(--venia-global-color-gray));
     font-size: 1.125rem;
 }
 
-@media only screen and (min-width: 769px) {
+@media (min-width: 800px) {
     .root h1 {
         font-size: 3rem;
     }

package/lib/components/RichText/richText.module.css

@@ -1,14 +1,18 @@
 .root {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding: 0 0.5rem;
+    composes: leading-tight from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: text-sm from global;
 }
 
+/* TODO @TW: cannot compose */
 .root p {
     margin: 0 0 1rem;
 }
 
+/* TODO @TW: cannot compose */
 .root ul {
+    /* composes: list-disc from global; */
     list-style-type: disc;
     margin: 0 0 1rem;
     padding-left: 2.5rem;

package/lib/components/SavedPaymentsPage/creditCard.module.css

@@ -1,22 +1,26 @@
 .root {
-    border-radius: 0.375rem;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    column-gap: 1rem;
-    display: grid;
-    grid-template-columns: 1fr auto;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: min-w-[20rem] from global;
+    composes: px-md from global;
+    composes: py-sm from global;
+    composes: rounded-md from global;
+    composes: relative from global;
     min-height: 10rem;
-    min-width: 20rem;
-    padding: 1.5rem 2rem;
-    position: relative;
 }
 
 .root_active {
     composes: root;
-    border-color: rgb(var(--venia-brand-color-1-600));
+
+    composes: border-brand-dark from global;
 }
 
 .title {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
     grid-column: 1 / span 1;
     grid-row: 1 / span 1;
 }
@@ -38,62 +42,70 @@
 
 .deleteButton {
     composes: root from '../LinkButton/linkButton.module.css';
-    text-decoration: none;
+
+    composes: no-underline from global;
 }
 
 .deleteConfirmationContainer {
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 0.375rem;
-    display: grid;
-    gap: 2rem;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: left-0 from global;
+    composes: opacity-100 from global;
+    composes: px-md from global;
+    composes: py-xs from global;
+    composes: rounded-md from global;
+    composes: top-0 from global;
+    composes: w-full from global;
     grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    height: 100%;
-    justify-items: center;
-    opacity: 1;
-    left: 0;
-    padding: 1.25rem 2rem;
-    position: absolute;
-    top: 0;
     transform: scaleX(1);
     transition-duration: 192ms;
     transition-timing-function: var(--venia-global-anim-in);
     transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
-    width: 100%;
 }
 
 .deleteConfirmationContainer_hidden {
     composes: deleteConfirmationContainer;
-    opacity: 0;
+
+    composes: opacity-0 from global;
     transform: scaleX(0);
     transition-delay: 0s, 192ms, 0s;
     transition-timing-function: var(--venia-global-anim-out);
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
     visibility: hidden;
 }
 
 .confirmDeleteButton {
     composes: root_normalPriorityNegative from '../Button/button.module.css';
-    background-color: white;
-    order: 1;
+
+    composes: bg-white from global;
+    composes: order-1 from global;
+    composes: order-first from global;
 }
 
 .cancelDeleteButton {
     composes: root_lowPriority from '../Button/button.module.css';
-    background-color: white;
-}
 
-@media (max-width: 960px) {
-    .deleteText {
-        display: none;
-    }
+    composes: bg-white from global;
 }
 
-@media (max-width: 425px) {
-    .confirmDeleteButton {
-        order: 0;
-    }
+.deleteText {
+    composes: hidden from global;
+
+    composes: xs_lg_block from global;
+}
 
+@media (max-width: 479px) {
     .deleteConfirmationContainer {
         transform: scaleY(1);
     }

package/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css

@@ -1,61 +1,56 @@
 .root {
-    padding: 2.5rem 3rem;
-    max-width: var(--venia-global-maxWidth);
-    margin: 0 auto;
+    composes: max-w-site from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-sm from global;
+    composes: py-md from global;
+
+    composes: lg_px-lg from global;
 }
 
 .heading {
-    font-family: var(--venia-global-fontFamily-serif);
-    font-weight: var(--venia-global-fontWeight-bold);
-    line-height: 1.25em;
-    margin-bottom: 2rem;
-    text-align: center;
-    text-transform: capitalize;
+    composes: capitalize from global;
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: leading-tight from global;
+    composes: mb-md from global;
+    composes: text-center from global;
 }
 
 .subHeading {
-    margin-bottom: 2rem;
-    text-align: center;
+    composes: mb-md from global;
+    composes: text-left from global;
+
+    composes: lg_text-center from global;
 }
 
+/* prettier-ignore */
 .content {
-    display: grid;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
     grid-auto-rows: minmax(6rem, max-content);
-    grid-template-columns: 1fr 1fr 1fr;
+
+    /* TODO @TW: review (B7) */
+    composes: lg_grid-cols-[1fr,1fr,1fr] from global;
 }
 
 .noPayments {
-    text-align: center;
+    composes: text-center from global;
 }
 
 .addButton {
-    border: 2px dashed rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 600;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: rounded-md from global;
+    composes: text-brand-dark from global;
+    composes: text-sm from global;
     transition: border-color 384ms var(--venia-global-anim-standard);
-    color: rgb(var(--venia-brand-color-1-700));
-}
-.addButton:focus {
-    outline: none;
-    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
-}
-.addButton:hover {
-    border-color: rgb(var(--venia-brand-color-1-600));
-}
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
 
-    .content {
-        grid-template-columns: 1fr;
-    }
+    composes: focus_outline-none from global;
+    composes: focus_shadow-buttonFocus from global;
 
-    .subHeading {
-        text-align: left;
-    }
+    composes: hover_border-brand-dark from global;
 }

package/lib/components/ScrollAnchor/scrollAnchor.module.css

@@ -1,4 +1,6 @@
 .anchor {
-    position: absolute;
-    top: calc(var(--venia-global-header-minHeight) * -1 - 5px);
+    composes: absolute from global;
+    top: calc(
+        var(--venia-global-header-minHeight) * -1 - 5px
+    ); /* TODO @TW: review */
 }

package/lib/components/SearchBar/__tests__/suggestedProduct.spec.js

@@ -20,6 +20,14 @@ const defaultProps = {
                 value: 3.5
             }
         }
+    },
+    price_range: {
+        maximum_price: {
+            final_price: {
+                currency: 'USD',
+                value: 3.5
+            }
+        }
     }
 };
 

package/lib/components/SearchBar/autocomplete.js

@@ -40,6 +40,14 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
                         }
                     }
                 }
+                price_range {
+                    maximum_price {
+                        final_price {
+                            currency
+                            value
+                        }
+                    }
+                }
             }
             page_info {
                 total_pages

package/lib/components/SearchBar/autocomplete.module.css

@@ -1,60 +1,62 @@
-.hidden {
-    opacity: 0;
-    transform: translate3d(0, -2rem, 0);
-    transition-duration: 192ms;
-    transition-timing-function: var(--venia-global-anim-out);
-    visibility: hidden;
-}
-
-.visible {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    transition-duration: 224ms;
-    transition-timing-function: var(--venia-global-anim-in);
-    visibility: visible;
-}
-
 .root {
-    background-color: white;
-    border: 2px solid rgb(var(--venia-global-color-gray-600));
-    border-radius: 0 0 6px 6px;
-    border-top-style: none;
-    box-shadow: -6px 6px rgb(var(--venia-brand-color-1-100));
-    display: grid;
-    font-size: 0.8125rem;
-    gap: 0.75rem;
-    left: 0;
-    padding: 1rem 1rem;
-    position: absolute;
-    right: 0;
-    top: 2.25rem;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border-2 from global;
+    composes: border-input from global;
+    composes: border-solid from global;
+    composes: border-t-0 from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: left-0 from global;
+    composes: p-xs from global;
+    composes: right-0 from global;
+    composes: rounded-b-md from global;
+    composes: rounded-t-none from global;
+    composes: shadow-inputFocus from global;
+    composes: text-sm from global;
+    composes: top-9 from global;
+    composes: z-menu from global;
     transition-property: opacity, transform, visibility;
-    z-index: 2;
 }
 
 .root_hidden {
-    composes: root hidden;
+    composes: root;
+
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    transform: translate3d(0, -2rem, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
 }
 
 .root_visible {
-    composes: root visible;
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: visible from global;
+    transform: translate3d(0, 0, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
 }
 
 .message {
-    color: rgb(var(--venia-global-color-text-alt));
-    padding: 0 0.75rem;
-    text-align: center;
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: text-center from global;
+    composes: text-subtle from global;
 }
 
+/* TODO @TW: cannot compose */
 .message:empty {
     padding: 0;
 }
 
 .suggestions {
-    display: grid;
-    gap: 0.5rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
 }
 
+/* TODO @TW: cannot compose */
 .suggestions:empty {
     display: none;
 }

package/lib/components/SearchBar/searchBar.module.css

@@ -1,43 +1,51 @@
 .root {
+    composes: items-center from global;
+    composes: justify-items-center from global;
     composes: justify-self-center from global;
-    align-items: center;
+    composes: max-w-site from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: hidden from global; */
     display: none;
-    justify-items: center;
-    max-width: var(--venia-global-maxWidth);
-    padding: 0 1rem;
-    width: 100%;
 }
 
 .root_open {
     composes: root;
+
+    composes: z-dropdown from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: grid from global; */
     display: grid;
-    z-index: 3;
 }
 
 .form {
-    align-items: center;
-    display: grid;
-    justify-items: stretch;
-    width: 100%;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-stretch from global;
+    composes: w-full from global;
 }
 
 .container {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    max-width: 24rem;
-    padding-bottom: 1rem;
-    position: relative;
-    width: 100%;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-[24rem] from global;
+    composes: pb-xs from global;
+    composes: relative from global;
+    composes: w-full from global;
 }
 
 .search {
-    display: grid;
-    position: relative;
+    composes: grid from global;
+    composes: relative from global;
 }
 
 .autocomplete {
-    display: grid;
-    position: relative;
-    z-index: 1;
+    composes: grid from global;
+    composes: relative from global;
+    composes: z-menu from global;
 }