@snack-uikit/fields 0.22.2 → 0.23.1

package/dist/helperComponents/ButtonCopyValue/styles.module.css

@@ -4,7 +4,7 @@
   justify-content:center;
   margin:0;
   padding:0;
-  color:var(--sys-neutral-text-light, #868892);
+  color:var(--sys-neutral-text-light, #8b8e9b);
   background-color:transparent;
   border:none;
 }
@@ -28,20 +28,20 @@
 }
 .buttonCopyValue:hover{
   cursor:pointer;
-  color:var(--sys-neutral-text-support, #656771);
+  color:var(--sys-neutral-text-support, #6d707f);
 }
 .buttonCopyValue:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-neutral-text-support, #656771);
-  outline-color:var(--sys-available-complementary, #141415);
+  color:var(--sys-neutral-text-support, #6d707f);
+  outline-color:var(--sys-available-complementary, #15151b);
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
 .buttonCopyValue:active{
-  color:var(--sys-neutral-text-main, #33333b);
+  color:var(--sys-neutral-text-main, #33343f);
 }
 .buttonCopyValue[data-disabled]{
   cursor:not-allowed;
-  color:var(--sys-neutral-text-disabled, #b3b6bf);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }

package/dist/helperComponents/ButtonHideValue/ButtonHideValue.js

@@ -11,5 +11,5 @@ export const ButtonHideValue = forwardRef(({ size, onClick, hidden, disabled, ta
         event.stopPropagation();
         onClick(event);
     };
-    return (_jsx("button", { className: styles.buttonHideValue, "data-size": size, "data-disabled": disabled || undefined, disabled: disabled, onClick: handleClick, "data-test-id": 'button-hide-value', ref: ref, onKeyDown: onKeyDown, type: 'button', tabIndex: disabled ? -1 : tabIndex, children: hidden ? (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeClosedSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeClosedSVG, {})] })) : (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeSVG, {})] })) }));
+    return (_jsx("button", { className: styles.buttonHideValue, "data-size": size, "data-disabled": disabled || undefined, disabled: disabled, onClick: handleClick, "data-test-id": 'button-hide-value', ref: ref, onKeyDown: onKeyDown, type: 'button', tabIndex: disabled ? -1 : tabIndex, children: hidden ? (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeSVG, {})] })) : (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeClosedSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeClosedSVG, {})] })) }));
 });

package/dist/helperComponents/ButtonHideValue/styles.module.css

@@ -4,7 +4,7 @@
   justify-content:center;
   margin:0;
   padding:0;
