From 831b942bea1e6fb2ccfc675b2663c1e6a324c7f7 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Wed, 24 Feb 2021 13:43:31 +0300
Subject: [PATCH 1/4] feat(core-theming): CB-724 add new styles for metadata
 editor

---
 .../src/Containers/BASE_CONTAINERS_STYLES.ts  |  77 ++++++++++++
 .../src/Containers/ColoredContainer.tsx       |  23 ++++
 .../core-blocks/src/Containers/Container.tsx  |  23 ++++
 .../core-blocks/src/Containers/Group.tsx      |  22 ++++
 .../src/Containers/GroupContainer.tsx         |  21 ++++
 .../core-blocks/src/Containers/GroupTitle.tsx |  19 +++
 .../Checkboxes/FieldCheckboxNew.tsx           |  52 ++++++++
 .../src/FormControls/InputFieldNew.tsx        | 112 ++++++++++++++++++
 .../FormControls/baseFormControlStylesNew.ts  |  42 +++++++
 webapp/packages/core-blocks/src/index.ts      |   8 ++
 .../src/styles/_form-controls.scss            |  39 +++++-
 .../core-theming/src/styles/_theme-dark.scss  |  18 ++-
 .../core-theming/src/styles/_theme-light.scss |  12 +-
 .../core-theming/src/styles/_variables.scss   |   7 +-
 .../ObjectInfoTab/ObjectProperties.tsx        |  38 +++---
 .../ObjectInfoTab/ObjectProperty.tsx          |  52 ++++----
 16 files changed, 502 insertions(+), 63 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
 create mode 100644 webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
 create mode 100644 webapp/packages/core-blocks/src/Containers/Container.tsx
 create mode 100644 webapp/packages/core-blocks/src/Containers/Group.tsx
 create mode 100644 webapp/packages/core-blocks/src/Containers/GroupContainer.tsx
 create mode 100644 webapp/packages/core-blocks/src/Containers/GroupTitle.tsx
 create mode 100644 webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx
 create mode 100644 webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx
 create mode 100644 webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts

