fix(manager-react-components): update filters components css

ref: MANAGER-15088 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Dec 3, 2024 · ad69087 · ad69087
1 parent 2f9eca4
commit ad69087
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 89 deletions.
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx
@@ -1,52 +1,11 @@
 import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
 import { withRouter } from 'storybook-addon-react-router-v6';
-import { applyFilters, FilterCategories } from '@ovh-ux/manager-core-api';
+import { applyFilters } from '@ovh-ux/manager-core-api';
 import { useSearchParams } from 'react-router-dom';
-import DataGridTextCell from './text-cell.component';
 import { Datagrid } from './datagrid.component';
 import { useColumnFilters } from '../filters';
-
-interface Item {
-  label: string;
-  price: number;
-}
-
-const columsTmp = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-  },
-];
-
-const columsFilters = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-    comparator: FilterCategories.String,
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-    comparator: FilterCategories.String,
-  },
-];
+import { columsTmp, columsFilters, Item } from './datagrid.mock';
 
 const DatagridStory = ({
   items,

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -184,7 +184,7 @@ export const Datagrid = <T,>({
       {isFilterable && (
         <>
           {columnsFilters.length > 0 && (
-            <div className="flex flex-row-reverse pb-[5px]">
+            <div className="flex flex-row-reverse py-[24px]">
               <div id="datagrid-filter-popover-trigger">
                 <OdsButton
                   slot="datagrid-filter-popover-trigger"
@@ -211,7 +211,7 @@ export const Datagrid = <T,>({
             </div>
           )}
           {filters?.filters.length > 0 && (
-            <div id="datagrid-filter-list" className="my-5">
+            <div id="datagrid-filter-list" className="mb-[24px]">
               <FilterList
                 filters={filters.filters}
                 onRemoveFilter={filters.remove}

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx
@@ -0,0 +1,43 @@
+import { DataGridTextCell } from './text-cell.component';
+import { FilterCategories } from '@ovh-ux/manager-core-api';
+
+export interface Item {
+  label: string;
+  price: number;
+}
+
+export const columsTmp = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+  },
+];
+
+export const columsFilters = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+    comparator: FilterCategories.String,
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+    comparator: FilterCategories.String,
+  },
+];
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx
@@ -1,52 +1,11 @@
 import React from 'react';
 import { withRouter } from 'storybook-addon-react-router-v6';
 import { useSearchParams } from 'react-router-dom';
-import { FilterCategories, applyFilters } from '@ovh-ux/manager-core-api';
+import { applyFilters } from '@ovh-ux/manager-core-api';
 import { Datagrid } from './datagrid.component';
-import { DataGridTextCell } from './text-cell.component';
 import { useDatagridSearchParams } from './useDatagridSearchParams';
 import { useColumnFilters } from '../filters';
-
-interface Item {
-  label: string;
-  price: number;
-}
-
-const columsTmp = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-  },
-];
-
-const columsFilters = [
-  {
-    id: 'label',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.label}</DataGridTextCell>;
-    },
-    label: 'Label',
-    comparator: FilterCategories.String,
-  },
-  {
-    id: 'price',
-    cell: (item: Item) => {
-      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
-    },
-    label: 'Price',
-    comparator: FilterCategories.String,
-  },
-];
+import { columsTmp, columsFilters, Item } from './datagrid.mock';
 
 function sortItems(
   itemList: Item[],

diff --git a/packages/manager-react-components/src/components/filters/filter-list.component.tsx b/packages/manager-react-components/src/components/filters/filter-list.component.tsx
@@ -22,7 +22,7 @@ export function FilterList({
     <>
       {filters?.map((filter, key) => (
         <OdsTag
-          className="m-3"
+          className="mr-3"
           color={ODS_TAG_COLOR.information}
           size="lg"
           key={key}