From 2c76467e1e763be6d7b3bda8768e02ef590a0cf5 Mon Sep 17 00:00:00 2001 From: Esthefanie Vila Maior Date: Wed, 20 Mar 2024 18:24:33 +0000 Subject: [PATCH] feat: update input according v3theme --- packages/yoga/src/Input/Input.theme.js | 8 +++++++ packages/yoga/src/Input/web/Field.jsx | 3 ++- packages/yoga/src/Input/web/Fieldset.jsx | 6 +++--- packages/yoga/src/Input/web/Helper.jsx | 8 +++---- packages/yoga/src/Input/web/Label.jsx | 3 +++ packages/yoga/src/Input/web/Legend.jsx | 5 ++++- packages/yoga/src/Theme/theme/v3theme.ts | 27 ++++++++++++++++++++++++ 7 files changed, 50 insertions(+), 10 deletions(-) diff --git a/packages/yoga/src/Input/Input.theme.js b/packages/yoga/src/Input/Input.theme.js index bbb35a81af..1ba0bbc3ae 100644 --- a/packages/yoga/src/Input/Input.theme.js +++ b/packages/yoga/src/Input/Input.theme.js @@ -2,6 +2,7 @@ const Input = ({ colors, fontSizes, fontWeights, + lineHeights, borders, radii, spacing, @@ -15,6 +16,7 @@ const Input = ({ }, size: fontSizes.small, weight: fontWeights.regular, + lineHeight: lineHeights.small, }, border: { width: borders.small, @@ -45,6 +47,10 @@ const Input = ({ typed: fontSizes.xsmall, }, weight: fontWeights.regular, + lineHeight: { + default: lineHeights.small, + typed: lineHeights.xsmall, + }, }, }, helper: { @@ -57,6 +63,8 @@ const Input = ({ }, font: { size: fontSizes.xsmall, + weight: fontWeights.regular, + lineHeight: lineHeights.xsmall, }, }, }); diff --git a/packages/yoga/src/Input/web/Field.jsx b/packages/yoga/src/Input/web/Field.jsx index a4040a86f5..bbdd0bda98 100644 --- a/packages/yoga/src/Input/web/Field.jsx +++ b/packages/yoga/src/Input/web/Field.jsx @@ -17,6 +17,7 @@ const labelTransition = css` transition-timing-function: cubic-bezier(${transition.timing[0].join()}); font-size: ${input.label.font.size.typed}px; + line-height: ${input.label.font.lineHeight.typed}px; `} `; @@ -61,6 +62,7 @@ const Field = styled.input` font-family: ${baseFont.family}, sans-serif; font-size: ${input.font.size}px; font-weight: ${input.font.weight}; + line-height: ${input.font.lineHeight}px; &:focus { color: ${input.font.color.focus}; @@ -74,7 +76,6 @@ const Field = styled.input` & ~ label { ${labelTransition} - font-weight: ${input.label.font.weight}; color: ${error ? `${colors.feedback.attention[1]}` : `${colors.text.primary}`}; diff --git a/packages/yoga/src/Input/web/Fieldset.jsx b/packages/yoga/src/Input/web/Fieldset.jsx index 78fc952572..1bf85b2c54 100644 --- a/packages/yoga/src/Input/web/Fieldset.jsx +++ b/packages/yoga/src/Input/web/Fieldset.jsx @@ -35,15 +35,15 @@ const Fieldset = styled.fieldset` ${disabled ? `border-color: ${colors.elements.lineAndBorders};` : ''} - &:hover, &:focus-within { + &:hover, &:focus-within { &:not(:disabled) { border-color: ${ error ? colors.feedback.attention[1] : input.border.color.typed }; - } + } } - + `} `; diff --git a/packages/yoga/src/Input/web/Helper.jsx b/packages/yoga/src/Input/web/Helper.jsx index 55a8bba3b7..8ad7555875 100644 --- a/packages/yoga/src/Input/web/Helper.jsx +++ b/packages/yoga/src/Input/web/Helper.jsx @@ -24,17 +24,15 @@ export const Wrapper = styled.div` `} `; -const Info = styled(Text.Small)` +const Info = styled(Text.Body2)` color: currentColor; ${({ hideMaxLength, theme: { - yoga: { - components: { input }, - }, + yoga: { baseFont }, }, }) => ` - font-size: ${input.helper.font.size}px; + font-family: ${baseFont.family}; ${hideMaxLength ? 'display: none;' : ''} `} diff --git a/packages/yoga/src/Input/web/Label.jsx b/packages/yoga/src/Input/web/Label.jsx index ff739a6be1..61f551f400 100644 --- a/packages/yoga/src/Input/web/Label.jsx +++ b/packages/yoga/src/Input/web/Label.jsx @@ -12,6 +12,7 @@ const Label = styled.label` yoga: { transition, colors, + baseFont, components: { input }, }, }, @@ -19,8 +20,10 @@ const Label = styled.label` top: ${input.padding.top}px; left: ${input.padding.left}px; + font-family: ${baseFont.family}; font-size: ${input.label.font.size.default}px; font-weight: ${input.label.font.weight}; + line-height: ${input.label.font.lineHeight.default}px; color: ${input.label.color.default}; transition-property: transform, font-size; diff --git a/packages/yoga/src/Input/web/Legend.jsx b/packages/yoga/src/Input/web/Legend.jsx index 30392a67df..b4542ba9da 100644 --- a/packages/yoga/src/Input/web/Legend.jsx +++ b/packages/yoga/src/Input/web/Legend.jsx @@ -8,18 +8,21 @@ const StyledLegend = styled.legend` max-width: 0; width: auto; height: 0; - font-weight: normal; visibility: hidden; transition-property: max-width, padding; ${({ theme: { yoga: { + baseFont, components: { input }, }, }, }) => ` + font-family: ${baseFont.family}; font-size: ${input.label.font.size.typed}px; + font-weight: ${input.label.font.weight}; + line-height: ${input.label.font.lineHeight.typed}px; letter-spacing: normal; transition-duration: 100ms; diff --git a/packages/yoga/src/Theme/theme/v3theme.ts b/packages/yoga/src/Theme/theme/v3theme.ts index 9518f69ba6..db23946207 100644 --- a/packages/yoga/src/Theme/theme/v3theme.ts +++ b/packages/yoga/src/Theme/theme/v3theme.ts @@ -227,5 +227,32 @@ export const v3theme = createTheme(tokens => ({ } }, }, + input: { + font: { + size: tokens.fontSizes.small, + weight: tokens.fontWeights.medium, + lineHeight: tokens.lineHeights.small, + }, + label: { + font: { + size: { + default: tokens.fontSizes.small, + typed: tokens.fontSizes.xsmall, + }, + weight: tokens.fontWeights.medium, + lineHeight: { + default: tokens.lineHeights.small, + typed: tokens.lineHeights.xsmall, + }, + }, + }, + helper: { + font: { + size: tokens.fontSizes.xsmall, + weight: tokens.fontWeights.regular, + lineHeight: tokens.lineHeights.xsmall, + }, + }, + }, }, }));