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

package/lib/components/FilterModal/filterModal.module.css

@@ -1,66 +1,87 @@
 .root {
-    --borderColor: var(--venia-global-color-border);
-    background-color: white;
-    bottom: 0;
-    display: grid;
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: max-w-modal from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: fixed from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
     grid-template-rows: 1fr 7rem;
-    height: 100%;
-    left: 0;
-    max-width: 360px;
-    opacity: 0;
-    overflow: hidden;
-    position: fixed;
-    top: 0;
     transform: translate3d(-100%, 0, 0);
     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;
 }
 
 .root_open {
     composes: root;
-    box-shadow: 1px 0 rgb(var(--borderColor));
-    opacity: 1;
+
+    composes: opacity-100 from global;
+    composes: shadow-modal from global;
     transform: translate3d(0, 0, 0);
     transition-duration: 224ms;
     transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
 }
 
 .body {
-    border-bottom: 1px solid rgb(var(--borderColor));
-    overflow: auto;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: overflow-auto from global;
 }
 
 .header {
-    display: flex;
-    justify-content: space-between;
-    padding: 1.25rem 1.25rem 0;
+    composes: flex from global;
+    composes: justify-between from global;
+    composes: pb-0 from global;
+    composes: pt-5 from global;
+    composes: px-5 from global;
 }
 
 .headerTitle {
-    display: flex;
-    align-items: center;
-    font-size: var(--venia-global-typography-heading-L-fontSize);
-    line-height: 0.875rem;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-none from global;
+    composes: text-xl from global;
 }
 
 .action {
-    padding: 1rem 1.25rem 0;
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
 }
 
+/* TODO @TW: cannot compose */
 .action button {
-    font-size: var(--venia-typography-body-S-fontSize);
+    /* composes: text-sm from global; */
+    font-size: 0.875rem;
+    /* composes: no-underline from global; */
     text-decoration: none;
 }
 
 .blocks {
-    padding: 1rem 1.25rem 0;
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
 }
 
