Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(SearchBar): apply light and dark theme when platform ios or android #3470

Open
wants to merge 18 commits into
base: next
Choose a base branch
from
Open

fix(SearchBar): apply light and dark theme when platform ios or android #3470

wants to merge 18 commits into from

Conversation

kedar09
Copy link
Contributor

@kedar09 kedar09 commented Apr 26, 2022

SearchBar design updates

Motivation

currently, we can use both light and dark themes only when the platform is default and when the platform is android or ios then we can use only light theme

Fixes # (issue)
#3466

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

  • Checked with example app

Checklist

  • My code follows the style guidelines of this project
  • My changes generate no new warnings

Additional context

  • we can use a dark theme when platform android or ios
         <SearchBar
           lightTheme={false}
           platform="ios"
           placeholder="Type Here..."
           onChangeText={updateSearch}
           value={search}
         />
  • design updates in SearchBar-android

@arpitBhalla arpitBhalla changed the title SearchBar - apply light and dark theme when platform ios or android fix(SearchBar): apply light and dark theme when platform ios or android Apr 27, 2022
@codecov
Copy link

codecov bot commented May 2, 2022 •
edited

Codecov Report

Merging #3470 (98734f9) into next (3ba74d6) will decrease coverage by 0.02%.
The diff coverage is n/a.

❗ Current head 98734f9 differs from pull request most recent head f0aadd0. Consider uploading reports for the commit f0aadd0 to get more accurate results

@@            Coverage Diff             @@
##             next    #3470      +/-   ##
==========================================
- Coverage   79.24%   79.22%   -0.03%     
==========================================
  Files          87       87              
  Lines        1812     1810       -2     
  Branches      813      811       -2     
==========================================
- Hits         1436     1434       -2     
  Misses        370      370              
  Partials        6        6
Impacted Files Coverage Δ
packages/base/src/SearchBar/SearchBar-android.tsx 62.29% <ø> (ø)
packages/base/src/SearchBar/SearchBar-default.tsx 73.33% <ø> (-1.14%) ⬇️
packages/base/src/SearchBar/SearchBar-ios.tsx 49.27% <ø> (ø)

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

@arpitBhalla arpitBhalla linked an issue May 21, 2022 that may be closed by this pull request
SearchBar component doesn't respect boolean of true or false for lightmode attribute #3466
Open
1 task
arpitBhalla
arpitBhalla requested changes May 21, 2022
View reviewed changes
packages/base/src/SearchBar/SearchBar-android.tsx
@@ -18,21 +18,21 @@ export type { SearchBarAndroidProps };
const defaultSearchIcon = (theme: Theme) => ({
type: 'material',
size: 25,
color: theme?.colors?.platform?.android?.grey,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can do same for iOS

packages/base/src/SearchBar/SearchBar-android.tsx Outdated
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't think elevation/shadow is needed

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to design like this https://material.io/design/navigation/search.html#persistent-search

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not hard-code it If user need elevation they can just pass it through style prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok I will remove that

packages/base/src/SearchBar/SearchBar-android.tsx Outdated
@@ -50,6 +50,7 @@ export class SearchBarAndroid extends Component<
input!: TextInput;

static defaultProps = {
lightTheme: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets remove lightTheme from each variant & keep background as theme.colors.searchBg as you did

Copy link
Contributor Author

@kedar09 kedar09 May 21, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have checked that if we remove the lightTheme then SearchBar will be dark

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh, try changing searchbg for dark color

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please check this e52099b commit, can we use separate colors for background Color as per platform?

arpitBhalla
arpitBhalla reviewed Jun 25, 2022
View reviewed changes
package.json Outdated
@@ -67,8 +67,7 @@
"lint-staged": {
"packages/**/*.{ts,tsx}": [
"eslint --fix",
"prettier --write",
"tsc --noEmit --composite false"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you undo this change, use --no-verify flag in case you feel it takes lot of time

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@arpitBhalla arpitBhalla arpitBhalla requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

SearchBar component doesn't respect boolean of true or false for lightmode attribute
2 participants
@kedar09 @arpitBhalla