@telefonica/mistica 17.1.0 → 17.2.0

package/src/text-field-base.tsx

@@ -5,7 +5,7 @@ import {useIsomorphicLayoutEffect, useScreenSize, useTheme} from './hooks';
 import {InternalIconButton, InternalToggleIconButton} from './icon-button';
 import {iconSize} from './icon-button.css';
 import {vars} from './skins/skin-contract.css';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import * as styles from './text-field-base.css';
 import {FieldContainer, HelperText, Label} from './text-field-components';
 import {fieldVars} from './text-field-base.css';
@@ -137,6 +137,7 @@ export interface CommonFormFieldProps<T = HTMLInputElement> {
     readOnly?: boolean;
     preventCopy?: boolean;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 
 interface TextFieldBaseProps {
@@ -186,6 +187,7 @@ interface TextFieldBaseProps {
     max?: string;
     role?: string;
     dataAttributes?: DataAttributes;
+    small?: boolean;
 }
 
 const preventCopyHandler = (e: React.ClipboardEvent<HTMLInputElement>) => {
@@ -222,6 +224,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
             preventCopy,
             showOptionalLabel = true,
             required,
+            small,
             ...rest
         },
         ref
@@ -312,6 +315,8 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
         const hasEndIcon = !!endIcon;
         const reservesRightSpace = hasEndIcon || endIconSpaceReserved;
 
+        const ValueText = small ? Text2 : Text3;
+
         const isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
         const scale = isShrinked
             ? isTabletOrSmaller
@@ -319,11 +324,11 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 : fieldVars.labelScaleDesktop
             : 1;
         const labelStyle = {
-            left: `calc(${styles.fieldLeftPadding}px + ${startIcon ? startIconWidth : '0px'})`,
+            left: `calc(${styles.fieldLeftPadding} + ${startIcon ? startIconWidth : '0px'})`,
             // shrinking means applying a scale transformation, so width will be proportionally reduced.
             // Let's keep the original width.
-            width: `calc((100% - ${styles.fieldLeftPadding}px - ${startIcon ? startIconWidth : '0px'} - ${
-                reservesRightSpace || endIconOverlay ? endIconWidth : `${styles.fieldRightPadding}px`
+            width: `calc((100% - ${styles.fieldLeftPadding} - ${startIcon ? startIconWidth : '0px'} - ${
+                endIcon || endIconOverlay ? endIconWidth : styles.fieldRightPadding
             }) / ${scale})`,
         };
 
@@ -358,6 +363,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                 readOnly={rest.readOnly}
                 dataAttributes={dataAttributes}
                 focus={focus}
+                small={small}
             >
                 <ThemeVariant variant="default">
                     {startIcon && (
@@ -377,9 +383,9 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                                 opacity: inputState === 'default' ? 0 : 1,
                             }}
                         >
-                            <Text3 color={vars.colors.textSecondary} regular wordBreak={false}>
+                            <ValueText color={vars.colors.textSecondary} regular wordBreak={false}>
                                 {prefix}
-                            </Text3>
+                            </ValueText>
                         </div>
                     )}
                     {label && (
@@ -411,7 +417,7 @@ export const TextFieldBase = React.forwardRef<any, TextFieldBaseProps>(
                                     paddingLeft: prefix
                                         ? 0
                                         : startIcon
-                                          ? `calc(${startIconWidth} + ${styles.fieldLeftPadding}px)`
+                                          ? `calc(${startIconWidth} + ${styles.fieldLeftPadding})`
                                           : styles.fieldLeftPadding,
                                     ...props.style,
                                     fontFamily,
@@ -514,6 +520,8 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
         const id = idProp || reactId;
         const autoSuggestId = React.useId();
 
+        const MenuText = props.small ? Text2 : Text3;
+
         const suggestionEmptyCaseText =
             typeof withSuggestionsEmptyCase === 'string'
                 ? withSuggestionsEmptyCase
@@ -587,7 +595,7 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                                 [styles.menuItemSelected]: isHighlighted,
                             })}
                         >
-                            <Text3 regular>{suggestion}</Text3>
+                            <MenuText regular>{suggestion}</MenuText>
                         </div>
                     )}
                     renderSuggestionsContainer={(options) => {
@@ -601,9 +609,9 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                         const children =
                             suggestions.length === 0 && withSuggestionsEmptyCase ? (
                                 <div role="status" className={classNames(styles.menuItemBase)}>
-                                    <Text3 regular color={vars.colors.textSecondary}>
+                                    <MenuText regular color={vars.colors.textSecondary}>
                                         {suggestionEmptyCaseText}
-                                    </Text3>
+                                    </MenuText>
                                 </div>
                             ) : (
                                 options.children

package/src/text-field-components.css.ts

@@ -26,7 +26,7 @@ export const labelContainer = style([
                 transform: `translateY(calc(${fieldVars.shrinkedLabelMobileLineHeight} / 2)) scale(1)`,
             },
         },
-        width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px)`,
+        width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding})`,
     },
 ]);
 
@@ -55,12 +55,12 @@ export const labelText = style([
 export const shrinked = style({
     transform: `translateY(0) scale(${fieldVars.labelScaleDesktop})`,
     lineHeight: `calc(${fieldVars.shrinkedLabelDesktopLineHeight} / ${fieldVars.labelScaleDesktop})`,
-    width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleDesktop})`,
+    width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding} / ${fieldVars.labelScaleDesktop})`,
     '@media': {
         [mq.tabletOrSmaller]: {
             transform: `translateY(0) scale(${fieldVars.labelScaleMobile})`,
             lineHeight: `calc(${fieldVars.shrinkedLabelMobileLineHeight} / ${fieldVars.labelScaleMobile})`,
-            width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleMobile})`,
+            width: `calc(100% - ${fieldLeftPadding} - ${fieldRightPadding} / ${fieldVars.labelScaleMobile})`,
         },
     },
 });
