feat: migrate form-controls to css modules

webapp/packages/core-app/src/AppScreen/Main.tsx

@@ -46,8 +46,8 @@ export const Main = observer(function Main() {
                 <RightArea />
               </Pane>
               <ResizerControls />
-              <Pane basis="250px" main >
-                <Loader suspense className={s(styles, { loader: true })}>
+              <Pane basis="250px" main>
+                <Loader className={s(styles, { loader: true })} suspense>
                   <SideBarPanel container={sideBarPanelService.tabsContainer} />
                 </Loader>
               </Pane>

webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.m.css

@@ -1,2 +1,66 @@
 .checkbox {
+  composes: theme-checkbox from global;
+  box-sizing: content-box !important;
+}
+.checkboxInput {
+  composes: theme-checkbox_native-control from global;
+}
+.checkboxBackground {
+  composes: theme-checkbox__background from global;
+  box-sizing: border-box !important;
+}
+.checkboxCheckmark {
+  composes: theme-checkbox__checkmark from global;
+}
+.checkboxCheckmarkPath {
+  composes: theme-checkbox__checkmark-path from global;
+}
+.checkboxMixedmark {
+  composes: theme-checkbox__mixedmark from global;
+}
+.checkboxRipple {
+  composes: theme-checkbox__ripple from global;
+}
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+.checkboxLabel {
+  composes: theme-typography--body2 from global;
+  cursor: pointer;
+}
+.checkboxCaption {
+  composes: theme-text-text-hint-on-light theme-typography--caption from global;
+}
+
+.primary {
+  composes: theme-checkbox_primary from global;
+}
+.surface {
+  composes: theme-checkbox_surface from global;
+}
+.small {
+  composes: theme-checkbox_small from global;
+}
+
+.small {
+  &.checkboxContainer {
+    & .checkbox {
+      width: 14px;
+      height: 14px;
+    }
+    & .checkboxBackground {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.disabled {
+  composes: theme-checkbox--disabled from global;
+}
+
+.checked {
+  composes: theme-checkbox--checked from global;
 }

webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx

@@ -6,103 +6,19 @@
  * you may not use this file except in compliance with the License.
  */
 import { useLayoutEffect, useRef } from 'react';
-import styled, { css } from 'reshadow';
-
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { s } from '../../s';
 import { useS } from '../../useS';
-import { useStyles } from '../../useStyles';
 import CheckboxMarkupStyles from './CheckboxMarkup.m.css';
 
 export type CheckboxMod = 'primary' | 'surface' | 'small';
 
-const checkboxStyles = css`
-  checkbox {
-    composes: theme-checkbox from global;
-    box-sizing: content-box !important;
-  }
-  checkbox-input {
-    composes: theme-checkbox_native-control from global;
-  }
-  checkbox-background {
-    composes: theme-checkbox__background from global;
-    box-sizing: border-box !important;
-  }
-  checkbox-checkmark {
-    composes: theme-checkbox__checkmark from global;
-  }
-  checkbox-checkmark-path {
-    composes: theme-checkbox__checkmark-path from global;
-  }
-  checkbox-mixedmark {
-    composes: theme-checkbox__mixedmark from global;
-  }
-  checkbox-ripple {
-    composes: theme-checkbox__ripple from global;
-  }
-  checkbox-container {
-    display: flex;
-    align-items: center;
-    height: 32px;
-  }
-  checkbox-label {
-    composes: theme-typography--body2 from global;
-    cursor: pointer;
-  }
-  checkbox-caption {
-    composes: theme-text-text-hint-on-light theme-typography--caption from global;
-  }
-`;
-
-const checkboxMod: Record<CheckboxMod, any> = {
-  primary: css`
-    checkbox {
-      composes: theme-checkbox_primary from global;
-    }
-  `,
-  surface: css`
-    checkbox {
-      composes: theme-checkbox_surface from global;
-    }
-  `,
-  small: css`
-    checkbox {
-      composes: theme-checkbox_small from global;
-    }
-    checkbox-container {
-      & checkbox {
-        width: 14px;
-        height: 14px;
-      }
-      & checkbox-background {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  `,
-};
-
-const checkboxState = {
-  disabled: css`
-    checkbox {
-      composes: theme-checkbox--disabled from global;
-    }
-  `,
-  checked: css`
-    checkbox {
-      composes: theme-checkbox--checked from global;
-    }
-  `,
-};
-
 interface ICheckboxMarkupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
   label?: string;
   caption?: string;
   indeterminate?: boolean;
   ripple?: boolean;
   mod?: CheckboxMod[];
-  style?: ComponentStyle;
 }
 
 export { CheckboxMarkupStyles };
@@ -115,7 +31,6 @@ export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxM
   title,
   mod = ['primary'],
   ripple = true,
-  style,
   readOnly,
   caption,
   ...rest
@@ -129,32 +44,40 @@ export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxM
     }
   });
 
-  return styled(
-    useStyles(
-      checkboxStyles,
-      ...(mod || []).map(mod => checkboxMod[mod]),
-      rest.disabled && checkboxState.disabled,
-      rest.checked && checkboxState.checked,
-      style,
-    ),
-  )(
-    <checkbox-container className={className} title={title}>
-      <checkbox className={s(styles, { checkbox: true })}>
-        <checkbox-input ref={checkboxRef} as="input" type="checkbox" {...rest} disabled={rest.disabled || readOnly} id={id || rest.name} />
-        <checkbox-background>
-          <checkbox-checkmark as="svg" viewBox="0 0 24 24">
-            <checkbox-checkmark-path as="path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-          </checkbox-checkmark>
-          <checkbox-mixedmark />
-        </checkbox-background>
-        {ripple && <checkbox-ripple />}
-      </checkbox>
+  return (
+    <div className={s(styles, { checkboxContainer: true, small: mod.includes('small') })} title={title}>
+      <div
+        className={s(styles, {
+          checkbox: true,
+          disabled: rest.disabled,
+          checked: rest.checked,
+          primary: mod.includes('primary'),
+          surface: mod.includes('surface'),
+          small: mod.includes('small'),
+        })}
+      >
+        <input
+          ref={checkboxRef}
+          className={s(styles, { checkboxInput: true })}
+          type="checkbox"
+          {...rest}
+          disabled={rest.disabled || readOnly}
+          id={id || rest.name}
+        />
+        <div className={s(styles, { checkboxBackground: true })}>
+          <svg className={s(styles, { checkboxCheckmark: true })} viewBox="0 0 24 24">
+            <path className={s(styles, { checkboxCheckmarkPath: true })} fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+          </svg>
+          <div className={s(styles, { checkboxMixedmark: true })} />
+        </div>
+        {ripple && <div className={s(styles, { checkboxRipple: true })} />}
+      </div>
       {label && (id || rest.name) && (
-        <checkbox-label as="label" htmlFor={id || rest.name}>
+        <label className={s(styles, { checkboxLabel: true })} htmlFor={id || rest.name}>
           {label}
           {caption && <checkbox-caption>{caption}</checkbox-caption>}
-        </checkbox-label>
+        </label>
       )}
-    </checkbox-container>,
+    </div>
   );
 };

webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx

@@ -5,36 +5,39 @@
  * 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 { filterLayoutFakeProps, getLayoutProps } from '../../Containers/filterLayoutFakeProps';
 import elementsSizeStyles from '../../Containers/shared/ElementsSize.m.css';
 import { s } from '../../s';
 import { useS } from '../../useS';
-import formControlStyles from '../FormControl.m.css';
+import { Field } from '../Field';
+import { FieldLabel } from '../FieldLabel';
 import { isControlPresented } from '../isControlPresented';
 import { Checkbox, CheckboxBaseProps, CheckboxType, ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox';
 import fieldCheckboxStyles from './FieldCheckbox.m.css';
 
-export const FieldCheckbox: CheckboxType = function FieldCheckbox({
+export const FieldCheckbox: CheckboxType = observer(function FieldCheckbox({
   children,
   className,
   ...rest
 }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps<any>)) {
   const layoutProps = getLayoutProps(rest);
   const checkboxProps = filterLayoutFakeProps(rest);
-  const styles = useS(elementsSizeStyles, formControlStyles, fieldCheckboxStyles);
+  const styles = useS(fieldCheckboxStyles);
 
   if (checkboxProps.autoHide && !isControlPresented(checkboxProps.name, checkboxProps.state)) {
     return null;
   }
 
   return (
-    <div data-testid="field" className={s(styles, { field: true, ...layoutProps }, className)}>
-      <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={styles.checkbox} />
+    <Field {...layoutProps} className={s(styles, { field: true }, className)}>
+      <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={s(styles, { checkbox: true })} />
       {children && (
-        <label data-testid="field-label" htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={styles.fieldLabel}>
+        <FieldLabel htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={s(styles, { fieldLabel: true })}>
           {children}
-        </label>
+        </FieldLabel>
       )}
-    </div>
+    </Field>
   );
-};
+});

webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx

@@ -8,10 +8,11 @@
 import { observer } from 'mobx-react-lite';
 
 import { filterLayoutFakeProps } from '../../Containers/filterLayoutFakeProps';
-import elementsSizeStyles from '../../Containers/shared/ElementsSize.m.css';
 import { s } from '../../s';
 import { useS } from '../../useS';
-import formControlStyles from '../FormControl.m.css';
+import { Field } from '../Field';
+import { FieldDescription } from '../FieldDescription';
+import { FieldLabel } from '../FieldLabel';
 import { isControlPresented } from '../isControlPresented';
 import type { ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox';
 import switchStyles from './Switch.m.css';
@@ -64,14 +65,14 @@ export const Switch: SwitchType = observer(function Switch({
     onChange,
   });
   rest = filterLayoutFakeProps(rest);
-  const styles = useS(elementsSizeStyles, formControlStyles, switchStyles, ...mod.map(mod => switchMod[mod]));
+  const styles = useS(switchStyles, ...mod.map(mod => switchMod[mod]));
 
   if (autoHide && !isControlPresented(name, state)) {
     return null;
   }
 
   return (
-    <div data-testid="field" className={s(styles, { field: true }, className)} title={rest.title}>
+    <Field data-testid="field" title={rest.title}>
       <div data-testid="switch-body" className={styles.switchBody}>
         <div data-testid="switch-control" className={s(styles, { switchControl: true, disabled: disabled, checked: checkboxState.checked })}>
           <div data-testid="switch-control-track" className={styles.switchControlTrack} />
@@ -91,15 +92,11 @@ export const Switch: SwitchType = observer(function Switch({
             />
           </div>
         </div>
-        <label htmlFor={id || value || name} data-testid="field-label" className={styles.fieldLabel}>
+        <FieldLabel htmlFor={id || value || name} data-testid="field-label" className={styles.fieldLabel}>
           {children}
-        </label>
+        </FieldLabel>
       </div>
-      {description && (
-        <div data-testid="field-description" className={styles.fieldDescription}>
-          {description}
-        </div>
-      )}
-    </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
   );
 });

webapp/packages/core-blocks/src/FormControls/Combobox.m.css

@@ -23,6 +23,15 @@
   padding-right: 24px !important;
 }
 
+.input {
+  font-size: 12px;
+
+  &.select {
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
 .menuButton {
   position: absolute;
   right: 0;