Merge branch 'improvement/tab-content-padding' into q/1.0

scality · Jun 25, 2024 · 9f94ca2 · 9f94ca2
2 parents 1f34a08 + ea811ef
commit 9f94ca2
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 79 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
@@ -1,6 +1,10 @@
-// @ts-nocheck
-import React, { createContext, useEffect, useState, useCallback } from 'react';
-import { Element, ChildrenArray } from 'react';
+import React, {
+  createContext,
+  useEffect,
+  useState,
+  useCallback,
+  ReactElement,
+} from 'react';
 import {
   TabBar,
   ScrollableContainer,
@@ -15,6 +19,7 @@ import {
   useRouteMatch,
   matchPath,
   Route,
+  Switch,
 } from 'react-router-dom';
 import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
 import { ScrollButton } from './ScrollButton';
@@ -32,7 +37,7 @@ type TabsProps = {
   tabContentColor?: string;
   separatorColor?: string;
   tabHoverColor?: string;
-  children: ChildrenArray<Element<typeof Tab>>;
+  children: ReactElement<TabProps>[];
   className?: string;
 };
 export const TabsContext = createContext<boolean>(false);
@@ -60,9 +65,11 @@ function Tabs({
     number | null | undefined
   >(null);
   const queryURL = new URLSearchParams(location.search);
-  const filteredTabsChildren = React.Children.toArray(children).filter(
+  const filteredTabsChildren: ReactElement<TabProps>[] = React.Children.toArray(
+    children,
+  ).filter(
     (child) => React.isValidElement(child) && child.type === Tab,
-  );
+  ) as ReactElement<TabProps>[];
 
   const matchQuery = useCallback(
     (query: Query): boolean => {
@@ -168,18 +175,17 @@ function Tabs({
       >
         {icon && <TabIcon label={label}>{icon}</TabIcon>}
         {isSelected ? (
-          <BasicText className="sc-tabs-item-title">{label}</BasicText>
+          <BasicText>{label}</BasicText>
         ) : (
-          <SecondaryText className="sc-tabs-item-title">{label}</SecondaryText>
-        )}
-        {textBadge && (
-          <EmphaseText className="sc-tabs-item-icon">{textBadge}</EmphaseText>
+          <SecondaryText>{label}</SecondaryText>
         )}
+        {textBadge && <EmphaseText>{textBadge}</EmphaseText>}
       </TabItem>
     );
   });
   return (
     <TabsContext.Provider value={true}>
+      {/*@ts-expect-error containerType is not yet a valid prop for react */}
       <TabsContainer
         style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
@@ -213,31 +219,33 @@ function Tabs({
             />
           )}
         </ScrollableContainer>
-        <TabContent
-          className="sc-tabs-item-content"
-          tabContentColor={tabContentColor}
-        >
-          {filteredTabsChildren.map((tab: Element<typeof Tab>, index) => (
-            <Route
-              exact={tab.props.exact}
-              sensitive={tab.props.sensitive}
-              strict={tab.props.strict}
-              key={index}
-              path={
-                tab.props.path.startsWith('/')
-                  ? tab.props.path
-                  : url + '/' + tab.props.path
-              }
-            >
-              {!tab.props.query ||
-              (tab.props.query && matchQuery(tab.props.query)) ? (
-                tab.props.children
-              ) : (
-                <></>
-              )}
-            </Route>
-          ))}
-        </TabContent>
+
+        {filteredTabsChildren.map((tab, index) => (
+          <Route
+            exact={tab.props.exact}
+            sensitive={tab.props.sensitive}
+            strict={tab.props.strict}
+            path={
+              tab.props.path.startsWith('/')
+                ? tab.props.path
+                : url + '/' + tab.props.path
+            }
+            key={index}
+          >
+            {!tab.props.query ||
+            (tab.props.query && matchQuery(tab.props.query)) ? (
+              <TabContent
+                className="sc-tabs-item-content"
+                tabContentColor={tabContentColor}
+                withoutPadding={tab.props.withoutPadding}
+              >
+                {tab.props.children}
+              </TabContent>
+            ) : (
+              <></>
+            )}
+          </Route>
+        ))}
       </TabsContainer>
     </TabsContext.Provider>
   );

diff --git a/src/lib/components/tabsv2/useScrollingTabs.ts b/src/lib/components/tabsv2/useScrollingTabs.ts
@@ -283,7 +283,7 @@ const useScrollingTabs = (selectedTabIndex: number | null | undefined) => {
     scrollSelectedIntoView();
   }, [scrollSelectedIntoView, selectedTabIndex]);
 
-  const handleKeyDown = (event: KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     const list = tabsListRef.current;
     const ownerDocument = (list && list.ownerDocument) || document;
     const currentFocus = ownerDocument.activeElement;

diff --git a/stories/tabsv2.stories.tsx b/stories/tabsv2.stories.tsx
@@ -5,15 +5,23 @@ import { Wrapper, Title } from './common';
 import { BrowserRouter } from 'react-router-dom';
 import { brand, spacing } from '../src/lib/style/theme';
 import styled from 'styled-components';
-import { useLocation } from 'react-router';
+import { MemoryRouter, Route, useLocation } from 'react-router';
+
 const Content = styled.div`
   padding: ${spacing.sp24};
   color: ${(props) => props.theme.textPrimary};
+  height: 100%;
 `;
 export default {
   title: 'Components/Navigation/Tabs',
   component: Tabs,
-  decorators: [(story) => <BrowserRouter>{story()}</BrowserRouter>],
+  decorators: [
+    (story) => (
+      <BrowserRouter>
+        <Wrapper style={{ minHeight: '30rem' }}>{story()}</Wrapper>
+      </BrowserRouter>
+    ),
+  ],
   argTypes: {
     activeTabSeparator: {
       control: {
@@ -79,44 +87,52 @@ const DefaultTabsDetails = (props) => {
       <Title>
         {location.pathname} / {location.search}
       </Title>
-      <Tabs {...props}>
-        <Tab path="/iframe.html" label="Users">
-          <Content>Users Content</Content>
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'group',
-          }}
-          label="Groups"
-        >
-          {details()}
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'role @',
-          }}
-          label="Roles"
-        >
-          {details()}
-        </Tab>
-        <Tab
-          path="/path1"
-          query={{
-            tab: 'policies',
-          }}
-          label="Policies"
-        >
-          {details()}
-        </Tab>
-        <Tab path="/path4" label="Storage Location">
-          <Content>Storage Location Content</Content>
-        </Tab>
-        <Tab path="/path5" label="Properties">
-          <Content>Properties Content</Content>
-        </Tab>
-      </Tabs>
+      <MemoryRouter initialEntries={['/path?tab=group']} initialIndex={0}>
+        <Route
+          path="/:path?"
+          render={() => (
+            <Tabs {...props}>
+              <Tab path="/path" label="Users" withoutPadding>
+                <Content>Users Content</Content>
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'group',
+                }}
+                label="Groups"
+              >
+                {details()}
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'role',
+                }}
+                label="Roles"
+                withoutPadding
+              >
+                <Content>Roles content</Content>
+              </Tab>
+              <Tab
+                path="/path1"
+                query={{
+                  tab: 'policies',
+                }}
+                label="Policies"
+              >
+                <Content>Policies content</Content>
+              </Tab>
+              <Tab path="/path4" label="Storage Location">
+                <Content>Storage Location Content</Content>
+              </Tab>
+              <Tab path="/path5" label="Properties">
+                <Content>Properties Content</Content>
+              </Tab>
+            </Tabs>
+          )}
+        />
+      </MemoryRouter>
     </>
   );
 };