implement footer in new design (#2540)

graphql · Jul 27, 2022 · f2cf66a · f2cf66a
1 parent d5fbce2
commit f2cf66a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 27 deletions.
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -973,7 +973,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
@@ -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
@@ -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
@@ -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;