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

package/lib/components/OrderHistoryPage/collapsedImageGallery.module.css

@@ -1,15 +1,16 @@
 .root {
-    align-items: center;
-    column-gap: 0.25rem;
-    display: grid;
+    composes: gap-x-1 from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: px-1 from global;
+    composes: py-0 from global;
     grid-template-columns: repeat(5, 1fr);
-    height: 100%;
-    justify-items: center;
-    padding: 0 0.25rem;
 }
 
 .remainderCount {
-    color: rgb(var(--venia-global-color-text-hint));
-    font-size: var(--venia-typography-body-S-fontSize);
-    justify-self: center;
+    composes: justify-self-center from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
 }

package/lib/components/OrderHistoryPage/orderHistoryPage.module.css

@@ -1,74 +1,70 @@
 .root {
-    display: grid;
-    padding: 2rem 3rem;
-    row-gap: 2rem;
+    composes: grid from global;
+    composes: gap-y-md 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);
-    justify-self: center;
-    text-transform: capitalize;
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
+    composes: capitalize from global;
 }
 
 .emptyHistoryMessage {
-    text-align: center;
+    composes: text-center from global;
 }
 
 .orderHistoryTable {
-    display: grid;
-    row-gap: 1rem;
+    composes: grid from global;
+    composes: gap-y-xs from global;
 }
 
 .filterRow {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: gap-y-xs from global;
+    composes: items-start from global;
+    composes: justify-between from global;
+
+    composes: lg_flex-row from global;
+    composes: lg_gap-y-0 from global;
+    composes: lg_items-center from global;
 }
 
 .pageInfo {
-    font-size: var(--venia-typography-body-S-fontSize);
+    composes: text-sm from global;
 }
 
 .search {
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
-    width: 22rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-center from global;
+    composes: w-full from global;
+
+    composes: lg_gap-xs from global;
+    composes: lg_justify-self-left from global;
+    composes: lg_w-[22rem] from global;
 }
 
 .searchButton {
     composes: root_highPriority from '../Button/button.module.css';
 
-    width: 5rem;
-    height: 2rem;
-    min-width: 5rem;
+    composes: h-[2rem] from global;
+    composes: min-w-[5rem] from global;
+    composes: w-[5rem] from global;
 }
 
 .submitIcon {
-    color: white;
+    composes: text-white from global;
 }
 
 .loadMoreButton {
     composes: root_lowPriority from '../Button/button.module.css';
-    justify-self: center;
-}
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
-
-    .filterRow {
-        align-items: flex-start;
-        flex-direction: column;
-        row-gap: 1rem;
-    }
 
-    .search {
-        gap: 0.5rem;
-        width: 100%;
-        justify-self: center;
-    }
+    composes: justify-self-center from global;
 }

package/lib/components/OrderHistoryPage/orderProgressBar.module.css

@@ -1,14 +1,14 @@
 .root {
-    column-gap: 0.25rem;
-    display: grid;
-    grid-auto-flow: column;
+    composes: gap-x-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
     grid-auto-rows: 6px;
 }
 
 .step {
-    background-color: rgb(var(--venia-global-color-gray-dark));
+    composes: bg-gray-300 from global;
 }
 
 .step_completed {
-    background-color: rgb(var(--venia-brand-color-1-700));
+    composes: bg-brand-dark from global;
 }

package/lib/components/OrderHistoryPage/orderRow.module.css

@@ -1,128 +1,163 @@
 .root {
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    display: grid;
-    grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(9rem, 1fr) 16rem 2fr 3rem;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: grid-cols-2 from global;
+    composes: rounded-md from global;
 }
 
