Cb 3773 form controls

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

@@ -6,10 +6,10 @@
  * you may not use this file except in compliance with the License.
  */
 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';
@@ -21,20 +21,20 @@ export const FieldCheckbox: CheckboxType = function FieldCheckbox({
 }: 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)}>
+    <Field {...layoutProps} className={s(styles, { field: true }, className)}>
       <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={styles.checkbox} />
       {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={styles.fieldLabel}>
           {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,19 +65,19 @@ 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}>
-      <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} />
-          <div data-testid="switch-control-underlay" className={styles.switchControlUnderlay}>
-            <div data-testid="switch-control-thumb" className={styles.switchControlThumb} />
+    <Field className={className} title={rest.title}>
+      <div className={styles.switchBody}>
+        <div className={s(styles, { switchControl: true, disabled: disabled, checked: checkboxState.checked })}>
+          <div className={styles.switchControlTrack} />
+          <div className={styles.switchControlUnderlay}>
+            <div className={styles.switchControlThumb} />
             <input
               {...rest}
               type="checkbox"
@@ -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} 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

@@ -12,15 +12,17 @@
   margin: 0;
 }
 
-.fieldLabel {
-  display: block;
-  padding-bottom: 10px;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
+.input {
+  padding-right: 24px !important;
 }
 
 .input {
-  padding-right: 24px !important;
+  font-size: 12px;
+
+  &.select {
+    cursor: pointer;
+    user-select: none;
+  }
 }
 
 .menuButton {

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

@@ -11,7 +11,6 @@ import { Menu, MenuButton, MenuItem, useMenuState } from 'reakit/Menu';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
-import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { getComputed } from '../getComputed';
 import { Icon } from '../Icon';
 import { IconOrImage } from '../IconOrImage';
@@ -20,8 +19,10 @@ import { useTranslate } from '../localization/useTranslate';
 import { s } from '../s';
 import { useS } from '../useS';
 import comboboxStyles from './Combobox.m.css';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldLabel } from './FieldLabel';
 import { FormContext } from './FormContext';
-import formControlStyles from './FormControl.m.css';
 
 type BaseProps<TKey, TValue> = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onSelect' | 'name' | 'value' | 'defaultValue'> &
   ILayoutSizeProps & {
@@ -93,7 +94,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
   const context = useContext(FormContext);
   const menuRef = useRef<HTMLDivElement>(null);
   const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
-  const styles = useS(elementsSizeStyles, formControlStyles, comboboxStyles);
+  const styles = useS(comboboxStyles);
 
   const menu = useMenuState({
     placement: 'bottom-end',
@@ -255,12 +256,12 @@ export const Combobox: ComboboxType = observer(function Combobox({
   }
 
   return (
-    <div data-testid="field" className={s(styles, { field: true, inline, ...layoutProps }, className)}>
+    <Field {...layoutProps} className={s(styles, { field: true, inline }, className)}>
       {children && (
-        <div title={title} data-testid="field-label" className={styles.fieldLabel}>
+        <FieldLabel title={title} className={styles.fieldLabel}>
           {children}
           {rest.required && ' *'}
-        </div>
+        </FieldLabel>
       )}
       <div data-testid="input-box" className={styles.inputBox}>
         {(icon || loading) && (
@@ -322,20 +323,14 @@ export const Combobox: ComboboxType = observer(function Combobox({
                       {icon && typeof icon === 'string' ? <IconOrImage icon={icon} className={styles.iconOrImage} /> : icon}
                     </div>
                   )}
-                  <div data-testid="item-value" className={styles.itemValue}>
-                    {valueSelector(item)}
-                  </div>
+                  <div>{valueSelector(item)}</div>
                 </MenuItem>
               );
             })
           )}
         </Menu>
       </div>
-      {description && (
-        <div data-testid="field-description" className={styles.fieldDescription}>
-          {description}
-        </div>
-      )}
-    </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
   );
 });

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

@@ -0,0 +1,3 @@
+.field {
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,25 @@
+import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+import { 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 fieldStyles from './Field.m.css';
+
+type Props = ILayoutSizeProps &
+  HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+  };
+export const Field: React.FC<PropsWithChildren<Props>> = observer(function Field({ children, className, ...rest }) {
+  const styles = useS(fieldStyles, elementsSizeStyles);
+
+  const layoutProps = getLayoutProps(rest);
+
+  return (
+    <div {...rest} className={s(styles, { ...layoutProps, field: true }, className)}>
+      {children}
+    </div>
+  );
+});

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

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

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

@@ -0,0 +1,16 @@
+import { observer } from 'mobx-react-lite';
+import type { PropsWithChildren } from 'react';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldDescriptionStyles from './FieldDescription.m.css';
+
+interface Props {
+  className?: string;
+  invalid?: boolean;
+}
+export const FieldDescription: React.FC<PropsWithChildren<Props>> = observer(function FieldDescription({ children, className, invalid }) {
+  const styles = useS(fieldDescriptionStyles);
+
+  return <div className={s(styles, { fieldDescription: true, invalid }, className)}>{children}</div>;
+});

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

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

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

@@ -0,0 +1,27 @@
+import { observer } from 'mobx-react-lite';
+import type { LabelHTMLAttributes, PropsWithChildren } from 'react';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldLabelStyles from './FieldLabel.m.css';
+
+type Props = LabelHTMLAttributes<HTMLLabelElement> & {
+  className?: string;
+  title?: string;
+  required?: boolean;
+};
+export const FieldLabel: React.FC<PropsWithChildren<Props>> = observer(function FieldLabel({
+  children,
+  className,
+  required,
+  ...rest
+}) {
+  const styles = useS(fieldLabelStyles);
+
+  return (
+    <label {...rest} className={s(styles, { fieldLabel: true }, className)}>
+      {children}
+      {required && ' *'}
+    </label>
+  );
+});

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

@@ -0,0 +1,46 @@
+.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;
+  }
+}
+
+.toggleMode {
+  composes: theme-background-primary theme-text-on-primary from global;
+  cursor: pointer;
+}