feat(v2): allow any type of `NavbarItem` to be passed in dropdown #5072

Josh-Cena · 2021-06-27T15:09:34Z

Motivation

Fix eslint error (because of the any type).
Fix Docs link in navbar dropdowns are completely broken #5071. Resolve Navbar dropdown items should support type "doc" #4996.
Algorithmic refactors

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

The website should be able to test most use cases; how do I test other cases? (e.g. when the dropdown items are doc links)

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

netlify · 2021-06-28T02:12:13Z

✔️ [V2]

🔨 Explore the source changes: c12f0ba

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/60ef0b849666ba0008566ee4

😎 Browse the preview: https://deploy-preview-5072--docusaurus-2.netlify.app

github-actions · 2021-06-28T02:12:27Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	76
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-5072--docusaurus-2.netlify.app/

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Josh-Cena · 2021-07-09T11:39:15Z

@slorber I'm mostly done now. Should I take care of the joi / docs, or can we merge this and worry about other issues later 🤷‍♂️

slorber · 2021-07-09T13:01:07Z

In any case I want to merge this PR #4273 asap before this one.

I'll update your PR and resolve conflicts if needed and then will review this one. Perfect validation can be taken care of later

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

# Conflicts: # packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx

slorber

Thanks, that looks much cleaner to have a separate dropdown component, wanted to do that as well :)

We'll figure out the types/validation later

