(core) Forms improvements

Summary:
Forms improvements and following new design
- New headers
- New UI
- New right panel options

Test Plan: Tests updated

Reviewers: georgegevoian, dsagal

Reviewed By: georgegevoian

Subscribers: dsagal, paulfitz

Differential Revision: https://phab.getgrist.com/D4158

app/client/widgets/ChoiceTextBox.ts

@@ -9,7 +9,8 @@ import {icon} from 'app/client/ui2018/icons';
 import {ChoiceListEntry} from 'app/client/widgets/ChoiceListEntry';
 import {choiceToken, DEFAULT_BACKGROUND_COLOR, DEFAULT_COLOR} from 'app/client/widgets/ChoiceToken';
 import {NTextBox} from 'app/client/widgets/NTextBox';
-import {Computed, dom, styled} from 'grainjs';
+import {WidgetType} from 'app/common/widgetTypes';
+import {Computed, dom, styled, UseCB} from 'grainjs';
 
 export type IChoiceOptions = Style
 export type ChoiceOptions = Record<string, IChoiceOptions | undefined>;
@@ -84,8 +85,14 @@ export class ChoiceTextBox extends NTextBox {
       use => !use(disabled)
         && (use(this.field.config.options.mixed('choices')) || use(this.field.config.options.mixed('choiceOptions')))
       );
+
+    // If we are on forms, we don't want to show alignment options.
+    const notForm = (use: UseCB) => {
+      return use(use(this.field.viewSection).parentKey) !== WidgetType.Form;
+    };
+
     return [
-      super.buildConfigDom(),
+      dom.maybe(notForm, () => super.buildConfigDom()),
       cssLabel(t('CHOICES')),
       cssRow(
         dom.autoDispose(disabled),

app/client/widgets/DiscussionEditor.ts

@@ -35,6 +35,7 @@ import moment from 'moment';
 import maxSize from 'popper-max-size-modifier';
 import flatMap = require('lodash/flatMap');
 import {autoGrow} from 'app/client/ui/forms';
+import {autoFocus} from 'app/client/lib/domUtils';
 
 const testId = makeTestId('test-discussion-');
 const t = makeT('DiscussionEditor');
@@ -919,9 +920,6 @@ function bindProp(text: Observable<string>) {
   ];
 }
 
-function autoFocus() {
-  return (el: HTMLElement) => void setTimeout(() => el.focus(), 10);
-}
 
 function buildPopup(
   owner: Disposable,

app/client/widgets/FieldBuilder.ts

@@ -22,7 +22,6 @@ import { FieldSettingsMenu } from 'app/client/ui/FieldMenus';
 import { cssBlockedCursor, cssLabel, cssRow } from 'app/client/ui/RightPanelStyles';
 import { textButton } from 'app/client/ui2018/buttons';
 import { buttonSelect, cssButtonSelect } from 'app/client/ui2018/buttonSelect';
-import { theme } from 'app/client/ui2018/cssVars';
 import { IOptionFull, menu, select } from 'app/client/ui2018/menus';
 import { DiffBox } from 'app/client/widgets/DiffBox';
 import { buildErrorDom } from 'app/client/widgets/ErrorDom';
@@ -473,7 +472,7 @@ export class FieldBuilder extends Disposable {
     // the dom created by the widgetImpl to get out of sync.
     return dom('div',
       kd.maybe(() => !this._isTransformingType() && this.widgetImpl(), (widget: NewAbstractWidget) =>
-        dom('div', widget.buildConfigDom(), cssSeparator())
+        dom('div', widget.buildConfigDom())
       )
     );
   }
@@ -904,10 +903,6 @@ const cssTypeSelectMenu = styled('div', `
   max-height: 500px;
 `);
 
-const cssSeparator = styled('div', `
-  border-bottom: 1px solid ${theme.pagePanelsBorder};
-  margin-top: 16px;
-`);
 
 // Simple helper that removes transparency from a HEX or rgba color.
 // User can set a transparent fill color using doc actions, but we don't want to show it well

app/client/widgets/Reference.ts

@@ -9,8 +9,9 @@ import {icon} from 'app/client/ui2018/icons';
 import {IOptionFull, select} from 'app/client/ui2018/menus';
 import {NTextBox} from 'app/client/widgets/NTextBox';
 import {isFullReferencingType, isVersions} from 'app/common/gristTypes';
+import {WidgetType} from 'app/common/widgetTypes';
 import {UIRowId} from 'app/plugin/GristAPI';
-import {Computed, dom, styled} from 'grainjs';
+import {Computed, dom, styled, UseCB} from 'grainjs';
 
 
 const t = makeT('Reference');
@@ -48,10 +49,16 @@ export class Reference extends NTextBox {
   }
 
   public buildConfigDom() {
+    // If we are on forms, we don't want to show alignment options.
+    const notForm = (use: UseCB) => {
+      return use(use(this.field.viewSection).parentKey) !== WidgetType.Form;
+    };
     return [
       this.buildTransformConfigDom(),
-      cssLabel(t('CELL FORMAT')),
-      super.buildConfigDom()
+      dom.maybe(notForm, () => [
+        cssLabel(t('CELL FORMAT')),
+        super.buildConfigDom()
+      ])
     ];
   }
 

app/client/widgets/Switch.css

@@ -3,6 +3,7 @@
   margin: -1px auto;
   width: 30px;
   height: 17px;
+  flex: none;
 }
 
 .switch_slider {