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.

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

Consolidate to a single theme aware Button component #767

Merged
merged 23 commits into from
May 6, 2020

Conversation

tstirrat
Copy link
Contributor

@tstirrat tstirrat commented May 5, 2020

Creates a theme aware button with several modes:

  • Default mode is 72dips height
  • small reduces height and text size
  • secondary creates an outlined button
  • disabled fades out the button text
  • icon prop to include an svg icon

Buttons will set their color and background based on theme context.

Linked issues:

How to test:

Check all the screens with buttons on a cross section of device form factors e.g nexus-one, pixel 3 xl, iphone se, iphone 11

Screenshots:

Screen Shot 2020-05-04 at 5 35 03 PM

Screen Shot 2020-05-04 at 5 35 08 PM

Screen Shot 2020-05-04 at 5 35 18 PM

Screen Shot 2020-05-04 at 5 35 26 PM

Screen Shot 2020-05-04 at 5 35 31 PM

Screen Shot 2020-05-04 at 5 35 49 PM

Screen Shot 2020-05-04 at 5 35 56 PM

Screen Shot 2020-05-04 at 5 39 22 PM

Screen Shot 2020-05-04 at 5 39 30 PM

These buttons were already overlaying on small phones:

Screen Shot 2020-05-04 at 5 39 53 PM

Screen Shot 2020-05-04 at 5 32 56 PM

tstirrat added 15 commits April 21, 2020 18:38
* develop:
  Text crop issue on onboarding screens 2,3 & 4 (#627)
  Use the useTranslation hook in all functional components (#595)
* develop: (60 commits)
  Recommend PR best practices in PR template (#750)
  Add eslint react-hooks checks (#751)
  iOS: Added local notification in terminate function. (#521)
  Update dev README (#705)
  Better error logging in Google import (#703)
  Remove rebasing from suggestions in CONTRIBUTING.md (#724)
  Translation refresh (#708)
  updated issue template (#729)
  Set up location after skiping the steps (#721)
  App shows green icon when tracking is inactive (#722)
  Fix postinstall script on Windows (#720)
  Fix isVersionGreater and add tests (#726)
  update the upgrade version to 1.0.0, to match what is in the master branch and avoid mistaken forced upgrades. (#723)
  1.0.1 (#715)
  Put GPS filter behind dev flag (#714)
  Fix headline1 text cutoff (#712)
  Put auto sub behind dev flags (#711)
  remove default news url from News.js constructor (#704)
  Fix i18n placeholder for authorities (#709)
  Remove react-native-maps (#695)
  ...
* develop:
  Add Danish to the list of languages. (#765)
  Fixed the aspect ration on the icon and add links (#763)
  Build time feature flags (Phase 1) (#694)
  Extract theme aware <IconButton /> component (#756)
  Latest i18n pull (#755)
  Add language contribution info to contributing guide (#754)
tstirrat added 3 commits May 4, 2020 19:58
* develop:
  HTML EULA translation workflow (#710)
  Allowing setup on macOS/Darwin for Android only. (#766)
@tstirrat tstirrat requested a review from Patrick-Erichsen May 5, 2020 06:25
Copy link
Contributor

@Patrick-Erichsen Patrick-Erichsen left a comment

Choose a reason for hiding this comment

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

The issue with padding on icon buttons is resolved - LGTM

@Patrick-Erichsen Patrick-Erichsen merged commit 84b37ca into develop May 6, 2020
@Patrick-Erichsen Patrick-Erichsen deleted the ts-theme-button branch May 6, 2020 02:15
aputinski pushed a commit to safe-paths-contrib/covid-safe-paths that referenced this pull request May 6, 2020
* official/develop: (110 commits)
  Consolidate to a single theme aware Button component (Path-Check#767)
  Fixed incorrect pull command. (Path-Check#769)
  Update README, etc for tripleblind -> Path-Check (Path-Check#768)
  HTML EULA translation workflow (Path-Check#710)
  Allowing setup on macOS/Darwin for Android only. (Path-Check#766)
  Add Danish to the list of languages. (Path-Check#765)
  Fixed the aspect ration on the icon and add links (Path-Check#763)
  Build time feature flags (Phase 1) (Path-Check#694)
  Extract theme aware <IconButton /> component (Path-Check#756)
  Latest i18n pull (Path-Check#755)
  Add language contribution info to contributing guide (Path-Check#754)
  Recommend PR best practices in PR template (Path-Check#750)
  Add eslint react-hooks checks (Path-Check#751)
  iOS: Added local notification in terminate function. (Path-Check#521)
  Update dev README (Path-Check#705)
  Better error logging in Google import (Path-Check#703)
  Remove rebasing from suggestions in CONTRIBUTING.md (Path-Check#724)
  Translation refresh (Path-Check#708)
  updated issue template (Path-Check#729)
  Set up location after skiping the steps (Path-Check#721)
  ...
monaabd27 pushed a commit to monaabd27/covid-safe-paths that referenced this pull request May 18, 2020
* Consolidate on single theme aware button

* Add secondary button style

* Fix crash

* Use the button everywhere!

* Button disabled states

* Fix onboarding1

* Fix bad merge

* Convert share button to <Button>

* Pass through style and other props

* More style updates and reconfig

* Button tweaks

* More tweaks

* Don't force opacity when not needed

* Add tests

* Update other snaps

* Fix iOS

* Add some spacing for iOS

* Restore padding for icon buttons

* update snaps
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants