Add optional DisplayTitle prop for TabContainer tabs

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Unreleased
+- Added an optional `DisplayTitle` prop to `TabContainer` children tabs to allow tabs to depend on some state for its display text
+
 ## 1.2.0
 
 -   Added usePlugin hook

src/Components/TabContainer.luau

@@ -36,6 +36,32 @@
 	end
 	```
 
+	For situations where the tab's display title may change depending on some state, you
+	can use the `DisplayTitle` prop within each `TabContainer` child:
+	```lua
+	local function MyPluginApp(props: { 
+		comments: { string } 
+	})
+		local selectedTab, setSelectedTab = React.useState("Comments")
+		local commentsArray = props.comments
+
+		return React.createElement(TabContainer, {
+			SelectedTab = selectedTab,
+			OnTabSelected = setSelectedTab,
+		}, {
+			["Comments"] = {
+				LayoutOrder = 1,
+				DisplayTitle = `Comments ({#commentsArray})`,
+				Content = React.createElement(...),
+			},
+			["Settings"] = {
+				LayoutOrder = 2,
+				Content = React.createElement(...),
+			}
+		})
+	end
+	```
+
 	As well as disabling the entire component via the `Disabled` [CommonProp](CommonProps), individual
 	tabs can be disabled and made unselectable by passing `Disabled` with a value of `true` inside
 	the tab's entry in the `Tabs` prop table.
@@ -60,13 +86,15 @@ local TAB_HEIGHT = 30
 	@interface Tab
 
 	@field LayoutOrder number
+	@field DisplayTitle string?
 	@field Content React.ReactNode
 	@field Disabled boolean?
 ]=]
 
 type Tab = {
 	Content: React.ReactNode,
 	LayoutOrder: number,
+	DisplayTitle: string?,
 	Disabled: boolean?,
 }
 
@@ -185,7 +213,7 @@ local function TabContainer(props: TabContainerProps)
 		tabs[name] = React.createElement(TabButton, {
 			Size = UDim2.fromScale(1 / count, 1),
 			LayoutOrder = tab.LayoutOrder,
-			Text = name,
+			Text = tab.DisplayTitle or name,
 			Selected = isSelectedTab,
 			Disabled = tab.Disabled == true or props.Disabled == true,
 			OnActivated = function()