From 918b4e6d5855d42bfac347525bf23ce0d960cbce Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Thu, 9 May 2024 09:30:13 -0700
Subject: [PATCH] Add and export class names (#2335)

---
 packages/tabs/src/Tabs/Tabs.styles.ts |  5 ++++-
 packages/tabs/src/Tabs/Tabs.tsx       | 10 ++++++++--
 packages/tabs/src/Tabs/index.ts       |  4 ++++
 packages/tabs/src/index.ts            |  6 +++++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/tabs/src/Tabs/Tabs.styles.ts b/packages/tabs/src/Tabs/Tabs.styles.ts
index 3bd9c09acd..624d156087 100644
--- a/packages/tabs/src/Tabs/Tabs.styles.ts
+++ b/packages/tabs/src/Tabs/Tabs.styles.ts
@@ -1,7 +1,10 @@
 import { css } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 
+export const tabListElementClassName = createUniqueClassName('tab-list');
+export const tabPanelsElementClassName = createUniqueClassName('tab-panels');
+
 // Using a background allows the "border" to appear underneath the individual tab color
 export const modeColors = {
   [Theme.Light]: {
diff --git a/packages/tabs/src/Tabs/Tabs.tsx b/packages/tabs/src/Tabs/Tabs.tsx
index 86b4ae96e8..24a6ef75e7 100644
--- a/packages/tabs/src/Tabs/Tabs.tsx
+++ b/packages/tabs/src/Tabs/Tabs.tsx
@@ -18,6 +18,8 @@ import {
   listStyle,
   modeColors,
   tabContainerStyle,
+  tabListElementClassName,
+  tabPanelsElementClassName,
 } from './Tabs.styles';
 import { AccessibleTabsProps } from './Tabs.types';
 
@@ -163,7 +165,11 @@ function Tabs(props: AccessibleTabsProps) {
         <div className={tabContainerStyle}>
           {/* renderedTabs portals the tab title into this element */}
           <div
-            className={cx(listStyle, modeColors[theme].underlineColor)}
+            className={cx(
+              listStyle,
+              modeColors[theme].underlineColor,
+              tabListElementClassName,
+            )}
             role="tablist"
             ref={setTabNode}
             aria-orientation="horizontal"
@@ -175,7 +181,7 @@ function Tabs(props: AccessibleTabsProps) {
         </div>
 
         {/* renderedTabs portals the contents into this element */}
-        <div ref={setPanelNode} />
+        <div className={tabPanelsElementClassName} ref={setPanelNode} />
       </div>
     </LeafyGreenProvider>
   );
diff --git a/packages/tabs/src/Tabs/index.ts b/packages/tabs/src/Tabs/index.ts
index d2eb5ae911..a9d766a157 100644
--- a/packages/tabs/src/Tabs/index.ts
+++ b/packages/tabs/src/Tabs/index.ts
@@ -1,2 +1,6 @@
 export { default } from './Tabs';
+export {
+  tabListElementClassName,
+  tabPanelsElementClassName,
+} from './Tabs.styles';
 export type { AccessibleTabsProps, TabsProps } from './Tabs.types';
diff --git a/packages/tabs/src/index.ts b/packages/tabs/src/index.ts
index 4b9b5033eb..280cfdfc6b 100644
--- a/packages/tabs/src/index.ts
+++ b/packages/tabs/src/index.ts
@@ -1,4 +1,8 @@
 export type { TabProps } from './Tab';
 export { default as Tab } from './Tab';
 export type { AccessibleTabsProps as TabsProps } from './Tabs';
-export { default as Tabs } from './Tabs';
+export {
+  tabListElementClassName,
+  tabPanelsElementClassName,
+  default as Tabs,
+} from './Tabs';