@@ -129,11 +129,15 @@ export const field = style([
     fieldFocusRing,
 ]);
 
-export const helperContainer = sprinkles({
-    paddingLeft: 12,
-    paddingRight: 16,
-    display: 'flex',
-});
+export const helperContainer = style([
+    sprinkles({
+        display: 'flex',
+    }),
+    {
+        paddingLeft: vars.spacing.inputPadding.left,
+        paddingRight: vars.spacing.inputPadding.right,
+    },
+]);
 
 export const leftHelperText = style([
     sprinkles({

package/src/text-field-components.tsx

@@ -14,14 +14,15 @@ import {applyCssVars, pxToRem} from './utils/css';
 
 import type {DataAttributes} from './utils/types';
 
-export const useApplyCssVars = (): Record<string, string> => {
+export const useApplyCssVars = (small?: boolean): Record<string, string> => {
     const {textPresets} = useTheme();
+    const inputValuePreset = small ? textPresets.text2 : textPresets.inputValue;
 
     return applyCssVars({
-        [fieldVars.mobileFontSize]: pxToRem(textPresets.inputValue.size.mobile),
-        [fieldVars.desktopFontSize]: pxToRem(textPresets.inputValue.size.desktop),
-        [fieldVars.mobileLineHeight]: pxToRem(textPresets.inputValue.lineHeight.mobile),
-        [fieldVars.desktopLineHeight]: pxToRem(textPresets.inputValue.lineHeight.desktop),
+        [fieldVars.mobileFontSize]: pxToRem(inputValuePreset.size.mobile),
+        [fieldVars.desktopFontSize]: pxToRem(inputValuePreset.size.desktop),
+        [fieldVars.mobileLineHeight]: pxToRem(inputValuePreset.lineHeight.mobile),
+        [fieldVars.desktopLineHeight]: pxToRem(inputValuePreset.lineHeight.desktop),
 
         [fieldVars.shrinkedLabelMobileFontSize]: pxToRem(textPresets.inputLabel.size.mobile),
         [fieldVars.shrinkedLabelDesktopFontSize]: pxToRem(textPresets.inputLabel.size.desktop),
@@ -33,8 +34,8 @@ export const useApplyCssVars = (): Record<string, string> => {
         [fieldVars.helperTextMobileLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.mobile),
         [fieldVars.helperTextDesktopLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.desktop),
 
-        [fieldVars.labelScaleMobile]: `calc(${textPresets.inputLabel.size.mobile} / ${textPresets.inputValue.size.mobile})`,
-        [fieldVars.labelScaleDesktop]: `calc(${textPresets.inputLabel.size.desktop} / ${textPresets.inputValue.size.desktop})`,
+        [fieldVars.labelScaleMobile]: `calc(${textPresets.inputLabel.size.mobile} / ${inputValuePreset.size.mobile})`,
+        [fieldVars.labelScaleDesktop]: `calc(${textPresets.inputLabel.size.desktop} / ${inputValuePreset.size.desktop})`,
     });
 };
 
@@ -185,6 +186,7 @@ type FieldContainerProps = {
     readOnly?: boolean;
     dataAttributes?: DataAttributes;
     focus?: boolean;
+    small?: boolean;
 };
 
 export const FieldContainer = ({
@@ -198,8 +200,9 @@ export const FieldContainer = ({
     readOnly,
     dataAttributes,
     focus,
+    small,
 }: FieldContainerProps): JSX.Element => {
-    const cssVarStyles = useApplyCssVars();
+    const cssVarStyles = useApplyCssVars(small);
     return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div