Updated webpart to spfx 1.11 and added font-size option in the property pane

samples/react-personal-greeting/.yo-rc.json

@@ -16,7 +16,7 @@
     "environment": "spo",
     "framework": "react",
     "isCreatingSolution": true,
-    "version": "1.10.0",
+    "version": "1.11.0",
     "libraryName": "react-personal-greeting",
     "libraryId": "5e7ea24d-fccc-4d96-a56c-488564d9c61c",
     "packageManager": "npm",

samples/react-personal-greeting/config/package-solution.json

@@ -5,7 +5,14 @@
     "id": "5e7ea24d-fccc-4d96-a56c-488564d9c61c",
     "version": "1.0.0.0",
     "includeClientSideAssets": true,
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "mpnId": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": ""
+    }
   },
   "paths": {
     "zippedPackage": "solution/react-personal-greeting.sppkg"

samples/react-personal-greeting/package.json

@@ -14,19 +14,15 @@
     "postversion": "gulp dist"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/sp-core-library": "1.11.0",
-    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.11.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
-    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-property-pane": "1.11.0",
-    "@microsoft/sp-webpart-base": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.11.0",
     "@pnp/pnpjs": "^2.0.3",
     "@pnp/spfx-controls-react": "1.17.0",
     "@pnp/spfx-property-controls": "1.17.0",
-    "@types/es6-promise": "0.0.33",
+    "office-ui-fabric-react": "6.214.0",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "@types/webpack-env": "1.13.1",
-    "office-ui-fabric-react": "6.189.2",
     "react": "16.8.5",
     "react-dom": "16.8.5"
   },
@@ -36,10 +32,10 @@
   "devDependencies": {
     "@microsoft/microsoft-graph-types": "^1.12.0",
     "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-build-web": "1.11.0",
-    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.11.0",
-    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.11.0",
-    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",

samples/react-personal-greeting/src/webparts/personalGreeting/PersonalGreetingWebPart.manifest.json

@@ -19,7 +19,7 @@
     "group": { "default": "Other" },
     "title": { "default": "Personal Greeting" },
     "description": { "default": "Personal Greeting description" },
-    "officeFabricIconFontName": "Page",
+    "officeFabricIconFontName": "TextDocumentShared",
     "properties": {
       "description": "Personal Greeting"
     }

samples/react-personal-greeting/src/webparts/personalGreeting/PersonalGreetingWebPart.ts

@@ -4,7 +4,8 @@ import { Version } from '@microsoft/sp-core-library';
 import {
   IPropertyPaneConfiguration,
   PropertyPaneTextField,
-  PropertyPaneDropdown
+  PropertyPaneDropdown,
+  IPropertyPaneDropdownOption
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
 
@@ -18,8 +19,56 @@ export interface IPersonalGreetingWebPartProps {
   context: WebPartContext;
   position: string;
   textColor: string;
+  fontSize: number;
 }
 
+const fontSizeOptions: IPropertyPaneDropdownOption[] = [
+  {
+    key: 12,
+    text: '12'
+  },
+  {
+    key: 14,
+    text: '16'
+  },
+  {
+    key: 18,
+    text: '18'
+  },
+  {
+    key: 20,
+    text: '20'
+  },
+  {
+    key: 24,
+    text: '24'
+  },
+  {
+    key: 28,
+    text: '28'
+  },
+  {
+    key: 32,
+    text: '32'
+  },
+  {
+    key: 36,
+    text: '36'
+  },
+  {
+    key: 42,
+    text: '42'
+  },
+  {
+    key: 46,
+    text: '46'
+  },
+  {
+    key: 68,
+    text: '68'
+  },
+];
+
 export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPersonalGreetingWebPartProps> {
 
   public render(): void {
@@ -29,7 +78,8 @@ export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPer
         greetingText: this.properties.greetingText,
         context: this.context,
         position: this.properties.position,
-        textColor: this.properties.textColor
+        textColor: this.properties.textColor,
+        fontSize: this.properties.fontSize
       }
     );
 
@@ -76,6 +126,11 @@ export default class PersonalGreetingWebPart extends BaseClientSideWebPart <IPer
                   }
                   ]
                 }),
+                PropertyPaneDropdown('fontSize', {
+                  label: 'Font Size',
+                  options: fontSizeOptions,
+                  selectedKey: 20
+                }),
                 PropertyFieldColorPicker('textColor', {
                   label: 'Text Color',
                   properties: this.properties,

samples/react-personal-greeting/src/webparts/personalGreeting/components/IPersonalGreetingProps.ts

@@ -6,4 +6,5 @@ export interface IPersonalGreetingProps {
   context: WebPartContext;
   position: string;
   textColor: string;
+  fontSize: number;
 }

samples/react-personal-greeting/src/webparts/personalGreeting/components/PersonalGreeting.module.scss

@@ -7,7 +7,6 @@
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
   }
   .title {
-    font-size: x-large;
     font-weight: 375;
   }
 }

samples/react-personal-greeting/src/webparts/personalGreeting/components/PersonalGreeting.tsx

@@ -9,17 +9,17 @@ import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
 export default class PersonalGreeting extends React.Component<IPersonalGreetingProps, {}> {
   public render(): React.ReactElement<IPersonalGreetingProps> {
 
-    const custstyles = {
+    const custStyles = {
       'text-align': this.props.position,
-      'color': this.props.textColor
+      'color': this.props.textColor,
+      'fontSize': this.props.fontSize
     } as React.CSSProperties;
 
     return (
       <div className={ styles.personalGreeting }>
         {this.props.greetingText == null ? 
         <Placeholder iconName='Edit' iconText='Configure the web part' description='Please configure the web part' buttonLabel='Configure' onConfigure={this._onConfigure}  />  
-        : <div className={ styles.title } style={custstyles}>{this.props.greetingText} {this.props.context.pageContext.user.displayName}</div>
+        : <div className={ styles.title } style={custStyles}>{this.props.greetingText} {this.props.context.pageContext.user.displayName}</div>
-        // : <h2>{this.props.greetingText} {this.props.context.pageContext.user.displayName} </h2>
         }
       </div>
     );

samples/react-personal-greeting/tsconfig.json

@@ -30,7 +30,7 @@
     "esModuleInterop": true
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.tsx"
   ],
   "exclude": [
     "node_modules",