diff --git a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
new file mode 100644
index 0000000000..ffbdf12dbd
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
@@ -0,0 +1,77 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { css } from 'reshadow';
+
+import { composes } from '@cloudbeaver/core-theming';
+
+export interface ISize {
+  small?: boolean;
+  medium?: boolean;
+  large?: boolean;
+}
+
+export const BASE_CONTAINERS_STYLES = composes(
+  css`
+    GroupContainer {
+      composes: theme-background-surface from global;
+    }
+    ColoredContainer {
+      composes: theme-background-secondary from global;
+    }
+  `,
+  css`
+    Container, ColoredContainer {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      &[horizontal] {
+        flex-direction: row;
+      }
+      &[wrap] {
+        flex-wrap: wrap;
+      }
+    }
+
+    GroupContainer {
+      box-sizing: border-box;
+      margin: 10px;
+      padding: 10px;
+      border-radius: 4px;
+    }
+
+    Group {
+      display: grid;
+      grid-template-columns: minmax(min-content, 1fr);
+      grid-auto-rows: max-content; 
+      &[horizontal] {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      }
+    }
+
+    GroupTitle {
+      composes: theme-typography--body1 from global;
+      font-weight: 400;
+      padding-left: 12px;
+      text-transform: uppercase;
+      opacity: 0.9;
+    }
+
+    Container, ColoredContainer, GroupContainer, Group {
+      flex-grow: 1;
+      &[small] {
+        max-width: 250px;
+      }
+      &[medium] {
+        max-width: 450px;
+      }
+      &[large] {
+        max-width: 650px;
+      }
+    }      
+  `);
diff --git a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
new file mode 100644
index 0000000000..d57b285d8c
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
@@ -0,0 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { ISize } from './BASE_CONTAINERS_STYLES';
+
+interface Props extends ISize {
+  className?: string;
+  horizontal?: boolean;
+  wrap?: boolean;
+}
+
+export const ColoredContainer: React.FC<Props> = function ColoredContainer({ children, className }) {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
diff --git a/webapp/packages/core-blocks/src/Containers/Container.tsx b/webapp/packages/core-blocks/src/Containers/Container.tsx
new file mode 100644
index 0000000000..ce58ffd2cb
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/Container.tsx
@@ -0,0 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { ISize } from './BASE_CONTAINERS_STYLES';
+
+interface Props extends ISize {
+  className?: string;
+  horizontal?: boolean;
+  wrap?: boolean;
+}
+
+export const Container: React.FC<Props> = function Container({ children, className }) {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
diff --git a/webapp/packages/core-blocks/src/Containers/Group.tsx b/webapp/packages/core-blocks/src/Containers/Group.tsx
new file mode 100644
index 0000000000..4270ae9f62
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/Group.tsx
@@ -0,0 +1,22 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { ISize } from './BASE_CONTAINERS_STYLES';
+
+interface Props extends ISize {
+  className?: string;
+  horizontal?: boolean;
+}
+
+export const Group: React.FC<Props> = function Group({ children, className }) {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
diff --git a/webapp/packages/core-blocks/src/Containers/GroupContainer.tsx b/webapp/packages/core-blocks/src/Containers/GroupContainer.tsx
new file mode 100644
index 0000000000..91db06b3e2
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/GroupContainer.tsx
@@ -0,0 +1,21 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { ISize } from './BASE_CONTAINERS_STYLES';
+
+interface Props extends ISize {
+  className?: string;
+}
+
+export const GroupContainer: React.FC<Props> = function GroupContainer({ children, className }) {
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
diff --git a/webapp/packages/core-blocks/src/Containers/GroupTitle.tsx b/webapp/packages/core-blocks/src/Containers/GroupTitle.tsx
new file mode 100644
index 0000000000..ba105b14cf
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/GroupTitle.tsx
@@ -0,0 +1,19 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+interface Props {
+  className?: string;
+}
+
+export const GroupTitle: React.FC<Props> = function GroupTitle({ children, className }) {
+  return (
+    <h2 className={className}>
+      {children}
+    </h2>
+  );
+};
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx
new file mode 100644
index 0000000000..5a1a1f2781
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx
@@ -0,0 +1,52 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import styled, { css } from 'reshadow';
+
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import { baseFormControlStylesNew } from '../baseFormControlStylesNew';
+import { isControlPresented } from '../isControlPresented';
+import { Checkbox, CheckboxType, CheckboxControlledProps, CheckboxObjectProps } from './Checkbox';
+
+const fieldCheckboxStyles = css`
+  Checkbox {
+    margin: -10px;
+  }
+  field {
+    display: flex;
+    align-items: center;
+  }
+  field-label {
+    padding-left: 10px;
+  }
+`;
+
+export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({
+  checked: checkedControlled,
+  children,
+  className,
+  autoHide,
+  ...rest
+}: CheckboxControlledProps | CheckboxObjectProps<any, any>) {
+  const styles = useStyles(baseFormControlStylesNew, fieldCheckboxStyles);
+
+  if (autoHide && !isControlPresented(rest.name, rest.state)) {
+    return null;
+  }
+
+  return styled(styles)(
+    <field className={className} as="div">
+      <Checkbox
+        {...rest}
+        checked={checkedControlled}
+      />
+      <field-label as="div">{children}</field-label>
+    </field>
+  );
+};
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx
new file mode 100644
index 0000000000..f296dce1d4
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx
@@ -0,0 +1,112 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useCallback, useContext } from 'react';
+import styled, { use } from 'reshadow';
+import { css } from 'reshadow';
+
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import type { ISize } from '../Containers/BASE_CONTAINERS_STYLES';
+import { baseFormControlStylesNew } from './baseFormControlStylesNew';
+import { FormContext } from './FormContext';
+import { isControlPresented } from './isControlPresented';
+
+const INPUT_FIELD_STYLES = css`
+  field-label {
+    display: block;
+    padding-bottom: 5px;
+  }
+`;
+
+type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'> & ISize & {
+  description?: string;
+  mod?: 'surface';
+  full?: boolean;
+};
+
+type ControlledProps = BaseProps & {
+  name?: string;
+  value?: string;
+  onChange?: (value: string, name?: string) => any;
+  state?: never;
+  autoHide?: never;
+};
+
+type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
+  name: TKey;
+  state: TState;
+  onChange?: (value: string, name: TKey) => any;
+  autoHide?: boolean;
+  value?: never;
+};
+
+interface InputFieldType {
+  (props: ControlledProps): React.ReactElement<any, any> | null;
+  <TKey extends keyof TState, TState>(props: ObjectProps<TKey, TState>): React.ReactElement<any, any> | null;
+}
+
+export const InputFieldNew: InputFieldType = observer(function InputFieldNew({
+  name,
+  value: valueControlled,
+  required,
+  state,
+  children,
+  className,
+  description,
+  mod,
+  small,
+  medium,
+  large,
+  full,
+  autoHide,
+  onChange,
+  ...rest
+}: ControlledProps | ObjectProps<any, any>) {
+  const styles = useStyles(baseFormControlStylesNew, INPUT_FIELD_STYLES);
+  const context = useContext(FormContext);
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (state) {
+      state[name] = event.target.value;
+    }
+    if (onChange) {
+      onChange(event.target.value, name);
+    }
+    if (context) {
+      context.onChange(event.target.value, name);
+    }
+  }, [state, name, context, onChange]);
+
+  const value = state ? state[name] : valueControlled;
+
+  if (autoHide && !isControlPresented(name, state)) {
+    return null;
+  }
+
+  return styled(styles)(
+    <field as="div" className={className} {...use({ small, medium, large, full })}>
+      <field-label as='label'>{children} {required && '*'}</field-label>
+      <input
+        role='new'
+        {...rest}
+        name={name}
+        value={value ?? ''}
+        onChange={handleChange}
+        {...use({ mod })}
+        required={required}
+      />
+      {description && (
+        <field-description as='div'>
+          {description}
+        </field-description>
+      )}
+    </field>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
new file mode 100644
index 0000000000..982086cb9c
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
@@ -0,0 +1,42 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { css } from 'reshadow';
+
+export const baseFormControlStylesNew = css`
+  field {
+    box-sizing: border-box;
+    padding: 12px;
+    min-height: 54px;
+    max-width: 100%;
+    &[|small] {
+      max-width: 240px;
+    }
+    &[|medium] {
+      max-width: 440px;
+    }
+    &[|large] {
+      max-width: 640px;
+    }
+    &[|full] {
+      grid-column: 1/-1;
+    }
+  }
+
+  field-label {
+    composes: theme-typography--body1 from global;
+    box-sizing: border-box;
+    line-height: 16px;
+    font-weight: 500;
+  }
+
+  field-description {
+    composes: theme-typography--caption from global;
+    padding-top: 8px;
+  }
+`;
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index ba13371b5c..a0654482a4 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -24,14 +24,22 @@ export * from './Tree/TreeNode/TreeNodeStyles';
 export * from './Button';
 export * from './FormControls/Checkboxes/Checkbox';
 export * from './FormControls/Checkboxes/FieldCheckbox';
+export * from './FormControls/Checkboxes/FieldCheckboxNew';
 export * from './FormControls/Checkboxes/CheckboxMarkup';
 export * from './FormControls/FormBox';
+export * from './Containers/BASE_CONTAINERS_STYLES';
+export * from './Containers/Container';
+export * from './Containers/GroupContainer';
+export * from './Containers/Group';
+export * from './Containers/GroupTitle';
+export * from './Containers/ColoredContainer';
 export * from './FormControls/FormBoxElement';
 export * from './FormControls/Combobox';
 export * from './FormControls/FormContext';
 export * from './FormControls/FormFieldDescription';
 export * from './FormControls/FormGroup';
 export * from './FormControls/InputField';
+export * from './FormControls/InputFieldNew';
 export * from './FormControls/InputGroup';
 export * from './FormControls/Radio';
 export * from './FormControls/RadioGroup';
diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss
index bcdb2305f9..4cf5d711ab 100644
--- a/webapp/packages/core-theming/src/styles/_form-controls.scss
+++ b/webapp/packages/core-theming/src/styles/_form-controls.scss
@@ -7,7 +7,7 @@
  */
 
 @mixin form-controls() {
-  input {
+  input:not([role="new"]) {
     @include mdc-theme-prop(color, on-secondary, false);
     @include mdc-theme-prop(background-color, secondary, false);
     box-sizing: border-box;
@@ -28,12 +28,45 @@
       opacity: 0.8;
     }
 
-    &[use|mod=surface] {
+    &[use|mod="surface"] {
       @include mdc-theme-prop(color, on-surface, false);
       @include mdc-theme-prop(background-color, surface, false);
     }
   }
 
+  input[role="new"] {
+    @include mdc-theme-prop(color, on-secondary, false);
+    @include mdc-theme-prop(background-color, input-background, false);
+    box-sizing: border-box;
+    padding: 9px 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    border: 2px solid;
+    outline: none;
+    border-radius: 3px;
+    @include mdc-theme-prop(border-color, background, false);
+    &:focus {
+      @include mdc-theme-prop(border-color, primary, false);
+    }
+
+    &:global([type="checkbox"]) {
+      height: 16px;
+      width: 16px;
+    }
+
+    &:global([readonly]) {
+      @include mdc-theme-prop(border-color, input-border-readonly, false);
+      @include mdc-theme-prop(background-color, input-background-readonly, false);
+      opacity: 0.8;
+    }
+    &:global([disabled]) {
+      @include mdc-theme-prop(border-color, input-border-disabled, false);
+      @include mdc-theme-prop(background-color, input-background-disabled, false);
+      opacity: 0.7;
+    }
+  }
+
   label {
     display: block;
     line-height: 15px;
@@ -54,7 +87,7 @@
     font-size: 14px;
     padding: 4px;
     border-radius: 3px;
-    border: solid 1px $input-border-color;
+    border: solid 1px $input-border;
     @include mdc-theme-prop(color, on-surface, false);
     @include mdc-theme-prop(background-color, surface, false);
   }
diff --git a/webapp/packages/core-theming/src/styles/_theme-dark.scss b/webapp/packages/core-theming/src/styles/_theme-dark.scss
index 7ec22d79ed..78f4e50942 100644
--- a/webapp/packages/core-theming/src/styles/_theme-dark.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-dark.scss
@@ -18,7 +18,13 @@ $mdc-theme-error: #e94948;
 $color-positive: #01cca3;
 $color-on-positive: #fff;
 $color-negative: #fd1d48;
-$input-border-color: #585958;
+
+$input-border: #585958;
+$input-border-disabled: darken($input-border, 10%);
+$input-border-readonly: darken($input-border, 5%);
+$input-background: $mdc-theme-secondary;
+$input-background-disabled: $input-background;
+$input-background-readonly: $input-background;
 
 $mdc-theme-text-colors: (
   dark: (
@@ -26,17 +32,17 @@ $mdc-theme-text-colors: (
     secondary: rgba(white, 0.7),
     hint: rgba(white, 0.5),
     disabled: rgba(white, 0.5),
-    icon: rgba(white, 0.5)
+    icon: rgba(white, 0.5),
   ),
   light: (
     primary: rgba(black, 0.87),
     secondary: rgba(black, 0.54),
     hint: rgba(black, 0.38),
     disabled: rgba(black, 0.38),
-    icon: rgba(black, 0.38)
-  )
+    icon: rgba(black, 0.38),
+  ),
 );
 
-$theme-name: 'dark';
+$theme-name: "dark";
 
-@import 'mixins';
+@import "mixins";
diff --git a/webapp/packages/core-theming/src/styles/_theme-light.scss b/webapp/packages/core-theming/src/styles/_theme-light.scss
index cd6960972b..437917f4d8 100644
--- a/webapp/packages/core-theming/src/styles/_theme-light.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-light.scss
@@ -17,8 +17,14 @@ $mdc-theme-background: #dedede;
 $color-positive: #01cca3;
 $color-on-positive: #fff;
 $color-negative: #fd1d48;
-$input-border-color: #dedede;
 
-$theme-name: 'light';
+$input-border: #dedede;
+$input-border-disabled: transparent;
+$input-border-readonly: transparent;
+$input-background: transparent;
+$input-background-disabled: $mdc-theme-secondary;
+$input-background-readonly: $mdc-theme-secondary;
 
-@import 'mixins';
+$theme-name: "light";
+
+@import "mixins";
diff --git a/webapp/packages/core-theming/src/styles/_variables.scss b/webapp/packages/core-theming/src/styles/_variables.scss
index 7206f5fe06..2677b508f9 100644
--- a/webapp/packages/core-theming/src/styles/_variables.scss
+++ b/webapp/packages/core-theming/src/styles/_variables.scss
@@ -10,7 +10,12 @@ $mdc-theme-extra-property-values: (
   positive: $color-positive,
   on-positive: $color-on-positive,
   negative: $color-negative,
-  input-border-color: $input-border-color,
+  input-border: $input-border,
+  input-border-readonly: $input-border-readonly,
+  input-border-disabled: $input-border-disabled,
+  input-background: $input-background,
+  input-background-disabled: $input-background-disabled,
+  input-background-readonly: $input-background-readonly,
 );
 
 $mdc-theme-property-values: map-merge($mdc-theme-property-values, $mdc-theme-extra-property-values);
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
index 8c8b01734f..285e43303a 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
@@ -8,28 +8,16 @@
 
 import { observer } from 'mobx-react-lite';
 import type { PropsWithChildren } from 'react';
-import styled, { css } from 'reshadow';
+import styled from 'reshadow';
 
 import { useDatabaseObjectInfo } from '@cloudbeaver/core-app';
-import { Loader, TextPlaceholder } from '@cloudbeaver/core-blocks';
+import { ColoredContainer, Group, GroupContainer, Loader, TextPlaceholder } from '@cloudbeaver/core-blocks';
+import { BASE_CONTAINERS_STYLES } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
 
 import { ObjectProperty } from './ObjectProperty';
 
-const tabStyles = css`
-  properties {
-    display: flex;
-    flex: 1;
-  }
-  container {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding-top: 8px;
-  }
-`;
-
 type ObjectPropertiesProps = PropsWithChildren<{
   objectId: string;
 }>;
@@ -38,8 +26,8 @@ export const ObjectProperties = observer(function ObjectProperties({
   objectId,
 }: ObjectPropertiesProps) {
   const translate = useTranslate();
-  const style = useStyles(tabStyles);
   const { dbObject, isLoading } = useDatabaseObjectInfo(objectId);
+  const styles = useStyles(BASE_CONTAINERS_STYLES);
 
   if (!dbObject?.properties && isLoading) {
     return <Loader />;
@@ -49,13 +37,15 @@ export const ObjectProperties = observer(function ObjectProperties({
     return <TextPlaceholder>{translate('plugin_object_viewer_table_no_items')}</TextPlaceholder>;
   }
 
-  return styled(style)(
-    <properties as="div">
-      <container as="div">
-        {dbObject.properties.map(v => (
-          <ObjectProperty key={v.id} objectProperty={v} />
-        ))}
-      </container>
-    </properties>
+  return styled(styles)(
+    <ColoredContainer>
+      <GroupContainer>
+        <Group large>
+          {dbObject.properties.map(v => (
+            <ObjectProperty key={v.id} objectProperty={v} />
+          ))}
+        </Group>
+      </GroupContainer>
+    </ColoredContainer>
   );
 });
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
index 9034d8aeae..905398b18a 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
@@ -7,42 +7,42 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import styled, { css, use } from 'reshadow';
 
-import {
-  ObjectPropertyCheckbox,
-  ObjectPropertyInput,
-  ObjectPropertyProps
-} from '../formControls';
-import { filterProperty, matchType } from '../helpers';
+import { FieldCheckboxNew, InputFieldNew } from '@cloudbeaver/core-blocks';
 
-const propertyStyles = css`
-  property {
-    composes: theme-typography--body2 from global;
-    display: flex;
-    box-sizing: border-box;
-    padding: 8px 8px;
-    width: 600px;
-  }
-`;
+import type { ObjectPropertyProps } from '../formControls';
+import { additionalProps, filterProperty, getValue, matchType } from '../helpers';
 
 export const ObjectProperty = observer(function ObjectProperty({
   objectProperty,
-  className,
 }: ObjectPropertyProps) {
   if (!objectProperty || !filterProperty(objectProperty)) {
     return null;
   }
 
-  return styled(propertyStyles)(
-    <property
-      className={className}
-      as="div"
-      {...use({ checkbox: matchType(objectProperty.dataType) === 'checkbox' })}
-    >
+  return (
+    <>
       {matchType(objectProperty.dataType) === 'checkbox'
-        ? <ObjectPropertyCheckbox objectProperty={objectProperty} />
-        : <ObjectPropertyInput objectProperty={objectProperty} />}
-    </property>
+        ? (
+          <FieldCheckboxNew
+            name={objectProperty.id}
+            value={getValue(objectProperty.value)}
+            readOnly
+            {...additionalProps(objectProperty)}
+          >
+            {objectProperty.displayName}
+          </FieldCheckboxNew>
+        )
+        : (
+          <InputFieldNew
+            name={objectProperty.id}
+            value={getValue(objectProperty.value)}
+            mod='surface'
+            readOnly
+            {...additionalProps(objectProperty)}
+          >{objectProperty.displayName}
+          </InputFieldNew>
+        )}
+    </>
   );
 });

From 66cceac0b8eb3bcc5e561bd1a9807fc68036ef25 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Wed, 24 Feb 2021 15:45:14 +0300
Subject: [PATCH 2/4] feat(core-theming): CB-724 remove GroupContainer

---
 .../src/Containers/BASE_CONTAINERS_STYLES.ts           |  8 ++++----
 .../src/Containers/{GroupContainer.tsx => Grid.tsx}    |  3 ++-
 webapp/packages/core-blocks/src/Containers/Group.tsx   |  1 -
 webapp/packages/core-blocks/src/index.ts               |  2 +-
 .../ObjectInfoTab/ObjectProperties.tsx                 | 10 +++++-----
 .../ObjectInfoTab/ObjectProperty.tsx                   |  1 -
 6 files changed, 12 insertions(+), 13 deletions(-)
 rename webapp/packages/core-blocks/src/Containers/{GroupContainer.tsx => Grid.tsx} (80%)

diff --git a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
index ffbdf12dbd..71a410d90c 100644
--- a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
+++ b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
@@ -18,7 +18,7 @@ export interface ISize {
 
 export const BASE_CONTAINERS_STYLES = composes(
   css`
-    GroupContainer {
+    Group {
       composes: theme-background-surface from global;
     }
     ColoredContainer {
@@ -38,14 +38,14 @@ export const BASE_CONTAINERS_STYLES = composes(
       }
     }
 
-    GroupContainer {
+    Group {
       box-sizing: border-box;
       margin: 10px;
       padding: 10px;
       border-radius: 4px;
     }
 
-    Group {
+    Grid {
       display: grid;
       grid-template-columns: minmax(min-content, 1fr);
       grid-auto-rows: max-content; 
@@ -62,7 +62,7 @@ export const BASE_CONTAINERS_STYLES = composes(
       opacity: 0.9;
     }
 
-    Container, ColoredContainer, GroupContainer, Group {
+    Container, ColoredContainer, Group, Grid {
       flex-grow: 1;
       &[small] {
         max-width: 250px;
diff --git a/webapp/packages/core-blocks/src/Containers/GroupContainer.tsx b/webapp/packages/core-blocks/src/Containers/Grid.tsx
similarity index 80%
rename from webapp/packages/core-blocks/src/Containers/GroupContainer.tsx
rename to webapp/packages/core-blocks/src/Containers/Grid.tsx
index 91db06b3e2..d5d65dac1c 100644
--- a/webapp/packages/core-blocks/src/Containers/GroupContainer.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Grid.tsx
@@ -10,9 +10,10 @@ import type { ISize } from './BASE_CONTAINERS_STYLES';
 
 interface Props extends ISize {
   className?: string;
+  horizontal?: boolean;
 }
 
-export const GroupContainer: React.FC<Props> = function GroupContainer({ children, className }) {
+export const Grid: React.FC<Props> = function Grid({ children, className }) {
   return (
     <div className={className}>
       {children}
diff --git a/webapp/packages/core-blocks/src/Containers/Group.tsx b/webapp/packages/core-blocks/src/Containers/Group.tsx
index 4270ae9f62..f3f52e51dc 100644
--- a/webapp/packages/core-blocks/src/Containers/Group.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Group.tsx
@@ -10,7 +10,6 @@ import type { ISize } from './BASE_CONTAINERS_STYLES';
 
 interface Props extends ISize {
   className?: string;
-  horizontal?: boolean;
 }
 
 export const Group: React.FC<Props> = function Group({ children, className }) {
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index a0654482a4..6c06caf269 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -29,7 +29,7 @@ export * from './FormControls/Checkboxes/CheckboxMarkup';
 export * from './FormControls/FormBox';
 export * from './Containers/BASE_CONTAINERS_STYLES';
 export * from './Containers/Container';
-export * from './Containers/GroupContainer';
+export * from './Containers/Grid';
 export * from './Containers/Group';
 export * from './Containers/GroupTitle';
 export * from './Containers/ColoredContainer';
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
index 285e43303a..e325abc4d2 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
@@ -11,7 +11,7 @@ import type { PropsWithChildren } from 'react';
 import styled from 'reshadow';
 
 import { useDatabaseObjectInfo } from '@cloudbeaver/core-app';
-import { ColoredContainer, Group, GroupContainer, Loader, TextPlaceholder } from '@cloudbeaver/core-blocks';
+import { ColoredContainer, Grid, Group, Loader, TextPlaceholder } from '@cloudbeaver/core-blocks';
 import { BASE_CONTAINERS_STYLES } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -39,13 +39,13 @@ export const ObjectProperties = observer(function ObjectProperties({
 
   return styled(styles)(
     <ColoredContainer>
-      <GroupContainer>
-        <Group large>
+      <Group>
+        <Grid large>
           {dbObject.properties.map(v => (
             <ObjectProperty key={v.id} objectProperty={v} />
           ))}
-        </Group>
-      </GroupContainer>
+        </Grid>
+      </Group>
     </ColoredContainer>
   );
 });
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
index 905398b18a..9ef82455cd 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
@@ -37,7 +37,6 @@ export const ObjectProperty = observer(function ObjectProperty({
           <InputFieldNew
             name={objectProperty.id}
             value={getValue(objectProperty.value)}
-            mod='surface'
             readOnly
             {...additionalProps(objectProperty)}
           >{objectProperty.displayName}

From b79a726f30411eff0c17c53731605d3f1a6da3d4 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Thu, 25 Feb 2021 13:15:47 +0300
Subject: [PATCH 3/4] feat(core-theming): CB-724 add new form controls

---
 .../src/Containers/BASE_CONTAINERS_STYLES.ts  |   9 +-
 .../src/Containers/ColoredContainer.tsx       |   1 +
 .../core-blocks/src/Containers/Container.tsx  |   1 +
 .../core-blocks/src/Containers/Grid.tsx       |   1 +
 .../src/FormControls/ComboboxNew.tsx          | 255 ++++++++++++++++++
 .../src/FormControls/SwitchNew.tsx            | 168 ++++++++++++
 .../src/FormControls/TextareaNew.tsx          |  96 +++++++
 .../FormControls/baseFormControlStylesNew.ts  |   6 +-
 .../ObjectPropertyInfoFormNew.tsx             | 182 +++++++++++++
 webapp/packages/core-blocks/src/index.ts      |   5 +
 .../Options/ParametersFormNew.tsx             |  76 ++++++
 .../src/styles/_form-controls.scss            |   7 +-
 .../ObjectInfoTab/ObjectProperties.tsx        |   2 +-
 13 files changed, 802 insertions(+), 7 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx
 create mode 100644 webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx
 create mode 100644 webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
 create mode 100644 webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx
 create mode 100644 webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx

diff --git a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
index 71a410d90c..c624d9fbf7 100644
--- a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
+++ b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
@@ -29,13 +29,15 @@ export const BASE_CONTAINERS_STYLES = composes(
     Container, ColoredContainer {
       display: flex;
       flex-direction: column;
-      overflow: auto;
       &[horizontal] {
         flex-direction: row;
       }
       &[wrap] {
         flex-wrap: wrap;
       }
+      &[overflow] {
+        overflow: auto;
+      }
     }
 
     Group {
@@ -50,7 +52,10 @@ export const BASE_CONTAINERS_STYLES = composes(
       grid-template-columns: minmax(min-content, 1fr);
       grid-auto-rows: max-content; 
       &[horizontal] {
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      }
+      &[center] {
+        margin: 0 auto;
       }
     }
 
diff --git a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
index d57b285d8c..87e3cb5bd1 100644
--- a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
+++ b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
@@ -12,6 +12,7 @@ interface Props extends ISize {
   className?: string;
   horizontal?: boolean;
   wrap?: boolean;
+  overflow?: boolean;
 }
 
 export const ColoredContainer: React.FC<Props> = function ColoredContainer({ children, className }) {
diff --git a/webapp/packages/core-blocks/src/Containers/Container.tsx b/webapp/packages/core-blocks/src/Containers/Container.tsx
index ce58ffd2cb..981cd3ba60 100644
--- a/webapp/packages/core-blocks/src/Containers/Container.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Container.tsx
@@ -12,6 +12,7 @@ interface Props extends ISize {
   className?: string;
   horizontal?: boolean;
   wrap?: boolean;
+  overflow?: boolean;
 }
 
 export const Container: React.FC<Props> = function Container({ children, className }) {
diff --git a/webapp/packages/core-blocks/src/Containers/Grid.tsx b/webapp/packages/core-blocks/src/Containers/Grid.tsx
index d5d65dac1c..953222e512 100644
--- a/webapp/packages/core-blocks/src/Containers/Grid.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Grid.tsx
@@ -11,6 +11,7 @@ import type { ISize } from './BASE_CONTAINERS_STYLES';
 interface Props extends ISize {
   className?: string;
   horizontal?: boolean;
+  center?: boolean;
 }
 
 export const Grid: React.FC<Props> = function Grid({ children, className }) {
diff --git a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx
new file mode 100644
index 0000000000..2e3094a6fb
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx
@@ -0,0 +1,255 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import {
+  useLayoutEffect, useCallback, useState, useRef, useContext
+} from 'react';
+import {
+  useMenuState,
+  Menu,
+  MenuItem,
+  MenuButton
+} from 'reakit/Menu';
+import styled, { css, use } from 'reshadow';
+
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { IconButton } from '../IconButton';
+import { Icon } from '../Icons/Icon';
+import { baseFormControlStylesNew } from './baseFormControlStylesNew';
+import { FormContext } from './FormContext';
+
+const styles = composes(
+  css`
+    Menu {
+      composes: theme-text-on-surface theme-background-surface from global;
+    }
+    MenuItem {
+      composes: theme-ripple from global;
+    }
+  `,
+  css`
+    field  input {
+      margin: 0;
+    }
+    field-label {
+      display: block;
+      padding-bottom: 5px;
+    }
+    input {
+      padding-right: 20px;
+    }
+    MenuButton {
+      position: absolute;
+      right: 0;
+      background: transparent;
+      outline: none;
+      padding: 4px;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    Menu {
+      composes: theme-typography--caption theme-elevation-z3 from global;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-height: 150px;
+      overflow: auto;
+      outline: none;
+      padding: 4px 0;
+      z-index: 999;
+
+      & MenuItem {
+        background: transparent;
+        display: block;
+        padding: 4px 36px;
+        text-align: left;
+        outline: none;
+        color: inherit;
+        cursor: pointer;
+      }
+    }
+    Icon {
+      height: 16px;
+      display: block;
+    }
+    MenuButton Icon {
+      transform: rotate(90deg);
+
+      &[|focus] {
+        transform: rotate(-90deg);
+      }
+    }
+    input-box {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+  `
+);
+
+type BaseProps<TKey, TValue> = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onSelect' | 'name' | 'value'> & {
+  propertyName?: string;
+  items: TValue[];
+  searchable?: boolean;
+  keySelector: (item: TValue) => TKey;
+  valueSelector: (item: TValue) => string;
+  onSwitch?: (state: boolean) => void;
+};
+
+type ControlledProps<TKey, TValue> = BaseProps<TKey, TValue> & {
+  name?: string;
+  value?: string;
+  onSelect?: (value: TKey, name: string | undefined, prev: TKey) => void;
+  onChange?: (value: string, name: string | undefined) => any;
+  state?: never;
+};
+
+type ObjectProps<TValue, TKey extends keyof TState, TState> = BaseProps<TState[TKey], TValue> & {
+  name: TKey;
+  state: TState;
+  onSelect?: (value: TState[TKey], name: TKey | undefined, prev: TState[TKey]) => void;
+  onChange?: (value: string, name: TKey | undefined) => any;
+  value?: never;
+};
+
+interface ComboboxType {
+  <TKey, TValue>(props: ControlledProps<TKey, TValue>): JSX.Element;
+  <TValue, TKey extends keyof TState, TState>(props: ObjectProps<TValue, TKey, TState>): JSX.Element;
+}
+
+export const ComboboxNew: ComboboxType = observer(function ComboboxNew({
+  value: controlledValue,
+  name,
+  state,
+  propertyName,
+  items,
+  children,
+  title,
+  className,
+  searchable,
+  readOnly,
+  disabled,
+  keySelector = v => v,
+  valueSelector = v => v,
+  onChange = () => {},
+  onSelect,
+  onSwitch,
+  ...rest
+}: ControlledProps<any, any> | ObjectProps<any, any, any>) {
+  const context = useContext(FormContext);
+  const ref = useRef<HTMLInputElement>(null);
+  const menu = useMenuState({
+    placement: 'bottom-end',
+    currentId: null,
+    gutter: 4,
+  });
+  const [searchValue, setSearchValue] = useState('');
+  let value: string | number | readonly string[] | undefined = controlledValue;
+
+  if (state) {
+    if (name in state) {
+      value = state[name];
+    } else if (rest.defaultValue !== undefined) {
+      value = rest.defaultValue;
+    }
+  }
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      onChange(value, name);
+      setSearchValue(value);
+    },
+    [name, onChange]
+  );
+
+  const handleRemove = useCallback(
+    () => {
+      menu.hide();
+      if (state) {
+        state[name] = null;
+      }
+      if (onSelect) {
+        onSelect(null, name, value);
+      }
+      if (context) {
+        context.onChange(null, name);
+      }
+      setSearchValue('');
+    },
+    [value, state, name, menu, context, onSelect]
+  );
+
+  const handleMenuSelect = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      menu.hide();
+      const id = event.currentTarget.id;
+      if (state) {
+        state[name] = id;
+      }
+      if (onSelect) {
+        onSelect(id, name, value);
+      }
+      if (context) {
+        context.onChange(id, name);
+      }
+    },
+    [value, state, name, menu, context, onSelect]
+  );
+
+  useLayoutEffect(() => onSwitch?.(menu.visible), [onSwitch, menu.visible]);
+
+  const selectedItem = items.find(item => keySelector(item) === value);
+  const filteredItems = items.filter(
+    item => selectedItem || !searchValue || valueSelector(item).toUpperCase().includes(searchValue.toUpperCase())
+  );
+
+  if (ref.current === document.activeElement && !selectedItem && searchValue) {
+    menu.show();
+  }
+
+  return styled(useStyles(baseFormControlStylesNew, styles))(
+    <field as="div" className={className}>
+      <field-label title={title} as='label'>{children}</field-label>
+      <input-box as="div">
+        <input
+          ref={ref}
+          role='new'
+          name={name}
+          title={title}
+          value={selectedItem ? valueSelector(selectedItem) : searchValue}
+          readOnly={readOnly}
+          onChange={handleChange}
+          {...rest}
+        />
+        {(selectedItem && !readOnly && searchable) && (
+          <IconButton type="button" name="reject" viewBox="0 0 11 11" onClick={handleRemove} />
+        )}
+        <MenuButton {...menu} disabled={readOnly || disabled}><Icon name="arrow" viewBox="0 0 16 16" {...use({ focus: menu.visible })} /></MenuButton>
+        <Menu
+          {...menu}
+          aria-label={propertyName}
+          unstable_initialFocusRef={ref}
+          unstable_finalFocusRef={ref}
+        >
+          {filteredItems.map(item => (
+            <MenuItem key={keySelector(item)} id={keySelector(item)} type='button' {...menu} onClick={handleMenuSelect}>
+              {valueSelector(item)}
+            </MenuItem>
+          ))}
+        </Menu>
+      </input-box>
+    </field>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx b/webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx
new file mode 100644
index 0000000000..0ee232fb3e
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/SwitchNew.tsx
@@ -0,0 +1,168 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useCallback, useContext } from 'react';
+import styled, { css, use } from 'reshadow';
+
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { baseFormControlStylesNew } from './baseFormControlStylesNew';
+import { FormContext } from './FormContext';
+import { isControlPresented } from './isControlPresented';
+
+const switchStyles = composes(
+  css`
+  switch-control {
+    composes: theme-switch from global;
+  }
+  switch-control-track {
+    composes: theme-switch__track from global;
+  }
+  switch-input {
+    composes: theme-switch_native-control from global;
+  }
+  switch-control-underlay {
+    composes: theme-switch__thumb-underlay from global;
+  }
+  switch-control-thumb {
+    composes: theme-switch__thumb from global;
+  }
+  radio-ripple {
+    composes: theme-radio_ripple from global;
+  }
+  `,
+  css`
+   field-label {
+     display: block;
+     padding-bottom: 10px;
+   }
+  `
+);
+
+const switchMod = {
+  primary: composes(
+    css`
+      switch-control {
+        composes: theme-switch_primary from global;
+      }
+    `
+  ),
+};
+
+const switchState = {
+  disabled: composes(
+    css`
+      switch-control {
+        composes: theme-switch--disabled from global;
+      }
+    `
+  ),
+  checked: composes(
+    css`
+      switch-control {
+        composes: theme-switch--checked from global;
+      }
+    `
+  ),
+};
+
+type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'value' | 'checked'> & {
+  mod?: Array<keyof typeof switchMod>;
+  label?: string;
+  description?: string;
+};
+
+type ControlledProps = BaseProps & {
+  checked?: boolean;
+  onChange?: (value: boolean, name?: string) => any;
+
+  state?: never;
+  autoHide?: never;
+};
+
+type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
+  name: TKey;
+  state: TState;
+  onChange?: (value: boolean, name: TKey) => any;
+  autoHide?: boolean;
+
+  checked?: never;
+};
+
+interface SwitchType {
+  (props: ControlledProps): React.ReactElement<any, any> | null;
+  <TKey extends keyof TState, TState>(props: ObjectProps<TKey, TState>): React.ReactElement<any, any> | null;
+}
+
+export const SwitchNew: SwitchType = observer(function SwitchNew({
+  name,
+  id,
+  label,
+  description,
+  state,
+  checked: checkedControlled,
+  className,
+  children,
+  onChange,
+  mod = [],
+  autoHide,
+  disabled,
+  ...rest
+}: ControlledProps | ObjectProps<any, any>) {
+  const context = useContext(FormContext);
+  const checked = state ? state[name] : checkedControlled;
+  const styles = useStyles(
+    baseFormControlStylesNew,
+    switchStyles,
+    ...mod.map(mod => switchMod[mod]),
+    disabled && switchState.disabled,
+    checked && switchState.checked
+  );
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (state) {
+      state[name] = event.target.checked;
+    }
+    if (onChange) {
+      onChange(event.target.checked, name);
+    }
+    if (context) {
+      context.onChange(event.target.checked, name);
+    }
+  }, [state, name, context, onChange]);
+
+  if (autoHide && !isControlPresented(name, state)) {
+    return null;
+  }
+
+  return styled(styles)(
+    <field as="div" className={className}>
+      <field-label as="div">{children}</field-label>
+      <switch-control as='div'>
+        <switch-control-track as='div' />
+        <switch-control-underlay as='div'>
+          <switch-control-thumb as='div' />
+          <switch-input
+            as='input'
+            {...rest}
+            type="checkbox"
+            id={id}
+            role="switch"
+            aria-checked={checked}
+            checked={checked}
+            disabled={disabled}
+            onChange={handleChange}
+          />
+        </switch-control-underlay>
+      </switch-control>
+      <label htmlFor={id}>{label}</label>
+      <field-description as='div'>{description}</field-description>
+    </field>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
new file mode 100644
index 0000000000..ea10f638b7
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
@@ -0,0 +1,96 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useCallback, useContext } from 'react';
+import styled, { css, use } from 'reshadow';
+
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import type { ISize } from '../Containers/BASE_CONTAINERS_STYLES';
+import { baseFormControlStylesNew } from './baseFormControlStylesNew';
+import { FormContext } from './FormContext';
+
+const styles = css`
+  textarea {
+    line-height: 19px;
+  }
+  field-label {
+    display: block;
+    padding-bottom: 5px;
+  }
+`;
+
+type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & ISize & {
+  mod?: 'surface';
+  long?: boolean;
+};
+
+type ControlledProps = BaseProps & {
+  name?: string;
+  value?: string;
+  onChange?: (value: string, name?: string) => any;
+
+  state?: never;
+};
+
+type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
+  name: TKey;
+  state: TState;
+  onChange?: (value: string, name: TKey) => any;
+
+  value?: never;
+};
+
+interface TextareaType {
+  (props: ControlledProps): JSX.Element;
+  <TKey extends keyof TState, TState>(props: ObjectProps<TKey, TState>): JSX.Element;
+}
+
+export const TextareaNew: TextareaType = observer(function TextareaNew({
+  name,
+  value: controlledValue,
+  state,
+  children,
+  className,
+  mod,
+  long,
+  onChange = () => {},
+  ...rest
+}: ControlledProps | ObjectProps<any, any>) {
+  const context = useContext(FormContext);
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (state) {
+      state[name] = event.target.value;
+    }
+    if (onChange) {
+      onChange(event.target.value, name);
+    }
+    if (context) {
+      context.onChange(event.target.value, name);
+    }
+  }, [state, name, onChange]);
+
+  const value = state ? state[name] : controlledValue;
+
+  return styled(useStyles(baseFormControlStylesNew, styles))(
+    <field as="div" className={className} {...use({ long })}>
+      <field-label as='label'>{children}</field-label>
+      <textarea
+        {...rest}
+        role='new'
+
+        value={value ?? ''}
+        name={name}
+        onChange={handleChange}
+        {...use({ mod })}
+      />
+    </field>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
index 982086cb9c..bc6888ff4c 100644
--- a/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
+++ b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
@@ -15,13 +15,13 @@ export const baseFormControlStylesNew = css`
     min-height: 54px;
     max-width: 100%;
     &[|small] {
-      max-width: 240px;
+      grid-column: 1/-4;
     }
     &[|medium] {
-      max-width: 440px;
+      grid-column: 1/-3
     }
     &[|large] {
-      max-width: 640px;
+      grid-column: 1/-2;
     }
     &[|full] {
       grid-column: 1/-1;
diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx
new file mode 100644
index 0000000000..967a178d05
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx
@@ -0,0 +1,182 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useCallback } from 'react';
+import styled from 'reshadow';
+
+import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import { FieldCheckboxNew } from '../FormControls/Checkboxes/FieldCheckboxNew';
+import { ComboboxNew } from '../FormControls/ComboboxNew';
+import { FormFieldDescription } from '../FormControls/FormFieldDescription';
+import { InputFieldNew } from '../FormControls/InputFieldNew';
+import { isControlPresented } from '../FormControls/isControlPresented';
+import { Link } from '../Link';
+import { TextPlaceholder } from '../TextPlaceholder';
+import { formStyles } from './formStyles';
+
+const RESERVED_KEYWORDS = ['no', 'off', 'new-password'];
+
+interface RenderFieldProps {
+  property: ObjectPropertyInfo;
+  state: Record<string, any>;
+  editable?: boolean;
+  autofillToken?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  autoHide?: boolean;
+  showRememberTip?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+const RenderField: React.FC<RenderFieldProps> = observer(function RenderField({
+  property,
+  state,
+  editable = true,
+  autofillToken = '',
+  disabled,
+  readOnly,
+  autoHide,
+  showRememberTip,
+  onFocus,
+}) {
+  const href = property.features.includes('href');
+  const password = property.features.includes('password');
+  const checkbox = property.dataType === 'Boolean';
+  const combobox = property.validValues && property.validValues.length > 0;
+  let description: string | undefined;
+
+  if (href) {
+    return (
+      <FormFieldDescription label={property.displayName} raw>
+        <Link href={state[property.id!]} target='_blank' rel='noopener noreferrer'>{property.description}</Link>
+      </FormFieldDescription>
+    );
+  }
+
+  if (!editable) {
+    if (autoHide && !isControlPresented(property.id!, state)) {
+      return null;
+    }
+    return (
+      <FormFieldDescription label={property.displayName} raw>
+        {state[property.id!]}
+      </FormFieldDescription>
+    );
+  }
+
+  if (showRememberTip && password && property.value) {
+    description = 'Password saved';
+  }
+
+  if (checkbox) {
+    return (
+      <FieldCheckboxNew
+        name={property.id!}
+        state={state}
+        checkboxLabel={property.displayName}
+        title={property.description}
+        disabled={disabled}
+        mod='surface'
+      />
+    );
+  }
+
+  if (combobox) {
+    return (
+      <ComboboxNew
+        name={property.id!}
+        state={state}
+        items={property.validValues!}
+        keySelector={value => value}
+        valueSelector={value => value}
+        defaultValue={property.defaultValue}
+        title={property.description}
+        disabled={disabled}
+      >
+        {property.displayName ?? ''}
+      </ComboboxNew>
+    );
+  }
+
+  return (
+    <InputFieldNew
+      type={password ? 'password' : 'text'}
+      name={property.id!}
+      state={state}
+      description={description}
+      disabled={disabled}
+      readOnly={readOnly}
+      autoHide={autoHide}
+      autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
+      mod='surface'
+      onFocus={onFocus}
+    >
+      {property.displayName}
+    </InputFieldNew>
+  );
+});
+
+interface ObjectPropertyFormProps {
+  properties: ObjectPropertyInfo[] | undefined;
+  state: Record<string, string | number>;
+  editable?: boolean;
+  autofillToken?: string;
+  className?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  autoHide?: boolean;
+  showRememberTip?: boolean;
+  onFocus?: (name: string) => void;
+}
+
+export const ObjectPropertyInfoFormNew: React.FC<ObjectPropertyFormProps> = observer(function ObjectPropertyInfoFormNew({
+  properties,
+  state,
+  editable = true,
+  autofillToken = '',
+  className,
+  disabled,
+  readOnly,
+  autoHide,
+  showRememberTip,
+  onFocus,
+}) {
+  const style = useStyles(formStyles);
+
+  const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    if (onFocus) {
+      onFocus(e.target.name);
+    }
+  }, [onFocus]);
+
+  if (!properties || properties.length === 0) {
+    return <TextPlaceholder>Properties empty</TextPlaceholder>;
+  }
+
+  return styled(style)(
+    <form-body as='div' className={className}>
+      {properties.map(property => (
+        <RenderField
+          key={property.id}
+          property={property}
+          state={state}
+          editable={editable}
+          autofillToken={autofillToken}
+          disabled={disabled}
+          readOnly={readOnly}
+          autoHide={autoHide}
+          showRememberTip={showRememberTip}
+          onFocus={handleFocus}
+        />
+      ))}
+    </form-body>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 6c06caf269..b8756641be 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -5,6 +5,8 @@ export * from './layout/AppLogo';
 export * from './layout/TopAppBar';
 export * from './Loader/Loader';
 export * from './ObjectPropertyInfoForm/ObjectPropertyInfoForm';
+export * from './ObjectPropertyInfoForm/ObjectPropertyInfoFormNew';
+
 export * from './Placeholder/Placeholder';
 export * from './Placeholder/PlaceholderContainer';
 export * from './PropertiesTable';
@@ -35,6 +37,7 @@ export * from './Containers/GroupTitle';
 export * from './Containers/ColoredContainer';
 export * from './FormControls/FormBoxElement';
 export * from './FormControls/Combobox';
+export * from './FormControls/ComboboxNew';
 export * from './FormControls/FormContext';
 export * from './FormControls/FormFieldDescription';
 export * from './FormControls/FormGroup';
@@ -47,7 +50,9 @@ export * from './FormControls/RadioGroupContext';
 export * from './FormControls/ShadowInput';
 export * from './FormControls/SubmittingForm';
 export * from './FormControls/Switch';
+export * from './FormControls/SwitchNew';
 export * from './FormControls/Textarea';
+export * from './FormControls/TextareaNew';
 export * from './ErrorMessage';
 export * from './ExceptionMessage';
 export * from './IconButton';
diff --git a/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx b/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx
new file mode 100644
index 0000000000..ca21c9692d
--- /dev/null
+++ b/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx
@@ -0,0 +1,76 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css, use } from 'reshadow';
+
+import { BASE_CONTAINERS_STYLES, FormGroup, Grid, Group, InputField, InputFieldNew } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import type { ConnectionConfig } from '@cloudbeaver/core-sdk';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+interface ParametersFormProps {
+  config: ConnectionConfig;
+  disabled?: boolean;
+  embedded?: boolean;
+  readOnly?: boolean;
+}
+
+const parametersFormStyles = css`
+  sub-label {
+    composes: theme-typography--caption from global;
+    line-height: 14px;
+  }`;
+
+export const ParametersFormNew = observer(function ParametersFormNew({
+  config,
+  embedded,
+  disabled,
+  readOnly,
+}: ParametersFormProps) {
+  const translate = useTranslate();
+
+  return styled(useStyles(parametersFormStyles, BASE_CONTAINERS_STYLES))(
+    <Grid>
+      {!embedded && (
+        <Grid horizontal>
+          <InputFieldNew
+            type="text"
+            name="host"
+            state={config}
+            disabled={disabled}
+            readOnly={readOnly}
+            large
+            required
+          >
+            {translate('customConnection_custom_host')}
+          </InputFieldNew>
+          <InputFieldNew
+            type="number"
+            name="port"
+            state={config}
+            disabled={disabled}
+            readOnly={readOnly}
+          >
+            {translate('customConnection_custom_port')}
+          </InputFieldNew>
+        </Grid>
+      )}
+      <InputFieldNew
+        type="text"
+        name="databaseName"
+        state={config}
+        disabled={disabled}
+        readOnly={readOnly}
+        full
+      >
+        {translate('customConnection_custom_database')}
+      </InputFieldNew>
+    </Grid>
+  );
+});
diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss
index 4cf5d711ab..bfa6bcbcc7 100644
--- a/webapp/packages/core-theming/src/styles/_form-controls.scss
+++ b/webapp/packages/core-theming/src/styles/_form-controls.scss
@@ -34,7 +34,12 @@
     }
   }
 
-  input[role="new"] {
+  textarea[role="new"] {
+    resize: vertical;
+  }
+
+  input[role="new"],
+  textarea[role="new"] {
     @include mdc-theme-prop(color, on-secondary, false);
     @include mdc-theme-prop(background-color, input-background, false);
     box-sizing: border-box;
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
index e325abc4d2..8d639d4f2f 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx
@@ -38,7 +38,7 @@ export const ObjectProperties = observer(function ObjectProperties({
   }
 
   return styled(styles)(
-    <ColoredContainer>
+    <ColoredContainer overflow>
       <Group>
         <Grid large>
           {dbObject.properties.map(v => (

From 9d35c56e508278a2442289be11e3518a80a8a577 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Thu, 25 Feb 2021 16:14:26 +0300
Subject: [PATCH 4/4] feat(core-theming): CB-724 add IGridItemsLayoutProps

---
 .../src/Containers/BASE_CONTAINERS_STYLES.ts       | 12 ++++++------
 .../src/Containers/ColoredContainer.tsx            |  4 ++--
 .../core-blocks/src/Containers/Container.tsx       |  4 ++--
 .../packages/core-blocks/src/Containers/Grid.tsx   |  4 ++--
 .../packages/core-blocks/src/Containers/Group.tsx  |  4 ++--
 .../src/Containers/ILayoutContainerProps.ts        |  9 +++++++++
 .../core-blocks/src/FormControls/InputFieldNew.tsx | 11 ++++-------
 .../core-blocks/src/FormControls/TextareaNew.tsx   | 14 ++++++--------
 .../src/FormControls/baseFormControlStylesNew.ts   |  9 +++------
 .../ConnectionForm/Options/ParametersFormNew.tsx   | 12 +++---------
 .../core-theming/src/styles/_theme-light.scss      |  2 +-
 .../ObjectInfoTab/ObjectProperty.tsx               |  3 +++
 12 files changed, 43 insertions(+), 45 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts

diff --git a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
index c624d9fbf7..d0ca7e73c1 100644
--- a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
+++ b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
@@ -10,12 +10,6 @@ import { css } from 'reshadow';
 
 import { composes } from '@cloudbeaver/core-theming';
 
-export interface ISize {
-  small?: boolean;
-  medium?: boolean;
-  large?: boolean;
-}
-
 export const BASE_CONTAINERS_STYLES = composes(
   css`
     Group {
@@ -59,6 +53,12 @@ export const BASE_CONTAINERS_STYLES = composes(
       }
     }
 
+    Grid {
+      & > [itemMax] {
+        grid-column: 1/-1;
+      }
+    }
+
     GroupTitle {
       composes: theme-typography--body1 from global;
       font-weight: 400;
diff --git a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
index 87e3cb5bd1..813097debe 100644
--- a/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
+++ b/webapp/packages/core-blocks/src/Containers/ColoredContainer.tsx
@@ -6,9 +6,9 @@
  * you may not use this file except in compliance with the License.
  */
 
-import type { ISize } from './BASE_CONTAINERS_STYLES';
+import type { ILayoutSizeProps } from './ILayoutContainerProps';
 
-interface Props extends ISize {
+interface Props extends ILayoutSizeProps {
   className?: string;
   horizontal?: boolean;
   wrap?: boolean;
diff --git a/webapp/packages/core-blocks/src/Containers/Container.tsx b/webapp/packages/core-blocks/src/Containers/Container.tsx
index 981cd3ba60..feeb561817 100644
--- a/webapp/packages/core-blocks/src/Containers/Container.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Container.tsx
@@ -6,9 +6,9 @@
  * you may not use this file except in compliance with the License.
  */
 
-import type { ISize } from './BASE_CONTAINERS_STYLES';
+import type { ILayoutSizeProps } from './ILayoutContainerProps';
 
-interface Props extends ISize {
+interface Props extends ILayoutSizeProps {
   className?: string;
   horizontal?: boolean;
   wrap?: boolean;
diff --git a/webapp/packages/core-blocks/src/Containers/Grid.tsx b/webapp/packages/core-blocks/src/Containers/Grid.tsx
index 953222e512..535d37429d 100644
--- a/webapp/packages/core-blocks/src/Containers/Grid.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Grid.tsx
@@ -6,9 +6,9 @@
  * you may not use this file except in compliance with the License.
  */
 
-import type { ISize } from './BASE_CONTAINERS_STYLES';
+import type { ILayoutSizeProps } from './ILayoutContainerProps';
 
-interface Props extends ISize {
+interface Props extends ILayoutSizeProps {
   className?: string;
   horizontal?: boolean;
   center?: boolean;
diff --git a/webapp/packages/core-blocks/src/Containers/Group.tsx b/webapp/packages/core-blocks/src/Containers/Group.tsx
index f3f52e51dc..28f81c271a 100644
--- a/webapp/packages/core-blocks/src/Containers/Group.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Group.tsx
@@ -6,9 +6,9 @@
  * you may not use this file except in compliance with the License.
  */
 
-import type { ISize } from './BASE_CONTAINERS_STYLES';
+import type { ILayoutSizeProps } from './ILayoutContainerProps';
 
-interface Props extends ISize {
+interface Props extends ILayoutSizeProps {
   className?: string;
 }
 
diff --git a/webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts b/webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts
new file mode 100644
index 0000000000..b0b91658cb
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/ILayoutContainerProps.ts
@@ -0,0 +1,9 @@
+export interface ILayoutSizeProps {
+  small?: boolean;
+  medium?: boolean;
+  large?: boolean;
+}
+
+export interface IGridItemsLayoutProps {
+  itemMax?: boolean;
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx
index f296dce1d4..83b381df46 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx
@@ -8,12 +8,11 @@
 
 import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
-import styled, { use } from 'reshadow';
-import { css } from 'reshadow';
+import styled, { use, css } from 'reshadow';
 
 import { useStyles } from '@cloudbeaver/core-theming';
 
-import type { ISize } from '../Containers/BASE_CONTAINERS_STYLES';
+import type { ILayoutSizeProps } from '../Containers/ILayoutContainerProps';
 import { baseFormControlStylesNew } from './baseFormControlStylesNew';
 import { FormContext } from './FormContext';
 import { isControlPresented } from './isControlPresented';
@@ -25,10 +24,9 @@ const INPUT_FIELD_STYLES = css`
   }
 `;
 
-type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'> & ISize & {
+type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'> & ILayoutSizeProps & {
   description?: string;
   mod?: 'surface';
-  full?: boolean;
 };
 
 type ControlledProps = BaseProps & {
@@ -64,7 +62,6 @@ export const InputFieldNew: InputFieldType = observer(function InputFieldNew({
   small,
   medium,
   large,
-  full,
   autoHide,
   onChange,
   ...rest
@@ -91,7 +88,7 @@ export const InputFieldNew: InputFieldType = observer(function InputFieldNew({
   }
 
   return styled(styles)(
-    <field as="div" className={className} {...use({ small, medium, large, full })}>
+    <field as="div" className={className} {...use({ small, medium, large })}>
       <field-label as='label'>{children} {required && '*'}</field-label>
       <input
         role='new'
diff --git a/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
index ea10f638b7..b7164bf9a0 100644
--- a/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/TextareaNew.tsx
@@ -12,7 +12,7 @@ import styled, { css, use } from 'reshadow';
 
 import { useStyles } from '@cloudbeaver/core-theming';
 
-import type { ISize } from '../Containers/BASE_CONTAINERS_STYLES';
+import type { ILayoutSizeProps } from '../Containers/ILayoutContainerProps';
 import { baseFormControlStylesNew } from './baseFormControlStylesNew';
 import { FormContext } from './FormContext';
 
@@ -26,16 +26,14 @@ const styles = css`
   }
 `;
 
-type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & ISize & {
+type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & ILayoutSizeProps & {
   mod?: 'surface';
-  long?: boolean;
 };
 
 type ControlledProps = BaseProps & {
   name?: string;
   value?: string;
   onChange?: (value: string, name?: string) => any;
-
   state?: never;
 };
 
@@ -43,7 +41,6 @@ type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
   name: TKey;
   state: TState;
   onChange?: (value: string, name: TKey) => any;
-
   value?: never;
 };
 
@@ -58,8 +55,10 @@ export const TextareaNew: TextareaType = observer(function TextareaNew({
   state,
   children,
   className,
+  small,
+  medium,
+  large,
   mod,
-  long,
   onChange = () => {},
   ...rest
 }: ControlledProps | ObjectProps<any, any>) {
@@ -80,12 +79,11 @@ export const TextareaNew: TextareaType = observer(function TextareaNew({
   const value = state ? state[name] : controlledValue;
 
   return styled(useStyles(baseFormControlStylesNew, styles))(
-    <field as="div" className={className} {...use({ long })}>
+    <field as="div" className={className} {...use({ small, medium, large })}>
       <field-label as='label'>{children}</field-label>
       <textarea
         {...rest}
         role='new'
-
         value={value ?? ''}
         name={name}
         onChange={handleChange}
diff --git a/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
index bc6888ff4c..4701b4d762 100644
--- a/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
+++ b/webapp/packages/core-blocks/src/FormControls/baseFormControlStylesNew.ts
@@ -15,16 +15,13 @@ export const baseFormControlStylesNew = css`
     min-height: 54px;
     max-width: 100%;
     &[|small] {
-      grid-column: 1/-4;
+      max-width: 250px;
     }
     &[|medium] {
-      grid-column: 1/-3
+      max-width: 450px;
     }
     &[|large] {
-      grid-column: 1/-2;
-    }
-    &[|full] {
-      grid-column: 1/-1;
+      max-width: 650px;
     }
   }
 
diff --git a/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx b/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx
index ca21c9692d..c1b70c3279 100644
--- a/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx
+++ b/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx
@@ -7,9 +7,9 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import styled, { css, use } from 'reshadow';
+import styled from 'reshadow';
 
-import { BASE_CONTAINERS_STYLES, FormGroup, Grid, Group, InputField, InputFieldNew } from '@cloudbeaver/core-blocks';
+import { BASE_CONTAINERS_STYLES, Grid, InputFieldNew } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import type { ConnectionConfig } from '@cloudbeaver/core-sdk';
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -21,12 +21,6 @@ interface ParametersFormProps {
   readOnly?: boolean;
 }
 
-const parametersFormStyles = css`
-  sub-label {
-    composes: theme-typography--caption from global;
-    line-height: 14px;
-  }`;
-
 export const ParametersFormNew = observer(function ParametersFormNew({
   config,
   embedded,
@@ -35,7 +29,7 @@ export const ParametersFormNew = observer(function ParametersFormNew({
 }: ParametersFormProps) {
   const translate = useTranslate();
 
-  return styled(useStyles(parametersFormStyles, BASE_CONTAINERS_STYLES))(
+  return styled(useStyles(BASE_CONTAINERS_STYLES))(
     <Grid>
       {!embedded && (
         <Grid horizontal>
diff --git a/webapp/packages/core-theming/src/styles/_theme-light.scss b/webapp/packages/core-theming/src/styles/_theme-light.scss
index 437917f4d8..0bd1e8ae03 100644
--- a/webapp/packages/core-theming/src/styles/_theme-light.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-light.scss
@@ -21,7 +21,7 @@ $color-negative: #fd1d48;
 $input-border: #dedede;
 $input-border-disabled: transparent;
 $input-border-readonly: transparent;
-$input-background: transparent;
+$input-background: $mdc-theme-surface;
 $input-background-disabled: $mdc-theme-secondary;
 $input-background-readonly: $mdc-theme-secondary;
 
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
index 9ef82455cd..6ec80bcc9f 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperty.tsx
@@ -15,6 +15,7 @@ import { additionalProps, filterProperty, getValue, matchType } from '../helpers
 
 export const ObjectProperty = observer(function ObjectProperty({
   objectProperty,
+  className,
 }: ObjectPropertyProps) {
   if (!objectProperty || !filterProperty(objectProperty)) {
     return null;
@@ -25,6 +26,7 @@ export const ObjectProperty = observer(function ObjectProperty({
       {matchType(objectProperty.dataType) === 'checkbox'
         ? (
           <FieldCheckboxNew
+            className={className}
             name={objectProperty.id}
             value={getValue(objectProperty.value)}
             readOnly
@@ -35,6 +37,7 @@ export const ObjectProperty = observer(function ObjectProperty({
         )
         : (
           <InputFieldNew
+            className={className}
             name={objectProperty.id}
             value={getValue(objectProperty.value)}
             readOnly