From f1b8415805cde938c76df00069c20930e71b40fe Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Wed, 6 Jul 2022 10:04:19 +0200
Subject: [PATCH] implement footer in new design (#2540)

---
 packages/graphiql/src/components/GraphiQL.tsx |  2 +-
 .../components/__tests__/GraphiQL.spec.tsx    |  8 ++++++--
 packages/graphiql/src/css/app.css             | 18 ------------------
 packages/graphiql/src/style.css               | 19 +++++++++++++------
 4 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index 129f6288a1e..7bb1c6f3eb2 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -978,7 +978,7 @@ GraphiQLToolbar.displayName = 'GraphiQLToolbar';
 
 // Configure the UI by providing this Component as a child of GraphiQL.
 function GraphiQLFooter<TProps>(props: PropsWithChildren<TProps>) {
-  return <div className="footer">{props.children}</div>;
+  return <div className="graphiql-footer">{props.children}</div>;
 }
 
 GraphiQLFooter.displayName = 'GraphiQLFooter';
diff --git a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
index 05b95d49ca7..2b8b254f7bf 100644
--- a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
+++ b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
@@ -464,7 +464,9 @@ describe('GraphiQL', () => {
           </GraphiQL>,
         );
 
-        expect(container.querySelectorAll('.footer button')).toHaveLength(1);
+        expect(
+          container.querySelectorAll('.graphiql-footer button'),
+        ).toHaveLength(1);
       });
 
       it('can be overridden using a named component', () => {
@@ -482,7 +484,9 @@ describe('GraphiQL', () => {
         );
 
         expect(container.querySelector('.test-wrapper')).toBeInTheDocument();
-        expect(container.querySelectorAll('.footer button')).toHaveLength(1);
+        expect(
+          container.querySelectorAll('.graphiql-footer button'),
+        ).toHaveLength(1);
       });
     });
   });
diff --git a/packages/graphiql/src/css/app.css b/packages/graphiql/src/css/app.css
index 543b2072e9d..6c415c3485d 100644
--- a/packages/graphiql/src/css/app.css
+++ b/packages/graphiql/src/css/app.css
@@ -127,24 +127,6 @@
   position: relative;
 }
 
-.graphiql-container .footer {
-  background: #f6f7f8;
-  border-left: 1px solid #e0e0e0;
-  border-top: 1px solid #e0e0e0;
-  margin-left: 12px;
-  position: relative;
-}
-
-.graphiql-container .footer:before {
-  background: #eeeeee;
-  bottom: 0;
-  content: ' ';
-  left: -13px;
-  position: absolute;
-  top: -1px;
-  width: 12px;
-}
-
 .graphiql-container .toolbar-button {
   background: #fdfdfd;
   background: linear-gradient(#f9f9f9, #ececec);
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index c7413c47ea7..6ab34d809ac 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -18,12 +18,6 @@
   flex-direction: column;
 }
 
-/* The response view */
-.graphiql-container .graphiql-response {
-  flex: 1;
-  position: relative;
-}
-
 /* The query editor */
 .graphiql-container .graphiql-query-editor {
   border-bottom: 1px solid var(--color-neutral-15);
@@ -62,6 +56,19 @@
   padding: var(--px-16);
 }
 
+/* The response view */
+.graphiql-container .graphiql-response {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  position: relative;
+}
+
+/* The footer below the response view */
+.graphiql-container .graphiql-footer {
+  border-top: 1px solid var(--color-neutral-15);
+}
+
 /* Generic loading spinner */
 .graphiql-container .graphiql-spinner {
   height: 56px;