Larger mobile autocomplete fonts and paddings #1900

joel-jeremy · 2023-11-12T08:03:44Z

Made autocomplete components easier to tap by making the fonts and paddings larger.

netlify · 2023-11-12T08:03:49Z

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	`514fd75`
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/65669ac8c9fd84000861ac8b
😎 Deploy Preview	https://deploy-preview-1900.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2023-11-12T08:06:52Z

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
16	3.08 MB → 3.08 MB (+3.06 kB)	+0.10%

Changeset

File	Δ	Size
`src/components/modals/EditField.js`	📈 +2.74 kB (+42.04%)	6.51 kB → 9.25 kB
`src/components/autocomplete/AccountAutocomplete.tsx`	📈 +540 B (+9.92%)	5.32 kB → 5.84 kB
`src/components/autocomplete/CategoryAutocomplete.tsx`	📈 +638 B (+7.74%)	8.05 kB → 8.67 kB
`src/components/autocomplete/PayeeAutocomplete.tsx`	📈 +386 B (+2.54%)	14.85 kB → 15.23 kB
`src/components/autocomplete/SavedFilterAutocomplete.tsx`	📈 +45 B (+2.19%)	2 kB → 2.05 kB
`src/components/transactions/MobileTransaction.js`	📈 +274 B (+0.50%)	53.91 kB → 54.18 kB

View detailed bundle breakdown

Added

Asset	File Size	% Changed
static/js/226.chunk.js	0 B → 28.82 kB (+28.82 kB)	-

Removed

Asset	File Size	% Changed
static/js/821.chunk.js	121.15 kB → 0 B (-121.15 kB)	-100%

Bigger

Asset	File Size	% Changed
static/js/main.js	1.17 MB → 1.26 MB (+95.71 kB)	+8.01%
static/js/wide-components.chunk.js	113.85 kB → 113.85 kB (+4 B)	+0.00%

Smaller

Asset	File Size	% Changed
static/js/narrow-components.chunk.js	52.93 kB → 52.61 kB (-328 B)	-0.61%

Unchanged

Asset	File Size	% Changed
static/js/665.chunk.js	824.28 kB	0%
static/media/Inter-italic.var.woff2	239.29 kB	0%
static/media/Inter-roman.var.woff2	221.86 kB	0%
static/js/444.chunk.js	156.11 kB	0%
static/js/231.chunk.js	117.37 kB	0%
static/js/reports.chunk.js	74.96 kB	0%
static/js/473.chunk.js	13 kB	0%
static/js/resize-observer-polyfill.chunk.js	8.88 kB	0%
static/css/main.css	7.41 kB	0%
asset-manifest.json	2.07 kB	0%
index.html	1.66 kB	0%
static/media/browser-server.js	911 B	0%

github-actions · 2023-11-12T08:06:54Z

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
2	2.22 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	1.23 MB	0%
xfo.xfo.kcab.worker.js	1014.46 kB	0%

trevdor · 2023-11-17T22:30:34Z

Yes! We’ve needed to improve this.
Two thoughts:

Would you see what you think of it with an even larger font, but regular weight instead of bold?
How about a subtle list item divider?

Apple’s native lists for comparison:

joel-jeremy · 2023-11-18T23:18:54Z

@trevdor Updated. :) Let me know if you want me to adjust the font sizes.

trevdor · 2023-11-19T07:15:06Z

Definitely easy tap targets now!

Seems like the font-size could decrease just a hair on list items so they're smaller than group headings. That contrast was nice in your original screenshot. (Maybe our font sizes in styles.ts aren't quite up to the task...)

On my phone, grasping the entire diff is tricky, so apologies if I've misread--but how about regular list items get weight 400, font-size...um, a rogue 17?!, and vertical passing of 8? (think I see 10 right now, and rows seem just a touch tall imo)

I haven't had a chance to tweak it in my own browser to give a true "here's my favorite sizing"--it just feels a bit chunky on a small phone at the moment. Thanks for hearing me out!

joel-jeremy · 2023-11-20T20:47:28Z

@trevdor Adjusted the fonts and paddings. :)

trevdor · 2023-11-24T20:15:23Z

Trying to get through the rest of the code tonight, but the visual look good to me!

trevdor

Thanks! This will help me personally, if nothing else :D

