#325 - Including wrapper class name for the SecurityTrimmedControl

Author: estruyf

docs/documentation/docs/controls/SecurityTrimmedControl.md

@@ -67,6 +67,9 @@ The `SecurityTrimmedControl` can be configured with the following properties:
 | level | PermissionLevel | yes | Specify where to check the user permissions: current site or list / remote site or list. |
 | remoteSiteUrl | string | no | The URL of the remote site. Required when you want to check permissions on remote site or list. |
 | relativeLibOrListUrl | string | no | The relative URL of the list or library. Required when you want to check permissions on remote list. |
+| folderPath | string | no | Specify the name of a folder to check the user permissions against. Will be overridden if itemId is present. |
+| itemId | number | no | Specify the ID of the item to check the user permissions against. Takes precedence over folder. |
+| className | string | no | Specify the className to be used on the parent element. |
 
 The `PermissionLevel` enum has the following values:
 

src/controls/securityTrimmedControl/ISecurityTrimmedControlProps.ts

@@ -33,4 +33,8 @@ export interface ISecurityTrimmedControlProps {
    * Optional. Specify the ID of the item to check the user permissions against. Takes precedence over folder.
    */
   itemId?: number;
+  /**
+   * Optional. Specify the className to be used on the parent element.
+   */
+  className?: string;
 }

src/controls/securityTrimmedControl/SecurityTrimmedControl.tsx

@@ -193,9 +193,10 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
    * Default React render method
    */
   public render(): React.ReactElement<ISecurityTrimmedControlProps> {
+    const { className } = this.props;
     return (
       this.state.allowRender ? (
-        <div>{this.props.children}</div>
+        <div className={className ? className : ""}>{this.props.children}</div>
       ) : null
     );
   }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -510,7 +510,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
               <span className="ms-font-xl">Controls testing</span>
 
-              <SecurityTrimmedControl context={this.props.context} level={PermissionLevel.currentWeb} permissions={[SPPermission.viewListItems]}>
+              <SecurityTrimmedControl context={this.props.context} level={PermissionLevel.currentWeb} permissions={[SPPermission.viewListItems]} className={"TestingClass"}>
                 <p>You have permissions to view list items.</p>
               </SecurityTrimmedControl>