feat(headless/tabs): add custom selected class

Co-authored-by: Naor Peled <[email protected]>
Co-authored-by: Igal Klebanov <[email protected]>
Co-authored-by: Jack Shelton <[email protected]>

Author: 4 people

packages/kit-headless/src/components/tabs/tab.tsx

@@ -9,6 +9,7 @@ import {
   useVisibleTask$,
   QwikIntrinsicElements,
   type QwikMouseEvent,
+  useComputed$,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
 import { KeyCode } from '../../utils/key-code.type';
@@ -39,6 +40,10 @@ export const Tab = component$((props: TabProps) => {
   const elementRefSig = useSignal<HTMLElement | undefined>();
   const uniqueTabId = useId();
 
+  const selectedClassNameSig = useComputed$(() => {
+    return props.selectedClassName || contextService.selectedClassName;
+  });
+
   useTask$(async function indexInitTask({ cleanup }) {
     if (isServer) {
       serverAssignedIndexSig.value =
@@ -112,14 +117,17 @@ export const Tab = component$((props: TabProps) => {
       tabIndex={isSelectedSig.value ? 0 : -1}
       aria-controls={'tabpanel-' + matchedTabPanelIdSig.value}
       class={`${
-        isSelectedSig.value ? `selected ${props.selectedClassName || ''}` : ''
+        isSelectedSig.value
+          ? `selected ${selectedClassNameSig.value || ''}`
+          : ''
       }${props.class ? ` ${props.class}` : ''}`}
       onClick$={(event) => {
         contextService.selectTab$(uniqueTabId);
         if (props.onClick$) {
           props.onClick$(event);
         }
       }}
+      style={props.style}
     >
       <Slot />
     </button>

packages/kit-headless/src/components/tabs/tabs-context.type.ts

@@ -1,5 +1,4 @@
 import { QRL } from '@builder.io/qwik';
-import { Behavior } from './behavior.type';
 import { TabInfo } from './tabs';
 import { KeyCode } from '../../utils/key-code.type';
 
@@ -16,4 +15,5 @@ export interface TabsContext {
   isTabSelected$: QRL<(tabId: string) => boolean>;
   isPanelSelected$: QRL<(panelId: string) => boolean>;
   selectIfAutomatic$: QRL<(tabId: string) => void>;
+  selectedClassName?: string;
 }

packages/kit-headless/src/components/tabs/tabs.tsx

@@ -46,6 +46,7 @@ export type TabsProps = {
   behavior?: Behavior;
   selectedIndex?: number;
   vertical?: boolean;
+  selectedClassName?: string;
   onSelectedIndexChange$?: (index: number) => void;
 } & QwikIntrinsicElements['div'];
 
@@ -214,6 +215,7 @@ export const Tabs = component$((props: TabsProps) => {
     reIndexTabs$,
     onTabKeyDown$,
     selectIfAutomatic$,
+    selectedClassName: props.selectedClassName
   };
 
   useContextProvider(tabsContextId, contextService);