Skip to content

Commit

Permalink
fix: input label positioning regression (#3728)
Browse files Browse the repository at this point in the history
Co-authored-by: Tomasz Janiczek <[email protected]>
  • Loading branch information
tjaniczek and Tomasz Janiczek authored Mar 6, 2023
1 parent 9037214 commit 0396b88
Show file tree
Hide file tree
Showing 4 changed files with 2 additions and 22 deletions.
2 changes: 0 additions & 2 deletions src/components/TextInput/Label/InputLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ const InputLabel = (props: InputLabelProps) => {
labelTranslationXOffset,
maxFontSizeMultiplier,
testID,
theme,
} = props;

const paddingOffset =
Expand Down Expand Up @@ -116,7 +115,6 @@ const InputLabel = (props: InputLabelProps) => {
labeled,
labelLayoutWidth,
labelStyle,
theme,
placeholderStyle,
baseLabelTranslateX,
topPosition,
Expand Down
20 changes: 2 additions & 18 deletions src/components/TextInput/Label/LabelBackground.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import { Animated, StyleSheet } from 'react-native';

import { useInternalTheme } from '../../../core/theming';
import AnimatedText from '../../Typography/AnimatedText';
import type { LabelBackgroundProps } from '../types';

Expand All @@ -16,15 +15,12 @@ const LabelBackground = ({
roundness,
labelStyle,
maxFontSizeMultiplier,
theme: themeOverrides,
}: LabelBackgroundProps) => {
const opacity = labeled.interpolate({
inputRange: [0, 0.6],
outputRange: [1, 0],
});

const { isV3 } = useInternalTheme(themeOverrides);

const labelTranslationX = {
translateX: labeled.interpolate({
inputRange: [0, 1],
Expand All @@ -41,14 +37,6 @@ const LabelBackground = ({

const labelTextTransform = [...labelStyle.transform, labelTextScaleY];

const labelTextWidth = isV3
? {
width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
}
: {
maxWidth: labelLayoutWidth - 2 * placeholderStyle.paddingHorizontal,
};

const isRounded = roundness > 6;
const roundedEdgeCover = isRounded ? (
<Animated.View
Expand Down Expand Up @@ -76,14 +64,13 @@ const LabelBackground = ({
placeholderStyle,
labelStyle,
styles.outlinedLabel,
isV3 && styles.md3OutlinedLabel,
{
top: topPosition + 1,
width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
backgroundColor,
opacity,
transform: labelTextTransform,
},
labelTextWidth,
]}
numberOfLines={1}
maxFontSizeMultiplier={maxFontSizeMultiplier}
Expand All @@ -105,11 +92,8 @@ const styles = StyleSheet.create({
// eslint-disable-next-line react-native/no-color-literals
outlinedLabel: {
position: 'absolute',
left: 18,
left: 8,
paddingHorizontal: 0,
color: 'transparent',
},
md3OutlinedLabel: {
left: 8,
},
});
1 change: 0 additions & 1 deletion src/components/TextInput/TextInputFlat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,6 @@ const TextInputFlat = ({
maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
testID,
contentStyle,
theme,
opacity:
parentState.value || parentState.focused
? parentState.labelLayout.measured
Expand Down
1 change: 0 additions & 1 deletion src/components/TextInput/TextInputOutlined.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,6 @@ const TextInputOutlined = ({
maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
testID,
contentStyle,
theme,
opacity:
parentState.value || parentState.focused
? parentState.labelLayout.measured
Expand Down

0 comments on commit 0396b88

Please sign in to comment.