mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 Tabs

Browse source 
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 c0aaeb2bb1
9 changed files with 48 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -3944,12 +3944,10 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------------- |
| selected | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index |
| type | No | <code>let</code> | No | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs |
| contained | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to be contained |
| autoWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to have an auto-width |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon |
| triggerHref | No | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the tab trigger href attribute |
### Slots
@ -3962,8 +3960,6 @@ None.
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| keypress | forwarded | -- |
| click | forwarded | -- |
| change | dispatched | -- |
## `TabsSkeleton`

48
docs/src/COMPONENT_API.json
View file

@ -11834,13 +11834,13 @@
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "li" },
{ "type": "forwarded", "name": "mouseover", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" }
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "forwarded", "name": "mouseover", "element": "a" },
{ "type": "forwarded", "name": "mouseenter", "element": "a" },
{ "type": "forwarded", "name": "mouseleave", "element": "a" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
"rest_props": { "type": "Element", "name": "a" }
},
{
"moduleName": "TabContent",
@ -12165,11 +12165,11 @@
"reactive": true
},
{
"name": "type",
"name": "contained",
"kind": "let",
"description": "Specify the type of tabs",
"type": "\"default\" | \"container\"",
"value": "\"default\"",
"description": "Set to `true` for tabs to be contained",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12187,30 +12187,6 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the chevron icon",
"type": "string",
"value": "\"Show menu options\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "triggerHref",
"kind": "let",
"description": "Specify the tab trigger href attribute",
"type": "string",
"value": "\"#\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
@ -12218,11 +12194,7 @@
{ "name": "__default__", "default": true, "slot_props": "{}" },
{ "name": "content", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "forwarded", "name": "keypress", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "dispatched", "name": "change" }
],
"events": [{ "type": "dispatched", "name": "change" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},

8
docs/src/pages/components/Tabs.svx
View file

@ -60,9 +60,9 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
</svelte:fragment>
</Tabs>
## Container type
## Contained
<Tabs type="container">
<Tabs contained>
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />
@ -77,6 +77,6 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
<TabsSkeleton count={3} />
## Skeleton (container)
## Skeleton (contained)
<TabsSkeleton type="container" count={3} />
<TabsSkeleton contained count={3} />

27
src/Tabs/Tab.svelte
View file

@ -30,12 +30,19 @@
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li
tabindex="-1"
role="presentation"
<a
bind:this="{ref}"
tabindex="{disabled ? '-1' : tabindex}"
role="tab"
class:bx--tabs__nav-item="{true}"
class:bx--tabs__nav-link="{true}"
class:bx--tabs__nav-item--disabled="{disabled}"
class:bx--tabs__nav-item--selected="{selected}"
aria-selected="{selected}"
aria-disabled="{disabled}"
id="{id}"
href="{href}"
style="{$useAutoWidth ? 'width: auto' : undefined}"
{...$$restProps}
on:click|preventDefault
on:click|preventDefault="{() => {
@ -58,17 +65,5 @@
}
}}"
>
<a
bind:this="{ref}"
role="tab"
tabindex="{disabled ? '-1' : tabindex}"
aria-selected="{selected}"
aria-disabled="{disabled}"
id="{id}"
href="{href}"
class:bx--tabs__nav-link="{true}"
style:width="{$useAutoWidth ? "auto" : undefined}"
>
<slot>{label}</slot>
</a>
</li>
</a>

53
src/Tabs/Tabs.svelte
View file

@ -3,26 +3,15 @@
export let selected = 0;
/**
* Specify the type of tabs
* @type {"default" | "container"}
* Set to `true` for tabs to be contained
*/
export let type = "default";
export let contained = false;
/** Set to `true` for tabs to have an auto-width */
export let autoWidth = false;
/**
* Specify the ARIA label for the chevron icon
* @type {string}
*/
export let iconDescription = "Show menu options";
/** Specify the tab trigger href attribute */
export let triggerHref = "#";
import { createEventDispatcher, afterUpdate, setContext, tick } from "svelte";
import { writable, derived } from "svelte/store";
import ChevronDown from "../icons/ChevronDown.svelte";
const dispatch = createEventDispatcher();
@ -122,43 +111,11 @@
<div
role="navigation"
class:bx--tabs="{true}"
class:bx--tabs--container="{type === 'container'}"
class:bx--tabs--contained="{contained}"
{...$$restProps}
>
<div
role="listbox"
tabindex="0"
class:bx--tabs-trigger="{true}"
aria-label="{$$props['aria-label'] || 'listbox'}"
on:click="{() => {
dropdownHidden = !dropdownHidden;
}}"
on:keypress
on:keypress="{() => {
dropdownHidden = !dropdownHidden;
}}"
>
<a
tabindex="-1"
class:bx--tabs-trigger-text="{true}"
href="{triggerHref}"
on:click|preventDefault
on:click|preventDefault|stopPropagation="{() => {
dropdownHidden = !dropdownHidden;
}}"
>
{#if currentTab}{currentTab.label}{/if}
</a>
<ChevronDown aria-hidden="true" title="{iconDescription}" />
</div>
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
<ul
bind:this="{refTabList}"
role="tablist"
class:bx--tabs__nav="{true}"
class:bx--tabs__nav--hidden="{dropdownHidden}"
>
<div bind:this="{refTabList}" role="tablist" class:bx--tab--list="{true}">
<slot />
</ul>
</div>
</div>
<slot name="content" />

13
src/Tabs/TabsSkeleton.svelte
View file

@ -14,21 +14,18 @@
<div
class:bx--tabs="{true}"
class:bx--skeleton="{true}"
class:bx--tabs--scrollable="{true}"
class:bx--tabs--scrollable--container="{type === 'container'}"
class:bx--tabs--contained="{type === 'container'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<ul class:bx--tabs--scrollable__nav="{true}">
<div class:bx--tab--list="{true}">
{#each Array.from({ length: count }, (_, i) => i) as item}
<li class:bx--tabs--scrollable__nav-item="{true}">
<div class:bx--tabs__nav-link="{true}">
<span class:bx--tabs__nav-item="{true}" class:bx--tabs__nav-link="{true}">
<span></span>
</div>
</li>
</span>
{/each}
</ul>
</div>
</div>

2
tests/Tabs.test.svelte
View file

@ -19,7 +19,7 @@
<TabContent>Content 3</TabContent>
<Tabs type="container">
<Tabs contained>
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />

2
types/Tabs/Tab.svelte.d.ts vendored
View file

@ -1,7 +1,7 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["li"];
type RestProps = SvelteHTMLElements["a"];
export interface TabProps extends RestProps {
/**

24
types/Tabs/Tabs.svelte.d.ts vendored
View file

@ -11,10 +11,10 @@ export interface TabsProps extends RestProps {
selected?: number;
/**
* Specify the type of tabs
* @default "default"
* Set to `true` for tabs to be contained
* @default false
*/
type?: "default" | "container";
contained?: boolean;
/**
* Set to `true` for tabs to have an auto-width
@ -22,27 +22,11 @@ export interface TabsProps extends RestProps {
*/
autoWidth?: boolean;
/**
* Specify the ARIA label for the chevron icon
* @default "Show menu options"
*/
iconDescription?: string;
/**
* Specify the tab trigger href attribute
* @default "#"
*/
triggerHref?: string;
[key: `data-${string}`]: any;
}
export default class Tabs extends SvelteComponentTyped<
TabsProps,
{
keypress: WindowEventMap["keypress"];
click: WindowEventMap["click"];
change: CustomEvent<any>;
},
{ change: CustomEvent<any> },
{ default: {}; content: {} }
> {}