@griddo/ax 11.10.16 → 11.10.17-rc.0

package/README.md

@@ -4,6 +4,7 @@
 - [Estándares de commits](docs/COMMITS.md)
 - [Comandos de npm](#comandos-de-npm)
 - [AGENTS.md](#agentsmd)
+- [Centralización de textos de UI](docs/LOCALE-UI-TEXTS.md)
 
 ## AGENTS.md
 

package/config/griddo-config/index.js

@@ -87,6 +87,7 @@ const griddoAxAliases = {
 	"@ax/routes": path.resolve(__dirname, "../../src/routes"),
 	"@ax/types": path.resolve(__dirname, "../../src/types"),
 	"@ax/schemas": path.resolve(__dirname, "../../src/schemas"),
+	"@ax/locales": path.resolve(__dirname, "../../src/locales"),
 };
 
 const griddoComponentsLibAliases = getComponentsLibAliases();

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.16",
+	"version": "11.10.17-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ddb737f01274ea3d5981c463b4f98857320e6950"
+	"gitHead": "42fac4ed9d10fcdf197830446f5de48d54828610"
 }

package/src/__tests__/components/BulkSelectionOptions/BulkSelectionOptions.test.tsx

@@ -1,14 +1,13 @@
-import * as React from "react";
-
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import userEvent from "@testing-library/user-event";
 
-import { parseTheme } from "@ax/helpers";
 import BulkSelectionOptions from "@ax/components/BulkSelectionOptions";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
+import userEvent from "@testing-library/user-event";
+
 afterEach(() => {
 	jest.resetAllMocks();
 	cleanup();
@@ -27,6 +26,12 @@ const defaultProps = {
 	],
 	selectItems: selectItemsMock,
 	totalItems: 1234,
+	selectedItems: {
+		all: [],
+		notPublished: [],
+		published: [],
+		drafts: [],
+	},
 };
 
 describe("Browser component rendering", () => {
@@ -36,22 +41,15 @@ describe("Browser component rendering", () => {
 				<BulkSelectionOptions {...defaultProps} />
 			</ThemeProvider>,
 		);
-
 		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
 		expect(bulkHeaderWrapper).toBeTruthy();
-
-		const tableCounter = screen.getByTestId("table-counter");
-		expect(tableCounter).toBeTruthy();
-		expect(screen.getByText("1234 results")).toBeInTheDocument();
 	});
-
 	it("should call the action on onclick", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<BulkSelectionOptions {...defaultProps} />
 			</ThemeProvider>,
 		);
-
 		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
 		expect(bulkHeaderWrapper).toBeTruthy();
 		const buttonText = screen.getByTestId("button-text");
@@ -59,7 +57,6 @@ describe("Browser component rendering", () => {
 		fireEvent.click(buttonText);
 		expect(propActionMock).toHaveBeenCalled();
 	});
-
 	it("should call the action on onchange", async () => {
 		const user = userEvent.setup();
 		render(
@@ -67,7 +64,6 @@ describe("Browser component rendering", () => {
 				<BulkSelectionOptions {...defaultProps} />
 			</ThemeProvider>,
 		);
-
 		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
 		expect(bulkHeaderWrapper).toBeTruthy();
 		const checkFieldInput = screen.getByTestId<HTMLInputElement>("check-field-input");
@@ -75,7 +71,6 @@ describe("Browser component rendering", () => {
 		await user.click(checkFieldInput);
 		expect(selectItemsMock).toHaveBeenCalled();
 	});
-
 	it("should mark the check if isAllSelected", () => {
 		const defaultPropsCheck = {
 			isScrolling: false,
@@ -90,22 +85,18 @@ describe("Browser component rendering", () => {
 			selectItems: selectItemsMock,
 			totalItems: 10,
 		};
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<BulkSelectionOptions {...defaultPropsCheck} />
 			</ThemeProvider>,
 		);
-
 		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
 		expect(bulkHeaderWrapper).toBeTruthy();
-
 		const checkFieldCheckMark = screen.getAllByTestId<HTMLInputElement>("check-field-check-mark");
 		checkFieldCheckMark.map((item) => {
 			expect(item.checked).toBe(true);
 		});
 	});
-
 	it("should change the style if indeterminate is true", () => {
 		const defaultPropsCheck = {
 			isScrolling: false,
@@ -120,25 +111,21 @@ describe("Browser component rendering", () => {
 			selectItems: selectItemsMock,
 			totalItems: 10,
 		};
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<BulkSelectionOptions {...defaultPropsCheck} />
 			</ThemeProvider>,
 		);
-
 		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
 		expect(bulkHeaderWrapper).toBeTruthy();
 		const theme = parseTheme(globalTheme);
 		expect(bulkHeaderWrapper).not.toHaveStyle(`border-bottom: 1px solid ${theme.color.uiLine}`);
-
 		const checkFieldCheckMark = screen.getAllByTestId<HTMLInputElement>("check-field-check-mark");
 		checkFieldCheckMark.map((item) => {
 			expect(item.checked).toBe(false);
 			expect(item).toHaveStyle("border: 2px solid #5057FF");
 		});
 	});
-
 	it("should show the borderBottom whe isScrolling is true", () => {
 		const defaultPropsCheck = {
 			isScrolling: true,
@@ -153,7 +140,6 @@ describe("Browser component rendering", () => {
 			selectItems: selectItemsMock,
 			totalItems: 10,
 		};
-
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
 				<BulkSelectionOptions {...defaultPropsCheck} />

package/src/components/BulkSelectionOptions/index.tsx

@@ -1,14 +1,13 @@
-import React from "react";
-
-import { Button, CheckField, ExportButton, TableCounter } from "@ax/components";
-import { IBulkAction } from "@ax/types";
+import { Button, CheckField, ExportButton } from "@ax/components";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IBulkAction } from "@ax/types";
 
 import * as S from "./style";
 
-const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
-	const { isScrolling, checkState, actions, selectItems, totalItems, className, exportAction } = props;
+const BulkSelectionOptions = (props: IBulkSelectionProps) => {
+	const { isScrolling, checkState, actions, selectItems, className, exportAction, selectedItems } = props;
 
-	const filteredActions = actions.filter((action: IBulkAction | undefined | null) => !!action);
+	const filteredActions = actions.filter((action) => !!action);
 
 	return (
 		<S.BulkHeader isScrolling={isScrolling} data-testid="bulk-header-wrapper" className={className}>
@@ -25,9 +24,10 @@ const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
 						error={false}
 					/>
 				</S.SelectAllCheckField>
+				<S.SelectedCount>{selectedItems?.all?.length} selected</S.SelectedCount>
 				<S.BulkActions>
 					{filteredActions.map(
-						(item: IBulkAction | undefined | null) =>
+						(item) =>
 							item && (
 								<Button key={item.text} type="button" buttonStyle="text" icon={item.icon} onClick={item.action}>
 									{item.text}
@@ -36,9 +36,6 @@ const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
 					)}
 					{exportAction && <ExportButton onClick={exportAction} />}
 				</S.BulkActions>
-				<S.Counter>
-					<TableCounter totalItems={totalItems} />
-				</S.Counter>
 			</S.BulkActionsWrapper>
 		</S.BulkHeader>
 	);
@@ -52,6 +49,7 @@ interface IBulkSelectionProps {
 	isScrolling?: boolean;
 	className?: string;
 	exportAction?: (formats: (string | number)[]) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkSelectionOptions;

package/src/components/BulkSelectionOptions/style.tsx

@@ -5,8 +5,11 @@ const BulkHeader = styled.div<{ isScrolling?: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m}`};
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  padding-inline: ${(p) => p.theme.spacing.m};
+  background: ${({ theme }) => theme.color.uiBackground03};
+  border-radius: ${({ theme }) => theme.radii.s};
+  min-height: 40px;
 `;
 
 const BulkActionsWrapper = styled.div`
@@ -17,8 +20,6 @@ const BulkActionsWrapper = styled.div`
 
 const BulkActions = styled.div`
   display: flex;
-  margin-top: 2px;
-  min-height: 32px;
   button {
     margin-right: ${(p) => p.theme.spacing.xs};
   }
@@ -27,7 +28,6 @@ const BulkActions = styled.div`
 const SelectAllCheckField = styled.span`
   width: ${(p) => p.theme.spacing.s};
   margin-right: ${(p) => p.theme.spacing.s};
-  margin-left: ${(p) => p.theme.spacing.m};
 `;
 
 const Counter = styled.div`
@@ -36,4 +36,11 @@ const Counter = styled.div`
   align-items: center;
 `;
 
-export { BulkHeader, BulkActionsWrapper, BulkActions, SelectAllCheckField, Counter };
+const SelectedCount = styled.span`
+  margin-right: ${(p) => p.theme.spacing.s};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  ${(p) => p.theme.textStyle.uiL};
+  font-weight: ${(p) => p.theme.fontWeight.regular};
+`;
+
+export { BulkHeader, BulkActionsWrapper, BulkActions, SelectAllCheckField, Counter, SelectedCount };

package/src/components/Fields/CheckField/index.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { ICheck } from "@ax/types";
 import Icon from "@ax/components/Icon";
+import type { ICheck } from "@ax/types";
 
 import * as S from "./style";
 
@@ -23,12 +22,12 @@ const CheckField = (props: ICheckFieldProps): JSX.Element => {
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const isChecked = e.target.checked;
-		onChange && onChange({ value, isChecked });
+		onChange?.({ value, isChecked });
 	};
 
-	const handleMouseOver = () => setHoverCheck && setHoverCheck(true);
+	const handleMouseOver = () => setHoverCheck?.(true);
 
-	const handleMouseLeave = () => setHoverCheck && setHoverCheck(false);
+	const handleMouseLeave = () => setHoverCheck?.(false);
 
 	return (
 		<S.Wrapper className={className}>

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataSource, ILanguage, IRootState, ISchemaField, ISite, IStructuredData } from "@ax/types";
+import type { IDataSource, ILanguage, IRootState, ISchemaField, ISite, IStructuredData } from "@ax/types";
 import {
 	Button,
 	FloatingMenu,
@@ -14,7 +14,8 @@ import {
 	UniqueCheck,
 } from "@ax/components";
 
-import { IReferenceState, IRefField, ISource, useReference } from "../Context";
+import type { IReferenceState, IRefField, ISource } from "../Context";
+import { useReference } from "../Context";
 import AutoItem from "./AutoItem";
 
 import * as S from "./style";
@@ -36,9 +37,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
 	};
 	const [configState, setConfigState] = useState<IConfigState>(initConfig);
 	const initToggle = {
-		isSiteActive: state.site && state.site !== "global" ? true : false,
-		isLangActive: state.lang ? true : false,
-		isGlobalActive: state.site && state.site === "global" ? true : false,
+		isSiteActive: !!(state.site && state.site !== "global" ),
+		isLangActive: !!state.lang,
+		isGlobalActive: !!(state.site && state.site === "global" ),
 		errorSite: false,
 		errorLang: false,
 		errorMsg: "",
@@ -130,8 +131,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
 		title: "",
 		value: state.quantity,
 		onChange: (quantity: number) => setState((state: IReferenceState) => ({ ...state, quantity })),
-		maxValue: validators && validators.maxValue ? validators.maxValue : undefined,
-		minValue: validators && validators.minValue ? validators.minValue : undefined,
+		maxValue: validators?.maxValue ? validators.maxValue : undefined,
+		minValue: validators?.minValue ? validators.minValue : undefined,
 	};
 
 	const checkErrors = (): boolean => {
@@ -258,7 +259,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 	};
 
 	const handleLangChange = (value: string) => {
-		const lang = value.length ? parseInt(value) : undefined;
+		const lang = value.length ? parseInt(value, 10) : undefined;
 		setState((state: IReferenceState) => ({ ...state, lang }));
 		if (value) {
 			setToggleState({ ...toggleState, isLangActive: true, errorLang: false, errorMsg: "" });
@@ -295,7 +296,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
 						state.sources.map((singleSource: ISource) => {
 							const source = state.sourceTitles.find((el: IDataSource) => el.id === singleSource.structuredData);
 							const { filters = [], filterOperator, globalOperator } = singleSource;
-							return source ? (
+							if(!source) return null;
+							return (
 								<AutoItem
 									key={singleSource.structuredData}
 									source={source}
@@ -309,9 +311,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 									globalOperator={globalOperator}
 									siteID={state.site || site?.id}
 								/>
-							) : (
-								<></>
-							);
+							)
 						})}
 				</S.SourcesWrapper>
 				<S.RadioWrapper>
@@ -383,9 +383,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
 											</S.SubConfigContent>
 										</S.ConfigWrapper>
 									</>
-								) : (
-									<></>
-								)}
+								) :
+									null
+								}
 
 								<S.OptionLabel
 									onClick={() => toggleConfig("isDataOpen")}
@@ -483,7 +483,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 										<UniqueCheck
 											name="preferenceLanguageCheck"
 											options={[
-												{ value: false, name: "preferenceLanguage", title: `${currentLang} content shown first` },
+												{ title: `${currentLang} content shown first` },
 											]}
 											value={state.preferenceLanguage}
 											onChange={handlePreferenceLanguageChange}

package/src/components/Fields/UniqueCheck/index.tsx

@@ -1,8 +1,9 @@
-import React from "react";
 import { CheckField } from "@ax/components";
 
+import * as S from "./style";
+
 const UniqueCheck = (props: IProps) => {
-	const { name, value, options, onChange, disabled, inversed = false, className } = props;
+	const { name, value, options, onChange, disabled, inversed = false, className, description } = props;
 	const uniqueOption = options[0];
 
 	const handleChange = (changeEvt: ICheckEvent) => {
@@ -10,17 +11,22 @@ const UniqueCheck = (props: IProps) => {
 		onChange(isChecked);
 	};
 
+	const classes = description ? "with-subtitle" : "";
+
 	return (
-		<CheckField
-			name={name}
-			checked={!!value && value}
-			title={uniqueOption.title}
-			value={value}
-			onChange={handleChange}
-			disabled={disabled}
-			inversed={inversed}
-			className={className}
-		/>
+		<S.Wrapper className={classes}>
+			<CheckField
+				name={name}
+				checked={!!value}
+				title={uniqueOption.title}
+				value={value}
+				onChange={handleChange}
+				disabled={disabled}
+				inversed={inversed}
+				className={className}
+			/>
+			<S.Subtitle>{description}</S.Subtitle>
+		</S.Wrapper>
 	);
 };
 
@@ -31,17 +37,16 @@ interface ICheckEvent {
 
 interface IProps {
 	name: string;
-	value: any;
+	value: string | number;
 	options: ICheck[];
-	onChange: any;
+	onChange(isChecked: boolean): void;
 	disabled?: boolean;
 	inversed?: boolean;
 	className?: string;
+	description?: string;
 }
 
 interface ICheck {
-	name: string;
-	value: any;
 	title: string;
 }
 

package/src/components/Fields/UniqueCheck/style.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  &.with-subtitle label {
+    ${(p) => p.theme.textStyle.uiL};
+    font-weight: 600;
+  }
+`;
+
+const Subtitle = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  font-weight: 400;
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding-left: ${(p) => p.theme.spacing.m};
+`;
+
+export { Wrapper, Subtitle };

package/src/components/FileGallery/GalleryPanel/DetailPanel/index.tsx

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { Button, FieldsBehavior, IconAction } from "@ax/components";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 import { formatBytes, getFileIcon, getFormattedDateWithTimezone } from "@ax/helpers";
+import { LOCALE } from "@ax/locales";
 import type { IFile, IRootState } from "@ax/types";
 
 import * as S from "./style";
@@ -107,7 +108,7 @@ const GalleryDetailPanel = (props: IProps) => {
 						fieldType="TagsField"
 						onChange={handleTags}
 						disabled={!isAllowedToEdit}
-						helptext="Type a tag and press enter to create it"
+						helptext={LOCALE.fields.tags.helptext}
 					/>
 				</S.FormWrapper>
 			</S.PanelForm>

package/src/components/FilterTagsBar/style.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 import Tag from "../Tag";
 
 const Wrapper = styled.div`
@@ -7,6 +8,7 @@ const Wrapper = styled.div`
   width: 100%;
   padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
   align-items: center;
+  border-radius: ${({ theme }) => theme.radii.s};
 `;
 
 const Text = styled.div`

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { Button, FieldsBehavior, IconAction } from "@ax/components";
 import { galleryActions } from "@ax/containers/Gallery";
 import { formatBytes, getFileExtension, getFormattedDateWithTimezone } from "@ax/helpers";
+import { LOCALE } from "@ax/locales";
 import type { IGetFolderParams, IImage, IRootState } from "@ax/types";
 
 import * as S from "./style";
@@ -115,7 +116,7 @@ const GalleryDetailPanel = (props: IProps) => {
 						fieldType="TagsField"
 						onChange={handleTags}
 						disabled={!isAllowedToEdit}
-						helptext="Type a tag and press enter to create it"
+						helptext={LOCALE.fields.tags.helptext}
 					/>
 				</S.FormWrapper>
 			</S.PanelForm>

package/src/components/Gallery/index.tsx

@@ -1,7 +1,29 @@
-import React, { useEffect, useState, memo, useRef, useCallback, useLayoutEffect } from "react";
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import {
+	BackFolder,
+	EmptyState,
+	ErrorToast,
+	FilterTagsBar,
+	Icon,
+	Loader,
+	SearchField,
+	SearchTagsBar,
+	Tabs,
+	Tooltip,
+} from "@ax/components";
+import { galleryActions } from "@ax/containers/Gallery";
+import { usePermission, useResizable } from "@ax/hooks";
+// refactor
+import Breadcrumb from "@ax/modules/MediaGallery/Breadcrumb";
+import FolderTree from "@ax/modules/MediaGallery/FolderTree";
+import { useFilterQuery, useSortedListStatus } from "@ax/modules/MediaGallery/hooks";
+import Orientation from "@ax/modules/MediaGallery/ImageFilters/Orientation";
+import SortBy from "@ax/modules/MediaGallery/ImageFilters/SortBy";
+import Type from "@ax/modules/MediaGallery/ImageFilters/Type";
+import { getSortedListStatus } from "@ax/modules/MediaGallery/utils";
+import type {
 	IFolder,
 	IFolderTree,
 	IGetFolderParams,
@@ -11,35 +33,12 @@ import {
 	IRootState,
 	ISite,
 } from "@ax/types";
-import {
-	Loader,
-	Tabs,
-	SearchField,
-	EmptyState,
-	ErrorToast,
-	Tooltip,
-	Icon,
-	BackFolder,
-	SearchTagsBar,
-	FilterTagsBar,
-} from "@ax/components";
-import { galleryActions } from "@ax/containers/Gallery";
-import { usePermission, useResizable } from "@ax/hooks";
 
-import GalleryPanel from "./GalleryPanel";
 import FolderItem from "./FolderItem";
+import GalleryPanel from "./GalleryPanel";
 
 import * as S from "./style";
 
-// refactor
-import Breadcrumb from "@ax/modules/MediaGallery/Breadcrumb";
-import FolderTree from "@ax/modules/MediaGallery/FolderTree";
-import Type from "@ax/modules/MediaGallery/ImageFilters/Type";
-import SortBy from "@ax/modules/MediaGallery/ImageFilters/SortBy";
-import Orientation from "@ax/modules/MediaGallery/ImageFilters/Orientation";
-import { useFilterQuery, useSortedListStatus } from "@ax/modules/MediaGallery/hooks";
-import { getSortedListStatus } from "@ax/modules/MediaGallery/utils";
-
 const Gallery = (props: IProps): JSX.Element => {
 	const { currentFolderContent, site, breadcrumb, toggleModal, getFolderContent, getFoldersTree, getImageSelected } =
 		props;
@@ -113,7 +112,7 @@ const Gallery = (props: IProps): JSX.Element => {
 			pagination: true,
 			page,
 			itemsPerPage,
-			infinite: page > 1 ? true : false,
+			infinite: page > 1,
 		};
 
 		return params;

package/src/components/TableList/TableItem/style.tsx

@@ -30,7 +30,10 @@ export const Row = styled.div<{ selected: boolean; global?: boolean }>`
   :before {
     content: "";
     background-color: ${(p) => (p.selected ? p.theme.color.overlayPressedPrimary : `transparent`)};
-    border-radius: ${(p) => p.theme.radii.s};
+    /* This border-radius does not comply with the design system, but it prevents
+     * a "gap" from appearing between the row and the selected row due to the
+     * border-radius not matching (because of the border-width) */
+    border-radius: 3px;
     position: absolute;
     top: 0;
     left: 0;

package/src/components/TableList/index.tsx

@@ -1,7 +1,7 @@
-import { IRootState } from "@ax/types";
-import React from "react";
 import { connect } from "react-redux";
+
 import { Loading, Pagination } from "@ax/components";
+import type { IRootState } from "@ax/types";
 
 import * as S from "./style";
 
@@ -14,7 +14,7 @@ const TableList = (props: ITableListProps): JSX.Element => {
 		<S.TableList onScroll={onScroll} ref={tableRef} data-testid="table-list">
 			<S.Table>
 				<>
-					<S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header">
+					<S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header" className={className}>
 						{tableHeader}
 					</S.TableHeader>
 					{isLoading ? (

package/src/components/TableList/style.tsx

@@ -15,7 +15,7 @@ const Table = styled.div`
   flex-grow: 1;
 `;
 
-const TableHeader = styled.div<{ hasFixedHeader?: boolean }>`
+const TableHeader = styled.div<{ hasFixedHeader?: boolean; fullWidth?: boolean }>`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -24,6 +24,16 @@ const TableHeader = styled.div<{ hasFixedHeader?: boolean }>`
   z-index: 6;
   top: 0;
   background: ${(p) => p.theme.color.uiBackground01};
+  min-height: 40px;
+  padding-top: ${({ theme }) => theme.spacing.s};
+  padding-bottom: ${({ theme }) => theme.spacing.xs};
+  background-color: ${({ theme }) => theme.color.uiBackground01};
+  padding-inline: 24px;
+
+  &.no-padding {
+    padding-inline: 0;
+    padding-top: 0;
+  }
 `;
 
 const Header = styled.div<{ isActive?: boolean }>`