feat: upgrade SPFx to 1.21.1 version & implement dynamic UI elements site theme colors

- Bump version from 1.2.0 to 1.2.1 in package.json
- Update Node.js engine requirement to >=22.14.0
- Migrate to Fluent UI v9 theming in FeedbackApplicationCustomizer and FeedbackCustomizer components
- Implement theme change handling in FeedbackApplicationCustomizer
- Adjust styles in FeedbackCustomizer to utilize theme properties

Author: Sandeep-FED

samples/react-application-customizer-feedback-widget/.nvmrc

@@ -1 +1 @@
-v18.18.2
+v22.18.0

samples/react-application-customizer-feedback-widget/.yo-rc.json

@@ -2,12 +2,12 @@
   "@microsoft/generator-sharepoint": {
     "plusBeta": false,
     "isCreatingSolution": true,
-    "nodeVersion": "18.18.2",
+    "nodeVersion": "22.18.0",
     "sdksVersions": {
       "@microsoft/microsoft-graph-client": "3.0.2",
       "@microsoft/teams-js": "2.24.0"
     },
-    "version": "1.20.0",
+    "version": "1.21.1",
     "libraryName": "feedback-customizer",
     "libraryId": "c66c6f38-3920-41b8-849d-3383aa467780",
     "environment": "spo",

samples/react-application-customizer-feedback-widget/README.md

@@ -2,8 +2,9 @@
 
 ## Summary
 
-An SPFx Application Customizer Extension placed in the bottom placeholder which allows users to input their feedbacks without scrolling down to the end of the page.
+An SPFx Application Customizer Extension added to the bottom placeholder that lets users submit comments and ratings, which are then stored in a SharePoint list. Additionally, it gives admins the flexibility to position the widget on either the bottom-left or bottom-right corner of the screen.
 
+![Screenshot 1](assets/Feedback_WidgetMain.png)
 ![Screenshot 1](assets/Feedback_Widget1.png)
 ![Screenshot 2](assets/Feedback_Widget2.png)
 ![Screenshot 3](assets/Feedback_Widget3.png)
@@ -19,16 +20,16 @@ An SPFx Application Customizer Extension placed in the bottom placeholder which
 
 This sample is optimally compatible with the following environment configuration:
 
-![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
-![Node.js v18 | v16](https://img.shields.io/badge/Node.js-v18%20%7C%20v16-green.svg)
+![SPFx 1.21.1](https://img.shields.io/badge/SPFx-1.21.1-green.svg)
+![Node.js v22](https://img.shields.io/badge/Node.js-v22-green.svg)
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
 ![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-red.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-red.svg)
 
-Tested using Node.js v18.18.2
+Tested using Node.js v22.18.0
 
 ## Applies to
 
@@ -62,6 +63,7 @@ Create a SharePoint custom list Feedbacks in the SPO site where this application
 | 1.0     | July 02, 2023   | Initial release  |
 | 1.1     | April 10, 2025   | Version upgrade to SPFx 1.20.0 & other improvements  |
 | 1.2     | May 23, 2025   | Implement Ratings & change position of widget based on property configuration |
+| 1.3     | Oct 17, 2025   | Version upgrade to SPFx 1.21.1 & widget UI elements dynamically adapts to site theme colors |
 
 ## Minimal Path to Awesome⚡
 
@@ -77,7 +79,7 @@ Create a SharePoint custom list Feedbacks in the SPO site where this application
 ?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B"33ce42af-1748-4989-ab97-a8d9f782b886"%3A%7B"location"%3A"ClientSideExtension.ApplicationCustomizer"%2C"properties"%3A%7B"title"%3A"Submit+your+feedbacks+%26+ideas"%2C"position"%3A"rightBottom"%7D%7D%7D
 ```
 
-## Deploy Package Solution 
+## Deploy Package Solution
 - Ensure that you are at the solution folder
 - in the command-line run:
   - `gulp build --ship`

samples/react-application-customizer-feedback-widget/assets/Feedback_WidgetMain.png

@@ -3,7 +3,7 @@
   "solution": {
     "name": "feedback-customizer-client-side-solution",
     "id": "c66c6f38-3920-41b8-849d-3383aa467780",
-    "version": "1.2.0.0",
+    "version": "1.2.0.1",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
@@ -30,7 +30,7 @@
         "title": "Application Extension - Deployment of custom action",
         "description": "Deploys a custom action with ClientSideComponentId association",
         "id": "062f8d82-ce8f-4035-b0ce-6cba7de74232",
-        "version": "1.2.0.0",
+        "version": "1.2.0.1",
         "assets": {
           "elementManifests": ["elements.xml", "ClientSideInstance.xml"]
         }