feat(tabs, tab): surface styled system margin interface in tabs and p…

…adding interface in tab Adds styled-system/margin interface to `Tabs`. Adds styled-system/padding interface to `Tab`.
Sage · Apr 9, 2021 · 5e125af · 5e125af
1 parent 7245147
commit 5e125af
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 26 deletions.
diff --git a/src/components/tabs/__internal__/tabs-header/tabs-header.spec.js b/src/components/tabs/__internal__/tabs-header/tabs-header.spec.js
@@ -30,7 +30,7 @@ describe("TabsHeader", () => {
         boxShadow: `inset 0px -2px 0px 0px ${baseTheme.tab.background}`,
         cursor: "pointer",
         listStyle: "none",
-        margin: "0 0 10px",
+        margin: "0",
         padding: "0",
       },
       renderStyles()
@@ -59,14 +59,14 @@ describe("TabsHeader", () => {
         {
           flexDirection: "column",
           boxShadow: `inset -2px 0px 0px 0px ${baseTheme.tab.background}`,
-          margin: "0 10px 0",
+          margin: "0 0 0 10px",
         },
         wrapper.find(StyledTabsHeaderList)
       );
 
       assertStyleMatch(
         {
-          width: "20%",
+          minWidth: "20%",
           overflowY: "auto",
           padding: "2px",
         },
@@ -146,7 +146,7 @@ describe("TabsHeader", () => {
     );
     assertStyleMatch(
       {
-        width: "100%",
+        minWidth: "100%",
       },
       wrapper.find(StyledTabsHeaderWrapper)
     );

diff --git a/src/components/tabs/__internal__/tabs-header/tabs-header.style.js b/src/components/tabs/__internal__/tabs-header/tabs-header.style.js
@@ -19,13 +19,13 @@ const StyledTabsHeaderWrapper = styled.div`
 
       ${!isInSidebar &&
       css`
-        width: 20%;
-        margin: 0 10px 0;
+        min-width: 20%;
+        margin: 0 0 0 10px;
       `}
 
       ${isInSidebar &&
       css`
-        width: 100%;
+        min-width: 100%;
         margin: auto;
         padding: 0px;
       `}
@@ -43,7 +43,7 @@ const StyledTabsHeaderList = styled.ul`
     `}
   cursor: pointer;
   list-style: none;
-  margin: 0 0 10px;
+  margin: 0;
   padding: 0;
 
   ${({ align }) =>
@@ -66,7 +66,7 @@ const StyledTabsHeaderList = styled.ul`
 
       ${!isInSidebar &&
       css`
-        margin: 0 10px 0;
+        margin: 0 0 0 10px;
       `}
 
     ${isInSidebar &&

diff --git a/src/components/tabs/tab/tab.component.js b/src/components/tabs/tab/tab.component.js
@@ -1,10 +1,16 @@
 import React, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import StyledTab from "./tab.style";
 import tagComponent from "../../../utils/helpers/tags/tags";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
 const TabContext = React.createContext({});
 
+const paddingPropTypes = filterStyledSystemPaddingProps(
+  styledSystemPropTypes.space
+);
+
 const Tab = ({
   ariaLabelledby,
   className,
@@ -77,6 +83,8 @@ const Tab = ({
         aria-labelledby={ariaLabelledby}
         position={position}
         {...tagComponent("tab", rest)}
+        {...(position === "top" ? { pt: "10px" } : { pl: "10px" })}
+        {...rest}
       >
         {!href && children}
       </StyledTab>
@@ -85,6 +93,7 @@ const Tab = ({
 };
 
 Tab.propTypes = {
+  ...paddingPropTypes,
   title: PropTypes.string,
   /** A unique ID to identify this specific tab. */
   tabId: PropTypes.string.isRequired,

diff --git a/src/components/tabs/tab/tab.d.ts b/src/components/tabs/tab/tab.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { PaddingSpacingProps } from "../../../utils/helpers/options-helper";
 
-export interface TabProps {
+export interface TabProps extends PaddingSpacingProps {
   title?: string;
   tabId: string;
   className?: string;

diff --git a/src/components/tabs/tab/tab.spec.js b/src/components/tabs/tab/tab.spec.js
@@ -4,7 +4,10 @@ import { mount } from "enzyme";
 import Tab from "./tab.component";
 import Textbox from "../../../__experimental__/components/textbox";
 import StyledTab from "./tab.style";
-import { assertStyleMatch } from "../../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemPadding,
+} from "../../../__spec_helper__/test-utils";
 
 const updateErrors = jest.fn();
 const updateWarnings = jest.fn();
@@ -53,6 +56,31 @@ function renderStyles(props) {
 
 describe("Tab", () => {
   let wrapper;
+
+  testStyledSystemPadding(
+    (props) => (
+      <Tab title="Tab Title 1" tabId="uniqueid1" isTabSelected {...props}>
+        TabContent
+      </Tab>
+    ),
+    { pt: "10px" }
+  );
+
+  testStyledSystemPadding(
+    (props) => (
+      <Tab
+        position="left"
+        title="Tab Title 1"
+        tabId="uniqueid1"
+        isTabSelected
+        {...props}
+      >
+        TabContent
+      </Tab>
+    ),
+    { pl: "10px" }
+  );
+
   it("has display property equals to none", () => {
     wrapper = renderStyles();
     assertStyleMatch(

diff --git a/src/components/tabs/tab/tab.style.js b/src/components/tabs/tab/tab.style.js
@@ -1,5 +1,7 @@
 import styled, { css } from "styled-components";
 import propTypes from "prop-types";
+import { padding } from "styled-system";
+import BaseTheme from "../../../style/themes/base";
 
 const StyledTab = styled.div`
   display: none;
@@ -13,11 +15,14 @@ const StyledTab = styled.div`
       css`
         width: 80%;
       `}
+
+      ${padding}
     `}
 `;
 
 StyledTab.defaultProps = {
   position: "top",
+  theme: BaseTheme,
 };
 
 StyledTab.propTypes = {

diff --git a/src/components/tabs/tabs.component.js b/src/components/tabs/tabs.component.js
@@ -7,6 +7,7 @@ import React, {
   useState,
 } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import Tab from "./tab";
 import Event from "../../utils/helpers/events/events";
 import tagComponent from "../../utils/helpers/tags/tags";
@@ -15,6 +16,11 @@ import StyledTabs from "./tabs.style";
 import TabsHeader from "./__internal__/tabs-header";
 import TabTitle from "./__internal__/tab-title";
 import { SidebarContext } from "../drawer";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const Tabs = ({
   align = "left",
@@ -26,7 +32,7 @@ const Tabs = ({
   position = "top",
   setLocation = true,
   extendedLine = true,
-  size = "default",
+  size,
   borders = "off",
   variant = "default",
   validationStatusOverride,
@@ -41,6 +47,7 @@ const Tabs = ({
   const [tabsWarnings, setTabsWarnings] = useState({});
   const [tabsInfos, setTabsInfos] = useState({});
   const _window = Browser.getWindow();
+  const isInSidebar = !!(sidebarContext && sidebarContext.isInSidebar);
 
   useLayoutEffect(() => {
     if (firstRender.current) {
@@ -258,7 +265,7 @@ const Tabs = ({
           error={tabHasError}
           warning={tabHasWarning}
           info={tabHasInfo}
-          size={size}
+          size={size || "default"}
           borders={borders !== "off"}
           siblings={siblings}
           titlePosition={titlePosition}
@@ -269,7 +276,7 @@ const Tabs = ({
           noLeftBorder={["no left side", "no sides"].includes(borders)}
           noRightBorder={["no right side", "no sides"].includes(borders)}
           customLayout={customLayout}
-          isInSidebar={Boolean(sidebarContext && sidebarContext.isInSidebar)}
+          isInSidebar={isInSidebar}
         />
       );
 
@@ -284,7 +291,7 @@ const Tabs = ({
         extendedLine={extendedLine}
         alternateStyling={variant === "alternate" || !!sidebarContext}
         noRightBorder={["no right side", "no sides"].includes(borders)}
-        isInSidebar={Boolean(sidebarContext && sidebarContext.isInSidebar)}
+        isInSidebar={isInSidebar}
       >
         {tabTitles}
       </TabsHeader>
@@ -354,7 +361,9 @@ const Tabs = ({
       updateErrors={updateErrors}
       updateWarnings={updateWarnings}
       {...tagComponent("tabs", rest)}
-      isInSidebar={Boolean(sidebarContext && sidebarContext.isInSidebar)}
+      isInSidebar={isInSidebar}
+      mt={position === "left" || isInSidebar ? "0px" : "15px"}
+      {...rest}
     >
       {renderTabHeaders()}
       {renderTabs()}
@@ -363,6 +372,7 @@ const Tabs = ({
 };
 
 Tabs.propTypes = {
+  ...marginPropTypes,
   /** @ignore @private */
   className: PropTypes.string,
   /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */

diff --git a/src/components/tabs/tabs.d.ts b/src/components/tabs/tabs.d.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import Tab from './tab';
+import { MarginSpacingProps } from "../../utils/helpers/options-helper";
 
-export interface TabsProps {
+export interface TabsProps extends MarginSpacingProps {
   className?: string;
   renderHiddenTabs: boolean;
   selectedTabId: string;

diff --git a/src/components/tabs/tabs.spec.js b/src/components/tabs/tabs.spec.js
@@ -7,7 +7,11 @@ import { Tabs, Tab } from "./tabs.component";
 import { TabContext } from "./tab/index";
 import { rootTagTest } from "../../utils/helpers/tags/tags-specs/tags-specs";
 import StyledTabs from "./tabs.style";
-import { assertStyleMatch, simulate } from "../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  simulate,
+  testStyledSystemMargin,
+} from "../../__spec_helper__/test-utils";
 import { SidebarContext } from "../drawer";
 
 function render(props) {
@@ -117,6 +121,40 @@ const MockWrapper = ({
 };
 
 describe("Tabs", () => {
+  testStyledSystemMargin(
+    (props) => (
+      <Tabs {...props}>
+        <Tab
+          errorMessage=""
+          warningMessage=""
+          infoMessage=""
+          title="Tab Title 1"
+          tabId="uniqueid1"
+        >
+          TabContent
+        </Tab>
+      </Tabs>
+    ),
+    { mt: "15px" }
+  );
+
+  testStyledSystemMargin(
+    (props) => (
+      <Tabs {...props} position="left">
+        <Tab
+          errorMessage=""
+          warningMessage=""
+          infoMessage=""
+          title="Tab Title 1"
+          tabId="uniqueid1"
+        >
+          TabContent
+        </Tab>
+      </Tabs>
+    ),
+    { mt: "0px" }
+  );
+
   describe("when passing custom className as a prop", () => {
     it("adds it to the classList", () => {
       const wrapper = render({ className: "class" });
@@ -131,7 +169,6 @@ describe("Tabs", () => {
         {
           display: "flex",
           width: "100%",
-          marginTop: "0",
         },
         wrapper
       );