diff --git a/src/components/Tabs/index.stories.tsx b/src/components/Tabs/index.stories.tsx
index 3d4f4311..9c90b1f2 100644
--- a/src/components/Tabs/index.stories.tsx
+++ b/src/components/Tabs/index.stories.tsx
@@ -15,6 +15,7 @@
******************************************************************************************************************** */
import React from 'react';
import Tabs from '.';
+import Box from '../../layouts/Box';
import { action } from '@storybook/addon-actions';
export default {
@@ -44,3 +45,28 @@ const tabs = [
export const Default = () => ;
export const Container = () => ;
+
+export const NoPaddingContainer = () => {
+ const tabs = [
+ {
+ label: 'First tab label',
+ id: 'first',
+ content: ,
+ },
+ {
+ label: 'Second tab label',
+ id: 'second',
+ content: ,
+ },
+ ];
+
+ return (
+
+ );
+};
diff --git a/src/components/Tabs/index.test.tsx b/src/components/Tabs/index.test.tsx
index 60a18915..7cf399e5 100644
--- a/src/components/Tabs/index.test.tsx
+++ b/src/components/Tabs/index.test.tsx
@@ -59,6 +59,11 @@ describe('Tabs', () => {
expect(getByText(tabs[0].content)).toBeVisible();
});
+ it('renders with container variant and without padding in the content area', () => {
+ const { getByText } = render();
+ expect(getByText(tabs[0].content)).toBeVisible();
+ });
+
it('disables a tab', () => {
const props = {
tabs: [
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index c1c032ab..a2663e35 100755
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -63,7 +63,12 @@ export interface TabsProps {
* - container: version with borders, designed to be used along with other containers
*/
variant?: 'default' | 'container';
- /** Fired whenever the user selects a different tab. The event detail contains the current activeTabId. */
+ /**
+ * Whether to render padding within the content area
+ * */
+ paddingContentArea?: boolean;
+ /**
+ * Fired whenever the user selects a different tab. The event detail contains the current activeTabId. */
onChange?: (activeTabId: string) => void;
}
@@ -71,14 +76,13 @@ interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
+ paddingContentArea: boolean;
}
-function TabPanel(props: TabPanelProps) {
- const { children, value, index } = props;
-
+function TabPanel({ children, value, index, paddingContentArea }: TabPanelProps) {
return (
- {children}
+ {children}
);
}
@@ -86,11 +90,17 @@ function TabPanel(props: TabPanelProps) {
/**
* Use tabs for organizing discrete blocks of information.
*/
-const Tabs = ({ tabs, activeId = '', variant = 'default', onChange }: TabsProps): ReactElement => {
+const Tabs = ({
+ tabs,
+ activeId = '',
+ variant = 'default',
+ paddingContentArea = true,
+ onChange,
+}: TabsProps): ReactElement => {
const classes = useStyles({});
const tabIndex = tabs.findIndex((tab) => tab.id === activeId);
const [value, setValue] = React.useState(tabIndex === -1 ? 0 : tabIndex);
- const handleChange = (event: React.ChangeEvent<{}>, index: number) => {
+ const handleChange = (_event: React.ChangeEvent<{}>, index: number) => {
onChange?.(tabs[index].id);
setValue(index);
};
@@ -111,13 +121,13 @@ const Tabs = ({ tabs, activeId = '', variant = 'default', onChange }: TabsProps)
);
const tabContent = tabs.map((tab, idx) => (
-
+
{tab.content}
));
return variant === 'container' ? (
-
+
{tabContent}
) : (