+/* TODO @TW: cannot compose */
 .blocks > li:last-child {
-    border-bottom: 2px solid rgb(var(--borderColor));
+    /* composes: border-b-2 from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border-bottom: 2px solid rgb(var(--venia-global-color-border));
 }

package/lib/components/FilterModal/filterSearch.module.css

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

package/lib/components/FilterModalOpenButton/filterModalOpenButton.module.css

@@ -1,10 +1,7 @@
 .filterButton {
     composes: root_lowPriority from '../Button/button.module.css';
-    min-width: 6.25rem;
-}
 
-@media (min-width: 1024px) {
-    .filterButton {
-        display: none;
-    }
+    composes: min-w-[6.25rem] from global;
+
+    composes: lg_hidden from global;
 }

package/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js

@@ -61,13 +61,19 @@ jest.mock('@magento/peregrine/lib/talons/FilterSidebar', () => ({
     useFilterSidebar: jest.fn(({ filters }) => {
         const names = new Map();
         const itemsByGroup = new Map();
+        const filterFrontendInput = new Map();
 
         for (const filter of filters) {
-            const { options, label: name, attribute_code: group } = filter;
+            const {
+                options,
+                label: name,
+                attribute_code: group,
+                frontend_input
+            } = filter;
             const items = [];
             // add filter name
             names.set(group, name);
-
+            filterFrontendInput.set(group, frontend_input);
             // add items
             for (const { label, value } of options) {
                 items.push({ title: label, value });
@@ -79,6 +85,7 @@ jest.mock('@magento/peregrine/lib/talons/FilterSidebar', () => ({
             filterApi: null,
             filterItems: itemsByGroup,
             filterNames: names,
+            filterFrontendInput,
             filterState: mockFilterState,
             handleApply: mockHandleApply,
             handleReset: jest.fn()

package/lib/components/FilterSidebar/filterSidebar.js

@@ -23,6 +23,7 @@ const FilterSidebar = props => {
         filterApi,
         filterItems,
         filterNames,
+        filterFrontendInput,
         filterState,
         handleApply,
         handleReset
@@ -54,12 +55,13 @@ const FilterSidebar = props => {
             Array.from(filterItems, ([group, items], iteration) => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
-
+                const frontendInput = filterFrontendInput.get(group);
                 return (
                     <FilterBlock
                         key={group}
                         filterApi={filterApi}
                         filterState={blockState}
+                        filterFrontendInput={frontendInput}
                         group={group}
                         items={items}
                         name={groupName}
@@ -72,6 +74,7 @@ const FilterSidebar = props => {
             filterApi,
             filterItems,
             filterNames,
+            filterFrontendInput,
             filterState,
             filterCountToOpen,
             handleApplyFilter

package/lib/components/FilterSidebar/filterSidebar.module.css

@@ -1,50 +1,58 @@
 .root {
-    --borderColor: var(--venia-global-color-border);
-    background-color: white;
-    bottom: 0;
-    display: none;
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: hidden from global;
+    composes: max-w-modal from global;
+    composes: w-full from global;
+    composes: z-foreground from global;
     grid-template-rows: 1fr 7rem;
-    max-width: 360px;
-    width: 100%;
-    z-index: 3;
+
+    composes: lg_grid from global;
 }
 
 .body {
-    overflow: auto;
+    composes: overflow-auto from global;
 }
 
 .header {
-    display: flex;
-    justify-content: space-between;
-    padding: 1.25rem 1.25rem 0;
+    composes: flex from global;
+    composes: justify-between from global;
+    composes: pb-0 from global;
+    composes: pt-5 from global;
+    composes: px-5 from global;
 }
 
 .headerTitle {
-    display: flex;
-    align-items: center;
-    font-size: var(--venia-global-typography-heading-L-fontSize);
-    line-height: 0.875rem;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-none from global;
+    composes: text-lg from global;
 }
 
 .action {
-    padding: 1rem 1.25rem 0;
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
 }
 
+/* TODO @TW: cannot compose */
 .action button {
-    font-size: var(--venia-typography-body-S-fontSize);
+    /* composes: text-sm from global; */
+    font-size: 0.875rem;
+    /* composes: no-underline from global; */
     text-decoration: none;
 }
 
 .blocks {
-    padding: 1rem 1.25rem 0;
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
 }
 
+/* TODO @TW: cannot compose */
 .blocks > li:last-child {
-    border-bottom: 2px solid rgb(var(--borderColor));
-}
-
-@media (min-width: 1024px) {
-    .root {
-        display: grid;
-    }
+    /* composes: border-b-2 from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border-bottom: 2px solid rgb(var(--venia-global-color-border));
 }

package/lib/components/Footer/footer.module.css

@@ -1,160 +1,140 @@
 .root {
-    border-top: 2px solid rgb(var(--venia-global-color-gray-100));
-    color: rgb(var(--venia-global-color-gray-700));
-    display: grid;
-    font-size: var(--venia-typography-body-S-fontSize);
-    grid-template-areas:
-        'links'
-        'brand';
-    grid-template-columns: 100%;
-    line-height: var(--venia-global-lineHeight-300);
-    margin: 0 auto;
-    max-width: var(--venia-global-maxWidth);
-    min-height: 15rem;
-    padding-top: 4rem;
-    row-gap: 4rem;
-    width: 100%;
-}
-
-@media (max-width: 960px) {
-    .root {
-        grid-template-areas: 'links' 'brand';
-        max-width: 960px;
-    }
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-light from global;
+    composes: gap-y-16 from global;
+    composes: grid from global;
+    composes: leading-normal from global;
+    composes: max-w-site from global;
+    composes: min-h-[15rem] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: pt-16 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+    composes: w-full from global;
 }
 
 .links {
-    display: grid;
-    gap: 2rem;
-    grid-area: links;
-    grid-auto-columns: 18rem;
-    grid-auto-flow: column;
-    grid-template-columns: repeat(3, 1.5fr) 3fr;
-    padding: 0 2rem;
-}
+    composes: gap-x-md from global;
+    composes: gap-y-lg from global;
+    composes: grid from global;
+    composes: grid-cols-6 from global;
+    composes: grid-flow-row-dense from global;
+    composes: px-xs from global;
 
-@media (max-width: 960px) {
-    .links {
-        grid-auto-flow: row;
-        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-    }
+    composes: xs_px-md from global;
+    composes: lg_gap-x-sm from global;
+    composes: lg_gap-y-md from global;
+    composes: lg_grid-cols-12 from global;
 }
 
 .linkGroup {
-    align-content: start;
-    display: grid;
-    gap: 1em;
+    composes: col-span-3 from global;
+    composes: content-start from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+
+    composes: xs_col-span-2 from global;
 }
 
-.linkItem:first-child {
-    color: rgb(var(--venia-global-color-gray-900));
-    font-weight: 600;
+.linkItem {
+    composes: first_text-colorDefault from global;
+    composes: first_font-semibold from global;
 }
 
 .callout {
-    font-size: var(--venia-typography-body-S-fontSize);
-    justify-self: center;
-    line-height: var(--venia-global-lineHeight-300);
-    max-width: 20rem;
-    min-width: 20rem;
-}
+    composes: col-span-3 from global;
+    composes: leading-normal from global;
+    composes: max-w-[20rem] from global;
+    composes: text-sm from global;
 
-@media (max-width: 960px) {
-    .callout {
-        justify-self: start;
-    }
+    composes: xs_col-span-6 from global;
+    composes: xs_mx-auto from global;
+    composes: sm_col-span-3 from global;
 }
 
 .calloutHeading {
-    color: rgb(var(--venia-global-color-gray-900));
-    font-size: var(--venia-typography-body-S-fontSize);
-    font-weight: 600;
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
 }
 
 .calloutBody {
-    margin: 1rem 0;
+    composes: mx-0 from global;
+    composes: my-xs from global;
 }
 
 .socialLinks {
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
-    justify-content: start;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-start from global;
 }
 
 .branding {
-    align-items: center;
-    border-top: 2px solid rgb(var(--venia-global-color-gray-100));
-    display: grid;
-    grid-area: brand;
-    grid-auto-flow: column;
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-light from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-auto from global;
+    composes: grid-flow-row from global;
+    composes: h-auto from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: pb-16 from global;
+    composes: pt-md from global;
+    composes: px-md from global;
+    composes: text-center from global;
+    composes: w-full from global;
     grid-template-areas: 'a b c';
-    grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
-    height: 4rem;
-    justify-self: center;
-    padding: 0 1.5rem;
-    width: 100%;
+
+    composes: lg_gap-0 from global;
+    composes: lg_grid-flow-col from global;
+    composes: lg_h-[4rem] from global;
+    composes: lg_justify-self-center from global;
+    composes: lg_px-sm from global;
+    composes: lg_py-0 from global;
+    composes: lg_text-left from global;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     .branding {
-        gap: 1rem;
-        grid-auto-flow: row;
         grid-template-areas: 'c' 'b' 'a';
-        grid-template-columns: auto;
-        height: auto;
-        justify-items: center;
-        padding: 2.5rem 2rem 4rem;
-        text-align: center;
+    }
+}
+
+@media (min-width: 960px) {
+    .branding {
+        grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
     }
 }
 
 .legal {
-    align-items: center;
-    display: grid;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-center from global;
     grid-area: c;
-    grid-auto-flow: column;
-    justify-content: end;
-}
 
-@media (max-width: 960px) {
-    .legal {
-        justify-content: center;
-    }
+    composes: lg_justify-end from global;
 }
 
 .copyright {
     grid-area: b;
-    text-align: center;
+    composes: text-center from global;
 }
 
 .logoContainer {
     grid-area: a;
+    composes: mt-10 from global;
+
+    composes: lg_mt-0 from global;
 }
 
 .logo {
     height: var(--height);
     width: var(--width);
 }
-
-@media (max-width: 960px) {
-    .logoContainer {
-        margin-top: 2.5rem;
-    }
-}
-@media screen and (min-width: 768px) and (max-width: 991px) {
-    .callout {
-        min-width: 10rem;
-    }
-}
-@media screen and (max-width: 767px) {
-    .links {
-        padding: 0 1rem;
-        grid-template-columns: 1fr 1fr;
-        gap: 2rem 10px;
-    }
-    .callout {
-        min-width: 100%;
-    }
-}

package/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.module.css

@@ -1,26 +1,26 @@
 .root {
-    display: grid;
-    gap: 0.9375rem;
-    justify-items: stretch;
+    composes: grid from global;
+    composes: gap-xs from global;
+    composes: justify-items-stretch from global;
 }
 
 .buttonContainer {
-    align-items: center;
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
-    margin-top: 1rem;
-    text-align: center;
+    composes: items-center from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: mt-xs from global;
+    composes: text-center from global;
 }
 
 .cancelButton {
     composes: root_lowPriority from '../../Button/button.module.css';
 
-    min-width: 9rem;
+    composes: min-w-[9rem] from global;
 }
 
 .submitButton {
     composes: root_highPriority from '../../Button/button.module.css';
 
-    min-width: 9rem;
+    composes: min-w-[9rem] from global;
 }

package/lib/components/ForgotPassword/FormSubmissionSuccessful/formSubmissionSuccessful.module.css

@@ -1,15 +1,15 @@
 .root {
-    display: grid;
-    gap: 1.5rem;
+    composes: grid from global;
+    composes: gap-sm from global;
 }
 
 .text {
-    font-size: 0.875rem;
-    font-weight: 300;
-    line-height: 1.25rem;
+    composes: font-light from global;
+    composes: leading-tight from global;
+    composes: text-sm from global;
 }
 
 .title {
-    padding-top: 0.5rem;
-    text-transform: capitalize;
+    composes: pt-2xs from global;
+    composes: capitalize from global;
 }

package/lib/components/ForgotPassword/forgotPassword.module.css

@@ -1,16 +1,17 @@
 .root {
-    display: grid;
-    gap: 0.9375rem;
-    justify-items: stretch;
-    padding: 1rem 1.5rem;
+    composes: grid from global;
+    composes: gap-xs from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
 }
 
 .title {
-    padding-top: 0.5rem;
-    text-transform: capitalize;
+    composes: pt-2xs from global;
+    composes: capitalize from global;
 }
 
 .instructions {
-    font-weight: 300;
-    line-height: 1.25rem;
+    composes: font-light from global;
+    composes: leading-tight from global;
 }

package/lib/components/ForgotPasswordPage/forgotPasswordPage.module.css

@@ -1,20 +1,21 @@
 .root {
-    display: grid;
-    justify-content: center;
-    padding: 2.5rem 0;
-    text-align: center;
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-md from global;
+    composes: text-center from global;
     grid-template-columns: minmax(auto, 512px);
-    row-gap: 2rem;
 }
 
 .header {
-    font-family: var(--venia-global-fontFamily-serif);
+    composes: font-serif from global;
 }
 
-@media (min-width: 961px) {
-    .contentContainer {
-        padding-bottom: 2rem;
-        border: 2px solid rgb(var(--venia-global-color-border));
-        border-radius: 0.375rem;
-    }
+.contentContainer {
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_pb-md from global;
+    composes: lg_rounded-md from global;
 }