From 59a708243222b89995647dc5684863926248dab0 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Mon, 27 May 2024 14:49:55 -0400 Subject: [PATCH 1/5] chore(tabs): add default selected tab option --- packages/react/src/components/tabs/tabs.tsx | 4 +++- packages/storybook/stories/tabs.stories.tsx | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx index 9990739f04..eacd69bc6f 100644 --- a/packages/react/src/components/tabs/tabs.tsx +++ b/packages/react/src/components/tabs/tabs.tsx @@ -100,6 +100,7 @@ const AddIcon = styled(Icon)` export interface Tab { id?: string; title: string; + defaultSelected?: boolean; leftIcon?: IconName; rightIcon?: IconName; panelContent: ReactNode; @@ -148,7 +149,8 @@ export const Tabs: VoidFunctionComponent = ({ }), ), [tabs]); - const [selectedTab, setSelectedTab] = useState(tabItems[0]); + const defaultSelectedTab = tabItems.find((tab) => tab.defaultSelected === true); + const [selectedTab, setSelectedTab] = useState(defaultSelectedTab ?? tabItems[0]); function isTabSelected(tabId: string): boolean { return selectedTab.id === tabId; diff --git a/packages/storybook/stories/tabs.stories.tsx b/packages/storybook/stories/tabs.stories.tsx index e565731fd1..2155155063 100644 --- a/packages/storybook/stories/tabs.stories.tsx +++ b/packages/storybook/stories/tabs.stories.tsx @@ -48,6 +48,7 @@ const tabs: Tab[] = [ { id: 'tab2', title: 'Calendar', + defaultSelected: true, panelContent: ( Monday : Doing something meaningful @@ -86,7 +87,11 @@ export default TabsMeta; type Story = StoryObj; export const Default: Story = { - ...TabsMeta, + args: { + global: false + }, + + ...TabsMeta }; export const Global: Story = { From 4de4240111fbb09fdebab2854ebb3e5477835aae Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Mon, 27 May 2024 14:56:37 -0400 Subject: [PATCH 2/5] chore(tabs): fix eslint --- packages/storybook/stories/tabs.stories.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/storybook/stories/tabs.stories.tsx b/packages/storybook/stories/tabs.stories.tsx index 2155155063..98e76cbcdb 100644 --- a/packages/storybook/stories/tabs.stories.tsx +++ b/packages/storybook/stories/tabs.stories.tsx @@ -88,10 +88,9 @@ type Story = StoryObj; export const Default: Story = { args: { - global: false + global: false, }, - - ...TabsMeta + ...TabsMeta, }; export const Global: Story = { From b0df6e58ec265e038b202624b5a357646390366b Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Thu, 30 May 2024 09:05:08 -0400 Subject: [PATCH 3/5] chore(tabs): post review changes --- packages/react/src/components/tabs/tabs.tsx | 18 ++++++++---- packages/storybook/stories/tabs.stories.tsx | 32 ++++++++++++++++++++- 2 files changed, 43 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx index eacd69bc6f..98e7a00ade 100644 --- a/packages/react/src/components/tabs/tabs.tsx +++ b/packages/react/src/components/tabs/tabs.tsx @@ -98,9 +98,8 @@ const AddIcon = styled(Icon)` `; export interface Tab { - id?: string; + id: string; title: string; - defaultSelected?: boolean; leftIcon?: IconName; rightIcon?: IconName; panelContent: ReactNode; @@ -119,12 +118,19 @@ interface Props { forceRenderTabPanels?: boolean; global?: boolean; tabs: Tab[]; + defaultSelectedId?: string; onAddTab?(): void; onRemove?(tabId: string): void; } export const Tabs: VoidFunctionComponent = ({ - className, global, forceRenderTabPanels, tabs, onAddTab, onRemove, + className, + global, + forceRenderTabPanels, + tabs, + defaultSelectedId, + onAddTab, + onRemove, }) => { const { t } = useTranslation('tabs'); const tabsListRef = createRef(); @@ -141,15 +147,15 @@ export const Tabs: VoidFunctionComponent = ({ }); const tabItems: TabItem[] = useMemo((): TabItem[] => tabs.map( - (tab, i) => ({ + (tab) => ({ ...tab, - id: tab.id ?? `${i}`, + id: tab.id, panelId: uuid(), buttonRef: createRef(), }), ), [tabs]); - const defaultSelectedTab = tabItems.find((tab) => tab.defaultSelected === true); + const defaultSelectedTab = tabItems.find((tab) => tab.id === defaultSelectedId); const [selectedTab, setSelectedTab] = useState(defaultSelectedTab ?? tabItems[0]); function isTabSelected(tabId: string): boolean { diff --git a/packages/storybook/stories/tabs.stories.tsx b/packages/storybook/stories/tabs.stories.tsx index 98e76cbcdb..acd83fae8e 100644 --- a/packages/storybook/stories/tabs.stories.tsx +++ b/packages/storybook/stories/tabs.stories.tsx @@ -48,7 +48,6 @@ const tabs: Tab[] = [ { id: 'tab2', title: 'Calendar', - defaultSelected: true, panelContent: ( Monday : Doing something meaningful @@ -132,6 +131,7 @@ export const Scrollable: Story = { ...TabsMeta, render: () => { const customTabs: Tab[] = [...Array(15).keys()].map((i) => ({ + id: `tab${i + 1}`, title: `Tab ${i + 1}`, panelContent: ( @@ -163,6 +163,7 @@ export const UnloadTabCallback: Story = { render: () => { const customTabs: Tab[] = [ { + id: 'tab1', title: 'Tab that cannot change because onBeforeUnload resolves to false', panelContent: First tab content, onBeforeUnload: () => { @@ -171,11 +172,13 @@ export const UnloadTabCallback: Story = { }, }, { + id: 'tab2', title: 'Second Button', panelContent: Second tab content, onBeforeUnload: () => Promise.resolve(true), }, { + id: 'tab2', title: 'Third Button', panelContent: Third tab content, onBeforeUnload: () => Promise.resolve(true), @@ -187,3 +190,30 @@ export const UnloadTabCallback: Story = { ); }, }; + +export const DefaultSelectedTab: Story = { + ...TabsMeta, + render: () => { + const customTabs: Tab[] = [ + { + id: 'tab1', + title: 'First Button', + panelContent: First tab content, + }, + { + id: 'tab2', + title: 'Second Button', + panelContent: Second tab content, + }, + { + id: 'tab3', + title: 'Third Button', + panelContent: Third tab content, + }, + ]; + + return ( + + ); + }, +}; From 36c5ab05dac3f72d4e9a6a644b5eb88a44770b47 Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Thu, 6 Jun 2024 18:32:59 -0400 Subject: [PATCH 4/5] feat(Tabs): post review change --- packages/react/src/components/tabs/tabs.tsx | 2 +- packages/storybook/stories/tabs.stories.tsx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx index 98e7a00ade..12a948faf4 100644 --- a/packages/react/src/components/tabs/tabs.tsx +++ b/packages/react/src/components/tabs/tabs.tsx @@ -125,7 +125,7 @@ interface Props { export const Tabs: VoidFunctionComponent = ({ className, - global, + global = false, forceRenderTabPanels, tabs, defaultSelectedId, diff --git a/packages/storybook/stories/tabs.stories.tsx b/packages/storybook/stories/tabs.stories.tsx index acd83fae8e..74ccb2d0ef 100644 --- a/packages/storybook/stories/tabs.stories.tsx +++ b/packages/storybook/stories/tabs.stories.tsx @@ -86,9 +86,6 @@ export default TabsMeta; type Story = StoryObj; export const Default: Story = { - args: { - global: false, - }, ...TabsMeta, }; From b917340cf270fa770aa605b4368faa407a35cfae Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Thu, 6 Jun 2024 18:42:17 -0400 Subject: [PATCH 5/5] feat(Tabs): revert default value --- packages/react/src/components/tabs/tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx index 12a948faf4..98e7a00ade 100644 --- a/packages/react/src/components/tabs/tabs.tsx +++ b/packages/react/src/components/tabs/tabs.tsx @@ -125,7 +125,7 @@ interface Props { export const Tabs: VoidFunctionComponent = ({ className, - global = false, + global, forceRenderTabPanels, tabs, defaultSelectedId,