fix(TextInput): define placeholder color explicitly (#1794)

* fix: define placeholder color * fix: eslint error * fix: snapshots * Create tender-pants-fail.md * empty
razorpay · Nov 7, 2023 · 97b9b4c · 97b9b4c
1 parent 6e8089f
commit 97b9b4c
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 0 deletions.
diff --git a/.changeset/tender-pants-fail.md b/.changeset/tender-pants-fail.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(TextInput): white placeholder on autoFocus in android
diff --git a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx
@@ -17,6 +17,7 @@ import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { size } from '~tokens/global';
 import { makeSize } from '~utils/makeSize';
 import type { Platform } from '~utils';
+import { useTheme } from '~utils';
 
 type StyledComponentAutoCompleteAndroid =
   | 'off'
@@ -244,6 +245,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
   ref,
 ) => {
   const buttonValue = props.value ? props.value : props.placeholder;
+  const { theme } = useTheme();
   const commonProps = {
     onBlur: (): void => {
       // In certain cases like SelectInput, we want to ignore the blur animation when option item is clicked.
@@ -289,6 +291,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
       numberOfLines={numberOfLines}
       editable={!isDisabled}
       maxLength={maxCharacters}
+      placeholderTextColor={theme.colors.surface.text.placeholder.lowContrast}
       onFocus={(event): void => {
         handleOnFocus?.({ name, value: event?.nativeEvent.text });
         setCurrentInteraction('active');

diff --git a/...ade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap b/...ade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
@@ -226,6 +226,7 @@ exports[`<BaseInput /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
+          placeholderTextColor="hsla(214, 18%, 69%, 1)"
           secureTextEntry={false}
           style={
             [
@@ -633,6 +634,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
           placeholder="First Last"
+          placeholderTextColor="hsla(214, 18%, 69%, 1)"
           secureTextEntry={false}
           style={
             [

diff --git a/...nts/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap b/...nts/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
@@ -362,6 +362,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         onKeyPress={[Function]}
                         onSubmitEditing={[Function]}
                         placeholder="Select Option"
+                        placeholderTextColor="hsla(214, 18%, 69%, 1)"
                         secureTextEntry={false}
                         style={
                           [

diff --git a/...blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap b/...blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap
@@ -260,6 +260,7 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
+                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
                   secureTextEntry={false}
                   style={
                     [
@@ -403,6 +404,7 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
+                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
                   secureTextEntry={false}
                   style={
                     [
@@ -546,6 +548,7 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
+                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
                   secureTextEntry={false}
                   style={
                     [
@@ -689,6 +692,7 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
+                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
                   secureTextEntry={false}
                   style={
                     [
@@ -832,6 +836,7 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
+                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
                   secureTextEntry={false}
                   style={
                     [
@@ -975,6 +980,7 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
+                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
                   secureTextEntry={false}
                   style={
                     [

diff --git a/...components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap b/...components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap
@@ -237,6 +237,7 @@ exports[`<PasswordInput /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
+          placeholderTextColor="hsla(214, 18%, 69%, 1)"
           returnKeyType="done"
           secureTextEntry={true}
           style={

diff --git a/...blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap b/...blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap
@@ -231,6 +231,7 @@ exports[`<TextArea /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
+          placeholderTextColor="hsla(214, 18%, 69%, 1)"
           secureTextEntry={false}
           style={
             [

diff --git a/...ade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap b/...ade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap
@@ -228,6 +228,7 @@ exports[`<TextInput /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
+          placeholderTextColor="hsla(214, 18%, 69%, 1)"
           returnKeyType="default"
           secureTextEntry={false}
           style={
@@ -690,6 +691,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
           placeholder="something"
+          placeholderTextColor="hsla(214, 18%, 69%, 1)"
           prefix="https://"
           returnKeyType="go"
           secureTextEntry={false}