fix(plasma-*): Fix padding on textarea

packages/plasma-b2c/src/components/TextArea/TextArea.config.ts

@@ -33,6 +33,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -72,6 +74,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-s-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-s-font-style);
@@ -111,6 +115,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-m-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-m-font-style);
@@ -150,6 +156,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.5625rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style);

packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx

@@ -40,7 +40,6 @@ const meta: Meta<TextAreaProps> = {
         ...disableProps([
             'helperBlock',
             '$isFocused',
-            'label',
             'contentRight',
             'autoComplete',
             'autoFocus',

packages/plasma-new-hope/src/components/TextArea/TextArea.tokens.ts

@@ -117,6 +117,10 @@ export const tokens = {
     labelInnerLetterSpacing: '--plasma-textarea-label-inner-letter-spacing',
     /** Высота строки для элемента label, когда он внутри и уменьшен */
     labelInnerLineHeight: '--plasma-textarea-label-inner-line-height',
+    /** Отступ сверху для элемента textarea при фокусе */
+    labelInnerTop: '--plasma-textarea-label-inner-top',
+    /** Отступ между Label и TextArea */
+    labelInnerMarginBottom: '--plasma-textarea-label-inner-margin-bottom',
     /** Шрифт для элемента textarea */
     inputFontFamily: '--plasma-textarea-input-font-family',
     /** Размер шрифта для элемента textarea */

packages/plasma-new-hope/src/components/TextArea/TextArea.tsx

@@ -52,7 +52,7 @@ const fallbackStatusMap = {
 
 // TODO: Перенести этот метод в файл applyDynamicLabel.ts
 export const getDynamicLabelClasses = (props: TextAreaProps, focused: boolean) => {
-    const { readOnly, label, labelPlacement, autoResize, rows, value } = props;
+    const { readOnly, label, labelPlacement, autoResize, rows, value, size } = props;
 
     // Добавить класс отвечающий за изменение цвета плейсхолдера при фокусе
     const withFocusedOuterUpPlaceholder =
@@ -64,6 +64,7 @@ export const getDynamicLabelClasses = (props: TextAreaProps, focused: boolean) =
         label &&
         !autoResize &&
         !rows &&
+        size !== 'xs' &&
         ((!readOnly && (value || focused)) || (readOnly && value))
             ? innerPlaceholderUp
             : undefined;
@@ -72,7 +73,8 @@ export const getDynamicLabelClasses = (props: TextAreaProps, focused: boolean) =
     const withHidePlaceholder =
         (value && !label) ||
         (labelPlacement === 'inner' && ((focused && !readOnly) || value) && label && (rows || autoResize)) ||
-        (labelPlacement === 'outer' && value)
+        (labelPlacement === 'outer' && value) ||
+        (labelPlacement === 'inner' && size === 'xs' && value)
             ? hidePlaceHolder
             : undefined;
 
@@ -120,7 +122,7 @@ export const textAreaRoot = (Root: RootProps<HTMLTextAreaElement, TextAreaProps>
         const overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
         const textareaHelperId = id ? `${id}-helper` : undefined;
         const applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
-        const placeLabel = labelPlacement === 'inner' && label ? label : placeholder;
+        const placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
 
         useResizeObserver(outerRef, (currentElement) => {
             const { width: inlineWidth, height: inlineHeight } = currentElement.style;
@@ -153,7 +155,15 @@ export const textAreaRoot = (Root: RootProps<HTMLTextAreaElement, TextAreaProps>
         );
 
         const dynamicLabelClasses = getDynamicLabelClasses(
-            { readOnly, label, labelPlacement, autoResize, rows, value: value || uncontrolledValue || defaultValue },
+            {
+                size,
+                readOnly,
+                label,
+                labelPlacement,
+                autoResize,
+                rows,
+                value: value || uncontrolledValue || defaultValue,
+            },
             focused,
         );
 

packages/plasma-new-hope/src/components/TextArea/mixins/applyDynamicLabel.ts

@@ -12,11 +12,13 @@ const {
 export const applyDynamicLabel = `
     .${String(innerPlaceholderUp)} {
         .${String(styledTextArea)} {
-            height: calc(var(--plasma_private-textarea-input-actual-height) - 1rem);
+            height: calc(var(--plasma_private-textarea-input-actual-height) - var(${tokens.labelInnerTop}));
         }
 
         .${String(styledTextAreaWrapper)} {
-            padding-top: calc(var(${tokens.inputPaddingTop}) + 1rem);
+            padding-top: calc(calc(var(${tokens.labelInnerTop}) + var(${tokens.labelInnerFontSize})) + var(${
+    tokens.labelInnerMarginBottom
+}));
         }
 
         .${String(styledPlaceholder)} {
@@ -26,6 +28,7 @@ export const applyDynamicLabel = `
             font-weight: var(${tokens.labelInnerFontWeight});
             letter-spacing: var(${tokens.labelInnerLetterSpacing});
             line-height: var(${tokens.labelInnerLineHeight});
+            top: var(${tokens.labelInnerTop});
         }
     }
 

packages/plasma-new-hope/src/examples/plasma_b2c/components/TextArea/TextArea.config.ts

@@ -35,6 +35,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -74,6 +76,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-s-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-s-font-style);
@@ -113,6 +117,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-m-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-m-font-style);
@@ -152,6 +158,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.5625rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style);

packages/plasma-new-hope/src/examples/plasma_web/components/TextArea/TextArea.config.ts

@@ -15,7 +15,7 @@ export const config = {
                 ${textAreaTokens.inputMinHeight}: 0.625rem;
                 ${textAreaTokens.borderRadius}: 0.5rem;
                 ${textAreaTokens.borderRadiusWithHelpers}: 0.5rem;
-                ${textAreaTokens.inputPaddingTop}: 0.563rem;
+                ${textAreaTokens.inputPaddingTop}: 0.5625rem;
                 ${textAreaTokens.inputPaddingRight}: 0.625rem;
                 ${textAreaTokens.inputPaddingRightWithRightContent}: 2.125rem;
                 ${textAreaTokens.inputPaddingBottom}: 0.563rem;
@@ -36,6 +36,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -55,7 +57,7 @@ export const config = {
                 ${textAreaTokens.inputMinHeight}: 0.625rem;
                 ${textAreaTokens.borderRadius}: 0.625rem;
                 ${textAreaTokens.borderRadiusWithHelpers}: 0.625rem;
-                ${textAreaTokens.inputPaddingTop}: 0.688rem;
+                ${textAreaTokens.inputPaddingTop}: 0.6875rem;
                 ${textAreaTokens.inputPaddingRight}: 0.875rem;
                 ${textAreaTokens.inputPaddingRightWithRightContent}: 3.125rem;
                 ${textAreaTokens.inputPaddingBottom}: 0.75rem;
@@ -76,6 +78,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-s-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-s-font-style);
@@ -116,6 +120,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-m-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-m-font-style);
@@ -135,7 +141,7 @@ export const config = {
                 ${textAreaTokens.inputMinHeight}: 1.625rem;
                 ${textAreaTokens.borderRadius}: 0.875rem;
                 ${textAreaTokens.borderRadiusWithHelpers}: 0.875rem;
-                ${textAreaTokens.inputPaddingTop}: 1.063rem;
+                ${textAreaTokens.inputPaddingTop}: 1rem;
                 ${textAreaTokens.inputPaddingRight}: 1.125rem;
                 ${textAreaTokens.inputPaddingRightWithRightContent}: 3.625rem;
                 ${textAreaTokens.inputPaddingBottom}: 0.75rem;
@@ -156,6 +162,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.5625rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style);

packages/plasma-web/src/components/TextArea/TextArea.config.ts

@@ -34,6 +34,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: 400;
                 ${textAreaTokens.labelInnerLetterSpacing}: -0.02em;
                 ${textAreaTokens.labelInnerLineHeight}: 0.75rem;
+                ${textAreaTokens.labelInnerTop}: 0rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-caption-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-caption-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-caption-font-style);
@@ -74,6 +76,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-caption-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-caption-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-caption-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-footnote1-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-footnote1-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-footnote1-font-style);
@@ -114,6 +118,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-caption-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-caption-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-caption-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body1-font-family);
                 ${textAreaTokens.inputFontSize}: var(--plasma-typo-body1-font-size);
                 ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body1-font-style);
@@ -133,7 +139,7 @@ export const config = {
                 ${textAreaTokens.inputMinHeight}: 1.625rem;
                 ${textAreaTokens.borderRadius}: 0.875rem;
                 ${textAreaTokens.borderRadiusWithHelpers}: 0.875rem;
-                ${textAreaTokens.inputPaddingTop}: 1.063rem;
+                ${textAreaTokens.inputPaddingTop}: 1rem;
                 ${textAreaTokens.inputPaddingRight}: 1.125rem;
                 ${textAreaTokens.inputPaddingRightWithRightContent}: 3.625rem;
                 ${textAreaTokens.inputPaddingBottom}: 0.75rem;
@@ -154,6 +160,8 @@ export const config = {
                 ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-caption-font-weight);
                 ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-caption-letter-spacing);
                 ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-caption-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.5625rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
                 ${textAreaTokens.inputFontFamily}: 'SB Sans Text','SBSansText',sans-serif;
                 ${textAreaTokens.inputFontSize}: 1.125rem;
                 ${textAreaTokens.inputFontStyle}: normal;

packages/plasma-web/src/components/TextArea/TextArea.stories.tsx

@@ -42,7 +42,6 @@ const meta: Meta<TextAreaProps> = {
         },
         ...disableProps([
             '$isFocused',
-            'label',
             'contentRight',
             'autoComplete',
             'autoFocus',