Skip to content
This repository has been archived by the owner on Jun 12, 2024. It is now read-only.

Load Search with a facade #430

Merged
merged 37 commits into from
Apr 22, 2021
Merged

Load Search with a facade #430

merged 37 commits into from
Apr 22, 2021

Conversation

katydecorah
Copy link
Contributor

@katydecorah katydecorah commented Apr 6, 2021 •
edited
Loading

This branch will merge into #431

This PR replaces the initial entry point to the Search component with a facade. The facade is a button that looks exactly like the Search component, but only in looks. Once the users clicks or focuses on the facade, the full Search component will load via dynamic import.

A few things were moved around to support the facade:

  1. The logic to load the Swiftype moved to a new file: search-provider.js. When the user interacts with the facade, we dynamically load the search-provider.js.
  2. The search input and search button are now components that are shared by search-box.js and search-facade.js. This allows us to have a seamless transition.

How to test

Overall: you should not be able to tell that the Search component loads a facade until you click or focus on it.

  1. npm start and visit the /Search test cases app.
    • On small screens, test cases the use the search button switch to input
    • Each test case returns a search result
  2. npm run start-docs
    • Search component works in PageLayout

QA checklist

  • No errors logged to console.
  • Accessibility score in Chrome DevTools Audit/Lighthouse is 100% with Lighthouse version: 7.0.0.
  • Component is accessible at mobile-size viewport.
  • Component is accessible at tablet-size viewport.
  • Component is accessible at laptop-size viewport.
  • Component is accessible at big-monitor-size viewport.

Open the test cases app locally on:

  • Chrome, no errors logged to console.
  • Firefox, no errors logged to console.
  • Safari, no errors logged to console.
  • Edge, no errors logged to console.
  • Mobile Safari, no errors logged to console.
  • Android Chrome, no errors logged to console.

Before merge

  • Add entry to CHANGELOG.md to describe changes.