slorber · 2021-07-14T15:31:09Z

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx


 function getDocInVersions(versions: GlobalDataVersion[], docId: string) {
-  // vanilla-js flatten, TODO replace soon by ES flat() / flatMap()
-  const allDocs: GlobalDataDoc[] = [].concat(


not 100% sure but I think we need to keep it for older node/browsers

I think this is taken care of by Babel, as long as the target is set to ES5 or ES6?

yes babel probably does something with browserslist

I think I avoided flatMap in the past due to having to support node10

slorber · 2021-07-14T15:37:44Z

packages/docusaurus-theme-classic/src/types.d.ts

-  } & ComponentProps<'a'>;
+  import type {LinkProps} from '@docusaurus/Link';
+
+  export type NavLinkProps = LinkProps & {


Why not keeping LinkProps here?

slorber · 2021-07-14T15:53:56Z

packages/docusaurus-theme-classic/tsconfig.json

@@ -1,7 +1,7 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
-    "lib": ["DOM"],
+    "lib": ["DOM", "ESNext"],


replacing this with ES2019, as it will run in NodeJS 12 (unlike any new ES2020 feature)

However not yet 100% convinced it's the right move because some ES2019/older features don't have all a very good browser support, so we'll have to remember to not use them

slorber · 2021-07-14T16:12:00Z

Thanks, going to merge this.

We'll use later validation to ensure that we don't try to render a recursive dropdown structure etc because currently this is
possible 🤪 (even if user is unlikely to try this as it does not make sense)

Also thinking of forcing users to provide a type: "dropdown" in the future to avoid this dynamic/implicit type behavior. Probably by first adding a warning when not using the dropdown type and items array exist

slorber · 2021-07-15T10:57:59Z

I don't know, no strong feelins about this yet but in general I prefer a stricter config (ie all items have an explicit type, including link/dropdown) than having the config be implicitly typed. This is also simpler for our own code (ex the validation does not have to be dynamic)

Josh-Cena · 2021-07-15T11:00:24Z

Oops, not expecting for such a quick response 😂 In any case let's discuss in the docs PR

Josh-Cena added 2 commits June 26, 2021 16:09

Initial work

ec200db

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

More elegant eslint-disable

61081b8

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Josh-Cena requested review from lex111 and slorber as code owners June 27, 2021 15:09

facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 27, 2021

Josh-Cena marked this pull request as draft June 27, 2021 15:09

Josh-Cena changed the title ~~refactor(v2): make NavbarItem polymorphic~~ [WIP] refactor(v2): make NavbarItem polymorphic Jun 27, 2021

Fix typing

0643643

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Josh-Cena changed the title ~~[WIP] refactor(v2): make NavbarItem polymorphic~~ [WIP] refactor(v2): correct NavbarItem logic Jun 28, 2021

Josh-Cena added 2 commits June 28, 2021 10:50

Allow doc links in dropdown

71b486f

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Allow more dropdowns to use linklike items

ddd4ae6

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Josh-Cena changed the title ~~[WIP] refactor(v2): correct NavbarItem logic~~ feat(v2): allow any type of NavbarItem to be passed in dropdown Jun 28, 2021

Josh-Cena added 16 commits June 28, 2021 18:41

Finalize

adc47b1

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Dogfood

9c69f97

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Disallow nested dropdowns

8fae628

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Better typing

79c7e92

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Complete type fix

80815f9

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Use flatmap

7e7de27

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Patch

10acb67

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Test

33cda97

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Try fix

1d62f1d

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Style change

48fd04a

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Revert (to test)

068dd3f

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Hmmm

a133ec2

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

I know what's wrong

f3901e6

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Does this work?

24b162e

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Nope

2131e00

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Wrong class name

70ca5d0

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Josh-Cena added 8 commits July 2, 2021 12:30

Better prop typing

db74fbe

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Make code simpler

618df82

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

There's some extra className

27220a0

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Test

3338b79

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

More test

2263083

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

A-ha!

4b9e171

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Test again?

dacf15f

Add backward compatibility

559a7bf

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Josh-Cena and others added 8 commits July 10, 2021 14:58

Merge branch 'master' into navbaritem

52d0aac

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Incorporate my type fix

c7ccd7c

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Resolve conflict

35b1b99

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Merge branch 'master' into navbaritem

3d12b30

Merge branch 'master' into navbaritem

e9895d6

# Conflicts: # packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx

minor refactor

1075477

minor refactors

07ce433

allow usage of ES2019 in browser code

4ff53d7

slorber approved these changes Jul 14, 2021

View reviewed changes

revert NavLink rename

c12f0ba

slorber merged commit 007e901 into facebook:master Jul 14, 2021

Josh-Cena deleted the navbaritem branch July 15, 2021 00:55

Josh-Cena mentioned this pull request Jul 15, 2021

docs: update API docs on navbar behavior #5175

Merged

Josh-Cena mentioned this pull request Jul 15, 2021

fix(v2): Fix type for navlink label #5176

Merged

lex111 mentioned this pull request Jul 15, 2021

fix(v2): wrap dropdown item to missing li element + remove extra attributes #5179

Merged

Josh-Cena mentioned this pull request Jul 21, 2021

fix: navbar item validation done correctly #5202

Merged

Josh-Cena mentioned this pull request Nov 13, 2021

Nested dropdown #5938

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(v2): allow any type of `NavbarItem` to be passed in dropdown #5072

feat(v2): allow any type of `NavbarItem` to be passed in dropdown #5072

Josh-Cena commented Jun 27, 2021 •

edited

netlify bot commented Jun 28, 2021 •

edited

github-actions bot commented Jun 28, 2021 •

edited

Josh-Cena commented Jul 9, 2021

slorber commented Jul 9, 2021

slorber left a comment

slorber Jul 14, 2021

Josh-Cena Jul 15, 2021

slorber Jul 15, 2021

slorber Jul 14, 2021

slorber Jul 14, 2021

slorber commented Jul 14, 2021 •

edited

slorber commented Jul 15, 2021

Josh-Cena commented Jul 15, 2021

feat(v2): allow any type of NavbarItem to be passed in dropdown #5072

feat(v2): allow any type of NavbarItem to be passed in dropdown #5072

Conversation

Josh-Cena commented Jun 27, 2021 • edited

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

netlify bot commented Jun 28, 2021 • edited

github-actions bot commented Jun 28, 2021 • edited

Josh-Cena commented Jul 9, 2021

slorber commented Jul 9, 2021

slorber left a comment

Choose a reason for hiding this comment

slorber Jul 14, 2021

Choose a reason for hiding this comment

Josh-Cena Jul 15, 2021

Choose a reason for hiding this comment

slorber Jul 15, 2021

Choose a reason for hiding this comment

slorber Jul 14, 2021

Choose a reason for hiding this comment

slorber Jul 14, 2021

Choose a reason for hiding this comment

slorber commented Jul 14, 2021 • edited

slorber commented Jul 15, 2021

Josh-Cena commented Jul 15, 2021

feat(v2): allow any type of `NavbarItem` to be passed in dropdown #5072

feat(v2): allow any type of `NavbarItem` to be passed in dropdown #5072

Josh-Cena commented Jun 27, 2021 •

edited

netlify bot commented Jun 28, 2021 •

edited

github-actions bot commented Jun 28, 2021 •

edited

slorber commented Jul 14, 2021 •

edited