Docs Feedback widget #13550

marcysutton · 2019-04-22T20:44:56Z

Description

Introducing a feedback widget to the docs section, with code integrated from @jlengstorf's feedback widget repo. We want to make it easy to collect feedback about docs from users in the moment, and by creating our own widget we will control the data (as opposed to a third-party service).

This PR adds two new dependencies for managing state:

xstate
@xstate/react

It would be super cool to add some tests for this, primarily to assert focus management in after view changes so we know they continue to work. Hopefully I'll get some time to work on that...but I didn't want to hold up reviewing of this in the meantime.

TODO:

Test with NVDA on IE11 and Firefox. The master branch is currently failing to build for me so I can't test it with Parallels.

fk

This looks great, love the emoji animations! 😻

I didn't look at the code much (lacking skills + time), but I have one request: Can we use the design tokens from utils/presets, e.g. use colors.gatsby instead of rebeccapurple, and do the same for margin and padding (space), box-shadow, border-radius, font-size etc.? 🙏

I'm happy to do so myself, but won't be able to fit that in today.
Also — I know those tokens lack documentation, planning on adding that this week. :/

There’s more to do, but this is a start… - remove `font-family: sans-serif` along the way - remove components/feedback-widget/presets in favor of utils/presets.breakpoints

greglobinski · 2019-04-24T17:45:00Z

I've changed textarea height to fix widget height

before

after

I won't manage "Use design tokens (2/2)" today anymore and blocking a merge would be silly. Happy to follow up tomorrow on the token stuff!

pieh · 2019-04-25T00:13:28Z

For people who want to try it - here's preview https://5cc089e52d11ebeccaf8db72--gatsby-org-pieh-previews.netlify.com/docs/ (just a note - it doesn't contain changes made in last 2 commits by Flo and Greg)

- chose to reduce the border around the „emoji toggle buttons“ from 3 to 1px - add horizontal margin for screens below desktop/lg

Ref. #13388

fk · 2019-04-25T12:17:29Z

Just pushed the missing design tokens stuff and fixed layout for screens below breakpoints.lg (horizontal whitespace, max-width matching content), and merged master to adjust things for #13388.

@greglobinski I had to do some gymnastics for smaller screens/max-width, and changed the textarea width from 99% to 100%, and removed overflow-y: auto. I think everything is still working fine (checked animations, etc.) — could you take another look though please? Don't want to break anything, and not sure if I am aware of everything that needs checking.

Here's how it looks now:

greglobinski · 2019-04-25T12:54:43Z

@fk Looking good, thank you

prestonso · 2019-04-29T14:50:38Z

I know we have the ? affordance that doubles as a question mark currently, but there should be a question mark at the end of the phrase as well, especially for wider viewports:

Was this doc helpful to you?          [?]

instead of:

Was this doc helpful to you         [?]

greglobinski · 2019-04-29T14:58:22Z

Actually, there is a hidden question mark for screen readers

 <ToggleButtonLabel>
              Was this doc helpful to you
              <ScreenReaderText>?</ScreenReaderText>
            </ToggleButtonLabel>

so we can show it if we want.

marcysutton · 2019-04-29T20:11:56Z

Adding a visible question mark in the button text makes sense to me.

We should also factor this widget in to the docs internationalization effort–would we hide it for other languages? Or collect feedback and get it translated?

pieh · 2019-05-02T16:16:33Z

Few notes about visible extra question mark - I think it looks pretty weird in desktop variant (like double question mark):

It does seem ok for narrow viewports:

I can implement it to show only for narrow viewports but it will feel pretty inconsistent to me. Thoughts?

greglobinski · 2019-05-06T14:41:01Z

@marcysutton @pieh @prestonso

What about such a solution? We always show a while mark at the end of the question, but instead of the Question mark icon we show a Chat icon?

marcysutton · 2019-05-06T16:33:37Z

Ooh, I like that! I think using a chat/message icon solves the problem very well.

fk · 2019-05-07T04:02:16Z

☝️☝️☝️

muescha · 2019-05-09T02:28:32Z

Found in screenshot above: is this a one time glitch or is it fixed?

