Add and export class names (#2335)

mongodb · May 9, 2024 · 918b4e6 · 918b4e6
1 parent 3364b54
commit 918b4e6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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';