[search] Create Search component #121

katydecorah · 2019-04-10T18:50:28Z

This PR works to add a new Search component that will add an input hooked up to Swiftype. Results are displayed in a popover under the input.

To test:

npm start
Navigate to http://192.168.7.223:9966/Search

The test has two examples - basic search and in context of where I think it could go on each site (on the right-end of the top bar sticker).

QA Checklist

Responsive

Check on mobile-size viewport.
Check on tablet-size viewport.
Check on laptop-size viewport.
Check on big-monitor-size viewport.

Cross-browser

…t we should fix)

…e applied to a wrapper) to make component more flexible

* master: 0.9.0 Prepare 0.9.0 Add BetaFlag component and options to add it to other components (#123)

* master: fixes bug in firefox where arrow was not vertically centered (#122) add swiftype attribute to ignore content blocks (#119)

This reverts commit 7a3a869.

…tainer

…an fix in the metadata of each site)

* master: 0.10.0 fix prerelease order in sortVersion helper function (#124)

katydecorah · 2019-05-10T13:25:04Z

@colleenmcginnis this is ready for review!

Note: search doesn't appear at all in IE11:

I haven't pinpointed the exact point of failure, but I feel ok with punting on getting the search to work in IE11 since it gracefully degrades (to no search) and doesn't break the layout.

katydecorah · 2019-05-10T13:26:04Z

CHANGELOG.md

+## Master
+
+- Add `Search` component
+- 🚨 [Breaking change] Remove `txt-bold` and `txt-s` from `LevelIndicator` component to make it more flexible.


💡When we update dr-ui in other repos using LevelIndicator we'll want to wrap the component in a span or div with these classes where needed.

katydecorah · 2019-05-10T13:27:20Z

src/components/search/search-box.js

+                    </ul>
+                  ) : (
+                    <div className="py12 px12">
+                      Sorry, we didn't find anything.


Copy suggestions welcome!

🤔 @HeyStenson any thoughts here?

Maybe something like: Hmmm, we didn't find anything. Reword your search, or contact Support. (with a link to the support page).

❓❓❓

I love that @HeyStenson! I'll add it 🙇‍♀

katydecorah · 2019-05-10T13:29:45Z

src/components/search/search-box.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Downshift from 'downshift';


💡Downshift makes our search input and and results navigable by keyboard!

katydecorah · 2019-05-10T13:31:36Z

src/components/search/search-result.js

+                )}
+                {subsite && subsite !== title && subsite !== site ? (
+                  <span>
+                    {subsite.replace(/\sfor\s(iOS|Android|Vision)/, '')}


💡This temporarily removes the "for Android" (or iOS or Vision) from the subsite name. We should eventually update the docs-page-shell to strip this out but this will fix it on the frontend to give us cleaner looking results.

Good call! Much cleaner. Should we do the same for Unity?

colleenmcginnis

@katydecorah this is a work of art.

I think there may be some design considerations we'll need to revisit when we roll this out to the wider collection of docs repos (for example, the width available in top bar when we have a few tabs), but I think this iteration is ready to test on the help page!!

* master: 0.11.1 wrap LevelIndicator in txt-s txt-bold (#126) 0.11.0 Prepare 0.11.0 Create Search component (#121) 0.10.0 fix prerelease order in sortVersion helper function (#124)

Katy DeCorah added 10 commits April 8, 2019 19:37

draft

2d6310c

remove driver, rework

14ba89a

use custom view on SearchBox to remove submit button (for now)

f95dfe8

strip markdown from excerpt (issue with Mapbox GL JS descriptions tha…

9229a89

…t we should fix)

Update search-test-cases.js

baacad7

make search icon gray

9a6fbec

wrap label around icon

8b9fede

update /search-ui

cac6086

update dr-ui

076f0d9

set zIndex

9b21ba3

katydecorah changed the title ~~🚧 Creaate Search component~~ 🚧 Create Search component Apr 10, 2019

Katy DeCorah added 16 commits April 11, 2019 16:21

design and layout

44346d0

use flexbox to center content; remove txt-bold and txt-s (these can b…

360729c

…e applied to a wrapper) to make component more flexible

trying out facet search to toggle between all docs or current site

1944b2b

make icons a little smaller

7b2457c

only show site toggle if this.props.site is a valid site (facet)

e70acd7

move icon tray below description (?)

d471579

test filters

28cfbcb

Merge branch 'master' into search

6647b18

* master: 0.9.0 Prepare 0.9.0 Add BetaFlag component and options to add it to other components (#123)

update /search-ui 0.6.0 ⚠️

029f81f

Merge branch 'master' into search

9e1c761

* master: fixes bug in firefox where arrow was not vertically centered (#122) add swiftype attribute to ignore content blocks (#119)

add comments; add subsite; clean up

a12c580

fix facets

57aee27

add paging

3b2eedf

replace autocomplete with popover

7a3a869

Revert "replace autocomplete with popover"

6d6e20e

This reverts commit 7a3a869.

testing out custom views (to customize input; get arrow-down on results)

3deaeaf

katydecorah force-pushed the search branch from d443ba4 to 3b2eedf Compare April 18, 2019 18:28

add comments; add subsite; clean up

57cb54e

katydecorah force-pushed the search branch from 3b2eedf to 57cb54e Compare April 22, 2019 18:49

katydecorah force-pushed the search branch from e818148 to f4a816d Compare May 7, 2019 20:22

testing headless

5e07f8d

katydecorah force-pushed the search branch from f4a816d to 5e07f8d Compare May 7, 2019 20:47

keep text left align, protect from the cascade

44a47d5

katydecorah force-pushed the search branch from a7dc2b8 to 44a47d5 Compare May 9, 2019 15:06

Katy DeCorah added 3 commits May 9, 2019 11:17

add placeholder prop, remove site prop; clean html; add height to con…

82fed0e

…tainer

fix aria collisions

283d392

add back no result message

8f06750

katydecorah force-pushed the search branch from 1f4c931 to 8f06750 Compare May 9, 2019 23:19

Katy DeCorah added 5 commits May 9, 2019 19:27

temporarily strip for iOS/Android/Vision out of subsite (until we c…

428b32e

…an fix in the metadata of each site)

comment

ecddc6b

Merge branch 'master' into search

df4b25f

* master: 0.10.0 fix prerelease order in sortVersion helper function (#124)

Update CHANGELOG.md

4c94d00

eval wasSearched

387faf1

katydecorah marked this pull request as ready for review May 10, 2019 13:18

katydecorah changed the title ~~🚧 Create Search component~~ Create Search component May 10, 2019

katydecorah requested a review from colleenmcginnis May 10, 2019 13:25

katydecorah commented May 10, 2019

View reviewed changes

colleenmcginnis approved these changes May 10, 2019

View reviewed changes

Katy DeCorah added 2 commits May 10, 2019 16:22

update no result found copy

5d09f48

remove "for Unity" from subsite as well

5fc2356

katydecorah merged commit 6a45611 into master May 10, 2019

katydecorah deleted the search branch May 10, 2019 20:42

katydecorah changed the title ~~Create Search component~~ [search] Create Search component Jul 26, 2019

katydecorah added the search label Jul 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[search] Create Search component #121

[search] Create Search component #121

katydecorah commented Apr 10, 2019 •

edited

Loading

katydecorah commented May 10, 2019

katydecorah May 10, 2019 •

edited

Loading

katydecorah May 10, 2019

colleenmcginnis May 10, 2019

HeyStenson May 10, 2019

katydecorah May 10, 2019

katydecorah May 10, 2019

colleenmcginnis May 10, 2019

katydecorah May 10, 2019

colleenmcginnis May 10, 2019

colleenmcginnis left a comment

[search] Create Search component #121

[search] Create Search component #121

Conversation

katydecorah commented Apr 10, 2019 • edited Loading

QA Checklist

Responsive

Cross-browser

katydecorah commented May 10, 2019

katydecorah May 10, 2019 • 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

colleenmcginnis left a comment

Choose a reason for hiding this comment

katydecorah commented Apr 10, 2019 •

edited

Loading

katydecorah May 10, 2019 •

edited

Loading