-  color:var(--sys-neutral-text-light, #868892);
+  color:var(--sys-neutral-text-light, #8b8e9b);
   background-color:transparent;
   border:none;
 }
@@ -28,20 +28,20 @@
 }
 .buttonHideValue:hover{
   cursor:pointer;
-  color:var(--sys-neutral-text-support, #656771);
+  color:var(--sys-neutral-text-support, #6d707f);
 }
 .buttonHideValue:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-neutral-text-support, #656771);
-  outline-color:var(--sys-available-complementary, #141415);
+  color:var(--sys-neutral-text-support, #6d707f);
+  outline-color:var(--sys-available-complementary, #15151b);
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
 .buttonHideValue:active{
-  color:var(--sys-neutral-text-main, #33333b);
+  color:var(--sys-neutral-text-main, #33343f);
 }
 .buttonHideValue[data-disabled]{
   cursor:not-allowed;
-  color:var(--sys-neutral-text-disabled, #b3b6bf);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }

package/dist/helperComponents/FieldContainerPrivate/styles.module.css

@@ -7,8 +7,8 @@
   border-style:solid;
 }
 .container[data-validation=default]{
-  background-color:var(--sys-neutral-background1-level, #fdfdff);
-  border-color:var(--sys-neutral-decor-default, #dfe2ec);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .container[data-validation=default]:hover{
   background-color:var(--sys-neutral-background2-level, #ffffff);
@@ -51,7 +51,7 @@
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
   background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-yellow-accent-default, #fdca46);
+  border-color:var(--sys-yellow-accent-default, #ffc443);
   outline-color:var(--sys-yellow-decor-activated, #e5c878);
 }
 .container[data-validation=success]{
@@ -181,15 +181,15 @@
   cursor:default;
 }
 .container[data-readonly], .container[data-readonly]:hover{
-  background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
-  border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
 }
 .container[data-readonly]:focus-within, .container[data-readonly][data-focused]{
   outline-width:var(--border-state-focus-m-border-width, 3px);
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
-  background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
-  border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
   outline:none;
 }
 .container[data-disabled],
@@ -198,18 +198,18 @@
 .container[data-disabled] textarea,
 .container[data-disabled] span{
   cursor:not-allowed;
-  background-color:var(--sys-neutral-background, #f1f2f6);
+  background-color:var(--sys-neutral-background, #eeeff3);
 }
 .container[data-disabled], .container[data-disabled]:focus-within, .container[data-disabled][data-focused], .container[data-disabled]:hover{
-  background-color:var(--sys-neutral-background, #f1f2f6);
-  border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
   outline:none;
 }
 
 .prefix{
   display:inline-flex;
   flex-shrink:0;
-  color:var(--sys-neutral-text-disabled, #b3b6bf);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 
 .postfix{

package/dist/helperComponents/TextArea/styles.module.css

@@ -5,28 +5,28 @@
   max-width:100%;
   margin:0;
   padding:0;
-  color:var(--sys-neutral-text-main, #33333b);
+  color:var(--sys-neutral-text-main, #33343f);
   background-color:transparent;
   border:none;
   border-radius:0;
   outline:0;
 }
 .textarea::-moz-placeholder{
-  color:var(--sys-neutral-text-disabled, #b3b6bf);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 .textarea::placeholder{
-  color:var(--sys-neutral-text-disabled, #b3b6bf);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 .textarea::-webkit-scrollbar{
   width:0;
   max-width:0;
 }
 .textarea:-moz-read-only{
-  color:var(--sys-neutral-text-support, #656771);
+  color:var(--sys-neutral-text-support, #6d707f);
 }
 .textarea:read-only{
-  color:var(--sys-neutral-text-support, #656771);
+  color:var(--sys-neutral-text-support, #6d707f);
 }
 .textarea[disabled]{
-  color:var(--sys-neutral-text-disabled, #b3b6bf);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.22.2",
+  "version": "0.23.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,7 +41,7 @@
     "@snack-uikit/scroll": "0.6.0",
     "@snack-uikit/skeleton": "0.3.4",
     "@snack-uikit/slider": "0.1.14",
-    "@snack-uikit/tag": "0.9.5",
+    "@snack-uikit/tag": "0.9.6",
     "@snack-uikit/tooltip": "0.13.6",
     "@snack-uikit/truncate-string": "0.4.19",
     "@snack-uikit/utils": "3.3.0",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0c81fa6b2657f51768401ba7ce5015fe8d293805"
+  "gitHead": "680e16bb363296e1b4a0a35ce8efd2b4f23c4ee2"
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -47,6 +47,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'
@@ -101,6 +102,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -259,6 +261,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         hint={hint}
         disabled={disabled}
         readonly={readonly}
@@ -271,7 +274,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
         <Dropdown
           trigger='click'
           triggerClassName={styles.triggerClassName}
-          widthStrategy='gte'
+          widthStrategy='auto'
           {...(readonly || disabled
             ? { open: false }
             : {

package/src/components/FieldDecorator/FieldDecorator.tsx

@@ -32,6 +32,7 @@ export function FieldDecorator({
   labelTooltip,
   required,
   labelFor,
+  caption,
   length,
   hint,
   disabled,
@@ -55,6 +56,7 @@ export function FieldDecorator({
           label={label}
           labelTooltip={labelTooltip}
           labelFor={labelFor}
+          caption={caption}
           size={size}
         />
       )}

package/src/components/FieldDecorator/Header.tsx

@@ -10,6 +10,8 @@ import styles from './styles.module.scss';
 export type HeaderProps = {
   /** Лейбл */
   label?: string;
+  /** Подпись справа от лейбла */
+  caption?: string;
   /** Всплывающая подсказка лейбла */
   labelTooltip?: ReactNode;
   /** Аттрибут for */
@@ -28,6 +30,7 @@ export type HeaderProps = {
 export function Header({
   label = '',
   labelTooltip,
+  caption,
   labelFor,
   size,
   required = false,
@@ -41,7 +44,11 @@ export function Header({
           <label className={styles.label} htmlFor={labelFor} data-test-id='field-decorator__label'>
             <TruncateString text={label} />
           </label>
-          {required && <span data-test-id='field-decorator__required-sign'>*</span>}
+          {required && (
+            <span className={styles.required} data-test-id='field-decorator__required-sign'>
+              *
+            </span>
+          )}
           {labelTooltip && (
             <Tooltip
               tip={labelTooltip}
@@ -54,6 +61,8 @@ export function Header({
           )}
         </span>
       )}
+
+      {caption && <span className={styles.caption}>{caption}</span>}
     </span>
   );
 }

package/src/components/FieldDecorator/styles.module.scss

@@ -17,6 +17,11 @@ $hint-icon-container: (
   'm': $fields-hint-icon-container-m,
   'l': $fields-hint-icon-container-m,
 );
+$caption-typography: (
+  's': $sans-body-s,
+  'm': $sans-body-m,
+  'l': $sans-body-m,
+);
 
 .decorator {
   display: flex;
@@ -35,12 +40,20 @@ $hint-icon-container: (
 
 .header {
   display: flex;
+  gap: $dimension-050m;
   box-sizing: border-box;
-  color: simple-var($sys-neutral-text-support);
+  color: $sys-neutral-text-support;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       @include composite-var($header-typography, $size);
+
+      .caption {
+        @include composite-var($caption-typography, $size);
+
+        margin-left: auto;
+        color: $sys-neutral-text-light;
+      }
     }
   }
 }
@@ -50,10 +63,16 @@ $hint-icon-container: (
 
   display: inline-flex;
   align-items: center;
+  color: $sys-neutral-text-light;
 }
 
 .label {
   display: grid;
+  color: $sys-neutral-text-support;
+}
+
+.required {
+  color: $sys-neutral-text-support;
 }
 
 .footer {
@@ -100,26 +119,26 @@ $hint-icon-container: (
   word-break: break-word;
 
   &[data-validation='default'] {
-    color: simple-var($sys-neutral-text-light);
+    color: $sys-neutral-text-light;
   }
 
   &[data-validation='error'] {
-    color: simple-var($sys-red-text-main);
+    color: $sys-red-text-main;
   }
 
   &[data-validation='warning'] {
-    color: simple-var($sys-yellow-text-main);
+    color: $sys-yellow-text-main;
   }
 
   &[data-validation='success'] {
-    color: simple-var($sys-green-text-main);
+    color: $sys-green-text-main;
   }
 }
 
 .icon {
   flex-shrink: 0;
   box-sizing: content-box;
-  color: simple-var($sys-neutral-text-light);
+  color: $sys-neutral-text-light;
 }
 
 .hintIcon {
@@ -127,39 +146,39 @@ $hint-icon-container: (
   box-sizing: content-box;
 
   &[data-validation='default'] {
-    color: simple-var($sys-neutral-text-light);
+    color: $sys-neutral-accent-default;
   }
 
   &[data-validation='error'] {
-    color: simple-var($sys-red-accent-default);
+    color: $sys-red-accent-default;
   }
 
   &[data-validation='warning'] {
-    color: simple-var($sys-yellow-accent-default);
+    color: $sys-yellow-accent-default;
   }
 
   &[data-validation='success'] {
-    color: simple-var($sys-green-accent-default);
+    color: $sys-green-accent-default;
   }
 }
 
 .counterLimit {
   > span {
     &[data-validation='default'] {
-      color: simple-var($sys-neutral-text-light);
+      color: $sys-neutral-text-light;
     }
 
     &[data-limit-exceeded],
     &[data-validation='error'] {
-      color: simple-var($sys-red-text-light);
+      color: $sys-red-text-light;
     }
 
     &[data-validation='warning'] {
-      color: simple-var($sys-yellow-text-light);
+      color: $sys-yellow-text-light;
     }
 
     &[data-validation='success'] {
-      color: simple-var($sys-green-text-light);
+      color: $sys-green-text-light;
     }
   }
 }
@@ -167,18 +186,18 @@ $hint-icon-container: (
 .counterCurrentValue {
   &[data-limit-exceeded] {
     &[data-validation='default'] {
-      color: simple-var($sys-neutral-text-main);
+      color: $sys-neutral-text-main;
     }
     &[data-validation='error'] {
-      color: simple-var($sys-red-text-main);
+      color: $sys-red-text-main;
     }
 
     &[data-validation='warning'] {
-      color: simple-var($sys-yellow-text-main);
+      color: $sys-yellow-text-main;
     }
 
     &[data-validation='success'] {
-      color: simple-var($sys-green-text-light);
+      color: $sys-green-text-light;
     }
   }
 }
@@ -188,4 +207,4 @@ $hint-icon-container: (
   display: flex;
   align-items: center;
   height: 100%;
-}
+}

package/src/components/FieldDecorator/utils.ts

@@ -8,6 +8,7 @@ export function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps
   labelTooltip,
   labelTooltipPlacement,
   labelFor,
+  caption,
   hint,
   disabled,
   showHintIcon,
@@ -23,6 +24,7 @@ export function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps
     labelTooltip,
     labelTooltipPlacement,
     labelFor,
+    caption,
     hint,
     disabled,
     showHintIcon,

package/src/components/FieldSecure/FieldSecure.tsx

@@ -28,6 +28,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'size'
   | 'validationState'
@@ -76,6 +77,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       size = SIZE.S,
       validationState = VALIDATION_STATE.Default,
@@ -186,6 +188,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         length={maxLength ? { max: maxLength, current: value.length } : undefined}
         hint={hint}
         disabled={disabled}

package/src/components/FieldSelect/types.ts

@@ -57,6 +57,7 @@ export type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'

package/src/components/FieldSlider/FieldSlider.tsx

@@ -29,7 +29,15 @@ type SliderProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonl
 
 type WrapperProps = Pick<
   FieldDecoratorProps,
-  'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'labelTooltipPlacement'
+  | 'className'
+  | 'label'
+  | 'labelTooltip'
+  | 'required'
+  | 'caption'
+  | 'hint'
+  | 'showHintIcon'
+  | 'size'
+  | 'labelTooltipPlacement'
 >;
 
 type FieldSliderOwnProps = {
@@ -82,6 +90,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       labelTooltip,
       labelTooltipPlacement,
       required,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -251,6 +260,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
         labelFor={id}
         disabled={disabled}
         required={required}
+        caption={caption}
         hint={hint}
         showHintIcon={showHintIcon}
         readonly={readonly}

package/src/components/FieldStepper/FieldStepper.tsx

@@ -35,6 +35,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'
@@ -90,6 +91,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -215,6 +217,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         hint={hint}
         disabled={disabled}
         readonly={readonly}

package/src/components/FieldText/FieldText.tsx

@@ -19,6 +19,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'showHintIcon'
   | 'size'
@@ -64,6 +65,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       showHintIcon,
       size = SIZE.S,
@@ -112,6 +114,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         length={maxLength ? { max: maxLength, current: value.length } : undefined}
         hint={hint}
         disabled={disabled}

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -21,6 +21,7 @@ type WrapperProps = Pick<
   | 'label'
   | 'labelTooltip'
   | 'required'
+  | 'caption'
   | 'hint'
   | 'size'
   | 'validationState'
@@ -76,6 +77,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       labelTooltip,
       labelTooltipPlacement,
       required = false,
+      caption,
       hint,
       error,
       size = SIZE.S,
@@ -124,6 +126,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
         labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
         required={required}
+        caption={caption}
         length={maxLength ? { max: maxLength, current: value.length } : undefined}
         hint={hint}
         disabled={disabled}

package/src/helperComponents/ButtonHideValue/ButtonHideValue.tsx

@@ -40,13 +40,13 @@ export const ButtonHideValue = forwardRef<HTMLButtonElement, ButtonHideValueProp
       >
         {hidden ? (
           <>
-            {size === BUTTON_SIZE.S && <EyeClosedSVG size={16} />}
-            {size === BUTTON_SIZE.M && <EyeClosedSVG />}
+            {size === BUTTON_SIZE.S && <EyeSVG size={16} />}
+            {size === BUTTON_SIZE.M && <EyeSVG />}
           </>
         ) : (
           <>
-            {size === BUTTON_SIZE.S && <EyeSVG size={16} />}
-            {size === BUTTON_SIZE.M && <EyeSVG />}
+            {size === BUTTON_SIZE.S && <EyeClosedSVG size={16} />}
+            {size === BUTTON_SIZE.M && <EyeClosedSVG />}
           </>
         )}
       </button>