[RNMobile] Use default placeholder text color for native List Item #43353
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
derekblank
added
Mobile App - i.e. Android or iOS
|
@geriux List Item did not have a default placeholder text color defined. Looking at other native components, it looks like there are several different approaches to defining a placeholder text color. This approach first uses 0.62 opacity on the List Item text color (if there is one), which matches the web styling. If not, it falls back to |
|
Size Change: 0 B Total Size: 1.27 MB ℹ️ View Unchanged
|
geriux
reviewed
Aug 18, 2022
|
Hey @derekblank thanks for making the changes! While testing I found another issue, when selecting a custom color for the List (from the color palette in the settings) the placeholder doesn't have an opacity:
|
@geriux Good catch! I tested on standard themes as well, and when the color changes it's falling back to the $gray value as well. However, I was looking for a way to get the updated hex color value when it changes in order to fix the placeholder. So far, the only place in the code where I note that it changes is in the block's html, e.g.: Do you know of a more direct way where this hex value can be accessed within the ListItem component? I didn't observe any changes in ExamplePlaceholderColorTest2.mov |
|
Hey @derekblank 👋 oh I meant the color settings for the block (not for the inline formatting):
When setting a color from the block settings, it will be available in the |
|
@geriux Updated -- placeholder color is now using opacity on the default values, and when the style color changes. PlaceholderTextColor.mov |
geriux
reviewed
Aug 25, 2022
geriux
reviewed
Aug 25, 2022
…oves opacity value into a const
geriux
force-pushed
the
rnmobile/list-block-v2-placeholder
branch
from
679d742 to
cb68742
Compare
geriux
approved these changes
Aug 25, 2022
4 tasks
geriux
pushed a commit
that referenced
this pull request
Aug 26, 2022
* Release script: Update react-native-editor version to 1.81.0 * Release script: Update with changes from 'npm run core preios' * Release script: Update react-native-editor version to 1.81.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Add BlockListCompact (#43431) * Mobile - Introduce BlockListCompact - Lighter version of the default BlockList with simpler functionality for use cases like the List V2 block * Mobile - Update List V2 tests since it's not needed to fire the layout event change with the BlockListCompact component * Mobile - BlockListCompact - Add note of the component props and which block is currently using it * [RNMobile] List block v2: Fix text color inconsistencies with list items (#43244) * List block v2: use default color for preferred color scheme * Use usePreferredColorSchemeStyle hook for List Item style * Remove unneeded font-size value from list item styles * Mobile - Disable FastImage on Android (#43322) * [Mobile] - Fix dynamic React Native version (#43058) * Mobile - Fix dynamic React Native version * Mobile - Adds jvmargs setting * [RNMobile] Use default placeholder text color for native List Item (#43353) * Use default placeholder text color for native List Item * Move list item placeholder hex value to stylesheet * Resolve test failure * Add opacity to list block placeholder color styles * Update List block v2 placholder currentTextColor * Mobile - List Item - Check if currentTextColor is not undefined and moves opacity value into a const * Mobile - List Item - Add optional chaining for style.color Co-authored-by: Gerardo <gerardo.pacheco@automattic.com> * Mobile - Update CHANGELOG * Mobile - Update Podfile after resolving conflicts * Mobile - Add mock style for list item Co-authored-by: Derek Blank <derekpblank@gmail.com> Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com>
geriux
pushed a commit
that referenced
this pull request
Sep 6, 2022
* Release script: Update react-native-editor version to 1.81.0 * Release script: Update with changes from 'npm run core preios' * Release script: Update react-native-editor version to 1.81.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Add BlockListCompact (#43431) * Mobile - Introduce BlockListCompact - Lighter version of the default BlockList with simpler functionality for use cases like the List V2 block * Mobile - Update List V2 tests since it's not needed to fire the layout event change with the BlockListCompact component * Mobile - BlockListCompact - Add note of the component props and which block is currently using it * [RNMobile] List block v2: Fix text color inconsistencies with list items (#43244) * List block v2: use default color for preferred color scheme * Use usePreferredColorSchemeStyle hook for List Item style * Remove unneeded font-size value from list item styles * Mobile - Disable FastImage on Android (#43322) * [Mobile] - Fix dynamic React Native version (#43058) * Mobile - Fix dynamic React Native version * Mobile - Adds jvmargs setting * [RNMobile] Use default placeholder text color for native List Item (#43353) * Use default placeholder text color for native List Item * Move list item placeholder hex value to stylesheet * Resolve test failure * Add opacity to list block placeholder color styles * Update List block v2 placholder currentTextColor * Mobile - List Item - Check if currentTextColor is not undefined and moves opacity value into a const * Mobile - List Item - Add optional chaining for style.color Co-authored-by: Gerardo <gerardo.pacheco@automattic.com> * Mobile - Update CHANGELOG * Release script: Update react-native-editor version to 1.81.2 * Release script: Update with changes from 'npm run core preios' * Mobile - List V2 - Prevent error when list is empty (#43861) * Mobile - Update Changelog Co-authored-by: Derek Blank <derekpblank@gmail.com> Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes:
What?
Adds a default placeholder text color and fallback color for native List Items.
Why?
To differentiate List Item placeholder text with actual text input.
How?
If a base text color is defined, add 0.62 hex opacity to baseColor text (e.g. #FFFFFF9E) to match the user color scheme. Else, fallback to
#87a6bc, which is the placeholder text color found elsewhere. (#)Testing Instructions
Screenshots or screencast
Example
ListItemPlaceholderText.mov