@katydecorah katydecorah changed the base branch from main to 4.0.0 April 6, 2021 17:21
Katy DeCorah added 9 commits April 6, 2021 14:01
Add @loadable/babel-plugin
5b859f2
Merge branch '4.0.0' into add-search-facade
b612571 
* 4.0.0:
  Update dependencies (#433)
  Make code toggles in test cases interactive or label if they are not (#432)
  Prepare 4.0.0 changelog
  Enforces where React component static properties should be positioned (#429)
  Node 12 (#428)
Update CHANGELOG.md
686700d
Fix logic
837636e
Update search.test.js.snap
a518d61
Define development babel env to prevent @loadable/babel-plugin from…
609cd8d 
… loading on start (because it fails)
Adjusting snapshots
d2e7fd9
Revert "Adjusting snapshots"
8528720 
This reverts commit d2e7fd9.
Clean up props
a71d03e
@katydecorah
Copy link
Contributor Author

Performance testing in docs-lighthouse looks good. I want to wait for #414 to merge so that I can test these together.

Katy DeCorah added 2 commits April 13, 2021 11:23
Merge branch '4.0.0' into add-search-facade
fb8b433 
* 4.0.0:
  Improve color contrast on code and anchor elements (#434)
  Replace stateless components with pure components (#414)
Update package-lock.json
b8f5e0c
@katydecorah katydecorah requested a review from a team April 13, 2021 19:56
@katydecorah katydecorah marked this pull request as ready for review April 13, 2021 20:01
@danswick danswick requested review from danswick and removed request for a team April 14, 2021 17:28
Katy DeCorah added 2 commits April 19, 2021 12:00
Merge branch '4.0.0' into add-search-facade
687093a 
* 4.0.0:
  Use passive event listeners on `Search`, `NumberedCodeSnippet`, and `OnThisPage` to improve performance (#437)
  Make "With token" `DemoIframe` a no render test case (#440)
  Make `filename` optional for `CodeSnippetTitle`
  Replace `id` with `aria-label` in VimeoPlayImage (#438)
  Create `prepareSitemap` Batfish helper to improve sitemap (#427)
  Add eslint-plugin-jsx-a11y (#435)
Add passive event listener
2a3869d
danswick
danswick approved these changes Apr 22, 2021
View reviewed changes
Copy link
Contributor

@danswick danswick left a comment

Choose a reason for hiding this comment

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

This is awesome, @katydecorah! I walked through each of the test cases, tried your console.log suggestion, and ran the test site as well. Thanks to your helpful inline comments, I don't really have any questions or comments. This seems really well thought-out and solid to me 👍

Katy DeCorah added 2 commits April 22, 2021 08:57
Merge branch '4.0.0' into add-search-facade
b306075 
* 4.0.0:
  Reconfigure `Video` options to optimize for user's settings around autoplay (#276)
Allow autofocus
63374ec
@katydecorah katydecorah merged commit 7d8c8c2 into 4.0.0 Apr 22, 2021
@katydecorah katydecorah deleted the add-search-facade branch April 22, 2021 13:32
katydecorah pushed a commit that referenced this pull request Apr 22, 2021
Merge branch '4.0.0' into lh-ci
0195fda 
* 4.0.0:
  Load Search with a facade (#430)
  Reconfigure `Video` options to optimize for user's settings around autoplay (#276)
katydecorah pushed a commit that referenced this pull request Apr 22, 2021
Merge branch '4.0.0' into jsx-no-bind
22d3753 
* 4.0.0:
  Load Search with a facade (#430)
  Reconfigure `Video` options to optimize for user's settings around autoplay (#276)
katydecorah pushed a commit that referenced this pull request May 11, 2021
@danswick
⚡️ 4.0.0 (#431)
d35b4d6 
* Prepare 4.0.0 changelog

* Make code toggles in test cases interactive or label if they are not (#432)

* Update dependencies (#433)

* Update dependencies

* Update package-lock.json

* Update rehype-slug

* Fix links

* Update page-layout.md

* Update snapshots

* Replace stateless components with pure components (#414)

* Use PureComponent on stateless components

* Update package-lock.json

* 4.0.0-alpha.0

* Use PureComponents where components do not require rerenders

* 4.0.0-alpha.1

* prefer-const

* Update CHANGELOG.md

* Make more components pure

* 4.0.0-alpha.2

* 4.0.0-alpha.3

* Improve color contrast on code and anchor elements (#434)

* Expand a code color contrast improvement

* Increase color contrast on .color-gray code

* Increase color contrast for prism's .token.regex,.token.important

* Clean up test cases

* Update CHANGELOG.md

* Clean up test cases

* Clean up test cases

* Update docs/src/pages/guides/a11y.md

Co-authored-by: Colleen McGinnis <colleen.mcginnis@mapbox.com>

* Reduce changes

Co-authored-by: Colleen McGinnis <colleen.mcginnis@mapbox.com>

* 🔧 Run prettier

* Add eslint-plugin-jsx-a11y (#435)

* Add eslint-plugin-jsx-a11y

* Fix props

* Update CHANGELOG.md

* Update search.test.js.snap

* Update eslint

* Update eslint

* Create `prepareSitemap` Batfish helper to improve sitemap (#427)

* Create prepareSitemap Batfish helper

* Update CHANGELOG.md

* Clean up, add `docsPath`, and `outputDirectory`

* Exclude `splitPage` from sitemap

* Assert sitemap

* Extract urls

* Sort sitemap

* Remove snapshot

* Update sitemap.test.js

* Update batfish-helpers.md

* Update batfish-helpers.md

* Copyedit

* Update package-lock.json

* Replace `id` with `aria-label` in VimeoPlayImage (#438)

* Replace `id` with aria-label to prevent duplicated id

* Update CHANGELOG.md

* Make `filename` optional for `CodeSnippetTitle`

* Make "With token" `DemoIframe` a no render test case (#440)

* Make "With token" `DemoIframe` a no render test case

* Rename

* Use passive event listeners on `Search`, `NumberedCodeSnippet`, and `OnThisPage` to improve performance (#437)

* Use passive event listeners on `Search`, `NumberedCodeSnippet`, and `OnThisPage` to improve performance.

* Update CHANGELOG.md

* Reconfigure `Video` options to optimize for user's settings around autoplay (#276)

* show video controls on hover; show play button for browsers with disabled autoplay

* Merge branch 'main' into video-controls

* main:
  Add the catalog site  (#137)
  Delete dependabot.yml
  Only direct dependencies
  Create dependabot.yml (#296)
  Update Travis bad
  Update devDependencies (#294)

* Add example

* More comments

* Reduce changes

* eslint and fix button styles

* Clean up button

* Set playsInline to true if autoPlay is true; make `muted` a prop

* Update test cases description to indicate the autoplay state

* Update description

* Update snapshots

* Update CHANGELOG.md

* Create `playsInline` prop

* Append hash to src to enable preview on iOS

* Update video.js

* Adds optional `poster` prop

* Remove hack

* Add poster example

* Fix paths

* Update descriptions

* Apply suggestions from code review

* Load Search with a facade (#430)

* Load Search with a facade

* Add @loadable/babel-plugin

* Update CHANGELOG.md

* Fix logic

* Update search.test.js.snap

* Define development babel env to prevent `@loadable/babel-plugin` from loading on start (because it fails)

* Adjusting snapshots

* Revert "Adjusting snapshots"

This reverts commit d2e7fd9.

* Clean up props

* Comments

* Reduce changes

* Reduce changes

* Reduce changes

* Reduce changes

* Clean up props

* Use SearchInput in SearchBox

* Use SearchButton in SearchBox

* Reduce changes

* Add missing props

* Consolidate wrapper

* 4.0.0-alpha.4

* Try dynamic import

* Update package-lock.json

* 4.0.0-alpha.5

* Update package-lock.json

* Reduce changes

* Reorganize files

* 4.0.0-alpha.6

* Switch to noRenderCase

* Reduce changes

* Add passive event listener

* Allow autofocus

* Enable react/jsx-no-bind (#442)

* jsx-no-bind

* Update CHANGELOG.md

* Simplify, reduce changes

* The `NumberedCodeSnippet` prop `onCopy` is deprecated and will automatically send a track event to Segment

* Remove unused onCopy

* Simplify

* Add onCopy

* Create onCopy function

* Update src/components/code-snippet/on-copy.js

* Update dependencies

* Update caniuse

* Update devDependencies

* Update CHANGELOG.md

* Fix NavigationAccordion tests (#443)

* 4.0.0-alpha.7

* Fix prepareSitemap: append index.html to files ending in index.js (#444)

* 4.0.0-alpha.8

* Update batfish

* Update caniuse-lite

* Fix props on search toggle (#448)

* Fix props on search toggle

* 4.0.0-alpha.9

* For searches with no results, retry if Swiftype thinks there is a spelling error (#451)

* pass through swiftype API spelling option

* move prettier'd comment

* Update search-ui, downshift

* Update caniuse-lite

* Update @sentry/browser

* Send search results with no queries to Sentry (#452)

* Send search results with no queries to Sentry

* Update CHANGELOG.md

* Update prettier

* Fix Sentry test

* 4.0.0-alpha.10

* Switch Sentry environment back to `main`

* Fix Search/Sentry, only send when results change

* 4.0.0

* Clean up

Co-authored-by: Colleen McGinnis <colleen.mcginnis@mapbox.com>
Co-authored-by: Dan Swick <dan.swick@gmail.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@danswick danswick danswick approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@katydecorah @danswick