Make v10 Tabs work with v11 css classes

In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
This commit is contained in:
Gregor Wassmann 2022-11-04 21:00:36 +01:00
commit 0eac2e94da
7 changed files with 52 additions and 77 deletions

View file

@ -2,7 +2,7 @@
import type { SvelteComponentTyped } from "svelte";
export interface TabProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
/**
* Specify the tab label
* Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
@ -39,6 +39,30 @@ export interface TabProps
* @default null
*/
ref?: null | HTMLAnchorElement;
/**
* SvelteKit attribute to enable data prefetching
* if a link is hovered over or touched on mobile.
* @see https://kit.svelte.dev/docs/a-options#sveltekit-prefetch
* @default false
*/
"sveltekit:prefetch"?: boolean;
/**
* SvelteKit attribute to trigger a full page
* reload after the link is clicked.
* @see https://kit.svelte.dev/docs/a-options#sveltekit-reload
* @default false
*/
"sveltekit:reload"?: boolean;
/**
* SvelteKit attribute to prevent scrolling
* after the link is clicked.
* @see https://kit.svelte.dev/docs/a-options#sveltekit-noscroll
* @default false
*/
"sveltekit:noscroll"?: boolean;
}
export default class Tab extends SvelteComponentTyped<