Updated comments

packages/grafana-ui/src/components/FormField/FormField.tsx

@@ -17,12 +17,6 @@ const defaultProps = {
 /**
  * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
  * custom inputEl if required in which case inputWidth and inputProps are ignored.
- * @param label
- * @param labelWidth
- * @param inputWidth
- * @param inputEl
- * @param inputProps
- * @constructor
  */
 export const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, inputEl, ...inputProps }) => {
   return (

packages/grafana-ui/src/components/SecretFormFied/SecretFormField.tsx

@@ -3,25 +3,42 @@ import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormField } from '..';
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  // Function to use when reset is clicked. Means you have to reset the input value yourself as this is  uncontrolled
+  // component (or do something else if required).
   onReset: () => void;
   isConfigured: boolean;
 
   label?: string;
   labelWidth?: number;
   inputWidth?: number;
+  // Placeholder of the input field when in non configured state.
+  placeholder?: string;
 }
 
+const defaultProps = {
+  inputWidth: 12,
+  placeholder: 'Password',
+  label: 'Password',
+};
+
+/**
+ * Form field that has 2 states configured and not configured. If configured it will not show its contents and adds
+ * a reset button that will clear the input and makes it accessible. In non configured state it behaves like normal
+ * form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted
+ * to the user (like datasource passwords).
+ */
 export const SecretFormField: FunctionComponent<Props> = ({
   label,
   labelWidth,
   inputWidth,
   onReset,
   isConfigured,
+  placeholder,
   ...inputProps
 }: Props) => {
   return (
     <FormField
-      label={label || 'Password'}
+      label={label!}
       labelWidth={labelWidth}
       inputEl={
         isConfigured ? (
@@ -41,7 +58,7 @@ export const SecretFormField: FunctionComponent<Props> = ({
           <input
             type="password"
             className={`gf-form-input width-${inputWidth}`}
-            placeholder={'password'}
+            placeholder={placeholder}
             {...inputProps}
           />
         )
@@ -50,7 +67,5 @@ export const SecretFormField: FunctionComponent<Props> = ({
   );
 };
 
-SecretFormField.defaultProps = {
+SecretFormField.defaultProps = defaultProps;
-  inputWidth: 12,
-};
 SecretFormField.displayName = 'SecretFormField';