fix: missing disabled state for tab (#2249)

fix: padding for tab-panel

packages/components/src/components/tab/model.ts

@@ -19,6 +19,10 @@ export type DBTabDefaultProps = {
 	 * Define the text next to the icon specified via the icon Property to get hidden.
 	 */
 	noText?: boolean;
+	/**
+	 * The disabled attribute can be set to keep a user from clicking on the tab.
+	 */
+	disabled?: boolean;
 };
 
 export type DBTabProps = GlobalProps &

packages/components/src/components/tab/tab.lite.tsx

@@ -53,7 +53,12 @@ export default function DBTab(props: DBTabProps) {
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
-			<input ref={ref} type="radio" id={state._id} />
+			<input
+				disabled={props.disabled}
+				ref={ref}
+				type="radio"
+				id={state._id}
+			/>
 
 			<Show when={props.label}>{props.label}</Show>
 			{props.children}

packages/components/src/components/tab/tab.scss

@@ -13,6 +13,10 @@
 	white-space: nowrap;
 	position: relative;
 
+	&:has(input:disabled) {
+		opacity: variables.$db-opacity-sm;
+	}
+
 	input {
 		&[type="radio"] {
 			position: absolute;

packages/components/src/components/tabs/tabs.lite.tsx

@@ -80,10 +80,16 @@ export default function DBTabs(props: DBTabsProps) {
 			if (childTabLists?.length > 0) {
 				const firstTabList = childTabLists.item(0);
 				if (firstTabList) {
-					firstTabList.setAttribute(
-						'aria-orientation',
-						props.orientation || 'horizontal'
-					);
+					if (
+						!firstTabList
+							.getAttributeNames()
+							.includes('aria-orientation')
+					) {
+						firstTabList.setAttribute(
+							'aria-orientation',
+							props.orientation || 'horizontal'
+						);
+					}
 
 					if (props.behaviour === 'arrows') {
 						const scrollContainers =
@@ -105,14 +111,19 @@ export default function DBTabs(props: DBTabsProps) {
 					if (tabs?.length > 0) {
 						Array.from<Element>(tabs).forEach(
 							(tab: Element, index: number) => {
-								tab.setAttribute(
-									'data-width',
-									props.width || 'auto'
-								);
-								tab.setAttribute(
-									'data-alignment',
-									props.alignment || 'start'
-								);
+								const attributes = tab.getAttributeNames();
+								if (!attributes.includes('data-width')) {
+									tab.setAttribute(
+										'data-width',
+										props.width || 'auto'
+									);
+								}
+								if (!attributes.includes('data-alignment')) {
+									tab.setAttribute(
+										'data-alignment',
+										props.alignment || 'start'
+									);
+								}
 
 								const input = tab.getElementsByTagName('input');
 								if (input.length > 0) {

packages/components/src/components/tabs/tabs.scss

@@ -31,8 +31,16 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	inline-size: 100%;
 	position: relative;
 
+	.db-tab-panel {
+		padding: 0 variables.$db-spacing-fixed-sm;
+	}
+
 	&[data-orientation="vertical"] {
 		flex-direction: row;
+
+		.db-tab-panel {
+			padding: variables.$db-spacing-fixed-sm 0;
+		}
 	}
 
 	.db-tab-list {

showcases/angular-showcase/src/app/components/tab/tab.component.html

@@ -17,6 +17,7 @@
 			[iconAfter]="exampleProps.iconAfter"
 			[width]="exampleProps.width"
 			[alignment]="exampleProps.alignment"
+			[disabled]="exampleProps.disabled"
 		>
 			{{ exampleName }}
 		</db-tab>

showcases/react-showcase/src/components/tab/index.tsx

@@ -11,14 +11,16 @@ const getTab = ({
 	icon,
 	iconAfter,
 	width,
-	alignment
+	alignment,
+	disabled
 }: DBTabProps) => (
 	<DBTab
 		active={active}
 		noText={noText}
 		icon={icon}
 		iconAfter={iconAfter}
 		width={width}
+		disabled={disabled}
 		alignment={alignment}>
 		{children}
 	</DBTab>

showcases/shared/tab.json

@@ -30,18 +30,23 @@
 		"examples": [
 			{
 				"name": "(Default) Enabled",
-				"className": "tab-hide-article",
 				"props": {
 					"label": "(Default) Enabled"
 				}
 			},
 			{
 				"name": "active",
-				"className": "tab-hide-article",
 				"props": {
 					"label": "active",
 					"active": true
 				}
+			},
+			{
+				"name": "disabled",
+				"props": {
+					"label": "active",
+					"disabled": true
+				}
 			}
 		]
 	},
@@ -50,30 +55,26 @@
 		"examples": [
 			{
 				"name": "(Default) Text",
-				"className": "tab-hide-article",
 				"props": {
 					"label": "(Default) Text"
 				}
 			},
 			{
 				"name": "Text - Icon (Leading)",
-				"className": "tab-hide-article",
 				"props": {
 					"label": "Text - Icon (Leading)",
 					"icon": "x_placeholder"
 				}
 			},
 			{
 				"name": "Text - Icon (Trailing)",
-				"className": "tab-hide-article",
 				"props": {
 					"label": "Text - Icon (Trailing)",
 					"iconAfter": "x_placeholder"
 				}
 			},
 			{
 				"name": "Icon",
-				"className": "tab-hide-article",
 				"props": {
 					"icon": "x_placeholder",
 					"noText": true
@@ -86,14 +87,12 @@
 		"examples": [
 			{
 				"name": "Auto Width (Default)",
-				"className": "tab-hide-article",
 				"props": {
 					"label": "Auto Width (Default)"
 				}
 			},
 			{
 				"name": "Width full",
-				"className": "tab-hide-article",
 				"style": { "width": "500px" },
 				"props": {
 					"label": "Width full",
@@ -107,7 +106,6 @@
 		"examples": [
 			{
 				"name": "Left",
-				"className": "tab-hide-article",
 				"style": { "width": "500px" },
 				"props": {
 					"label": "Left",
@@ -116,7 +114,6 @@
 			},
 			{
 				"name": "Centered",
-				"className": "tab-hide-article",
 				"style": { "width": "500px" },
 				"props": {
 					"label": "Centered",

showcases/vue-showcase/src/components/tab/Tab.vue

@@ -16,6 +16,7 @@ import { DBTab } from "../../../../../output/vue/vue3/src";
 				:iconAfter="exampleProps.iconAfter"
 				:width="exampleProps.width"
 				:alignment="exampleProps.alignment"
+				:disabled="exampleProps.disabled"
 			>
 				{{ exampleName }}
 			</DBTab>