Merge pull request #971 from newrelic/liz/remove-vertical-tabs

Remove stacked tabs styling option
newrelic · Jan 2, 2024 · db853c5 · db853c5
2 parents 9f94d47 + af90e78
commit db853c5
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 141 deletions.
diff --git a/demo/src/pages/index.js b/demo/src/pages/index.js
@@ -592,70 +592,6 @@ const IndexPage = () => {
               </Tabs.Pages>
             </Tabs>
           </section>
-          <section>
-            <h2>Stacked Tabs</h2>
-            <Tabs stacked>
-              <Tabs.Bar>
-                <Tabs.BarItem id="codeblock">A code block</Tabs.BarItem>
-                <Tabs.BarItem id="live-edit">
-                  A live editable code block w/ preview
-                </Tabs.BarItem>
-                <Tabs.BarItem id="embedded">
-                  Code block w/ embedded var/mark/links
-                </Tabs.BarItem>
-              </Tabs.Bar>
-              <Tabs.Pages>
-                <Tabs.Page id="codeblock">
-                  <CodeBlock
-                    copyable
-                    lineNumbers
-                    highlightedLines="5-7,12"
-                    fileName="src/components/Button.js"
-                    language="jsx"
-                    css={css`
-                      margin-bottom: 2rem;
-                    `}
-                  >
-                    {codeSample}
-                  </CodeBlock>
-                </Tabs.Page>
-                <Tabs.Page id="live-edit">
-                  <CodeBlock
-                    copyable
-                    lineNumbers
-                    live
-                    preview
-                    fileName="src/components/Button.js"
-                    language="jsx"
-                    scope={{ Button }}
-                    css={css`
-                      margin-bottom: 2rem;
-                    `}
-                  >
-                    {liveCodeSample}
-                  </CodeBlock>
-                </Tabs.Page>
-                <Tabs.Page id="embedded">
-                  <CodeBlock
-                    language="graphql"
-                    css={css`
-                      margin-bottom: 1rem;
-                    `}
-                  >
-                    {codeSampleWithAdditionalTags}
-                  </CodeBlock>
-                  <CodeBlock
-                    language="yaml"
-                    css={css`
-                      margin-bottom: 1rem;
-                    `}
-                  >
-                    {anotherSample}
-                  </CodeBlock>
-                </Tabs.Page>
-              </Tabs.Pages>
-            </Tabs>
-          </section>
           <section>
             <h2>Terminal in Tabs</h2>
             <Tabs>

diff --git a/packages/gatsby-theme-newrelic/src/components/Tabs/Bar.js b/packages/gatsby-theme-newrelic/src/components/Tabs/Bar.js
@@ -75,7 +75,7 @@ MobileTabControl.propTypes = {
 };
 
 const Bar = ({ children, className }) => {
-  const { containerHeight, mobileBreakpoint, stacked } = useTabs();
+  const { mobileBreakpoint } = useTabs();
 
   return (
     <>
@@ -97,16 +97,6 @@ const Bar = ({ children, className }) => {
           display: flex;
           width: 100%;
           overflow: auto;
-          ${stacked &&
-          css`
-            flex-direction: column;
-            height: ${containerHeight}px;
-            min-height: 350px;
-            overflow: none;
-            overflow-wrap: break-word;
-            margin-right: 2rem;
-            width: 30%;
-          `}
           @media screen and (max-width: ${mobileBreakpoint}) {
             display: none;
           }

diff --git a/packages/gatsby-theme-newrelic/src/components/Tabs/BarItem.js b/packages/gatsby-theme-newrelic/src/components/Tabs/BarItem.js
@@ -6,7 +6,7 @@ import useTabs from './useTabs';
 import useInstrumentedHandler from '../../hooks/useInstrumentedHandler';
 
 const BarItem = ({ className, index, children, id, disabled }) => {
-  const { currentTabIndex, setCurrentTabIndex, stacked } = useTabs();
+  const { currentTabIndex, setCurrentTabIndex } = useTabs();
   const isSelected =
     index === currentTabIndex || (currentTabIndex === undefined && index === 0);
 
@@ -59,25 +59,6 @@ const BarItem = ({ className, index, children, id, disabled }) => {
             border-bottom: var(--secondary-background-color) solid 1px;
           }
         }
-
-        ${stacked &&
-        css`
-          border-bottom: none;
-          border-left: var(--divider-color) solid 2px;
-          white-space: normal;
-          text-align: left;
-
-          &.isSelected {
-            color: var(--primary-text-color);
-            border-bottom: none;
-            border-left: var(--brand-button-primary-accent) solid 2px;
-
-            .dark-mode & {
-              border-bottom: none;
-              border-left: var(--brand-button-primary-accent-hover) solid 2px;
-            }
-          }
-        `}
       `}
       className={cx(
         { [`${className}`]: className },

diff --git a/packages/gatsby-theme-newrelic/src/components/Tabs/Page.js b/packages/gatsby-theme-newrelic/src/components/Tabs/Page.js
@@ -7,8 +7,7 @@ import useTabs from './useTabs';
 import useHasMounted from '../../hooks/useHasMounted';
 
 const Page = ({ index, children, id, className }) => {
-  const { currentTabIndex, transitionDirection, updateHeight, stacked } =
-    useTabs();
+  const { currentTabIndex, transitionDirection, updateHeight } = useTabs();
   const prefersReducedMotion = useMedia({ prefersReducedMotion: 'reduce' });
   const tabpanel = useRef(null);
 
@@ -74,19 +73,6 @@ const Page = ({ index, children, id, className }) => {
         transition-duration: 620ms, 620ms, 340ms;
         transition-timing-function: cubic-bezier(0.55, 0, 0.45, 1);
         transition-property: visibility, transform, opacity;
-
-        ${stacked &&
-        css`
-          height: 100%;
-          max-height: 500px;
-          width: 100%;
-          overflow-y: scroll;
-          -ms-overflow-style: none; /* for Internet Explorer, Edge */
-          scrollbar-width: none; /* for Firefox */
-          &::-webkit-scrollbar {
-            display: none; /* for Chrome, Safari, and Opera */
-          }
-        `}
         ${!isSelected &&
         css`
           transition-delay: 0ms;

diff --git a/packages/gatsby-theme-newrelic/src/components/Tabs/Pages.js b/packages/gatsby-theme-newrelic/src/components/Tabs/Pages.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-
 import useTabs from './useTabs';
 
 const Pages = ({ children }) => {
-  const { containerHeight, stacked, mobileBreakpoint } = useTabs();
+  const { mobileBreakpoint } = useTabs();
 
   return (
     <div
@@ -23,18 +22,6 @@ const Pages = ({ children }) => {
         @media screen and (max-width: ${mobileBreakpoint}) {
           border-top: #afe2e3 solid 1px;
         }
-
-        ${stacked &&
-        css`
-          align-items: start;
-          display: flex;
-          height: ${containerHeight}px;
-          justify-content: center;
-          width: 70%;
-          @media screen and (max-width: ${mobileBreakpoint}) {
-            width: 100%;
-          }
-        `}
       `}
     >
       {React.Children.map(children, (child, index) =>

diff --git a/packages/gatsby-theme-newrelic/src/components/Tabs/Tabs.js b/packages/gatsby-theme-newrelic/src/components/Tabs/Tabs.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
 import { useStaticQuery, graphql } from 'gatsby';
 
 import TabsContext from '../Context';
@@ -9,7 +8,7 @@ import BarItem from './BarItem';
 import Pages from './Pages';
 import Page from './Page';
 
-const Tabs = ({ children, initialTab, stacked }) => {
+const Tabs = ({ children, initialTab }) => {
   const [currentTabIndex, setCurrentTabIndex] = useState(initialTab);
   const [previousTabIndex, setPreviousTabIndex] = useState(initialTab);
   let transitionDirection = 'none';
@@ -53,25 +52,12 @@ const Tabs = ({ children, initialTab, stacked }) => {
     mobileBreakpoint,
     setCurrentTabIndex: setTab,
     setPreviousTabIndex,
-    stacked,
     updateHeight,
   };
 
   return (
     <TabsContext.Provider value={context}>
-      <div
-        css={css`
-          ${stacked &&
-          css`
-            display: flex;
-          `}
-          @media screen and (max-width: ${mobileBreakpoint}) {
-            display: block;
-          }
-        `}
-      >
-        {children}
-      </div>
+      <div>{children}</div>
     </TabsContext.Provider>
   );
 };
@@ -82,7 +68,6 @@ Tabs.propTypes = {
    * this should be the `id` of the tab.
    */
   initialTab: PropTypes.string,
-  stacked: PropTypes.bool,
 };
 
 Tabs.Bar = Bar;