Experimental filters: new popover ui (#3944)

.changeset/plenty-pugs-tease.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: adjust popover UI

package-lock.json

@@ -27,7 +27,7 @@
         "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "0.8.0-pre.104",
+        "@saleor/macaw-ui": "0.8.0-pre.105",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -7947,9 +7947,9 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.104",
+      "version": "0.8.0-pre.105",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.104.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
-      "integrity": "sha512-5Et/UIsH6ZzVyJLMhhnbN5PDllRGhyhJXBXUlgOdD0yH47+PPeaN9BPDDrlX/eiJbLMimJOIuj5hhb+WhWT/Zw==",
+      "integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
@@ -41209,9 +41209,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.104",
+      "version": "0.8.0-pre.105",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.104.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
-      "integrity": "sha512-5Et/UIsH6ZzVyJLMhhnbN5PDllRGhyhJXBXUlgOdD0yH47+PPeaN9BPDDrlX/eiJbLMimJOIuj5hhb+WhWT/Zw==",
+      "integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",

package.json

@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.104",
+    "@saleor/macaw-ui": "0.8.0-pre.105",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
@@ -278,7 +278,7 @@
       "^@material-ui/core$": "<rootDir>/node_modules/@material-ui/core",
       "^@material-ui/icons$": "<rootDir>/node_modules/@material-ui/icons",
       "^@material-ui/styles$": "<rootDir>/node_modules/@material-ui/styles",
-      "^@saleor/macaw-ui/next$": "<rootDir>/node_modules/@saleor/macaw-ui/dist/macaw-ui.cjs",
+      "^@saleor/macaw-ui/next$": "<rootDir>/node_modules/@saleor/macaw-ui/dist/macaw-ui.js",
       "^react$": "<rootDir>/node_modules/react",
       "^react-dom$": "<rootDir>/node_modules/react-dom"
     }

src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx

@@ -1,5 +1,5 @@
 import { ConditionalFilters } from "@dashboard/components/ConditionalFilter";
-import { Box, Button, Popover } from "@saleor/macaw-ui/next";
+import { Box, Button, CloseIcon, Popover, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 
 export const ExpressionFilters = () => (
@@ -8,8 +8,26 @@ export const ExpressionFilters = () => (
       <Button>Show filters</Button>
     </Popover.Trigger>
     <Popover.Content align="start">
-      <Box __minWidth="200px" __minHeight="100px" paddingX={4} paddingY={3}>
+      <Box>
-        <Popover.Arrow />
+        <Box
+          paddingX={5}
+          paddingY={4}
+          display="flex"
+          gap={1}
+          alignItems="center"
+          justifyContent="space-between"
+          backgroundColor="surfaceNeutralPlain"
+        >
+          <Text variant="body" size="medium">
+            Filter conditions
+          </Text>
+          <Box display="flex" alignItems="center" gap={2}>
+            <Button variant="tertiary">Clear filters</Button>
+            <Popover.Close>
+              <Button variant="tertiary" icon={<CloseIcon />} />
+            </Popover.Close>
+          </Box>
+        </Box>
         <ConditionalFilters />
       </Box>
     </Popover.Content>

src/components/ConditionalFilter/ConditionalFilters.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from "@saleor/macaw-ui/next";
+import { _ExperimentalFilters, Box, Divider } from "@saleor/macaw-ui/next";
 import React, { FC } from "react";
 
 import { useConditionalFilterContext } from "./context";
@@ -15,7 +15,24 @@ export const ConditionalFilters: FC = () => {
   return (
     <Box>
       {valueProvider.loading ? (
-        <Text>Loading...</Text>
+        <Box
+          __minWidth="700px"
+          __minHeight="100px"
+          paddingX={5}
+          paddingY={4}
+          display="flex"
+          gap={3}
+          flexDirection="column"
+        >
+          <_ExperimentalFilters.Skeleton height={7} />
+          <_ExperimentalFilters.Skeleton height={7} />
+          <_ExperimentalFilters.Skeleton height={7} />
+          <Divider />
+          <Box display="flex" gap={4} justifyContent="space-between">
+            <_ExperimentalFilters.Skeleton height={7} __width="20%" />
+            <_ExperimentalFilters.Skeleton height={7} __width="20%" />
+          </Box>
+        </Box>
       ) : (
         <FiltersArea onConfirm={handleConfirm} />
       )}

src/components/ConditionalFilter/FilterElement/FilterElement.ts

@@ -24,7 +24,7 @@ class ExpressionValue {
   }
 
   public static fromUrlToken(token: UrlToken) {
-    const option = STATIC_OPTIONS.find(o => o.slug === token.name)
+    const option = STATIC_OPTIONS.find(o => o.slug === token.name);
 
     if (!option) {
       return new ExpressionValue(token.name, token.name, token.name);
@@ -113,13 +113,13 @@ export class FilterElement {
     return ConditionOptions.isAttributeInputType(this.value.type);
   }
 
-  public rowType (): RowType | null {
+  public rowType(): RowType | null {
     if (this.isStatic()) {
-      return this.value.value as RowType
+      return this.value.value as RowType;
     }
 
     if (this.isAttribute()) {
-      return "attribute"
+      return "attribute";
     }
 
     return null;
@@ -161,7 +161,6 @@ export class FilterElement {
         false,
       );
     }
-
     return FilterElement.createEmpty();
   }
 }

src/components/ConditionalFilter/FiltersArea.tsx

@@ -60,7 +60,13 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
   };
 
   return (
-    <Box>
+    <Box
+      paddingX={5}
+      paddingY={3}
+      backgroundColor="interactiveNeutralSecondaryHovering"
+      borderBottomLeftRadius={2}
+      borderBottomRightRadius={2}
+    >
       <_ExperimentalFilters
         leftOptions={leftOperandsProvider.operands}
         // @ts-expect-error
@@ -69,10 +75,10 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
       >
         <_ExperimentalFilters.Footer>
           <_ExperimentalFilters.AddRowButton>
-            Add new row
+            + Add row
           </_ExperimentalFilters.AddRowButton>
           <_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
-            Confirm
+            Save
           </_ExperimentalFilters.ConfirmButton>
         </_ExperimentalFilters.Footer>
       </_ExperimentalFilters>