How to hide the feedback component?

[billalive]

First off, thanks for this fantastic design system!

I want to hide the "feedback" component. This looks like a simple case of shadowing, but I want to post my solution here in case there is a more elegant way to do it.

The feedback component is sourced as FeedbackDialog in the Utils component at 'src/components/Utils/Utils.js'.

The current original version of this component is:

import React, { useState } from 'react';
import { useWindowScroll } from 'beautiful-react-hooks';
import cx from 'classnames';
import FeedbackDialog from '../FeedbackDialog';
import BackToTopBtn from '../BackToTopBtn';

import * as styles from './Utils.module.scss';

const Utils = () => {
  const [hidden, setHidden] = useState(true);
  const onScroll = useWindowScroll();

  onScroll(() => {
    if (hidden && window.scrollY > 300) {
      setHidden(false);
    }
    if (!hidden && window.scrollY < 300) {
      setHidden(true);
    }
  });

  return (
    <div
      aria-label="This section contains utilities"
      className={cx(styles.container, { [styles.hidden]: hidden })}>
      <FeedbackDialog />
      <BackToTopBtn />
    </div>
  );
};

export default Utils;

To shadow this, I copy this file to my own site at: src/gatsby-theme-carbon/components/Utils/Utils.js, and modify it to:

// Shadow Utils.js to remove FeedbackDialog
// Original:
// https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/gatsby-theme-carbon/src/components/Utils/Utils.js

import React, { useState } from "react";
import { useWindowScroll } from "beautiful-react-hooks";
import cx from "classnames";
// import FeedbackDialog from '../FeedbackDialog';
// import BackToTopBtn from "../BackToTopBtn";
import BackToTopBtn from "gatsby-theme-carbon/src/components/BackToTopBtn";

// import * as styles from "./Utils.module.scss";
import * as styles from "gatsby-theme-carbon/src/components/Utils/Utils.module.scss";

const Utils = () => {
  const [hidden, setHidden] = useState(true);
  const onScroll = useWindowScroll();

  onScroll(() => {
    if (hidden && window.scrollY > 300) {
      setHidden(false);
    }
    if (!hidden && window.scrollY < 300) {
      setHidden(true);
    }
  });

  return (
    <div
      aria-label="This section contains utilities"
      className={cx(styles.container, { [styles.hidden]: hidden })}
    >
      <BackToTopBtn />
    </div>
  );
};

export default Utils;

The charges are:

• Remove the import FeedbackDialog at the top.
• Adjust the paths for the other imports.
• Remove the <FeedbackDialog /> in the return().

As a final step, I also seem to need to copy 'src/components/Utils/index.js' to my site at src/gatsby-theme-carbon/components/Utils/index.js

No change to the file is needed:

import Utils from "./Utils";

export default Utils;

but in this new location, it will source my shadowed version at Utils.js.

Is this the correct method? It seems like there might be a more elegant way to do this than copying the entire Utils.js and also the unchanged index.js. So I wanted to check.

Thank you!

[sstrubberg]

hey @billalive. I'm curious how you're getting the Feedback component right out of the box. You should have to activate the Feedback component to get it going. Let us know!