fix: input's adornment and helper disabled colors (callstack#3726)

docs/docusaurus.config.js

@@ -121,7 +121,7 @@ const config = {
  AnimatedFAB: 'FAB/AnimatedFAB',
  FABGroup: 'FAB/FABGroup',
  },
- HelperText: 'HelperText',
+ HelperText: { HelperText: 'HelperText/HelperText' },
  IconButton: {
  IconButton: 'IconButton/IconButton',
  },

example/src/Examples/TextInputExample.tsx

@@ -303,6 +303,22 @@ const TextInputExample = () => {
  label="Disabled flat input with value"
  value="Disabled flat input value"
  />
+ <TextInput
+ style={styles.inputContainerStyle}
+ label="Flat input"
+ disabled
+ value="Disabled flat input with adornments"
+ left={
+ <TextInput.Icon
+ icon="magnify"
+ color={flatLeftIcon}
+ onPress={() => {
+ changeIconColor('flatLeftIcon');
+ }}
+ />
+ }
+ right={<TextInput.Affix text="/100" />}
+ />
  <TextInput
  mode="outlined"
  disabled
@@ -316,6 +332,23 @@ const TextInputExample = () => {
  label="Disabled outlined input"
  value="Disabled outlined input with value"
  />
+ <TextInput
+ style={styles.inputContainerStyle}
+ label="Flat input"
+ disabled
+ mode="outlined"
+ value="Disabled flat input with adornments"
+ left={
+ <TextInput.Icon
+ icon="magnify"
+ color={flatLeftIcon}
+ onPress={() => {
+ changeIconColor('flatLeftIcon');
+ }}
+ />
+ }
+ right={<TextInput.Affix text="/100" />}
+ />
  </List.Section>
  <List.Section title="Dense inputs">
  <TextInput

src/components/HelperText.tsx → src/components/HelperText/HelperText.tsx

@@ -7,11 +7,10 @@ import {
  TextStyle,
 } from 'react-native';
 
-import color from 'color';
-
-import { useInternalTheme } from '../core/theming';
-import type { $Omit, ThemeProp } from '../types';
-import AnimatedText from './Typography/AnimatedText';
+import { useInternalTheme } from '../../core/theming';
+import type { $Omit, ThemeProp } from '../../types';
+import AnimatedText from '../Typography/AnimatedText';
+import { getTextColor } from './utils';
 
 export type Props = $Omit<
  $Omit<React.ComponentPropsWithRef<typeof AnimatedText>, 'padding'>,
@@ -21,6 +20,10 @@ export type Props = $Omit<
  * Type of the helper text.
  */
  type: 'error' | 'info';
+ /**
+ * Text content of the HelperText.
+ */
+ children: React.ReactNode;
  /**
  * Whether to display the helper text.
  */
@@ -30,9 +33,9 @@ export type Props = $Omit<
  */
  padding?: 'none' | 'normal';
  /**
- * Text content of the HelperText.
+ * Whether the text input tied with helper text is disabled.
  */
- children: React.ReactNode;
+ disabled?: boolean;
  style?: StyleProp<TextStyle>;
  /**
  * @optional
@@ -86,6 +89,7 @@ const HelperText = ({
  theme: themeOverrides,
  onLayout,
  padding = 'normal',
+ disabled,
  ...rest
 }: Props) => {
  const theme = useInternalTheme(themeOverrides);
@@ -122,15 +126,7 @@ const HelperText = ({
  textHeight = e.nativeEvent.layout.height;
  };
 
- const { colors, dark } = theme;
-
- const infoTextColor = theme.isV3
- ? theme.colors.onSurfaceVariant
- : color(theme?.colors?.text)
- .alpha(dark ? 0.7 : 0.54)
- .rgb()
- .string();
- const textColor = type === 'error' ? colors?.error : infoTextColor;
+ const textColor = getTextColor({ theme, disabled, type });
 
  return (
  <AnimatedText

src/components/HelperText/utils.ts

@@ -0,0 +1,30 @@
+import color from 'color';
+
+import type { InternalTheme } from '../../types';
+
+type BaseProps = {
+ theme: InternalTheme;
+ disabled?: boolean;
+ type?: 'error' | 'info';
+};
+
+export function getTextColor({ theme, disabled, type }: BaseProps) {
+ const { colors, dark } = theme;
+
+ if (type === 'error') {
+ return colors?.error;
+ }
+
+ if (theme.isV3) {
+ if (disabled) {
+ return theme.colors.onSurfaceDisabled;
+ } else {
+ return theme.colors.onSurfaceVariant;
+ }
+ }
+
+ return color(theme?.colors?.text)
+ .alpha(dark ? 0.7 : 0.54)
+ .rgb()
+ .string();
+}

src/components/TextInput/Adornment/TextInputAdornment.tsx

@@ -133,6 +133,7 @@ export interface TextInputAdornmentProps {
  paddingHorizontal?: number | string;
  maxFontSizeMultiplier?: number | undefined | null;
  theme?: ThemeProp;
+ disabled?: boolean;
 }
 
 const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
@@ -148,6 +149,7 @@ const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
  paddingHorizontal,
  maxFontSizeMultiplier,
  theme,
+ disabled,
 }) => {
  if (adornmentConfig.length) {
  return (
@@ -165,6 +167,7 @@ const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
  testID: `${side}-${type}-adornment`,
  isTextInputFocused,
  paddingHorizontal,
+ disabled,
  };
  if (type === AdornmentType.Icon) {
  return (

src/components/TextInput/Adornment/TextInputAffix.tsx

@@ -9,12 +9,11 @@ import {
  ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-
 import { useInternalTheme } from '../../../core/theming';
 import type { ThemeProp } from '../../../types';
 import { getConstants } from '../helpers';
 import { AdornmentSide } from './enums';
+import { getTextColor } from './utils';
 
 export type Props = {
  /**
@@ -41,6 +40,7 @@ type ContextState = {
  paddingHorizontal?: number | string;
  maxFontSizeMultiplier?: number | undefined | null;
  testID?: string;
+ disabled?: boolean;
 };
 
 const AffixContext = React.createContext<ContextState>({
@@ -64,6 +64,7 @@ const AffixAdornment: React.FunctionComponent<
  paddingHorizontal,
  maxFontSizeMultiplier,
  testID,
+ disabled,
 }) => {
  return (
  <AffixContext.Provider
@@ -76,6 +77,7 @@ const AffixAdornment: React.FunctionComponent<
  paddingHorizontal,
  maxFontSizeMultiplier,
  testID,
+ disabled,
  }}
  >
  {affix}
@@ -132,15 +134,9 @@ const TextInputAffix = ({
  paddingHorizontal,
  maxFontSizeMultiplier,
  testID,
+ disabled,
  } = React.useContext(AffixContext);
 
- const textColor = color(
- theme.isV3 ? theme.colors.onSurface : theme.colors?.text
- )
- .alpha(theme.dark ? 0.7 : 0.54)
- .rgb()
- .string();
-
  const offset =
  typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
 
@@ -149,6 +145,8 @@ const TextInputAffix = ({
  [side]: offset,
  } as ViewStyle;
 
+ const textColor = getTextColor({ theme, disabled });
+
  return (
  <Animated.View
  style={[

src/components/TextInput/Adornment/TextInputIcon.tsx

@@ -13,6 +13,7 @@ import type { IconSource } from '../../Icon';
 import IconButton from '../../IconButton/IconButton';
 import { ICON_SIZE } from '../constants';
 import { getConstants } from '../helpers';
+import { getIconColor } from './utils';
 
 export type Props = $Omit<
  React.ComponentProps<typeof IconButton>,
@@ -47,6 +48,7 @@ type StyleContextType = {
  isTextInputFocused: boolean;
  forceFocus: () => void;
  testID: string;
+ disabled?: boolean;
 };
 
 const StyleContext = React.createContext<StyleContextType>({
@@ -63,6 +65,7 @@ const IconAdornment: React.FunctionComponent<
  topPosition: number;
  side: 'left' | 'right';
  theme?: ThemeProp;
+ disabled?: boolean;
  } & Omit<StyleContextType, 'style'>
 > = ({
  icon,
@@ -72,6 +75,7 @@ const IconAdornment: React.FunctionComponent<
  forceFocus,
  testID,
  theme: themeOverrides,
+ disabled,
 }) => {
  const { isV3 } = useInternalTheme(themeOverrides);
  const { ICON_OFFSET } = getConstants(isV3);
@@ -80,7 +84,13 @@ const IconAdornment: React.FunctionComponent<
  top: topPosition,
  [side]: ICON_OFFSET,
  };
- const contextState = { style, isTextInputFocused, forceFocus, testID };
+ const contextState = {
+ style,
+ isTextInputFocused,
+ forceFocus,
+ testID,
+ disabled,
+ };
 
  return (
  <StyleContext.Provider value={contextState}>{icon}</StyleContext.Provider>
@@ -125,7 +135,7 @@ const TextInputIcon = ({
  theme: themeOverrides,
  ...rest
 }: Props) => {
- const { style, isTextInputFocused, forceFocus, testID } =
+ const { style, isTextInputFocused, forceFocus, testID, disabled } =
  React.useContext(StyleContext);
 
  const onPressWithFocusControl = React.useCallback(
@@ -141,16 +151,7 @@ const TextInputIcon = ({
 
  const theme = useInternalTheme(themeOverrides);
 
- let iconColor = color;
-
- if (theme.isV3) {
- if (rest.disabled) {
- iconColor = theme.colors.onSurface;
- }
- iconColor = theme.colors.onSurfaceVariant;
- } else {
- iconColor = theme.colors.text;
- }
+ const iconColor = getIconColor({ theme, disabled });
 
  return (
  <View style={[styles.container, style]}>

src/components/TextInput/Adornment/utils.ts

@@ -0,0 +1,33 @@
+import color from 'color';
+
+import type { InternalTheme } from '../../../types';
+
+type BaseProps = {
+ theme: InternalTheme;
+ disabled?: boolean;
+};
+
+export function getTextColor({ theme, disabled }: BaseProps) {
+ if (theme.isV3) {
+ if (disabled) {
+ return theme.colors.onSurfaceDisabled;
+ }
+ return theme.colors.onSurfaceVariant;
+ }
+ return color(theme.colors?.text)
+ .alpha(theme.dark ? 0.7 : 0.54)
+ .rgb()
+ .string();
+}
+
+export function getIconColor({ theme, disabled }: BaseProps) {
+ if (!theme.isV3) {
+ return theme.colors.text;
+ }
+
+ if (disabled) {
+ return theme.colors.onSurfaceDisabled;
+ }
+
+ return theme.colors.onSurfaceVariant;
+}

src/components/TextInput/TextInputFlat.tsx

@@ -309,6 +309,7 @@ const TextInputFlat = ({
  onAffixChange,
  isTextInputFocused: parentState.focused,
  maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+ disabled,
  };
  if (adornmentConfig.length) {
  adornmentProps = {
@@ -340,7 +341,7 @@ const TextInputFlat = ({
  },
  ]}
  >
- {!isAndroid && multiline && !!label && (
+ {!isAndroid && multiline && !!label && !disabled && (
  // Workaround for: https://github.com/callstack/react-native-paper/issues/2799
  // Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
  <View

src/components/TextInput/TextInputOutlined.tsx

@@ -279,6 +279,7 @@ const TextInputOutlined = ({
  onAffixChange,
  isTextInputFocused: parentState.focused,
  maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+ disabled,
  };
  if (adornmentConfig.length) {
  adornmentProps = {

src/components/TextInput/helpers.tsx

@@ -1,6 +1,5 @@
 import color from 'color';
 
-import { MD3LightTheme } from '../../styles/themes';
 import type { InternalTheme } from '../../types';
 import { AdornmentSide, AdornmentType } from './Adornment/enums';
 import type { AdornmentConfig } from './Adornment/types';
@@ -393,11 +392,7 @@ const getPlaceholderColor = ({ theme, disabled }: BaseProps) => {
 const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => {
  if (theme.isV3) {
  if (disabled) {
- // @ts-ignore According to Figma for both themes the base color for disabled in `onSecondaryContainer`
- return color(MD3LightTheme.colors.onSecondaryContainer)
- .alpha(0.08)
- .rgb()
- .string();
+ return color(theme.colors.onSurface).alpha(0.04).rgb().string();
  } else {
  return theme.colors.surfaceVariant;
  }