Merge pull request #346 from wwnorton/NDS-442

Added className property to Tab component to override
wwnorton · Mar 20, 2024 · d3d0e42 · d3d0e42
2 parents b6d7d07 + 2d865ea
commit d3d0e42
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 35 deletions.
diff --git a/packages/react/src/components/Tabs/Tab.tsx b/packages/react/src/components/Tabs/Tab.tsx
@@ -6,16 +6,10 @@ import {
 	useTabId, useTabListDescendant, useTabPanelId, useTabsState,
 } from './context';
 
-const BASE_NAME = 'nds-tab';
-
-const styles = {
-	base: BASE_NAME,
-	contained: `${BASE_NAME}--contained`,
-	line: `${BASE_NAME}--line`,
-	selected: 'selected',
-};
-
 export const Tab = ({
+	baseName = 'nds-tab',
+	containedClass = `${baseName}--contained`,
+	lineClass = `${baseName}--line`,
 	children,
 }: TabProps) => {
 	const { index, register } = useTabListDescendant();
@@ -30,10 +24,10 @@ export const Tab = ({
 		setSelectedTabIndex(index);
 	}, [index, setSelectedTabIndex]);
 
-	const className = classNames(BASE_NAME, {
-		[styles.contained]: variant === 'contained',
-		[styles.line]: variant === 'line',
-		[styles.selected]: isSelected,
+	const className = classNames(baseName, {
+		[containedClass]: variant === 'contained',
+		[lineClass]: variant === 'line',
+		selected: isSelected,
 	});
 
 	return (

diff --git a/packages/react/src/components/Tabs/TabList.tsx b/packages/react/src/components/Tabs/TabList.tsx
@@ -6,16 +6,13 @@ import { TabListDescendantsProvider, useTabListDescendants, useTabsState } from
 import { useTabListScroll } from './useTabListScroll';
 import { useTabKeyboardNavigation } from './useTabKeyboardNavigation';
 
-const BASE_NAME = 'nds-tab-list';
-
-const styles = {
-	base: BASE_NAME,
-	container: `${BASE_NAME}-container`,
-	left: `${BASE_NAME}--left`,
-	centered: `${BASE_NAME}--centered`,
-};
-
-export const TabList = ({ children }: TabListProps) => {
+export const TabList = ({
+	baseName = 'nds-tab-list',
+	containerClass = `${baseName}-container`,
+	leftClass = `${baseName}--left`,
+	centeredClass = `${baseName}--centered`,
+	children,
+}: TabListProps) => {
 	const tabListRef = React.useRef<HTMLDivElement>(null);
 
 	useTabKeyboardNavigation(tabListRef);
@@ -27,18 +24,18 @@ export const TabList = ({ children }: TabListProps) => {
 	const { align } = useTabsState();
 
 	const className = classNames(
-		styles.base,
+		baseName,
 		{
-			[styles.left]: align === 'left',
-			[styles.centered]: align === 'center',
+			[leftClass]: align === 'left',
+			[centeredClass]: align === 'center',
 		},
 	);
 
 	const descendants = useTabListDescendants();
 
 	return (
 		<TabListDescendantsProvider value={descendants}>
-			<div className={styles.container}>
+			<div className={containerClass}>
 				<TabScrollButton type="left" onClick={moveLeft} disabled={atMinScroll} />
 				<div ref={tabListRef} className={className} role="tablist">
 					{children}

diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
@@ -10,13 +10,14 @@ function isControlled(props: TabsProps): props is ControlledTabsProps {
 
 const ControlledTabs = React.forwardRef<HTMLDivElement, ControlledTabsProps>(({
 	children,
+	className = 'nds-tabs',
 	...rest
 }, ref) => {
 	const state = useInitControlledTabsState(rest);
 
 	return (
 		<TabsContext.Provider value={state}>
-			<div ref={ref}>
+			<div ref={ref} className={className}>
 				{children}
 			</div>
 		</TabsContext.Provider>
@@ -25,13 +26,14 @@ const ControlledTabs = React.forwardRef<HTMLDivElement, ControlledTabsProps>(({
 
 const UncontrolledTabs = React.forwardRef<HTMLDivElement, UncontrolledTabsProps>(({
 	children,
+	className = 'nds-tabs',
 	...rest
 }, ref) => {
 	const state = useInitUncontrolledTabsState(rest);
 
 	return (
 		<TabsContext.Provider value={state}>
-			<div ref={ref}>
+			<div ref={ref} className={className}>
 				{children}
 			</div>
 		</TabsContext.Provider>

diff --git a/packages/react/src/components/Tabs/index.stories.tsx b/packages/react/src/components/Tabs/index.stories.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Link } from '../Link';
 import {
-	Tabs,
-	Tab,
-	TabList,
-	TabPanel,
-	TabPanels,
+	Tabs, Tab, TabList, TabPanel, TabPanels,
 } from '.';
 
 const BASE_TABS = ['Tab 1', 'Tab 2', 'Tab 3', 'Long Text "Tab 4"', 'Tab 5'];
@@ -70,7 +66,9 @@ const TabsTemplate: Story = {
 				<TabPanel>Content Two</TabPanel>
 				<TabPanel>
 					Content Three.
-					<Link href="/#" alt="A Link">A Link</Link>
+					<Link href="/#" alt="A Link">
+						A Link
+					</Link>
 				</TabPanel>
 				<TabPanel>Content Four</TabPanel>
 				<TabPanel>Content Five</TabPanel>

diff --git a/packages/react/src/components/Tabs/types.ts b/packages/react/src/components/Tabs/types.ts
@@ -61,14 +61,23 @@ export type CommonTabsProps = {
 	 */
 	variant?: 'contained' | 'line';
 
+	className?: string;
+
 	children?: React.ReactNode;
 };
 
 export type TabListProps = {
+	baseName?: string;
+	containerClass?: string;
+	leftClass?: string;
+	centeredClass?: string;
 	children?: React.ReactNode;
 };
 
 export type TabProps = {
+	baseName?: string;
+	containedClass?: string;
+	lineClass?: string;
 	children?: React.ReactNode;
 };