-.cell {
-    border-left: 2px solid rgb(var(--venia-global-color-gray));
-    padding: 1.5rem;
-    overflow: hidden;
-}
-
-.stackedCell {
-    composes: cell;
-    display: grid;
-    row-gap: 0.25rem;
+@media (min-width: 960px) {
+    .root {
+        grid-template-columns:
+            minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(9rem, 1fr)
+            16rem 2fr 3rem;
+    }
 }
 
-.label {
-    font-size: var(--venia-typography-body-XS-fontSize);
+.orderNumberContainer {
+    composes: border-0 from global;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-x-2xs from global;
+    composes: gap-y-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-start from global;
+    composes: overflow-hidden from global;
+    composes: p-sm from global;
+
+    composes: lg_border-b-0 from global;
+    composes: lg_gap-x-0 from global;
+    composes: lg_grid-flow-row from global;
+    composes: lg_items-left from global;
 }
 
-.value {
-    font-weight: var(--venia-global-fontWeight-bold);
+.orderDateContainer {
+    composes: border-0 from global;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-y-1 from global;
+    composes: grid from global;
+    composes: overflow-hidden from global;
+    composes: p-sm from global;
+
+    composes: lg_border-b-0 from global;
+    composes: lg_border-l from global;
 }
 
-.orderNumberContainer,
-.orderDateContainer,
 .orderTotalContainer {
-    composes: stackedCell;
+    composes: border-0 from global;
+    composes: border-b from global;
+    composes: border-l from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-y-1 from global;
+    composes: grid from global;
+    composes: overflow-hidden from global;
+    composes: p-sm from global;
+
+    composes: lg_border-b-0 from global;
 }
 
 .orderStatusContainer {
-    composes: stackedCell;
-    row-gap: 0.75rem;
+    composes: border-0 from global;
+    composes: border-l-0 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: col-end-span2 from global;
+    composes: gap-y-1 from global;
+    composes: grid from global;
+    composes: overflow-hidden from global;
+    composes: p-sm from global;
+
+    composes: lg_border-b-0 from global;
+    composes: lg_border-l from global;
+    composes: lg_col-end-auto from global;
+    composes: lg_gap-y-3 from global;
 }
 
 .orderItemsContainer {
-    composes: cell;
-    padding: 0;
+    composes: border-0 from global;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: col-end-span2 from global;
+    composes: overflow-hidden from global;
+    composes: p-0 from global;
+    composes: py-sm from global;
+
+    composes: lg_border-0 from global;
+    composes: lg_border-l from global;
+    composes: lg_col-end-auto from global;
+    composes: lg_p-0 from global;
 }
 
 .contentToggleContainer {
-    composes: cell;
-    padding: 0;
+    composes: border-0 from global;
+    composes: border-l from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: col-start-2 from global;
+    composes: justify-self-end from global;
+    composes: overflow-hidden from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+    composes: row-start-1 from global;
+
+    composes: lg_border-l from global;
+    composes: lg_col-start-6 from global;
+    composes: lg_px-xs from global;
+    composes: lg_row-start-1 from global;
 }
 
 .orderNumberLabel,
 .orderDateLabel,
 .orderTotalLabel {
-    composes: label;
+    composes: text-2xs from global;
 }
 
 .orderNumber,
 .orderDate,
 .orderTotal {
-    composes: value;
+    composes: font-bold from global;
 }
 
 .orderStatusBadge {
-    composes: label;
-    border: 1px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    font-weight: var(--venia-global-fontWeight-bold);
-    justify-self: flex-start;
-    padding: 0.25rem 1.25rem;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-bold from global;
+    composes: justify-self-start from global;
+    composes: px-xs from global;
+    composes: py-1 from global;
+    composes: rounded-md from global;
+    composes: text-2xs from global;
 }
 
 .content {
-    border-top: 2px solid rgb(var(--venia-global-color-gray));
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: p-sm from global;
     grid-column: 1 / -1;
-    padding: 1.5rem;
 }
 
 .content_collapsed {
-    display: none;
+    composes: hidden from global;
 }
 
-@media (max-width: 960px) {
-    .root {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .cell {
-        border-left: none;
-    }
-
-    .contentToggleContainer {
-        grid-column-start: 2;
-        grid-row-start: 1;
-        justify-self: flex-end;
-        padding: 0 1.5rem;
-    }
-
-    .orderStatusContainer {
-        grid-column-end: span 2;
-    }
-
-    .orderItemsContainer {
-        border-bottom: 2px solid rgb(var(--venia-global-color-gray));
-        grid-column-end: span 2;
-        padding: 1rem 0;
-    }
-
+@media (max-width: 959px) {
+    /* TODO @TW: cannot compose */
     .orderItemsContainer:empty {
         display: none;
     }
 
     .orderNumberContainer {
-        align-items: center;
-        column-gap: 0.5rem;
-        grid-auto-flow: column;
         grid-column: 1 / span 2;
         grid-row: 1;
-        justify-content: flex-start;
-    }
-
-    .orderDateContainer {
-        border: 2px solid rgb(var(--venia-global-color-gray));
-        border-left: none;
-    }
-
-    .orderTotalContainer {
-        border-bottom: 2px solid rgb(var(--venia-global-color-gray));
-        border-top: 2px solid rgb(var(--venia-global-color-gray));
     }
 }

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css

@@ -1,26 +1,27 @@
 .root {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    height: 2px;
-    background: rgb(var(--venia-global-color-gray-100));
+    composes: bg-gray-100 from global;
+    composes: h-[2px] from global;
+    composes: relative from global;
+    composes: overflow-hidden from global;
+    composes: w-full from global;
 }
 
 .root_absolute {
     composes: root;
-    position: absolute;
-    bottom: 0;
-    left: 0;
+
+    composes: absolute from global;
+    composes: bottom-0 from global;
+    composes: left-0 from global;
 }
 
 .indicator_off {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(var(--venia-global-color-blue-600));
+    composes: absolute from global;
+    composes: bg-brand-dark from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: opacity-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
     transform: translateX(-100%);
     transform-origin: left;
     transition: transform 0.25s linear;
@@ -28,12 +29,12 @@
 
 .indicator_loading {
     composes: indicator_off;
-    opacity: 1;
+    composes: opacity-100 from global;
     transform: translateX(-25%);
 }
 
 .indicator_done {
     composes: indicator_off;
-    opacity: 1;
+    composes: opacity-100 from global;
     transform: translateX(0%);
 }

package/lib/components/Pagination/pagination.module.css

@@ -1,11 +1,14 @@
 .root {
-    background-color: white;
-    border-top: 1px solid rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 0.25rem;
+    composes: bg-white from global;
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+    composes: text-center from global;
     grid-auto-columns: minmax(2rem, auto);
-    grid-auto-flow: column;
-    justify-content: center;
-    padding: 1rem 0;
-    text-align: center;
 }

package/lib/components/Pagination/tile.module.css

@@ -1,15 +1,18 @@
 .root {
-    align-items: center;
-    border: 1px none currentColor;
-    border-radius: 2px;
-    display: flex;
-    justify-content: center;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: outline-none from global;
+    composes: relative from global;
+    composes: rounded-sm from global;
     min-height: 2rem;
-    outline: none;
-    position: relative;
 }
 
 .root_active {
     composes: root;
-    border-style: solid;
+
+    composes: border-currentColor from global;
 }

package/lib/components/Password/password.module.css

@@ -1,13 +1,20 @@
+.root:active {
+    --stroke: var(--venia-global-color-gray-700);
+}
+
 .passwordButton {
     composes: root from '../Button/button.module.css';
 
     --stroke: var(--venia-global-color-gray-500);
-    background: none;
-    border-radius: 0px;
-    border-style: none;
-    border-width: 0px;
-    padding: 0px;
-    min-width: 0px;
+
+    composes: bg-transparent from global;
+    composes: border-none from global;
+    composes: border-0 from global;
+    composes: min-w-0 from global;
+    composes: p-0 from global;
+    composes: rounded-none from global;
+
+    composes: focus_shadow-none from global;
 }
 
 .passwordButton:hover {
@@ -15,10 +22,5 @@
 }
 
 .passwordButton:focus {
-    box-shadow: none;
-    --stroke: var(--venia-global-color-gray-700);
-}
-
-.root:active {
     --stroke: var(--venia-global-color-gray-700);
 }

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Multiselect/__tests__/__snapshots__/multiSelect.spec.js.snap

@@ -15,9 +15,19 @@ Array [
   </div>,
   <div>
     <mock-RichContent
+      classes={
+        Object {
+          "root": undefined,
+        }
+      }
       html="<span>Option 1</span>"
     />
     <mock-RichContent
+      classes={
+        Object {
+          "root": undefined,
+        }
+      }
       html="<span>Option 2</span>"
     />
   </div>,

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Multiselect/multiselect.js

@@ -33,7 +33,11 @@ const Multiselect = props => {
                 (option, key) => {
                     return (
                         // TODO: Get decoded wysiwyg widgets from GraphQl
-                        <RichContent key={key} html={option.label} />
+                        <RichContent
+                            classes={{ root: classes.option }}
+                            key={key}
+                            html={option.label}
+                        />
                     );
                 }
             );
@@ -79,7 +83,8 @@ Multiselect.propTypes = {
     classes: shape({
         label: string,
         content: string,
-        contentHtml: string
+        contentHtml: string,
+        option: string
     }),
     attribute_metadata: shape({
         label: string,

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Multiselect/multiselect.module.css

@@ -5,9 +5,18 @@
 }
 
 .content {
-    composes: inline-block from global;
+    composes: inline from global;
 }
 
 .contentHtml {
-    composes: block from global;
+    composes: inline from global;
+}
+
+.option {
+    composes: inline-block from global;
+    composes: break-words from global;
+}
+
+.option:not(:last-child)::after {
+    content: ',\00a0';
 }

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Select/select.module.css

@@ -9,5 +9,5 @@
 }
 
 .contentHtml {
-    composes: block from global;
+    composes: inline-block from global;
 }

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Text/text.module.css

@@ -9,5 +9,5 @@
 }
 
 .contentHtml {
-    composes: block from global;
+    composes: inline-block from global;
 }

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Textarea/textarea.js

@@ -18,11 +18,16 @@ import defaultClasses from './textarea.module.css';
  */
 const Textarea = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { attribute_metadata = {}, entered_attribute_value = {} } = props;
+    const {
+        attribute_metadata = {},
+        entered_attribute_value = {},
+        showLabels = true
+    } = props;
 
-    const attributeLabel = attribute_metadata.label ? (
-        <div className={classes.label}>{attribute_metadata.label}</div>
-    ) : null;
+    const attributeLabel =
+        attribute_metadata.label && showLabels ? (
+            <div className={classes.label}>{attribute_metadata.label}</div>
+        ) : null;
     let attributeContent;
 
     if (entered_attribute_value.value) {
@@ -30,6 +35,7 @@ const Textarea = props => {
 
         if (isHtml) {
             // TODO: Get decoded wysiwyg widgets from GraphQl
+
             attributeContent = (
                 <div className={classes.contentHtml}>
                     <RichContent html={entered_attribute_value.value} />

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/attributeType.js

@@ -35,6 +35,12 @@ const defaultTypeConfig = {
     },
     textarea: {
         component: Textarea
+    },
+    texteditor: {
+        component: Textarea
+    },
+    pagebuilder: {
+        component: Textarea
     }
 };