greglobinski · 2019-05-09T12:35:47Z

@muescha

Found in screenshot above: is this a one time glitch or is it fixed?

What exactly are you asking about?

muescha · 2019-05-09T13:01:09Z

The "poor" icon in this screenshots is shiftet down and not visible

greglobinski · 2019-05-09T13:03:38Z

The "poor" icon in this screenshots is shiftet down and not visible

@muescha Ok, that's the intentional hover state of the input.

marcysutton · 2019-05-11T23:08:19Z

www/src/components/feedback-widget/buttons.js

+`
+
+export const focusStyle = css`
+  box-shadow: 0 0 0 0.12rem ${colors.accent};


This focus style still isn't working in Safari. I played around with it a bit and opted to change it to use outline and outline-offset instead:

outline: 2px solid ${colors.accent}; outline-offset: -2px;

https://codepen.io/marcysutton/pen/WBxEom

marcysutton · 2019-05-11T23:09:55Z

This is ready to go now! The only issue I ran into was if you hit the enter key on the smiley radio buttons, it wouldn't go through the submit flow....it would cancel and reset back to the widget toggle button instead. I was able to fix it by adding type="button" to the cancel button. woot!

Also tested it on Windows, and it works great with NVDA, Firefox, and Chrome. Edge was decent but it gets the radio buttons wrong by only announcing "1 of 1" for each instead of "1 of 3", etc. Given they're moving to Chromium I opted to leave that as-is without digging in more.

www/src/components/feedback-widget/question-mark-icon.js

muescha · 2019-05-12T08:03:48Z

Where i can find the server side code repo for the mutation submitFeedback?

jlengstorf · 2019-05-13T22:07:30Z

@muescha the API source is here. It won't run without setting up a Prisma instance, though — take a look at the .env.EXAMPLE file for details. https://github.com/gatsbyjs/api.gatsbyjs.org/blob/master/src/graphql/public-resolvers.js

marcysutton · 2019-05-13T22:44:10Z

This is ready to go, assuming the form endpoint works. @jlengstorf if you think we need to test that more fully I could use some detailed instructions. Otherwise I think this is ready to merge!

jlengstorf

🎉

marcysutton · 2019-05-14T02:22:19Z

It works now that I have the API endpoint set up locally (thanks @jlengstorf!). Excited to start collecting data!

fk · 2019-05-17T18:25:20Z

Yay! 🎉

Marcy Sutton added 6 commits April 3, 2019 20:06

initial feedback widget integration

2f1463f

Merge remote-tracking branch 'origin/master' into feedback-widget

aa4f282

update widget with greg's fabulous styles + state

175b461

add emotion plugin to jest-preprocess

0e9a1c8

improve focus management in screens

221debf

Merge remote-tracking branch 'origin/master' into feedback-widget

cb7cf17

marcysutton requested a review from a team as a code owner April 22, 2019 20:44

remove widget from features page

bef73a2

fk previously requested changes Apr 24, 2019

View reviewed changes

fk and others added 2 commits April 24, 2019 17:26

Use design tokens (1/2)

d7e91a4

There’s more to do, but this is a start… - remove `font-family: sans-serif` along the way - remove components/feedback-widget/presets in favor of utils/presets.breakpoints

fix: height of widget

aa7028a

pieh mentioned this pull request Apr 25, 2019

[feedback-widget] feat: lazy load feedback widget component #13616

Closed

fk added 4 commits April 25, 2019 13:08

Use design tokens (2/2)

b5a84b8

- chose to reduce the border around the „emoji toggle buttons“ from 3 to 1px - add horizontal margin for screens below desktop/lg

Fix max-width, overlapping navigation button for small screens

fe5b5e7

Merge branch 'master' into feedback-widget

a816c8f

