chore(tabs): use getRandomId to generate ids for tabs/tabitems

Author: marissahuysentruyt

components/tabs/stories/tabs.stories.js

@@ -93,18 +93,15 @@ export default {
 		useAnchors: false,
 		content: [
 			{
-				id: "tab-1",
 				label: "Tab 1",
 				icon: "Folder",
 				isSelected: true,
 			},
 			{
-				id: "tab-2",
 				label: "Tab 2",
 				icon: "Image",
 			},
 			{
-				id: "tab-3",
 				label: "Tab 3",
 				icon: "Document",
 				isDisabled: true,
@@ -215,19 +212,16 @@ export const Disabled = Template.bind({});
 Disabled.args = {
 	content: [
 		{
-			id: "tab-1",
 			label: "Selected tab",
 			icon: "Folder",
 			isSelected: true,
 		},
 		{
-			id: "tab-2",
 			label: "Disabled tab",
 			icon: "Image",
 			isDisabled: true,
 		},
 		{
-			id: "tab-3",
 			label: "Tab 3",
 			icon: "Document",
 		},

components/tabs/stories/tabs.test.js

@@ -3,17 +3,14 @@ import { Template } from "./template.js";
 
 const ExampleLabelOnlyTabContent = [
 	{
-		id: "tab-1",
 		label: "Selected",
 		isSelected: true,
 	},
 	{
-		id: "tab-2",
 		label: "Disabled",
 		isDisabled: true,
 	},
 	{
-		id: "tab-3",
 		label: "Tab 3",
 	},
 ];

components/tabs/stories/template.js

@@ -1,4 +1,4 @@
-import { Container } from "@spectrum-css/preview/decorators";
+import { getRandomId, Container } from "@spectrum-css/preview/decorators";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
@@ -23,6 +23,7 @@ export const Template = ({
 	iconOnly = false,
 	hasRightAlignedTabs = false,
 	useAnchors = false,
+	id = getRandomId("tabs"),
 	customStyles = {},
 	content = [],
 } = {}, context = {}) => {
@@ -71,6 +72,7 @@ export const Template = ({
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}
+			id=${ifDefined(id)}
 		>
 			${when(!isOverflow, () => repeat(
 				content,
@@ -85,6 +87,7 @@ export const Template = ({
 									"is-disabled": item?.isDisabled ?? false,
 								})}
 								tabindex="0"
+								id=${getRandomId("tab-item")}
 							>
 								${when(item.icon, () =>
 									Icon({