fix(config): fix padding on textarea

salute-developers · May 20, 2024 · 6f7ec6b · 6f7ec6b
1 parent e38d594
commit 6f7ec6b
Show file tree

Hide file tree

Showing 45 changed files with 58 additions and 11 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/.DS_Store b/.github/.DS_Store
diff --git a/actions/.DS_Store b/actions/.DS_Store
diff --git a/cypress/.DS_Store b/cypress/.DS_Store
diff --git a/...extArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size empty.snap.png b/...extArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size empty.snap.png
diff --git a/.../TextArea.component-test.tsx/plasma-b2c TextArea -- _size with content.snap.png b/.../TextArea.component-test.tsx/plasma-b2c TextArea -- _size with content.snap.png
diff --git a/...ents/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size.snap.png b/...ents/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size.snap.png
diff --git a/...a/TextAreaBase.component-test.tsx/plasma-core TextArea -- contentRight.snap.png b/...a/TextAreaBase.component-test.tsx/plasma-core TextArea -- contentRight.snap.png
diff --git a/...ase.component-test.tsx/plasma-core TextArea -- custom width and height.snap.png b/...ase.component-test.tsx/plasma-core TextArea -- custom width and height.snap.png
diff --git a/...xtArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- default.snap.png b/...xtArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- default.snap.png
diff --git a/...a/TextAreaBase.component-test.tsx/plasma-core TextArea -- defaultValue.snap.png b/...a/TextAreaBase.component-test.tsx/plasma-core TextArea -- defaultValue.snap.png
diff --git a/...tArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- disabled.snap.png b/...tArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- disabled.snap.png
diff --git a/...TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png b/...TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png
diff --git a/...xtArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- focused.snap.png b/...xtArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- focused.snap.png
diff --git a/....component-test.tsx/plasma-core TextArea -- leftHelper and rightHelper.snap.png b/....component-test.tsx/plasma-core TextArea -- leftHelper and rightHelper.snap.png
diff --git a/....component-test.tsx/plasma-core TextArea -- placeholder with multiline.snap.png b/....component-test.tsx/plasma-core TextArea -- placeholder with multiline.snap.png
diff --git a/...extArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- resize.snap.png b/...extArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- resize.snap.png
diff --git a/...ase.component-test.tsx/plasma-core TextArea -- success, warning, error.snap.png b/...ase.component-test.tsx/plasma-core TextArea -- success, warning, error.snap.png
diff --git a/...eaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png b/...eaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png
diff --git a/...e.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png b/...e.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png
diff --git a/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png b/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png
diff --git a/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png b/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png
diff --git a/...TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png b/...TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png
diff --git a/...eaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png b/...eaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png
diff --git a/...e.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png b/...e.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png
diff --git a/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png b/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png
diff --git a/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png b/...Resize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png
diff --git a/packages/.DS_Store b/packages/.DS_Store
diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.config.ts b/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);

diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx
@@ -40,7 +40,6 @@ const meta: Meta<TextAreaProps> = {
         ...disableProps([
             'helperBlock',
             '$isFocused',
-            'label',
             'contentRight',
             'autoComplete',
             'autoFocus',

diff --git a/packages/plasma-icons/.DS_Store b/packages/plasma-icons/.DS_Store
diff --git a/packages/plasma-new-hope/src/components/TextArea/TextArea.tokens.ts b/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 */

diff --git a/packages/plasma-new-hope/src/components/TextArea/TextArea.tsx b/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;
 
@@ -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,
         );
 

diff --git a/packages/plasma-new-hope/src/components/TextArea/mixins/applyDynamicLabel.ts b/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});
         }
     }
 

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/TextArea/TextArea.config.ts b/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);

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/TextArea/TextArea.config.ts b/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);

diff --git a/packages/plasma-tokens-b2b/.DS_Store b/packages/plasma-tokens-b2b/.DS_Store
diff --git a/packages/plasma-tokens-b2c/.DS_Store b/packages/plasma-tokens-b2c/.DS_Store
diff --git a/packages/plasma-tokens-web/.DS_Store b/packages/plasma-tokens-web/.DS_Store
diff --git a/packages/plasma-web/src/components/TextArea/TextArea.config.ts b/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;

diff --git a/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx
@@ -42,7 +42,6 @@ const meta: Meta<TextAreaProps> = {
         },
         ...disableProps([
             '$isFocused',
-            'label',
             'contentRight',
             'autoComplete',
             'autoFocus',

diff --git a/packages/themes/.DS_Store b/packages/themes/.DS_Store
diff --git a/scripts/.DS_Store b/scripts/.DS_Store
diff --git a/utils/.DS_Store b/utils/.DS_Store
diff --git a/website/.DS_Store b/website/.DS_Store