From 366168e45a386cc1c8fc14271ceca95a94ffb661 Mon Sep 17 00:00:00 2001
From: Yousif Al-Raheem <yousifalraheem@gmail.com>
Date: Wed, 23 Mar 2022 14:29:19 +0100
Subject: [PATCH] update README in user settings plugin to introduce
 UserSettingsTab

Signed-off-by: Yousif Al-Raheem <yousifalraheem@gmail.com>
---
 plugins/user-settings/README.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/plugins/user-settings/README.md b/plugins/user-settings/README.md
index 689b11880d..13cfe720c8 100644
--- a/plugins/user-settings/README.md
+++ b/plugins/user-settings/README.md
@@ -69,17 +69,21 @@ const AppRoutes = () => (
 By default, the plugin renders 3 tabs of settings; GENERAL, AUTHENTICATION PROVIDERS, and FEATURE FLAGS.
 
 If you want to add more options for your users,
-just pass the extra tabs as children of the `UserSettingsPage` route
-where the children of that route represents the title of the tab.
+just pass the extra tabs using `UserSettingsTab` components as children of the `UserSettingsPage` route.
 The path is in this case a child of the settings path,
 in the example below it would be `/settings/advanced` so that you can easily link to it.
 
 ```tsx
+import {
+  UserSettingsPage,
+  UserSettingsTab,
+} from '@backstage/plugin-user-settings';
+
 <Route path="/settings" element={<UserSettingsPage />}>
-  <Route path="/advanced" element={<AdvancedSettings />}>
-    Advanced
-  </Route>
-</Route>
+  <UserSettingsTab path="/advanced" title="Advanced">
+    <AdvancedSettings />
+  </UserSettingsTab>
+</Route>;
 ```
 
 To standardize the UI of all setting tabs,