From cab4290748541f8b141973b4390d87c2d0af923e Mon Sep 17 00:00:00 2001
From: Joseph Axisa <josephaxisa@google.com>
Date: Fri, 19 Aug 2022 18:18:13 +0000
Subject: [PATCH] fix: whitespace under CollapserCard child components

---
 .../components/DocSDKs/DocDeclarations.tsx    | 33 +++++++------------
 .../components/Collapser/CollapserCard.tsx    |  9 ++---
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/packages/api-explorer/src/components/DocSDKs/DocDeclarations.tsx b/packages/api-explorer/src/components/DocSDKs/DocDeclarations.tsx
index c30118634..f4e49dba5 100644
--- a/packages/api-explorer/src/components/DocSDKs/DocDeclarations.tsx
+++ b/packages/api-explorer/src/components/DocSDKs/DocDeclarations.tsx
@@ -23,10 +23,10 @@
  SOFTWARE.
 
  */
-import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components'
+import React from 'react'
+import { Tab2, Tabs2 } from '@looker/components'
 import type { KeyedCollection } from '@looker/sdk-codegen'
 import type { FC } from 'react'
-import React from 'react'
 import { DocCode } from '../DocCode'
 
 interface DocDeclarationsProps {
@@ -37,23 +37,12 @@ interface DocDeclarationsProps {
  * Renders all provided declarations
  * @param declarations A collection of SDK declarations in various languages
  */
-export const DocDeclarations: FC<DocDeclarationsProps> = ({ declarations }) => {
-  const tabs = useTabs()
-
-  return (
-    <>
-      <TabList {...tabs}>
-        {Object.keys(declarations).map((language) => (
-          <Tab key={language}>{language}</Tab>
-        ))}
-      </TabList>
-      <TabPanels {...tabs} pt="0">
-        {Object.entries(declarations).map(([language, code]) => (
-          <TabPanel key={language}>
-            <DocCode language={language} code={code} />
-          </TabPanel>
-        ))}
-      </TabPanels>
-    </>
-  )
-}
+export const DocDeclarations: FC<DocDeclarationsProps> = ({ declarations }) => (
+  <Tabs2>
+    {Object.entries(declarations).map(([language, code]) => (
+      <Tab2 key={language} id={language} label={language}>
+        <DocCode code={code} language={language} />
+      </Tab2>
+    ))}
+  </Tabs2>
+)
diff --git a/packages/run-it/src/components/Collapser/CollapserCard.tsx b/packages/run-it/src/components/Collapser/CollapserCard.tsx
index 03de1cc7a..634c219af 100644
--- a/packages/run-it/src/components/Collapser/CollapserCard.tsx
+++ b/packages/run-it/src/components/Collapser/CollapserCard.tsx
@@ -25,9 +25,10 @@
  */
 import type { FC, ReactElement } from 'react'
 import React from 'react'
-import { useToggle, Accordion2, Divider, Box } from '@looker/components'
+import { useToggle, Accordion2, Divider, Box2 } from '@looker/components'
 import { ArrowRight } from '@styled-icons/material/ArrowRight'
 import { ArrowDropDown } from '@styled-icons/material/ArrowDropDown'
+
 import { RunItHeading } from '../common'
 
 interface CollapserCardProps {
@@ -52,7 +53,7 @@ export const CollapserCard: FC<CollapserCardProps> = ({
   const { value, toggle } = useToggle(defaultOpen)
 
   return (
-    <>
+    <Box2 display="flex" flexDirection="column">
       {divider && <Divider appearance="light" />}
       <Accordion2
         id={id}
@@ -62,8 +63,8 @@ export const CollapserCard: FC<CollapserCardProps> = ({
         indicatorIcons={{ close: <ArrowRight />, open: <ArrowDropDown /> }}
         label={<RunItHeading as={level}>{heading}</RunItHeading>}
       >
-        <Box pb="xlarge">{children}</Box>
+        <Box2 pb="xlarge">{children}</Box2>
       </Accordion2>
-    </>
+    </Box2>
   )
 }