feat: added language selector #2531

werdnanoslen · 2023-07-26T21:15:42Z

Summary

Adds Language Selector component
Adds a pass-through prop to Menu for showing the right kind of NavList (using subnav as default if not given, as is currently hard-coded)
Adds language type to NavList

Related Issues or PRs

Resolves #2516

How To Test

Open the stories for LanguageSelector

Screenshots (optional)

Two languages just toggles:

More than two language shows a dropdown:

werdnanoslen · 2023-07-26T21:22:14Z

This uses links per USWDS' implementation, but I think it's also likely that people will want to implement in-page with buttons using onClick (similar to their guidance here, resulting in our other PR). This is also how my current project expects to use it, so I'll look into a button option as a follow-up commit here or future PR.

- added both buttons and links, depending on given click action - added missing click action to 2-lang button - added custom class story

werdnanoslen · 2023-07-28T17:22:59Z

This uses links per USWDS' implementation, but I think it's also likely that people will want to implement in-page with buttons using onClick (similar to their guidance here, resulting in our other PR). This is also how my current project expects to use it, so I'll look into a button option as a follow-up commit here or future PR.

Latest commit adds this, so ready for review (pending styles ⚠️ )!

werdnanoslen · 2023-07-31T22:17:54Z

This uses links per USWDS' implementation, but I think it's also likely that people will want to implement in-page with buttons using onClick (similar to their guidance here, resulting in our other PR). This is also how my current project expects to use it, so I'll look into a button option as a follow-up commit here or future PR.

Latest commit adds this, so ready for review (pending styles ⚠️ )!

Fixed styling now that 3.3 styles are merged, and filed an issue to let us remove that later if merged. This is fully ready for review now

werdnanoslen · 2023-07-31T22:24:41Z

Hm, not sure I'm interpreting the build rule correctly, but given my @extend is the simplest way I know of to reference code from USWDS and not copy-paste it into our code, could this error be overridden?

jcbcapps

This looks great! Just left a couple of minor questions. Didn't feel like they were big enough to request changes.

src/components/LanguageSelector/LanguageSelector.tsx

src/styles/index.scss

jcbcapps · 2023-08-02T14:38:05Z

src/components/LanguageSelector/LanguageSelectorButton.tsx

