Align SearchFilterChips (#679)

- Replace ChipSpacer with gap
StenaIT · Nov 23, 2023 · c25bcf9 · c25bcf9
1 parent 3376c0d
commit c25bcf9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 29 deletions.
diff --git a/packages/filter/src/features/search-filter/features/chips/ChipSpacer.tsx b/packages/filter/src/features/search-filter/features/chips/ChipSpacer.tsx
diff --git a/packages/filter/src/features/search-filter/features/chips/EmptyChip.tsx b/packages/filter/src/features/search-filter/features/chips/EmptyChip.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ChipSpacer } from "./ChipSpacer";
 import { Chip } from "@stenajs-webui/elements";
 import { useCallback } from "react";
 import { useSearchFilterDispatch } from "../../context/SearchFilterDispatchContext";
@@ -23,9 +22,5 @@ export const EmptyChip = function EmptyChip<TSectionKey extends string>({
     dispatch(actions.openFilters());
   }, [actions, dispatch, sectionId]);
 
-  return (
-    <ChipSpacer>
-      <Chip label={label} variant={"secondary"} onClick={onClickLabel} />
-    </ChipSpacer>
-  );
+  return <Chip label={label} variant={"secondary"} onClick={onClickLabel} />;
 };
diff --git a/packages/filter/src/features/search-filter/features/chips/SearchFilterChip.tsx b/packages/filter/src/features/search-filter/features/chips/SearchFilterChip.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { useCallback } from "react";
-import { ChipSpacer } from "./ChipSpacer";
 import { Chip } from "@stenajs-webui/elements";
 import { useSearchFilterDispatch } from "../../context/SearchFilterDispatchContext";
 import { useSearchFilterActions } from "../../context/SearchFilterActionsContext";
@@ -42,12 +41,10 @@ export const SearchFilterChip = function SearchFilterChip<
   }, [actions, dispatch, sectionId]);
 
   return (
-    <ChipSpacer>
-      <Chip
-        label={label ?? sectionId}
-        onClick={onClickLabel}
-        onClickRemove={onClickRemove ? onClickRemoveHandler : undefined}
-      />
-    </ChipSpacer>
+    <Chip
+      label={label ?? sectionId}
+      onClick={onClickLabel}
+      onClickRemove={onClickRemove ? onClickRemoveHandler : undefined}
+    />
   );
 };
diff --git a/packages/filter/src/features/search-filter/features/chips/SearchFilterChips.tsx b/packages/filter/src/features/search-filter/features/chips/SearchFilterChips.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { ReactNode, useCallback } from "react";
 import { Row } from "@stenajs-webui/core";
-import { ChipSpacer } from "./ChipSpacer";
 import { FlatButton } from "@stenajs-webui/elements";
 import { useSearchFilterDispatch } from "../../context/SearchFilterDispatchContext";
 import { useSearchFilterActions } from "../../context/SearchFilterActionsContext";
@@ -24,16 +23,14 @@ export const SearchFilterChips: React.FC<SearchFilterChipsProps> = ({
   );
 
   return (
-    <Row flexWrap={"wrap"}>
+    <Row flexWrap={"wrap"} alignItems={"center"} gap>
       {children}
       {!disableClearAllButton && (
-        <ChipSpacer>
-          <FlatButton
-            size={"small"}
-            label={"Clear all"}
-            onClick={onClickClearAll}
-          />
-        </ChipSpacer>
+        <FlatButton
+          size={"small"}
+          label={"Clear all"}
+          onClick={onClickClearAll}
+        />
       )}
     </Row>
   );