diff --git a/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size empty.snap.png b/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size empty.snap.png index 6712e3da4c..e59172d9be 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size empty.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size empty.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size with content.snap.png b/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size with content.snap.png index 2a3d7b97ad..1d7901d96d 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size with content.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size with content.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size.snap.png b/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size.snap.png index 3880a31cef..dbaf56bcfa 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextArea.component-test.tsx/plasma-b2c TextArea -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- contentRight.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- contentRight.snap.png index 77441a1c47..b34f8f79d3 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- contentRight.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- contentRight.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- custom width and height.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- custom width and height.snap.png index 40fff3acb4..5c013b3ae3 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- custom width and height.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- custom width and height.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- default.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- default.snap.png index 7b071cfd4b..ac25d85225 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- default.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- defaultValue.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- defaultValue.snap.png index f366c7ee0b..27c6500b60 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- defaultValue.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- defaultValue.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- disabled.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- disabled.snap.png index 6b0f58a94c..214e2b7bf2 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- disabled.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png index 8bae28ff6c..53032f8c90 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- focused.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- focused.snap.png index 8dc49e24a5..b749014837 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- focused.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- focused.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- leftHelper and rightHelper.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- leftHelper and rightHelper.snap.png index 730b03e5e0..d472d52b2e 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- leftHelper and rightHelper.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- leftHelper and rightHelper.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- placeholder with multiline.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- placeholder with multiline.snap.png index ee3ad9f55d..0d2065bb34 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- placeholder with multiline.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- placeholder with multiline.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- resize.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- resize.snap.png index 142cd55809..2cc11eff53 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- resize.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- resize.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- success, warning, error.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- success, warning, error.snap.png index f4cf82ecdb..de3e506061 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- success, warning, error.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- success, warning, error.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png index 07f35c21d4..75434a2342 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png index 8b5dbbbe67..b0ea0f4886 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png index c8b0570653..c536eed958 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png differ diff --git a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png index 50398a25d7..9518bf5c13 100644 Binary files a/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png and b/cypress/snapshots/b2c/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png differ diff --git a/cypress/snapshots/web/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png b/cypress/snapshots/web/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png index f19411c82a..6f0e6b18c5 100644 Binary files a/cypress/snapshots/web/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png and b/cypress/snapshots/web/components/TextArea/TextAreaBase.component-test.tsx/plasma-core TextArea -- empty.snap.png differ diff --git a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png index 656745a9e4..298f6dd8e8 100644 Binary files a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png and b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - basic.snap.png differ diff --git a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png index 448aab4b2c..5f50ea4dc8 100644 Binary files a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png and b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - manualResize.snap.png differ diff --git a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png index 086ff44b37..ba66606729 100644 Binary files a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png and b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - maxAuto.snap.png differ diff --git a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png index caeb3d3674..6b5ee1e02e 100644 Binary files a/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png and b/cypress/snapshots/web/components/TextArea/TextAreaResize.component-test.tsx/plasma-hope TextArea -- autoResize - minAuto.snap.png differ diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.config.ts b/packages/plasma-b2c/src/components/TextArea/TextArea.config.ts index 56578ea225..e5a27aed7e 100644 --- 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 index 5025a8c000..71c1ba8c2e 100644 --- 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 = { ...disableProps([ 'helperBlock', '$isFocused', - 'label', 'contentRight', 'autoComplete', 'autoFocus', diff --git a/packages/plasma-new-hope/src/components/TextArea/TextArea.tokens.ts b/packages/plasma-new-hope/src/components/TextArea/TextArea.tokens.ts index 1e90a127d4..551e036425 100644 --- 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 index f462a85b29..638ff7a623 100644 --- 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; @@ -120,7 +122,7 @@ export const textAreaRoot = (Root: RootProps 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 ); 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 index fa25bb54e3..9a86be4daa 100644 --- 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 index 33536fb407..264decb260 100644 --- 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 index 84907c128e..5709e6fcf7 100644 --- 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-web/src/components/TextArea/TextArea.config.ts b/packages/plasma-web/src/components/TextArea/TextArea.config.ts index 7c83b511e8..0087f391b8 100644 --- 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 index 8e17228762..d8e351ed7d 100644 --- 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 = { }, ...disableProps([ '$isFocused', - 'label', 'contentRight', 'autoComplete', 'autoFocus',