Left a few questions/comments, but however you resolve those is good with me.

trevdor · 2023-11-24T21:04:37Z

packages/desktop-client/src/components/transactions/TransactionsTable.test.js


    // It should not allow filtering on group names
    await userEvent.clear(input);
    await userEvent.type(input, 'Usual Expenses');

-    items = tooltip.querySelectorAll('[data-testid*="category-item"]');
+    items = tooltip.querySelectorAll('[data-testid$="category-item"]');


👏🏻 yay for narrowing the selectors & the separating data-highlighted in general

trevdor · 2023-11-24T21:08:03Z

packages/desktop-client/src/components/transactions/TransactionsTable.test.js

+    let highlighted = tooltip.querySelector('[data-highlighted]');
+    expect(highlighted).not.toBeNull();


Since we're looking for one and not two highlights, how about?

Suggested change

let highlighted = tooltip.querySelector('[data-highlighted]');

expect(highlighted).not.toBeNull();

let highlighted = tooltip.querySelectorAll('[data-highlighted]');

expect(highlighted).toHaveLength(1);

(haven't run this change, so double-check me if you accept it)

trevdor · 2023-11-25T06:40:15Z

packages/desktop-client/e2e/transactions.test.js

@@ -63,7 +63,7 @@ test.describe('Transactions', () => {
      await expect(autocomplete).toMatchThemeScreenshots();

      // Select the active item
-      await page.getByRole('button', { name: 'Clothing' }).click();
+      await page.getByTestId('Clothing-category-item').click();


Personally, I prefer getByRole with the user-visible text over grabbing elements by something the user can't see, in order to keep our tests behaving similarly to a user. Did the existing selector fail after the refactor?

As I say, it's a preference, so ship it as you see fit.

For some reason, the test is hanging on this getByRole call so I had to change it. I'm happy to revert it back to use getByRole if anybody can get it to work again.

Not worth holding it up for (although we're in code freeze at the moment).

SalvyTek · 2023-11-25T08:43:09Z

@joel-jeremy To improve the readability of the selected category name, could you use a color with greater contrast? Thanks for increasing the font size in this component!

joel-jeremy · 2023-11-27T20:20:54Z

I have updated the hover colors

SalvyTek · 2023-11-27T21:13:32Z

Thank you! Now it's perfect!

* Larger mobile autocomplete fonts and paddings * Release notes * VRT + update tests * Update tests * Update data-highlighted and tests * Use styles text * Fix tests * Fix tests * Fix tests * Fix tests * Fix tests * Fix tests * Adjust Add Transaction padding + VRT updates * Larger autocomplete text and divider * Fix rebase * Fix rebase * Fix icons * Adjust fonts * Fix lint errors * PR feedback * VRT * Update embedded autocomplete highlight hover color * Refactor create payee button * Embedded create payee button color * Dummy change to re-run CI

trafico-bot bot added the 🔍 Ready for Review label Nov 12, 2023

joel-jeremy force-pushed the mobile-transaction-larger-components branch 3 times, most recently from cff0be7 to d480374 Compare November 16, 2023 18:26

joel-jeremy force-pushed the mobile-transaction-larger-components branch 2 times, most recently from b1bbbcf to f85806b Compare November 18, 2023 20:51

joel-jeremy force-pushed the mobile-transaction-larger-components branch from 0b0ca3e to 3833a74 Compare November 19, 2023 09:19

joel-jeremy added this to the v23.12.0 milestone Nov 23, 2023

joel-jeremy force-pushed the mobile-transaction-larger-components branch from 3833a74 to 17935f6 Compare November 23, 2023 15:42

trevdor previously approved these changes Nov 25, 2023

View reviewed changes

trafico-bot bot added ✅ Approved and removed 🔍 Ready for Review labels Nov 25, 2023

joel-jeremy dismissed trevdor’s stale review via d6e0817 November 25, 2023 07:41

joel-jeremy force-pushed the mobile-transaction-larger-components branch from d6f1353 to d6e0817 Compare November 25, 2023 07:41

trafico-bot bot added 🔍 Ready for Review and removed ✅ Approved labels Nov 25, 2023

joel-jeremy added 6 commits November 24, 2023 23:41

Larger mobile autocomplete fonts and paddings

ba28b38

Release notes

e4614c3

VRT + update tests

d01c83d

Update tests

b593c9d

Update data-highlighted and tests

69a8913

Use styles text

f429d96

joel-jeremy added 15 commits November 24, 2023 23:41

Fix tests

31b8558

Fix tests

0392f9f

Fix tests

73dd742

Fix tests

aec2d83

Fix tests

2a990e2

Fix tests

8d4729e

Adjust Add Transaction padding + VRT updates

0a564c7

Larger autocomplete text and divider

9440105

Fix rebase

18a8d17

Fix rebase

d70bf36

Fix icons

8914f52

Adjust fonts

8471b15

Fix lint errors

d6e0817

PR feedback

be78662

VRT

b7f666f

joel-jeremy added 3 commits November 27, 2023 11:06

Update embedded autocomplete highlight hover color

ec7c0a9

Refactor create payee button

b1f78e9

Embedded create payee button color

7bb1f2f

Dummy change to re-run CI

514fd75

trevdor approved these changes Dec 1, 2023

View reviewed changes

trafico-bot bot added ✅ Approved and removed 🔍 Ready for Review labels Dec 1, 2023

joel-jeremy merged commit 5d1f2d4 into actualbudget:master Dec 1, 2023
18 of 19 checks passed

trafico-bot bot added ✨ Merged Pull Request has been merged successfully and removed ✅ Approved labels Dec 1, 2023

joel-jeremy mentioned this pull request Feb 20, 2024

[Feature] Mobile Payee and Account autocomplete text size #1555

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Larger mobile autocomplete fonts and paddings #1900

Larger mobile autocomplete fonts and paddings #1900

joel-jeremy commented Nov 12, 2023 •

edited

Loading

netlify bot commented Nov 12, 2023 •

edited

Loading

github-actions bot commented Nov 12, 2023 •

edited

Loading

github-actions bot commented Nov 12, 2023 •

edited

Loading

trevdor commented Nov 17, 2023

joel-jeremy commented Nov 18, 2023

trevdor commented Nov 19, 2023

joel-jeremy commented Nov 20, 2023

trevdor commented Nov 24, 2023

trevdor left a comment

trevdor Nov 24, 2023

trevdor Nov 24, 2023

trevdor Nov 25, 2023

joel-jeremy Nov 25, 2023

trevdor Nov 30, 2023

SalvyTek commented Nov 25, 2023

joel-jeremy commented Nov 27, 2023

SalvyTek commented Nov 27, 2023 •

edited

Loading

		let highlighted = tooltip.querySelector('[data-highlighted]');
		expect(highlighted).not.toBeNull();

Larger mobile autocomplete fonts and paddings #1900

Larger mobile autocomplete fonts and paddings #1900

Conversation

joel-jeremy commented Nov 12, 2023 • edited Loading

netlify bot commented Nov 12, 2023 • edited Loading

✅ Deploy Preview for actualbudget ready!

github-actions bot commented Nov 12, 2023 • edited Loading

Bundle Stats — desktop-client

github-actions bot commented Nov 12, 2023 • edited Loading

Bundle Stats — loot-core

trevdor commented Nov 17, 2023

joel-jeremy commented Nov 18, 2023

trevdor commented Nov 19, 2023

joel-jeremy commented Nov 20, 2023

trevdor commented Nov 24, 2023

trevdor left a comment

Choose a reason for hiding this comment

trevdor Nov 24, 2023

Choose a reason for hiding this comment

trevdor Nov 24, 2023

Choose a reason for hiding this comment

trevdor Nov 25, 2023

Choose a reason for hiding this comment

joel-jeremy Nov 25, 2023

Choose a reason for hiding this comment

trevdor Nov 30, 2023

Choose a reason for hiding this comment

SalvyTek commented Nov 25, 2023

joel-jeremy commented Nov 27, 2023

SalvyTek commented Nov 27, 2023 • edited Loading

joel-jeremy commented Nov 12, 2023 •

edited

Loading

netlify bot commented Nov 12, 2023 •

edited

Loading

github-actions bot commented Nov 12, 2023 •

edited

Loading

github-actions bot commented Nov 12, 2023 •

edited

Loading

SalvyTek commented Nov 27, 2023 •

edited

Loading