Design QA fixes:

* replace feedback toast with dialog
adobe · Sep 23, 2020 · cad4b3d · cad4b3d
1 parent 66b0549
commit cad4b3d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 84 deletions.
diff --git a/packages/gatsby-theme-parliament/package.json b/packages/gatsby-theme-parliament/package.json
@@ -64,7 +64,6 @@
     "@spectrum-css/popover": "^3.0.0-beta.3",
     "@spectrum-css/sidenav": "^3.0.0-beta.2",
     "@spectrum-css/tabs": "^3.0.0-beta.3",
-    "@spectrum-css/toast": "^3.0.0-beta.3",
     "@spectrum-css/tooltip": "^3.0.0-beta.2",
     "@spectrum-css/typography": "^2.1.3",
     "@spectrum-css/vars": "^2.3.0",

diff --git a/packages/gatsby-theme-parliament/src/components/Feedback/index.js b/packages/gatsby-theme-parliament/src/components/Feedback/index.js
@@ -10,87 +10,40 @@
  * governing permissions and limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { css } from '@emotion/core';
-import classNames from 'classnames';
 import { Flex } from '@adobe/react-spectrum';
 import { View } from '@adobe/react-spectrum';
 import { Button } from '@adobe/react-spectrum';
-import '@spectrum-css/toast';
+import { DialogTrigger } from '@adobe/react-spectrum';
+import { AlertDialog } from '@adobe/react-spectrum';
 
-const onFeedback = (setIsOpen) => {
-  setIsOpen(true);
-  setTimeout(() => {
-    setIsOpen(false);
-  }, 3000);
-};
+const FeedbackButton = ({ variant }) => (
+  <DialogTrigger>
+    <Button UNSAFE_className={`feedback-${variant.toLowerCase()}`} variant="primary">
+      {variant}
+    </Button>
+    <AlertDialog title="Was this helpful ?" primaryActionLabel="Close">
+      Thank you for providing your feedback.
+    </AlertDialog>
+  </DialogTrigger>
+);
 
-export const Feedback = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Flex alignItems="center">
-        <span
-          css={css`
-            padding-right: var(--spectrum-global-dimension-size-200);
-          `}>
-          Was this helpful ?
-        </span>
-        <Flex>
-          <View marginEnd="size-200">
-            <Button
-              UNSAFE_className="feedback-yes"
-              variant="primary"
-              onPress={() => {
-                onFeedback(setIsOpen);
-              }}>
-              Yes
-            </Button>
-          </View>
-          <View>
-            <Button
-              UNSAFE_className="feedback-no"
-              variant="primary"
-              onPress={() => {
-                onFeedback(setIsOpen);
-              }}>
-              No
-            </Button>
-          </View>
-        </Flex>
-      </Flex>
-      <div
-        className={classNames('spectrum-Toast', 'spectrum-Toast--positive', { 'is-open': isOpen })}
-        role="alert"
-        aria-live="polite"
-        css={css`
-          pointer-events: none;
-          position: fixed;
-          left: 50%;
-          bottom: var(--spectrum-global-dimension-size-200);
-          z-index: 10;
-          visibility: hidden;
-          opacity: 0;
-          transform: translate3d(-50%, 0, 0);
-          transition: transform var(--spectrum-global-animation-duration-100)
-              var(--spectrum-global-animation-ease-in-out),
-            opacity var(--spectrum-global-animation-duration-100) var(--spectrum-global-animation-ease-in-out),
-            visibility var(--spectrum-global-animation-duration-0) var(--spectrum-global-animation-linear)
-              var(--spectrum-global-animation-duration-100);
-
-          &.is-open {
-            pointer-events: auto;
-            visibility: visible;
-            opacity: 1;
-            transition-delay: var(--spectrum-global-animation-duration-0);
-            transform: translate3d(-50%, calc(-1 * var(--spectrum-global-dimension-size-200)), 0);
-          }
-        `}>
-        <div className="spectrum-Toast-body">
-          <div className="spectrum-Toast-content">Thank you for your feedback.</div>
-        </div>
-      </div>
-    </>
-  );
-};
+export const Feedback = () => (
+  <Flex alignItems="center">
+    <span
+      css={css`
+        padding-right: var(--spectrum-global-dimension-size-200);
+      `}>
+      Was this helpful ?
+    </span>
+    <Flex>
+      <View marginEnd="size-200">
+        <FeedbackButton variant="Yes" />
+      </View>
+      <View>
+        <FeedbackButton variant="No" />
+      </View>
+    </Flex>
+  </Flex>
+);
diff --git a/yarn.lock b/yarn.lock
@@ -2909,11 +2909,6 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.3.tgz#251763260fedd38e256c8a225809b0ecdc70f68f"
   integrity sha512-ihTZKLfnUxBnlSGRH4xdSMwd23EkpunC69uUvVB2LGGw1QAcmUcBNdS9xz7PPSWFw4qkCRXzVVX9tLC/2fQFbQ==
 
-"@spectrum-css/toast@^3.0.0-beta.3":
-  version "3.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.0-beta.3.tgz#98eb1320062e299cf5a96fe1c59357073fbee6f4"
-  integrity sha512-W0akUneCrda9Gad12ehOUeOQEYD4ND/S3JAEFKaQyO/4TKK2+70tEBN50w+2cvvvSry6JgSWgRTiU4a/EGbMZg==
-
 "@spectrum-css/tooltip@^3.0.0-beta.2":
   version "3.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.0-beta.2.tgz#b30538c05eb8edc080e4ab53538ef59bb6a60bc7"