From 190b1969b8ecba3e78a50296d3948916bae32d01 Mon Sep 17 00:00:00 2001 From: Nidoxs Date: Tue, 14 Jan 2025 21:29:45 +0000 Subject: [PATCH 1/7] Add optional `DisplayTitle` prop to `TabContainer` children --- src/Components/TabContainer.luau | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/Components/TabContainer.luau b/src/Components/TabContainer.luau index 05cdb9a..39318d5 100644 --- a/src/Components/TabContainer.luau +++ b/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 MyListComponent(props: { + comments: { string } + }) + local selectedTab, setSelectedTab = React.useState("Comments") + local comments = #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,6 +86,7 @@ local TAB_HEIGHT = 30 @interface Tab @field LayoutOrder number + @field DisplayTitle string? @field Content React.ReactNode @field Disabled boolean? ]=] @@ -67,6 +94,7 @@ local TAB_HEIGHT = 30 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() From b8c2b43508df751749d7da34eddccc639fb995d0 Mon Sep 17 00:00:00 2001 From: Nidoxs Date: Tue, 14 Jan 2025 21:32:46 +0000 Subject: [PATCH 2/7] Add to changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fe61abb..8d8d8b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## 1.3.0 +- 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 From 9f3120950f8b79f47dfb5920c424f54af03d3934 Mon Sep 17 00:00:00 2001 From: Nidoxs Date: Tue, 14 Jan 2025 21:34:31 +0000 Subject: [PATCH 3/7] Use unreleased title instead of `1.3.0` --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d8d8b7..48c890f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## 1.3.0 +## 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 From 8465276bfa4a5bc7b604f320d430e1166688ebb2 Mon Sep 17 00:00:00 2001 From: Nidoxs Date: Tue, 14 Jan 2025 21:38:09 +0000 Subject: [PATCH 4/7] Change name of example component function --- src/Components/TabContainer.luau | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/TabContainer.luau b/src/Components/TabContainer.luau index 39318d5..52430c9 100644 --- a/src/Components/TabContainer.luau +++ b/src/Components/TabContainer.luau @@ -39,7 +39,7 @@ 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 MyListComponent(props: { + local function MyPluginApp(props: { comments: { string } }) local selectedTab, setSelectedTab = React.useState("Comments") From 5c84bb5cbcf8a9ea3fd6353210e7a5e8fe1b3235 Mon Sep 17 00:00:00 2001 From: Nidoxs Date: Tue, 14 Jan 2025 21:42:15 +0000 Subject: [PATCH 5/7] Fix `TabContainer` example code for `DisplayTitle` change --- src/Components/TabContainer.luau | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/TabContainer.luau b/src/Components/TabContainer.luau index 52430c9..8e47b7c 100644 --- a/src/Components/TabContainer.luau +++ b/src/Components/TabContainer.luau @@ -43,7 +43,7 @@ comments: { string } }) local selectedTab, setSelectedTab = React.useState("Comments") - local comments = #props.comments + local commentsArray = props.comments return React.createElement(TabContainer, { SelectedTab = selectedTab, From 267c3f60cc4b9b37bb2a6ae87fff7f3f7a9cbc75 Mon Sep 17 00:00:00 2001 From: sircfenner Date: Wed, 15 Jan 2025 00:48:58 +0000 Subject: [PATCH 6/7] Change docs wording --- src/Components/TabContainer.luau | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/TabContainer.luau b/src/Components/TabContainer.luau index 8e47b7c..0d2cbbc 100644 --- a/src/Components/TabContainer.luau +++ b/src/Components/TabContainer.luau @@ -36,8 +36,8 @@ 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: + To override the text displayed on a tab, assign a value to the optional + `DisplayTitle` field in the tab entry; see the "Comments" example below: ```lua local function MyPluginApp(props: { comments: { string } From c3bf7989c4742f9b8f4f18320c25fa1bd6ff3397 Mon Sep 17 00:00:00 2001 From: Nidoxs Date: Wed, 15 Jan 2025 00:50:34 +0000 Subject: [PATCH 7/7] Update CHANGELOG.md Co-authored-by: sircfenner --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48c890f..990dc40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ # Changelog ## Unreleased -- Added an optional `DisplayTitle` prop to `TabContainer` children tabs to allow tabs to depend on some state for its display text +- Added an optional `DisplayTitle` prop to `TabContainer` children tabs to allow displaying custom text on tabs ## 1.2.0