Skip to content

refactor!: remove TabSheet tab helper in v25 #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 15, 2025
Merged

refactor!: remove TabSheet tab helper in v25 #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 11 additions & 13 deletions dev/kitchen-sink/Row10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { BoardRow } from '../../packages/react-components-pro/src/BoardRow.js';
import { Tab } from '../../packages/react-components/src/Tab.js';
import { Tabs } from '../../packages/react-components/src/Tabs.js';
import { tab, TabSheet } from '../../packages/react-components/src/TabSheet.js';
import { TabSheet, TabSheetTab } from '../../packages/react-components/src/TabSheet.js';

export default function Row10() {
return (
Expand All @@ -10,17 +8,17 @@ export default function Row10() {
<div slot="prefix">Prefix</div>
<div slot="suffix">Suffix</div>

<Tabs slot="tabs">
<Tab id="tab-1">Tab 1</Tab>
<Tab id="tab-2">Tab 2</Tab>
<Tab id="tab-3">Tab 3</Tab>
</Tabs>
<TabSheetTab label="Tab 1">
<div>Panel 1</div>
</TabSheetTab>

<div {...tab('tab-1')}>Panel 1</div>
{/* @ts-expect-error TS2322: "tab" is not an HTML standard attribute */}
<div tab="tab-2">Panel 2</div>
{/* @ts-expect-error TS2322: "tab" is not an HTML standard attribute */}
<div tab="tab-3">Panel 3</div>
<TabSheetTab label="Tab 2">
<div>Panel 2</div>
</TabSheetTab>

<TabSheetTab label="Tab 3">
<div>Panel 3</div>
</TabSheetTab>
</TabSheet>
</BoardRow>
);
Expand Down
3 changes: 3 additions & 0 deletions dev/kitchen-sink/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kitchen Sink App</title>
<script type="module">
import '@vaadin/vaadin-lumo-styles/lumo.css';
</script>
<script type="module" src="index.ts" async></script>
</head>
<body>
Expand Down
27 changes: 0 additions & 27 deletions packages/react-components/src/TabSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,30 +99,3 @@ function TabSheet(props: TabSheetProps, ref: ForwardedRef<TabSheetElement>) {
const ForwardedTabSheet = forwardRef(TabSheet);

export { ForwardedTabSheet as TabSheet };

/**
* A helper function that allows declaring the tab identifier on the children
* of the `<TabSheet/>` component
*
* ### Usage
*
* ```tsx
* <TabSheet>
* <Tabs slot="tabs">
* <Tab id="about">About</Tab>
* <Tab id="contuct">Contact us</Tab>
* </Tabs>
* <div {...tab('about')}>This tab is all about,..</div>
* <div {...tab('contact')}>Our website: ...</div>
* </TabSheet>
* ```
*
* @param tab The identifier of the correspoding tab.
*
* @returns object with HTML attribute values recognized on tab sheet children.
* @deprecated Use `<TabSheetTab/>` instead.
*/
export function tab(tab: string): Record<string, string> {
console.warn('Using the `tab` helper function is deprecated. Use <TabSheetTab/> instead.');
return { tab } as Record<string, string>;
}
10 changes: 1 addition & 9 deletions test/TabSheet.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { describe, expect, it } from 'vitest';
import { render } from 'vitest-browser-react';
import { TabSheet, TabSheetTab, tab } from '../packages/react-components/src/TabSheet.js';
import { TabSheet, TabSheetTab } from '../packages/react-components/src/TabSheet.js';
import type { TabElement } from '../packages/react-components/src/Tab.js';
import sinon from 'sinon';
import { useState } from 'react';

function getTabSheet() {
Expand Down Expand Up @@ -143,13 +142,6 @@ describe('TabSheet', () => {
expect(suffix).to.have.text('SUFFIX');
});

it('should warn when using the tab helper', async () => {
const stub = sinon.stub(console, 'warn');
tab('Tab 1');
expect(stub.calledOnce).to.be.true;
stub.restore();
});

it('should expand content element to full size', async () => {
render(
<TabSheet style={{ height: '500px', width: '600px' }} theme="no-padding">
Expand Down