Cb 3773 form controls

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

@@ -0,0 +1,49 @@
+.filterContainer {
+  position: relative;
+  min-width: 24px;
+  min-height: 24px;
+}
+.inputField {
+  display: none;
+  width: 300px;
+  &.max {
+    width: 100%;
+  }
+  &.toggled {
+    display: block;
+  }
+
+  & input {
+    padding-right: 40px !important;
+  }
+
+}
+.iconButton {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  cursor: auto;
+
+  &.toggled {
+    right: 4px;
+    top: 4px;
+  }
+  &.cross {
+    width: 16px;
+    height: 16px;
+    top: 8px;
+    right: 8px;
+  }
+}
+
+.innerInputStyle {
+}
+
+.toggleMode {
+  composes: theme-background-primary theme-text-on-primary from global;
+  cursor: pointer;
+}

webapp/packages/core-blocks/src/FormControls/Filter.tsx

@@ -7,67 +7,16 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useState } from 'react';
-import styled, { css, use } from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { IconButton } from '../IconButton';
+import { s } from '../s';
 import { useFocus } from '../useFocus';
-import { useStyles } from '../useStyles';
+import { useS } from '../useS';
+import filterStyle from './Filter.m.css';
 import { InputField } from './InputField';
 
-const filterStyles = css`
-  filter-container {
-    position: relative;
-    min-width: 24px;
-    min-height: 24px;
-  }
-  InputField {
-    display: none;
-    width: 300px;
-    &[|max] {
-      width: 100%;
-    }
-    &[|toggled] {
-      display: block;
-    }
-  }
-  IconButton {
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin: 0;
-    width: 24px;
-    height: 24px;
-    border-radius: 2px;
-    cursor: auto;
-
-    &[|toggled] {
-      right: 4px;
-      top: 4px;
-    }
-    &[name='cross'] {
-      width: 16px;
-      height: 16px;
-      top: 8px;
-      right: 8px;
-    }
-  }
-`;
-
-const toggleModeButtonStyle = css`
-  IconButton {
-    composes: theme-background-primary theme-text-on-primary from global;
-    cursor: pointer;
-  }
-`;
-
-const innerInputStyle = css`
-  input {
-    padding-right: 40px !important;
-  }
-`;
-
 interface BaseProps {
   toggleMode?: boolean;
   placeholder?: string;
@@ -103,13 +52,12 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
   disabled,
   max,
   className,
-  style,
   onFilter,
   onToggle,
   onKeyDown,
   onClick,
 }) {
-  const styles = useStyles(filterStyles, style, toggleMode && toggleModeButtonStyle);
+  const styles = useS(filterStyle);
   const [inputRef, ref] = useFocus<HTMLInputElement>({});
   const [toggled, setToggled] = useState(!toggleMode);
 
@@ -156,24 +104,28 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
     value = state[name];
   }
 
-  return styled(styles)(
-    <filter-container className={className} onClick={onClick}>
+  return (
+    <div className={s(styles, { filterContainer: true })} onClick={onClick}>
       <InputField
+        className={s(styles, { inputField: true, max, toggled }, className)}
         ref={inputRef}
-        style={[innerInputStyle, style]}
         placeholder={placeholder}
         disabled={disabled}
         name={name}
         value={value}
         onChange={filter}
         onKeyDown={onKeyDown}
-        {...use({ toggled, max })}
       />
       {String(value) ? (
-        <IconButton name="cross" disabled={disabled} onClick={() => filter('', name)} />
+        <IconButton
+          className={s(styles, { iconButton: true, cross: true, toggleMode })}
+          name="cross"
+          disabled={disabled}
+          onClick={() => filter('', name)}
+        />
       ) : (
-        <IconButton name="search" disabled={disabled} onClick={toggle} {...use({ toggled })} />
+        <IconButton className={s(styles, { iconButton: true, toggled, toggleMode })} name="search" disabled={disabled} onClick={toggle} />
       )}
-    </filter-container>,
+    </div>
   );
 });

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

