@cloud-ru/ds-fields 2.2.7-preview-d90ac2be.0 → 2.3.0

package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css

@@ -28,7 +28,7 @@
   inset:0;
   display:none;
   border-radius:inherit;
-  outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
   outline-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
 }
 
@@ -45,10 +45,10 @@
   background:none;
 }
 .buttonContainer[data-size=s]{
-  min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
   border-radius:var(--sn-field-anatomy-size-s-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
-  padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
-  padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
+  padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 .buttonContainer[data-size=s][data-variant=before]{
   border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
@@ -57,16 +57,16 @@
   border-radius:0 var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0;
 }
 .buttonContainer[data-size=s] .elementWrapper{
-  gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .buttonContainer[data-size=s] .elementWrapper svg{
-  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
 }
 .buttonContainer[data-size=m]{
-  min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
-  padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
-  padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
+  padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
+  padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
   border-radius:var(--sn-field-anatomy-size-m-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
 }
 .buttonContainer[data-size=m][data-variant=before]{
@@ -76,16 +76,16 @@
   border-radius:0 var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0;
 }
 .buttonContainer[data-size=m] .elementWrapper{
-  gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .buttonContainer[data-size=m] .elementWrapper svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .buttonContainer[data-size=l]{
-  min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
-  padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
-  padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
+  padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
+  padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
   border-radius:var(--sn-field-anatomy-size-l-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
 }
 .buttonContainer[data-size=l][data-variant=before]{
@@ -95,11 +95,11 @@
   border-radius:0 var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0;
 }
 .buttonContainer[data-size=l] .elementWrapper{
-  gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .buttonContainer[data-size=l] .elementWrapper svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer{
   position:absolute;
@@ -115,7 +115,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -140,7 +140,7 @@
     background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
   }
   .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
-    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
   }
   .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
     background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -167,7 +167,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));

package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.d.ts

@@ -25,6 +25,8 @@ export type FieldShellProps = WithSupportProps<{
     header?: ReactNode;
     /** Ряд элементов под контентом (действия, счётчик) */
     footer?: ReactNode;
+    /** Многострочное поле с ручным изменением высоты — поднимает минимальную высоту контейнера */
+    resizable?: boolean;
     /** CSS-класс оболочки (fieldWrapper) */
     className?: string;
     /** Inline-стиль оболочки (например, CSS-переменные высоты) */
@@ -40,4 +42,4 @@ export type FieldShellProps = WithSupportProps<{
  * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
  * тот же внешний вид, но не подходит нативный `<textarea>`.
  */
-export declare function FieldShell({ children, size, validationState, disabled, readonly: readOnly, background, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }: FieldShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldShell({ children, size, validationState, disabled, readonly: readOnly, background, focusVisible, hover, header, footer, resizable, className, style, onMouseEnter, onMouseLeave, ...rest }: FieldShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.js

@@ -11,6 +11,6 @@ import styles from './styles.module.css';
  * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
  * тот же внешний вид, но не подходит нативный `<textarea>`.
  */
-export function FieldShell({ children, size = SIZE.M, validationState = VALIDATION_STATE.Default, disabled, readonly: readOnly, background = true, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }) {
-    return (_jsxs("div", { ...extractSupportProps(rest), className: cn(fieldStyles.fieldWrapper, className), "data-size": size, "data-validation-state": validationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({ validationState, disabled, readonly: readOnly, hover, focusVisible }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), header && _jsx("div", { className: styles.header, children: header }), _jsx("div", { className: fieldStyles.fieldContainer, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] }));
+export function FieldShell({ children, size = SIZE.M, validationState = VALIDATION_STATE.Default, disabled, readonly: readOnly, background = true, focusVisible, hover, header, footer, resizable, className, style, onMouseEnter, onMouseLeave, ...rest }) {
+    return (_jsxs("div", { ...extractSupportProps(rest), className: cn(fieldStyles.fieldWrapper, className), "data-size": size, "data-validation-state": validationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, "data-resizable": resizable || undefined, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({ validationState, disabled, readonly: readOnly, hover, focusVisible }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), header && _jsx("div", { className: styles.header, children: header }), _jsx("div", { className: fieldStyles.fieldContainer, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] }));
 }