+}: LanguageSelectorButtonProps &
+  JSX.IntrinsicElements['button']): React.ReactElement => {
+  const classes = classnames('usa-button', 'usa-language__link', className)
+  const labelNotEn = labelAttr && <span lang={labelAttr}>{label}</span>


Since you removed the curLangNotEn variable in LanguageSelector and are no longer using the labelAttr prop from there, do we still need this labelNotEn variable? Looking at the test coverage, the <span> here is not checked, and it just made me wonder if it is still needed.

I'd still keep it on the button so that the button contents get the same lang attr treatment. I just updated it to handle that better if you want to see those changes

jcbcapps · 2023-08-02T14:42:18Z

src/components/LanguageSelector/LanguageSelectorButton.tsx

+
+type LanguageSelectorButtonProps = {
+  label: string
+  labelAttr?: string


Do we still need the labelAttr prop? It seems that in order for this prop to be utilized, LanguageSelectorButton would need to be used outside of the LanguageSelector component.

it's still useful for the 2 language variant, where the language's text should be tagged. I've updated it a bit to reflect that

shkeating · 2023-08-02T23:10:41Z

so what I have gathered so far is the lint tool is mad at how you used @extend because it can cause specificity issues. I personally don't feel this particular instance carries much of that risk, especially as a temporary solution parked in the index file. I'm seeing if there is a way to push the link styles from uswds dynamically that doesn't use @extend.

I'm pretty sure those styles are stored in a mixin already which we can call with @include for a similarly elegant solution that does not make us have to override lint rules

shkeating · 2023-08-02T23:41:13Z

so what I have gathered so far is the lint tool is mad at how you used @extend because it can cause specificity issues. I personally don't feel this particular instance carries much of that risk, especially as a temporary solution parked in the index file. I'm seeing if there is a way to push the link styles from uswds dynamically that doesn't use @extend.

I'm pretty sure those styles are stored in a mixin already which we can call with @include for a similarly elegant solution that does not make us have to override lint rules

im now seeing that the styles for this particular link instance are pretty custom. maybe our quickest path forward is just grabbing the scss and pasting it where @extend would have output it. not as sleek but it is a temp solution. im trying that now to see if it works

shkeating · 2023-08-02T23:50:26Z

src/styles/index.scss

@use 'uswds-core' as *; would need to be added up top for the suggestion to work

@werdnanoslen did you include this change too when you tested the utilities? You need to have uswds-core in scope for utilities to work

I tried, but i kept getting build errors

shkeating · 2023-08-02T23:52:23Z

src/styles/index.scss

+// This just allows buttons as well as links in the LanguageSelector
+// It can be removed when https://github.com/uswds/uswds/issues/5409 is fixed
+.usa-language__submenu .usa-language__submenu-item button {
+  @extend a;


Suggested change

@extend a;

color: color('white');

display: block;

line-height: line-height($theme-navigation-font-family, 3);

padding: 0;

padding: units(1);

text-decoration: none;

width: 100%; /* this is something that was actually missing when we were doing the extend because button widths hve different default widths than block element links */

&:focus {

outline-offset: units('neg-05');

}

&:hover {

color: color('white');

text-decoration: underline;

}

this just grips the scss right out of the package, replicating the @extend output.

only advantage of this over using @extend is it stops us from overriding lint rules, and it makes sure the focus indicator behaves the same with with width assignment I added, but you could also add that using the @extend.

I would defer to the app eng folks on how they feel about overriding lint rules, but if you are looking to get this going this is how I'd get around it.

thanks! committed that

hm, we don't seem to be using utilities anywhere, and I couldn't get it to work, so I've just copied the compiled styles over here for now.

shimonacarvalho · 2023-08-03T00:43:13Z

src/components/LanguageSelector/LanguageSelector.tsx

+  )
+
+  if (langs.length > 2) {
+    const [isOpen, setIsOpen] = useState(false)


Thought i'd jump the gun a bit and try this in IRS project. Getting the following eslint error there:

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.eslint[react-hooks/rules-of-hooks](https://reactjs.org/docs/hooks-rules.html)

shimonacarvalho · 2023-08-03T00:43:45Z

src/components/LanguageSelector/LanguageSelector.tsx

+      )
+    }
+    const [langIndex, setLangIndex] = useState(false)
+    const curLang = langs[Number(langIndex)]


Getting the same eslint error about this instance ofuseState as well.

werdnanoslen · 2023-08-09T21:23:16Z

Happo all looks as intended, except for the ios-mobile ones:

However, I can't reproduce this myself, so maybe it's a Happo issue?

I'm going to self-approve Happo unless someone is able to reproduce that issue.

shkeating

also cannot reproduce the safari issue

added language selector

576573b

werdnanoslen requested review from gidjin, haworku, ahobson, brandonlenz and SirenaBorracha as code owners July 26, 2023 21:15

werdnanoslen requested a review from a user July 26, 2023 21:15

werdnanoslen requested review from rogeruiz and jcbcapps as code owners July 26, 2023 21:15

werdnanoslen added 4 commits July 26, 2023 14:22

Merge branch 'main' into an-language-2516

622ea36

added to index.ts

9d57c17

a few things...

80b9fa4

- added both buttons and links, depending on given click action - added missing click action to 2-lang button - added custom class story

prettier

17091f2

Merge branch 'main' into an-language-2516

aa4c423

werdnanoslen mentioned this pull request Jul 31, 2023

USWDS - Feature: Buttons in language selector dropdown uswds/uswds#5409

Open

2 tasks

updated style

d8e7226

jcbcapps reviewed Aug 1, 2023

View reviewed changes

src/components/LanguageSelector/LanguageSelector.tsx Outdated Show resolved Hide resolved

src/styles/index.scss Outdated Show resolved Hide resolved

always show lang attr, make more language agnostic

7a9913f

werdnanoslen requested a review from jcbcapps August 1, 2023 16:27

jcbcapps reviewed Aug 2, 2023

View reviewed changes

tweak langAttr on button

bc58d92

shkeating reviewed Aug 2, 2023

View reviewed changes

shimonacarvalho reviewed Aug 3, 2023

View reviewed changes

side-stepped lint error

28a4541

werdnanoslen requested review from shkeating and jcbcapps August 3, 2023 02:16

another lint fix

fe60666

werdnanoslen requested a review from shimonacarvalho August 3, 2023 02:21

werdnanoslen added 3 commits August 7, 2023 10:16

Merge branch 'main' into an-language-2516

05eb2f5

fixed placement of @use

2f6ea24

scss fix

c4cd2bd

shkeating previously approved these changes Aug 9, 2023

View reviewed changes

replacing utilities with hardcoded styles

c6706d7

werdnanoslen dismissed shkeating’s stale review via c6706d7 August 9, 2023 21:03

werdnanoslen requested a review from shkeating August 9, 2023 21:04

lint fix

0f3e669

shkeating approved these changes Aug 9, 2023

View reviewed changes

Merge branch 'main' into an-language-2516

aed67f6

werdnanoslen merged commit 60bf797 into main Aug 9, 2023
8 checks passed

werdnanoslen deleted the an-language-2516 branch August 9, 2023 22:46

github-actions bot mentioned this pull request Aug 9, 2023

chore(release): release 5.2.0 #2528

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: added language selector #2531

feat: added language selector #2531

werdnanoslen commented Jul 26, 2023 •

edited

Loading

werdnanoslen commented Jul 26, 2023

werdnanoslen commented Jul 28, 2023

werdnanoslen commented Jul 31, 2023

werdnanoslen commented Jul 31, 2023

jcbcapps left a comment

jcbcapps Aug 2, 2023

werdnanoslen Aug 2, 2023

jcbcapps Aug 2, 2023 •

edited

Loading

werdnanoslen Aug 2, 2023

shkeating commented Aug 2, 2023

shkeating commented Aug 2, 2023

shkeating Aug 2, 2023

haworku Aug 9, 2023 •

edited

Loading

werdnanoslen Aug 9, 2023

shkeating Aug 2, 2023

shkeating Aug 2, 2023

werdnanoslen Aug 3, 2023

werdnanoslen Aug 9, 2023

shimonacarvalho Aug 3, 2023

werdnanoslen Aug 3, 2023

shimonacarvalho Aug 3, 2023

werdnanoslen Aug 3, 2023

werdnanoslen commented Aug 9, 2023

shkeating left a comment

-  @extend a;
+    color: color('white');
+  display: block;
+  line-height: line-height($theme-navigation-font-family, 3);
+  padding: 0;
+  padding: units(1);
+  text-decoration: none;
+  width: 100%;  /* this is something that was actually missing when we were doing the extend because button widths hve different default widths than block element links */
+  &:focus {
+    outline-offset: units('neg-05');
+  }
+  &:hover {
+    color: color('white');
+    text-decoration: underline;
+  }

feat: added language selector #2531

feat: added language selector #2531

Conversation

werdnanoslen commented Jul 26, 2023 • edited Loading

Summary

Related Issues or PRs

How To Test

Screenshots (optional)

werdnanoslen commented Jul 26, 2023

werdnanoslen commented Jul 28, 2023

werdnanoslen commented Jul 31, 2023

werdnanoslen commented Jul 31, 2023

jcbcapps left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcbcapps Aug 2, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shkeating commented Aug 2, 2023

shkeating commented Aug 2, 2023

Choose a reason for hiding this comment

haworku Aug 9, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

werdnanoslen commented Aug 9, 2023

shkeating left a comment

Choose a reason for hiding this comment

werdnanoslen commented Jul 26, 2023 •

edited

Loading

jcbcapps Aug 2, 2023 •

edited

Loading

haworku Aug 9, 2023 •

edited

Loading