@@ -20,17 +20,14 @@
 
 .fieldDescription {
   composes: theme-typography--caption from global;
+  color: var(--theme-text-hint-on-background);
   box-sizing: border-box;
   padding-top: 4px;
   min-height: 24px;
-}
-
-.valid {
-  composes: theme-text-text-hint-on-light from global;
-}
 
-.invalid {
-  composes: theme-text-negative from global;
+  &.invalid {
+    color: var(--theme-negative);
+  }
 }
 
 .input,

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

@@ -0,0 +1,15 @@
+.fieldLabel {
+  composes: theme-typography--body1 from global;
+  font-weight: 500;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: initial;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.fieldDescription {
+  padding: 0;
+}

webapp/packages/core-blocks/src/FormControls/FormFieldDescription.tsx

@@ -5,56 +5,31 @@
  * 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 { observer } from 'mobx-react-lite';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { s } from '../s';
 import { useS } from '../useS';
-import { useStyles } from '../useStyles';
-import { baseFormControlStyles, baseValidFormControlStyles } from './baseFormControlStyles';
-
-const style = css`
-  field-label {
-    composes: theme-typography--body1 from global;
-    font-weight: 500;
-    margin-bottom: 10px;
-    box-sizing: border-box;
-    overflow: hidden;
-    white-space: initial;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-  field-description {
-    padding: 0;
-  }
-`;
+import formControlStyles from './FormControl.m.css';
+import style from './FormFieldDescription.m.css';
 
 interface Props extends ILayoutSizeProps {
   label?: string;
   title?: string;
   className?: string;
 }
 
-export const FormFieldDescription: React.FC<React.PropsWithChildren<Props>> = function FormFieldDescription({
-  label,
-  title,
-  children,
-  className,
-  ...rest
-}) {
+export const FormFieldDescription: React.FC<React.PropsWithChildren<Props>> = observer(function FormFieldDescription({ label, title, children, className, ...rest }) {
+  const styles = useS(formControlStyles, elementsSizeStyles, style);
   const layoutProps = getLayoutProps(rest);
   rest = filterLayoutFakeProps(rest);
-  const styles = useStyles(baseFormControlStyles, baseValidFormControlStyles, style);
-  const sizeStyles = useS(elementsSizeStyles);
 
-  return styled(styles)(
-    <field title={title} className={s(sizeStyles, { ...layoutProps }, className)} {...rest}>
-      {label && <field-label as="label">{label}</field-label>}
-      <field-description>{children}</field-description>
-    </field>,
+  return (
+    <div title={title} className={s(styles, { ...layoutProps, field: true }, className)} {...rest}>
+      {label && <label className={s(styles, { fieldLabel: true })}>{label}</label>}
+      <div className={s(styles, { fieldDescription: true })}>{children}</div>
+    </div>
   );
-};
+});

webapp/packages/core-blocks/src/FormControls/InputField.tsx

@@ -7,7 +7,6 @@
  */
 import { observer } from 'mobx-react-lite';
 import React, { forwardRef, useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
-import styled, { use } from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { isNotNullDefined } from '@cloudbeaver/core-utils';
@@ -163,7 +162,7 @@ export const InputField: InputFieldType = observer(
       return null;
     }
 
-    return styled(propStyles)(
+    return (
       <div data-testid="field" className={s(styles, { ...layoutProps, field: true }, className)}>
         <div data-testid="field-label" title={labelTooltip || rest.title} className={styles.fieldLabel}>
           {children}
@@ -180,7 +179,6 @@ export const InputField: InputFieldType = observer(
             onChange={handleChange}
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
-            {...use({ mod })}
             required={required}
           />
           {loading && (
@@ -201,11 +199,11 @@ export const InputField: InputFieldType = observer(
           {icon && <div data-testid="icon-container" className={styles.customIconContainer}>{icon}</div>}
         </div>
         {(description || passwordType) && (
-          <div data-testid="field-description" className={s(styles, { fieldDescription: true, valid: !error, invalid: error })}>
+          <div data-testid="field-description" className={s(styles, { fieldDescription: true, invalid: error })}>
             {description}
           </div>
         )}
-      </div>,
+      </div>
     );
   }),
 );