feat: add classNameOverride and restProps to Tabs (#62)

.changeset/yellow-falcons-live.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/tabs": minor
+---
+
+feat: add classNameOverride to Tabs

packages/tabs/package.json

@@ -25,6 +25,7 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
+    "@kaizen/component-base": "^1.1.7",
     "@kaizen/draft-badge": "^1.13.13",
     "@reach/tabs": "^0.18.0",
     "classnames": "^2.3.2"

packages/tabs/src/Tab.tsx

@@ -1,10 +1,16 @@
-import React, { ReactNode, useState, SyntheticEvent } from "react"
+import React, {
+  HTMLAttributes,
+  ReactNode,
+  useState,
+  SyntheticEvent,
+} from "react"
 import { Tab as ReachTab } from "@reach/tabs"
 import classnames from "classnames"
+import { OverrideClassName } from "@kaizen/component-base"
 import { Badge } from "@kaizen/draft-badge"
 import styles from "./Tab.module.scss"
 
-export interface TabProps {
+export type TabProps = {
   /**
    * Gets injected by TabList, no need to specify yourself
    */
@@ -18,13 +24,26 @@ export interface TabProps {
   children: ReactNode
   onBlur?: (e: SyntheticEvent) => void
   onFocus?: (e: SyntheticEvent) => void
-}
+} & OverrideClassName<
+  Omit<
+    HTMLAttributes<HTMLButtonElement>,
+    // These props are used in the component internals, but could be extended if needed
+    "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave"
+  >
+>
 
 /**
  * @deprecated Please use the same component from `@kaizen/components`
  */
 export const Tab = (props: TabProps): JSX.Element => {
-  const { isSelected, badge, disabled, children } = props
+  const {
+    isSelected,
+    badge,
+    disabled,
+    children,
+    classNameOverride,
+    ...restProps
+  } = props
   const [isHovered, setIsHovered] = useState<boolean>(false)
   const [isFocused, setIsFocused] = useState<boolean>(false)
   const showActiveBadge = isSelected || isHovered || isFocused
@@ -42,11 +61,16 @@ export const Tab = (props: TabProps): JSX.Element => {
   return (
     <ReachTab
       disabled={disabled}
-      className={classnames(styles.tab, isSelected && styles.selected)}
+      className={classnames(
+        styles.tab,
+        classNameOverride,
+        isSelected && styles.selected
+      )}
       onFocus={onFocus}
       onBlur={onBlur}
       onMouseEnter={(): void => setIsHovered(true)}
       onMouseLeave={(): void => setIsHovered(false)}
+      {...restProps}
     >
       {children}
       {badge && (

packages/tabs/src/TabList.tsx

@@ -1,9 +1,10 @@
-import React, { ReactNode } from "react"
+import React, { HTMLAttributes, ReactNode } from "react"
 import { TabList as ReachTabList } from "@reach/tabs"
 import classnames from "classnames"
+import { OverrideClassName } from "@kaizen/component-base"
 import styles from "./TabList.module.scss"
 
-export interface TabListProps {
+export type TabListProps = {
   /**
    * Accessible name for the set of tabs
    */
@@ -13,17 +14,28 @@ export interface TabListProps {
    */
   noPadding?: boolean
   children: ReactNode
-}
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 /**
  * @deprecated Please use the same component from `@kaizen/components`
  */
 export const TabList = (props: TabListProps): JSX.Element => {
-  const { "aria-label": ariaLabel, noPadding = false, children } = props
+  const {
+    "aria-label": ariaLabel,
+    noPadding = false,
+    children,
+    classNameOverride,
+    ...restProps
+  } = props
   return (
     <ReachTabList
       aria-label={ariaLabel}
-      className={classnames(styles.tabList, noPadding && styles.noPadding)}
+      className={classnames(
+        styles.tabList,
+        classNameOverride,
+        noPadding && styles.noPadding
+      )}
+      {...restProps}
     >
       {children}
     </ReachTabList>

packages/tabs/src/Tabs.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react"
+import React, { HTMLAttributes, ReactNode } from "react"
 import { Tabs as ReachTabs, TabsKeyboardActivation } from "@reach/tabs"
 
-export interface TabsProps {
+export type TabsProps = {
   /**
    * Index of tab to show by default
    * Only works in uncontrolled mode (when no selectedIndex is provided)
@@ -23,7 +23,7 @@ export interface TabsProps {
    */
   onChange?: (index: number) => void
   children: ReactNode
-}
+} & Omit<HTMLAttributes<HTMLDivElement>, "onChange">
 
 /**
  * @deprecated Please use the same component from `@kaizen/components`
@@ -35,6 +35,7 @@ export const Tabs = (props: TabsProps): JSX.Element => {
     keyboardActivation = "auto",
     onChange,
     children,
+    ...restProps
   } = props
   return (
     <ReachTabs
@@ -46,6 +47,7 @@ export const Tabs = (props: TabsProps): JSX.Element => {
           : TabsKeyboardActivation.Manual
       }
       onChange={onChange}
+      {...restProps}
     >
       {children}
     </ReachTabs>