feat: add outlineColor prop in TextInputOutlined

[ahce]

Motivation

Allows to controls the outline color.

Test plan

1. Download this branch
2. Open the TextInput example
3. Change the prop outlineColor

Demo

import React, { Fragment } from 'react';
import { TextInput } from 'react-native-paper';

const Demo = () => (
  <Fragment>
    <TextInput mode='outlined' />
    <TextInput mode='outlined' outlineColor='red' />
    <TextInput mode='outlined' outlineColor='blue' />
    <TextInput mode='outlined' outlineColor='green' />
  </Fragment>
);

[callstack-bot]

Hey @ahce, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[github-actions]

Hello 👋, this pull request has been open for more than 2 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.

[ahce]

@Trancever any chance to merge this?

[lukewalczak]

I'm not convinced in introducing the additional prop since you can customize the active/inactive color by passing the specific one via theme prop, e.g.:

     <TextInput
        mode="outlined"
        theme={{ colors: { 
          primary: 'green', // active outline color
          placeholder: 'purple' // inactive outline color
          } 
        }}
        ...
     />

[ahce]

I'm not convinced in introducing the additional prop since you can customize the active/inactive color by passing the specific one via theme prop, e.g.:

     <TextInput
        mode="outlined"
        theme={{ colors: { 
          primary: 'green', // active outline color
          placeholder: 'purple' // inactive outline color
          } 
        }}
        ...
     />

Hi @lukewalczak, thanks for your reply!

With theme also changes placeholder and label color, check this demo

My PR has the same behavior as underlineColor prop

[lukewalczak]

Actually with that condition there won't be any difference between disabled and enabled state, since outlineColor will be always defined if passed by user.

Current behavior

enabled	disabled

outlineColor prop passed

enabled	disabled

Please correct it to have the visual feedback between those two states.

[ahce]

Done!

[lukewalczak]

Left one issue which has to be solved before merge.

[lukewalczak]

Hi @lukewalczak, thanks for your reply!

@ahce thanks for specifying more details! I see the reason for that PR and would like to merge, however there is one issue, which has to be fixed before.

[lukewalczak]

I guess the reason for that check is to have transparent outline when input is disabled, but the way you handle it is incorrect. User can specify the color in various ways using hex or rgb format as well. To check if the passed outlineColor is transparent, please introduce the variable:

const isTransparent = color(customOutlineColor).alpha() === 0

then:

outlineColor = isTransparent ? customOutlineColor : placeholderColor;

[ahce]

Done! Thanks!

[lukewalczak]

Suggested change

	outlineColor,
	outlineColor: customOutlineColor,

[ahce]

Done!

[lukewalczak]

Suggested change

	customOutlineColor,
	outlineColor,

[ahce]

Done!

[lukewalczak]

Suggested change

	customOutlineColor = outlineColor || colors.placeholder;
	outlineColor = customOutlineColor || placeholderColor;

[ahce]

Done!

[lukewalczak]

Suggested change

	outlineColor={customOutlineColor}
	outlineColor={outlineColor}

[ahce]

Done!