Swap breakpoints -> `mediaQueries

2e26800

Ref. #13388

greglobinski mentioned this pull request May 8, 2019

fix(www): improve feedback-widget toggle button and hover state #13923

Merged

fix(www): improve feedback-widget toggle button and hover state (#13923)

2943ab4

Marcy Sutton added 2 commits May 11, 2019 19:03

fix focus style in Safari

9df9b46

Merge remote-tracking branch 'origin/master' into feedback-widget

f8ad482

marcysutton commented May 11, 2019

View reviewed changes

fix React submit issue for keyboard entry

4f75258

muescha reviewed May 12, 2019

View reviewed changes

www/src/components/feedback-widget/question-mark-icon.js Outdated Show resolved Hide resolved

jlengstorf assigned marcysutton May 13, 2019

remove unused code

a574b05

jlengstorf approved these changes May 14, 2019

View reviewed changes

marcysutton merged commit ee212ee into master May 14, 2019

LekoArts deleted the feedback-widget branch May 21, 2019 08:39

lannonbr mentioned this pull request Jun 29, 2019

.org popup/slideout form that asks people: What are you looking for on gatsbyjs.org today? with a rating/form to ask if they found what they're looking for #8797

Closed

gillkyle mentioned this pull request Sep 18, 2019

Define scope of gatsbyjs.org improvements #14017

Closed

5 tasks

fk mentioned this pull request Jun 30, 2020

chore(www): Cleanup FeedbackForm #25343

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs Feedback widget #13550

Docs Feedback widget #13550

marcysutton commented Apr 22, 2019 •

edited by amberleyromo

Loading

fk left a comment

greglobinski commented Apr 24, 2019

pieh commented Apr 25, 2019

fk commented Apr 25, 2019

greglobinski commented Apr 25, 2019

prestonso commented Apr 29, 2019 •

edited

Loading

greglobinski commented Apr 29, 2019

marcysutton commented Apr 29, 2019 •

edited

Loading

pieh commented May 2, 2019

greglobinski commented May 6, 2019 •

edited

Loading

marcysutton commented May 6, 2019

fk commented May 7, 2019

muescha commented May 9, 2019 •

edited

Loading

greglobinski commented May 9, 2019

muescha commented May 9, 2019

greglobinski commented May 9, 2019 •

edited

Loading

marcysutton May 11, 2019

marcysutton commented May 11, 2019 •

edited

Loading

muescha commented May 12, 2019 •

edited

Loading

jlengstorf commented May 13, 2019

marcysutton commented May 13, 2019

jlengstorf left a comment

marcysutton commented May 14, 2019

fk commented May 17, 2019

Docs Feedback widget #13550

Docs Feedback widget #13550

Conversation

marcysutton commented Apr 22, 2019 • edited by amberleyromo Loading

Description

TODO:

fk left a comment

Choose a reason for hiding this comment

greglobinski commented Apr 24, 2019

pieh commented Apr 25, 2019

fk commented Apr 25, 2019

greglobinski commented Apr 25, 2019

prestonso commented Apr 29, 2019 • edited Loading

greglobinski commented Apr 29, 2019

marcysutton commented Apr 29, 2019 • edited Loading

pieh commented May 2, 2019

greglobinski commented May 6, 2019 • edited Loading

marcysutton commented May 6, 2019

fk commented May 7, 2019

muescha commented May 9, 2019 • edited Loading

greglobinski commented May 9, 2019

muescha commented May 9, 2019

greglobinski commented May 9, 2019 • edited Loading

marcysutton May 11, 2019

Choose a reason for hiding this comment

marcysutton commented May 11, 2019 • edited Loading

muescha commented May 12, 2019 • edited Loading

jlengstorf commented May 13, 2019

marcysutton commented May 13, 2019

jlengstorf left a comment

Choose a reason for hiding this comment

marcysutton commented May 14, 2019

fk commented May 17, 2019

marcysutton commented Apr 22, 2019 •

edited by amberleyromo

Loading

prestonso commented Apr 29, 2019 •

edited

Loading

marcysutton commented Apr 29, 2019 •

edited

Loading

greglobinski commented May 6, 2019 •

edited

Loading

muescha commented May 9, 2019 •

edited

Loading

greglobinski commented May 9, 2019 •

edited

Loading

marcysutton commented May 11, 2019 •

edited

Loading

muescha commented May 12, 2019 •

edited

Loading