allow toolbar options customization

Author: justincorrigible

modules/components/src/Table/CountDisplay/CountDisplay.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import cx from 'classnames';
 import pluralize from 'pluralize';
 
-import Spinner from '#Loader/index.js';
 import { useTableContext } from '#Table/helpers/index.js';
 import { useThemeContext } from '#ThemeContext/index.js';
 import { emptyObj } from '#utils/noops.js';
@@ -13,12 +12,7 @@ import type { CountDisplayProps } from './types.js';
 const CountDisplay = ({
 	className: customClassName,
 	css: customCSS,
-	theme: {
-		fontColor: customFontColor,
-		fontSize: customFontSize,
-		hideLoader: customHideLoader,
-		Loader: customSpinnerProps = emptyObj,
-	} = emptyObj,
+	theme: { fontColor: customFontColor, fontSize: customFontSize, spacing: customSpacing } = emptyObj,
 }: CountDisplayProps) => {
 	const { currentPage, documentType, isLoading, pageSize, missingProvider, total } = useTableContext({
 		callerName: 'Table - CountDisplay',
@@ -30,17 +24,16 @@ const CountDisplay = ({
 				CountDisplay: {
 					className: themeClassName,
 					css: themeCSS,
-					hideLoader: themeHideLoader,
 					fontColor: themeFontColor = colors?.grey?.[700],
 					fontSize: themeFontSize = '0.8rem',
-					Spinner: themeSpinnerProps = emptyObj,
+					spacing: themeSpacing = '0.2rem',
 				} = emptyObj,
+				Toolbar: { spacing: themeToolbarSpacing } = emptyObj,
 			} = emptyObj,
 		} = emptyObj,
 	} = useThemeContext({ callerName: 'Table - CountDisplay' });
 
 	const hasData = total > 0;
-	const hideLoader = customHideLoader || themeHideLoader;
 
 	const oneOrManyDocuments =
 		missingProvider || pluralize(documentType, isPlural({ total, pageSize, currentPage }) ? 2 : 1);
@@ -52,13 +45,17 @@ const CountDisplay = ({
 				themeCSS,
 				css`
 					align-items: center;
-					color: ${customFontColor || themeFontColor};
+					color: ${customFontColor ?? themeFontColor};
 					display: flex;
 					flex-grow: 1;
-					font-size: ${customFontSize || themeFontSize};
+					font-size: ${customFontSize ?? themeFontSize};
 
 					> * {
 						flex: 0 0 auto;
+
+						&:not(:first-of-type) {
+							margin-left: ${customSpacing ?? themeSpacing ?? themeToolbarSpacing};
+						}
 					}
 				`,
 				customCSS,

modules/components/src/Table/CountDisplay/types.ts

@@ -2,13 +2,14 @@ import type { LoaderThemeProps } from '#Loader/types.js';
 import type { ThemeCommon } from '#ThemeContext/types/index.js';
 import type { RecursivePartial } from '#utils/types.js';
 
-export interface CountDisplayThemeProps extends ThemeCommon.FontProperties {
+export type CountDisplayThemeProps = {
 	hideLoader: boolean;
 
 	// Child components
 	Loader: LoaderThemeProps;
-}
+	spacing: string;
+} & ThemeCommon.FontProperties;
 
-export interface CountDisplayProps extends ThemeCommon.CustomCSS {
+export type CountDisplayProps = {
 	theme?: RecursivePartial<CountDisplayThemeProps>;
-}
+} & ThemeCommon.CustomCSS;

modules/components/src/Table/Toolbar/Toolbar.tsx

@@ -15,7 +15,7 @@ import type { ToolbarProps } from './types.js';
 const Toolbar = ({
 	css: customCSS,
 	className: customClassName,
-	theme: { CountDisplay: customCountDisplayProps } = emptyObj,
+	theme: { CountDisplay: customCountDisplayProps, spacing: customSpacing, tools: customTools } = emptyObj,
 }: ToolbarProps) => {
 	const {
 		components: {
@@ -24,10 +24,13 @@ const Toolbar = ({
 					className: themeClassName,
 					css: themeCSS,
 					CountDisplay: themeCountDisplayProps = emptyObj,
+					spacing: themeSpacing = '0.4rem',
+					tools: themeTools = [ColumnSelectButton, DownloadButton],
 				} = emptyObj,
 			} = emptyObj,
 		} = emptyObj,
 	} = useThemeContext({ callerName: 'Table - Toolbar' });
+	const tools = customTools ?? themeTools;
 	const className = cx('Toolbar', customClassName, themeClassName);
 	const countDisplayTheme = merge({}, themeCountDisplayProps, customCountDisplayProps);
 
@@ -49,17 +52,12 @@ const Toolbar = ({
 					css={css`
 						flex-shrink: 0;
 						margin: 0.3rem 0 0 0.3rem;
-
-						.Spinner {
-							justify-content: space-between;
-							width: 65%;
-						}
 					`}
 					theme={countDisplayTheme}
 				/>
 
 				<ul
-					className="buttons"
+					className="tools"
 					css={css`
 						display: flex;
 						flex-wrap: wrap;
@@ -69,11 +67,10 @@ const Toolbar = ({
 						padding: 0;
 					`}
 				>
-					{/* TODO: Allow adding buttons here */}
-					{[ColumnSelectButton, DownloadButton].map((Component) => (
+					{tools.map((Component) => (
 						<li
 							css={css`
-								margin-left: 0.3rem;
+								margin-left: ${customSpacing ?? themeSpacing};
 								margin-bottom: 0.3rem;
 							`}
 							key={getDisplayName(Component)}
@@ -84,7 +81,7 @@ const Toolbar = ({
 				</ul>
 			</section>
 		),
-		[className, countDisplayTheme, customCSS, themeCSS],
+		[className, countDisplayTheme, customCSS, themeCSS, tools],
 	);
 };
 

modules/components/src/Table/Toolbar/types.ts

@@ -1,11 +1,16 @@
+import type { ElementType } from 'react';
+
 import type { CountDisplayThemeProps } from '#Table/CountDisplay/types.js';
 import type { ThemeCommon } from '#ThemeContext/types/index.js';
 import type { RecursivePartial } from '#utils/types.js';
 
-export interface ToolbarThemeProps extends ThemeCommon.FontProperties, ThemeCommon.CustomCSS {
+export type ToolbarThemeProps = {
+	spacing: string;
+	tools: ElementType[];
 	CountDisplay: CountDisplayThemeProps;
-}
+} & ThemeCommon.FontProperties &
+	ThemeCommon.CustomCSS;
 
-export interface ToolbarProps extends ThemeCommon.CustomCSS {
+export type ToolbarProps = {
 	theme?: RecursivePartial<ToolbarThemeProps>;
-}
+} & ThemeCommon.CustomCSS;