add withoutPadding prop to Tab, allow to set padding to 0 when Tab ha…

…s Table
scality · Jun 25, 2024 · 472f4a4 · 472f4a4
1 parent a2cc750
commit 472f4a4
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts
@@ -84,9 +84,12 @@ export const TabsContainer = styled.div<{
     margin-right: -1px;
   }
 `;
-export const TabContent = styled.div<{ tabContentColor?: string }>`
+export const TabContent = styled.div<{
+  tabContentColor?: string;
+  withoutPadding?: boolean;
+}>`
   margin: 0;
-  padding: 0;
+  padding: ${(props) => (props.withoutPadding ? '0' : spacing.r16)};
   display: block;
   width: 100%;
   height: 100%;

diff --git a/src/lib/components/tabsv2/Tab.ts b/src/lib/components/tabsv2/Tab.ts
@@ -12,6 +12,7 @@ export type TabProps = {
   exact?: boolean;
   strict?: boolean;
   sensitive?: boolean;
+  withoutPadding?: boolean;
 };
 
 function Tab(_: TabProps) {

diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx
@@ -59,6 +59,7 @@ function Tabs({
   const [selectedTabIndex, setSelectedTabIndex] = useState<
     number | null | undefined
   >(null);
+  const [withoutPadding, setWithoutPadding] = useState();
   const queryURL = new URLSearchParams(location.search);
   const filteredTabsChildren = React.Children.toArray(children).filter(
     (child) => React.isValidElement(child) && child.type === Tab,
@@ -115,6 +116,7 @@ function Tabs({
 
       if (isSelected) {
         setSelectedTabIndex(index);
+        setWithoutPadding(child.props.withoutPadding);
         hasSelectedTab = true;
       }
     });
@@ -216,6 +218,7 @@ function Tabs({
         <TabContent
           className="sc-tabs-item-content"
           tabContentColor={tabContentColor}
+          withoutPadding={withoutPadding}
         >
           {filteredTabsChildren.map((tab: Element<typeof Tab>, index) => (
             <Route

diff --git a/stories/tabsv2.stories.tsx b/stories/tabsv2.stories.tsx
@@ -80,7 +80,7 @@ const DefaultTabsDetails = (props) => {
         {location.pathname} / {location.search}
       </Title>
       <Tabs {...props}>
-        <Tab path="/iframe.html" label="Users">
+        <Tab path="/iframe.html" label="Users" withoutPadding>
           <Content>Users Content</Content>
         </Tab>
         <Tab
@@ -98,6 +98,7 @@ const DefaultTabsDetails = (props) => {
             tab: 'role @',
           }}
           label="Roles"
+          withoutPadding
         >
           {details()}
         </Tab>