add subtitle in form editor (#1662)

microsoft · Nov 26, 2019 · ff5e1af · ff5e1af
1 parent 19c9bc3
commit ff5e1af
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
@@ -52,6 +52,10 @@ export const RootField: React.FC<RootFieldProps> = props => {
     return designerName || dialogName || sdkOverrides.title || title || schema.title || startCase(name);
   };
 
+  const getSubTitle = (): string => {
+    return sdkOverrides.title;
+  };
+
   const getDescription = (): string => {
     return sdkOverrides.description || description || schema.description || '';
   };
@@ -65,6 +69,7 @@ export const RootField: React.FC<RootFieldProps> = props => {
           styleOverrides={{ field: { fontWeight: FontWeights.semibold } }}
           fontSize={FontSizes.size20}
         />
+        {sdkOverrides.title && <p className="RootFieldSubtitle">{getSubTitle()}</p>}
         {sdkOverrides.description !== false && (description || schema.description) && (
           <p className={classnames('RootFieldDescription', FontClassNames.smallPlus)}>
             {getDescription()}

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css
@@ -13,7 +13,14 @@
 .RootFieldTitle {
   border-bottom: 1px solid #c8c6c4;
   padding: 0 18px;
-  margin-bottom: 16px;
+  margin-bottom: 0px;
+}
+.RootFieldSubtitle {
+  height: 15px;
+  line-height: 15px;
+  font-size: 10px;
+  color: #bdbdbd;
+  margin: -7px 0 7px;
 }
 .RootFieldDescription {
   margin-top: 0;