Merge pull request #3484 from plotly/feature/dcc-refactor-tabs

dcc redesign: tabs

Author: KoolADE85

@plotly/dash-generator-test-component-typescript/generator.test.ts

@@ -95,6 +95,10 @@ describe('Test Typescript component metadata generation', () => {
             `${componentName} element JSX.Element`,
             testTypeFactory('element', 'node')
         );
+        test(
+            `${componentName} dash_component DashComponent`,
+            testTypeFactory("dash_component", "node"),
+        );
         test(
             `${componentName} boolean type`,
             testTypeFactory('a_bool', 'bool')

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -1,6 +1,12 @@
 // Needs to export types if not in a d.ts file or if any import is present in the d.ts
 import React from 'react';
 
+type DashComponent = {
+    props: string;
+    namespace: string;
+    children?: [];
+}
+
 
 type Nested = {
     nested: Nested;
@@ -36,6 +42,7 @@ export type TypescriptComponentProps = {
         | boolean;
     element?: JSX.Element;
     array_elements?: JSX.Element[];
+    dash_component?: DashComponent;
 
     string_default?: string;
     number_default?: number;

CHANGELOG.md

@@ -2,6 +2,15 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## UNRELEASED
+
+## Added
+- Modernized `dcc.Tabs`
+
+## Changed
+- `dcc.Tab` now accepts a `width` prop which can be a pixel or percentage width for an individual tab.
+- `dcc.Tab` can accept other Dash Components for its label, in addition to a simple string.
+
 ## [4.0.0rc2] - 2025-10-10
 
 ## Added

components/dash-core-components/src/components/Tab.react.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import './css/tabs.css';
+import {TabProps} from '../types';
+
+/**
+ * Part of dcc.Tabs - this is the child Tab component used to render a tabbed page.
+ * Its children will be set as the content of that tab, which if clicked will become visible.
+ */
+function Tab({
+    children,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    disabled = false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    disabled_style = {color: 'var(--Dash-Text-Disabled)'},
+}: TabProps) {
+    return <>{children}</>;
+}
+
+export default Tab;