Add background color support to theme components#37
Draft
Conversation
- Add cellBackgroundColor to CourierInboxTheme for per-cell background styling - Add sheetBackgroundColor to CourierPreferencesTheme for bottom sheet backgrounds - Add backgroundColor to InfoViewStyle for info/empty/error view backgrounds - Wire up cellBackgroundColor in MessageItemViewHolder - Wire up sheetBackgroundColor in PreferenceTopicBottomSheet - Wire up InfoViewStyle.backgroundColor in CourierInfoView - Refactor CourierInfoView to share styling logic via applyInfoViewStyle - Update example app (Compose, StyledInbox, StyledPreferences) to use new props Co-authored-by: Mike Miller <mike@mikemiller.design>
This file contains hidden or 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
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.
Summary
This PR adds granular background color support to the theme system, enabling consumers to style backgrounds of individual UI sub-components (message cells, bottom sheets, and info views) rather than only the root container.
Context
Relates to courier-react-native#46 (bump courier-android to 5.3.1) and courier-react-native#45 (bump Courier_iOS to 5.8.1). Those PRs bump the native SDK dependency versions in the React Native wrapper.
Changes
SDK library (
android/)CourierInboxTheme: AddedcellBackgroundColor: Int?property to control the background color of individual inbox message cells (previously hardcoded to?android:colorBackgroundin XML)CourierPreferencesTheme: AddedsheetBackgroundColor: Int?property to control the background color of the preference topic bottom sheetCourierStyles.InfoViewStyle: AddedbackgroundColor: Int?property to control the background color of info/empty/error state viewsMessageItemViewHolder: Wired upcellBackgroundColorto set the cell container backgroundPreferenceTopicBottomSheet: Wired upsheetBackgroundColorto set the sheet root view backgroundCourierInfoView: Refactored into a sharedapplyInfoViewStyle()method that appliesInfoViewStyle.backgroundColor, font, and button stylingExample app (
app/)ComposeInboxActivity,StyledInboxFragment, andStyledPreferencesFragmentto demonstrate the new background color propertiesUsage
Testing
./gradlew :android:compileDebugKotlin)./gradlew :android:testDebugUnitTest)