Shadcn migration - language picker #13531

pettinarip · 2024-07-29T12:41:23Z

DEPENDS ON:

Description

Language picker implementation + refactor using Shadcn's Popover, Command, Progress, and Badge components.

TODO

matomo events — focused input event, do we still need this? check with team
check rtl support
check keyboard shortcuts
check ellipsis styles on the component item
implement Shadcn Link component from Shadcn migration - footer, skiplink, list & link components #13411
implement Shadcn FooterButton from Shadcn migration - mobile menu #13449

…fect for filtering

netlify · 2024-07-29T12:41:44Z

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	`ed4df19`
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66bb90f2d531a30008319520
😎 Deploy Preview	https://deploy-preview-13531--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 43 (🔴 down 5 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 8 from production) SEO: 93 (🟢 up 1 from production) PWA: - View the detailed breakdown and full score reports

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

konopkja · 2024-08-05T11:36:55Z

based on these data I am assuming the filter input inside language picker is not being used very frequently and therefore should not be automatically focused as primary action.

This would be especially problematic on mobile where it would also trigger showing keyboard and overlap other options for selection.

konopkja · 2024-08-05T11:37:27Z

cc @minimalsm @pettinarip

pettinarip · 2024-08-05T16:36:16Z

based on these data I am assuming the filter input inside language picker is not being used very frequently and therefore should not be automatically focused as primary action.

Does that make any negative impact to the UX? IMO:

it will improve the UX for those who want to change the language quicker
it will keep the same UX for those who just open and close the picker

This would be especially problematic on mobile where it would also trigger showing keyboard and overlap other options for selection.

Agree. However, I tested it on a physical phone and didn't get the focus nor the keyboard popping up. Would be nice to have a second test to confirm that we don't see the keyboard.

konopkja · 2024-08-05T17:24:46Z

based on these data I am assuming the filter input inside language picker is not being used very frequently and therefore should not be automatically focused as primary action.

Does that make any negative impact to the UX? IMO:

it will improve the UX for those who want to change the language quicker

it will keep the same UX for those who just open and close the picker

This would be especially problematic on mobile where it would also trigger showing keyboard and overlap other options for selection.

Agree. However, I tested it on a physical phone and didn't get the focus nor the keyboard popping up. Would be nice to have a second test to confirm that we don't see the keyboard.

do you mean this PR (focus on the input) would only affect desktop and mobile?

pettinarip · 2024-08-06T09:10:27Z

do you mean this PR (focus on the input) would only affect desktop and mobile?

As far as I have tested it, the focus only happens on desktop. On mobile devices, I have to manually click on the input to filter things.

wackerow

This looks great @pettinarip! Can we just update status of TODO's and clear any conflicts? Think we can pull in from there

wackerow · 2024-08-06T21:45:54Z

src/components/LanguagePicker/MenuItem.tsx

+      // TODO double check this
+      // sx={{
+      //   p: {
+      //     textDecoration: "none",
+      //     overflow: "hidden",
+      //     textOverflow: "ellipsis",
+      //     whiteSpace: "nowrap",
+      //   },
+      // }}


Haven't encountered any need for this while testing it out.

Thank, yes, I was trying to see where this was coming from but I think we could clean this up since it doesn't seem to add anything atm.

pettinarip · 2024-08-08T15:20:30Z

This looks great @pettinarip! Can we just update status of TODO's and clear any conflicts? Think we can pull in from there

Done. I think we are ready for another review.

wackerow

Looks awesome! Great job @pettinarip! Pulling in

wackerow · 2024-08-13T21:28:52Z

src/components/ui/command.tsx

@@ -0,0 +1,171 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"


Discovering these new packages along the way with the shadcn-ui approach. Loving it.

pettinarip added 7 commits July 28, 2024 11:46

initial lang picker migration and refactor to shadcn

eec7c66

migrate progress bar

8952035

migrate badge used in language picker

87ddb2f

add event listener for shortcut to open the language picker

9d11e3a

cleanup

d2a6906

refactor: move localeToDisplayInfo to its own function + remove useEf…

9aa5d3f

…fect for filtering

fix bad prop

1f295bf

pettinarip added the Status: Blocked 🛑 This is blocked label Jul 29, 2024

pettinarip requested review from wackerow, corwintines and minimalsm as code owners July 29, 2024 12:41

github-actions bot added dependencies 📦 Changes related to project dependencies tooling 🔧 Changes related to tooling of the project labels Jul 29, 2024

Merge branch 'dev' into shadcn-lang-picker

e9cd55b

on mobile, set the popover's width to fill all the vw space

38dc84d

wackerow reviewed Aug 6, 2024

View reviewed changes

wackerow removed the Status: Blocked 🛑 This is blocked label Aug 6, 2024

pettinarip added 4 commits August 8, 2024 15:10

Merge branch 'dev' into shadcn-lang-picker

d530523

remove unused code

225c9c8

display kbd shortcut inside the search input field

b67df3c

adjust colors

88bf2b0

pettinarip added 2 commits August 13, 2024 17:30

Merge branch 'dev' into shadcn-lang-picker

2586283

fix imports

4c32eed

display Lang picker in a dialog on mobile

ed4df19

wackerow approved these changes Aug 13, 2024

View reviewed changes

wackerow merged commit 096e581 into dev Aug 13, 2024
10 checks passed

wackerow deleted the shadcn-lang-picker branch August 13, 2024 21:29

This was referenced Aug 21, 2024

Release candidate: v8.10.0 #13698

Merged

Deploy: v8.10.0 #13699

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shadcn migration - language picker #13531

Shadcn migration - language picker #13531

pettinarip commented Jul 29, 2024 •

edited

Loading

netlify bot commented Jul 29, 2024 •

edited

Loading

konopkja commented Aug 5, 2024 •

edited

Loading

konopkja commented Aug 5, 2024

pettinarip commented Aug 5, 2024

konopkja commented Aug 5, 2024

pettinarip commented Aug 6, 2024 •

edited

Loading

wackerow left a comment

wackerow Aug 6, 2024

pettinarip Aug 8, 2024

pettinarip commented Aug 8, 2024

wackerow left a comment

wackerow Aug 13, 2024

		@@ -0,0 +1,171 @@
		import * as React from "react"
		import { Command as CommandPrimitive } from "cmdk"

Shadcn migration - language picker #13531

Shadcn migration - language picker #13531

Conversation

pettinarip commented Jul 29, 2024 • edited Loading

Description

TODO

netlify bot commented Jul 29, 2024 • edited Loading

✅ Deploy Preview for ethereumorg ready!

konopkja commented Aug 5, 2024 • edited Loading

konopkja commented Aug 5, 2024

pettinarip commented Aug 5, 2024

konopkja commented Aug 5, 2024

pettinarip commented Aug 6, 2024 • edited Loading

wackerow left a comment

Choose a reason for hiding this comment

wackerow Aug 6, 2024

Choose a reason for hiding this comment

pettinarip Aug 8, 2024

Choose a reason for hiding this comment

pettinarip commented Aug 8, 2024

wackerow left a comment

Choose a reason for hiding this comment

wackerow Aug 13, 2024

Choose a reason for hiding this comment

pettinarip commented Jul 29, 2024 •

edited

Loading

netlify bot commented Jul 29, 2024 •

edited

Loading

konopkja commented Aug 5, 2024 •

edited

Loading

pettinarip commented Aug 6, 2024 •

edited

Loading