Merge branch 'main' into timofeyevvv/readme_corrections_from_loc_team

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [6.38.0](https://github.com/gravity-ui/uikit/compare/v6.37.0...v6.38.0) (2024-12-06)
+
+
+### Features
+
+* **User:** add html titles for elements ([#1982](https://github.com/gravity-ui/uikit/issues/1982)) ([105d43b](https://github.com/gravity-ui/uikit/commit/105d43b0d511e516675e66877fb31c94bf583f91))
+
+
+### Bug Fixes
+
+* **PinInput:** remove height glitch in Safari ([#1938](https://github.com/gravity-ui/uikit/issues/1938)) ([d6cb1cf](https://github.com/gravity-ui/uikit/commit/d6cb1cfaec89a806b6948f92aa2c12669c110fb8))
+* **TextInput:** share font styles between error and note blocks in OuterAdditionalContent ([#1970](https://github.com/gravity-ui/uikit/issues/1970)) ([55737b5](https://github.com/gravity-ui/uikit/commit/55737b5a66dbd975ecbbf84dac95592cd65e3b1a))
+
 ## [6.37.0](https://github.com/gravity-ui/uikit/compare/v6.36.0...v6.37.0) (2024-11-27)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.37.0",
+    "version": "6.38.0",
     "description": "Gravity UI base styling and components",
     "keywords": [
         "component",

src/components/Sheet/SheetContent.tsx

@@ -16,7 +16,7 @@ const ACCELERATION_Y_MAX = 0.08;
 const ACCELERATION_Y_MIN = -0.02;
 // 90% from viewport
 const MAX_CONTENT_HEIGHT_FROM_VIEWPORT_COEFFICIENT = 0.9;
-const WINDOW_RESIZE_TIMEOUT = 25;
+const WINDOW_RESIZE_TIMEOUT = 50;
 
 let hashHistory: string[] = [];
 
@@ -123,21 +123,14 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     render() {
         const {content, contentClassName, swipeAreaClassName, hideTopBar, title} = this.props;
 
-        const {
-            deltaY,
-            swipeAreaTouched,
-            contentTouched,
-            veilTouched,
-            isAnimating,
-            inWindowResizeScope,
-        } = this.state;
+        const {deltaY, swipeAreaTouched, contentTouched, veilTouched, isAnimating} = this.state;
 
         const veilTransitionMod = {
             'with-transition': !deltaY || veilTouched,
         };
 
         const sheetTransitionMod = {
-            'with-transition': !inWindowResizeScope && veilTransitionMod['with-transition'],
+            'with-transition': veilTransitionMod['with-transition'],
         };
 
         const contentMod = {
@@ -416,6 +409,10 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     };
 
     private onResizeWindow = () => {
+        if (this.state.isAnimating) {
+            return;
+        }
+
         this.setState({inWindowResizeScope: true});
 
         if (this.resizeWindowTimer) {

src/components/User/User.tsx

@@ -3,18 +3,13 @@ import React from 'react';
 import {Avatar} from '../Avatar';
 import {block} from '../utils/cn';
 
-import {COMPACT_SIZES, DEFAULT_SIZE} from './constants';
+import {COMPACT_SIZES, DEFAULT_SIZE, UserQa} from './constants';
 import type {UserProps} from './types';
 
 import './User.scss';
 
 const b = block('user');
 
-export const UserQa = {
-    NAME: 'user-name',
-    DESCRIPTION: 'user-description',
-};
-
 export const User = React.forwardRef<HTMLDivElement, UserProps>(
     (
         {
@@ -30,7 +25,10 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
         },
         ref,
     ) => {
-        const showDescription = Boolean(description && !COMPACT_SIZES.includes(size));
+        const showDescription = Boolean(description && !COMPACT_SIZES.has(size));
+
+        const nameTitle = typeof name === 'string' ? name : undefined;
+        const descriptionTitle = typeof description === 'string' ? description : undefined;
 
         return (
             <div
@@ -43,18 +41,26 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
             >
                 {avatar ? (
                     <div className={b('avatar')}>
-                        {React.isValidElement(avatar) ? avatar : <Avatar {...avatar} size={size} />}
+                        {React.isValidElement(avatar) ? (
+                            avatar
+                        ) : (
+                            <Avatar {...avatar} size={size} title={avatar.title || nameTitle} />
+                        )}
                     </div>
                 ) : null}
                 {name || showDescription ? (
                     <div className={b('info')}>
                         {name ? (
-                            <span className={b('name')} data-qa={UserQa.NAME}>
+                            <span className={b('name')} title={nameTitle} data-qa={UserQa.NAME}>
                                 {name}
                             </span>
                         ) : null}
                         {showDescription ? (
-                            <span className={b('description')} data-qa={UserQa.DESCRIPTION}>
+                            <span
+                                className={b('description')}
+                                title={descriptionTitle}
+                                data-qa={UserQa.DESCRIPTION}
+                            >
                                 {description}
                             </span>
                         ) : null}

src/components/User/constants.ts

@@ -1,4 +1,9 @@
 import type {UserSize} from './types';
 
-export const COMPACT_SIZES: UserSize[] = ['xs', '2xs'];
+export const COMPACT_SIZES: Set<UserSize> = new Set(['xs', '2xs']);
 export const DEFAULT_SIZE: UserSize = 'm';
+
+export const UserQa = {
+    NAME: 'user-name',
+    DESCRIPTION: 'user-description',
+};

src/components/User/index.ts

@@ -1,2 +1,3 @@
 export type {UserSize, UserProps} from './types';
+export {UserQa} from './constants';
 export {User} from './User';

src/components/controls/common/OuterAdditionalContent/OuterAdditionalContent.scss

@@ -10,12 +10,11 @@ $block: '.#{variables.$ns}outer-additional-content';
 
     &__note,
     &__error {
+        @include mixins.text-body-1();
         margin-block-start: 2px;
     }
 
     &__error {
-        @include mixins.text-body-1();
-
         color: var(--g-color-text-danger);
 
         &:not(:last-child) {