COMDOX-840: Redesign Feedback component

[jeff-matthews]

Purpose of this pull request

This pull request (PR) applies custom styling to the Feedback component. It requires shadowing the MDXFilter component in the gatsby-aio-theme so that the styling can be applied to the parent <div> that the Feedback component lives in.

Note

Applying the styling to the Feedback component did not work for me.

The only changes I made to the MDXFilter component include:

• Update import directives from relative links (e.g., ../<component-name>) to local node module links (e.g., @adobe/gatsby-theme-aio/ssrc/components/<component-name>)
• Add custom CSS to parent <div> that contains the Feedback component (lines 373-380)

I also had to copy the conf/globals.js file from the theme to this project because the MDXFilter component relies on it and that file does not exist in the node modules.

See COMDOX-840 for more details.

Staging

The styling still needs some work, but at least we now have a working experiment. I'm considering adding a border to differentiate the component from the background text similar to ExL.

I'm also not sure about the Contributors info that currently sits in the same <div>. We may want to separate it from the Feedback component. I'm open to suggestions

https://adobedocs.github.io/commerce-webapi/

[jeff-matthews]

I added some more styling to make the component more visible (9591704).

New staging build is blocked on an unrelated validation error.

@bdenham had a good suggestion to shadow the Feedback component and add a line of JS to get a reference to it’s parent element and add a CSS class there. That hadn't occurred to me in my initial investigation. I think that would be preferable to shadowing MDXFilter because MDXFilter is a much larger and complex component.

@bdenham, please feel free to create a new branch to demo that concept 😄

[bdenham]

On it! But first, I've gotta put together my forgotten Q4 reflection! Yikes. Will continue after.

[jeff-matthews]

New staging build is available

[jeff-matthews]

Design variant proposed in #270 courtesy of @bdenham 😄

[jhadobe]

looks good! maybe in the future we can iterate the design? (i would prefer less drop shadow, personally.)

[jeff-matthews]

We can definitely iterate @jhadobe. In fact, I'm not opposed to completely dropping the box-shadow property for the initial test.

[hguthrie]

Design variant proposed in #270 courtesy of @bdenham 😄

I like the emoji approach with the pale background. It's relatable for a wide range of folks.

As for drop shadows, use only if the contrast is required for some visual benefit. It looks okay the way you have it because it draws more attention than the version on Experience League. However, I think the emoji version would eliminate the need for it.

[jhadobe]

Design variant proposed in #270 courtesy of @bdenham 😄

I like the emoji approach with the pale background. It's relatable for a wide range of folks.

As for drop shadows, use only if the contrast is required for some visual benefit. It looks okay the way you have it because it draws more attention than the version on Experience League. However, I think the emoji version would eliminate the need for it.

i agree that images will definitely draw more attention, but i think single color emotes or thumbs up/down icons might be more stylistically appropriate.

[jeff-matthews]

The emojis are cool, but I don't think we have a mapping for the neutral option in our analytics data layer; only yes or no. So if we go with emojis then I think we'd only be able to have two.

Maybe emojis would be a good follow up iteration if we're not getting the results we expect. I'm not sure how bold our first iteration should be. My instinct is to start with more subtlety. I like @jhadobe's suggestion re: thumbs up/down instead, but it will require shadowing an additional component.

[jeff-matthews]

Per team discussion on 1/11/24, consensus is to start with conservative design improvements (lower tech debt) and make smaller iterations (limit potential UX shock and negative reaction).

[jeff-matthews]

@timkim, shadowing in this repo is only meant to be a temporary situation while we run our experiment (1-2 months). Depending on the outcome, we may make a formal request to add some config-based options to the theme.

Please let me know if you see anything that you think should be addressed before I merge.

[timkim]

@timkim, shadowing in this repo is only meant to be a temporary situation while we run our experiment (1-2 months). Depending on the outcome, we may make a formal request to add some config-based options to the theme.

Please let me know if you see anything that you think should be addressed before I merge.

Oh oop - I forgot to come back to this. I think what we can do is add a css class name to the feedback component or parent div that it lives in. And have a css file in the repo that references those class names so you can override any styles.