feat(TabList): add opt-out for default padding (#1915)

mondaycom · Jan 25, 2024 · b7be6bf · b7be6bf
1 parent ea01ce4
commit b7be6bf
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 48 deletions.
diff --git a/src/components/Tabs/TabList/TabList.module.scss b/src/components/Tabs/TabList/TabList.module.scss
@@ -2,6 +2,10 @@
 
 .tabsWrapper {
   padding-bottom: 20px;
+
+  &.noPadding {
+    padding-bottom: 0;
+  }
 }
 
 .tabsWrapper .tabsList {

diff --git a/src/components/Tabs/TabList/TabList.tsx b/src/components/Tabs/TabList/TabList.tsx
@@ -16,6 +16,7 @@ export interface TabListProps extends VibeComponentProps {
   activeTabId?: number;
   tabType?: string;
   size?: string;
+  noPadding?: boolean;
   children?: ReactElement<TabProps>[];
 }
 
@@ -28,6 +29,7 @@ const TabList: FC<TabListProps> = forwardRef(
       activeTabId = 0,
       tabType = "Compact",
       size,
+      noPadding,
       children,
       "data-testid": dataTestId
     },
@@ -105,7 +107,9 @@ const TabList: FC<TabListProps> = forwardRef(
     return (
       <div
         ref={mergedRef}
-        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))])}
+        className={cx(styles.tabsWrapper, { [styles.noPadding]: noPadding }, className, [
+          getStyle(styles, camelCase(tabType))
+        ])}
         id={id}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}
       >

diff --git a/src/components/Tabs/TabList/__tests__/__snapshots__/tabList-snapshot-tests.jest.js.snap b/src/components/Tabs/TabList/__tests__/__snapshots__/tabList-snapshot-tests.jest.js.snap
@@ -1,29 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TabList renders correctly stretched tab list 1`] = `
+exports[`TabList renders correctly with activeTabId 1`] = `
 <div
-  className="tabsWrapper stretched"
+  className="tabsWrapper compact"
   data-testid="tab-list"
 >
   <ul
     className="tabsList"
     role="tablist"
     tabIndex={0}
   >
-    <li
-      aria-disabled={false}
-      aria-selected={true}
-      className="tabWrapper tabListTabWrapper active"
-      data-testid="tab"
-      role="tab"
-    >
-      <a
-        className="tabInner tabListTabInner"
-        onClick={[Function]}
-      >
-        First
-      </a>
-    </li>
     <li
       aria-disabled={false}
       aria-selected={false}
@@ -35,28 +21,28 @@ exports[`TabList renders correctly stretched tab list 1`] = `
         className="tabInner tabListTabInner"
         onClick={[Function]}
       >
-        Second
+        First
       </a>
     </li>
     <li
       aria-disabled={false}
-      aria-selected={false}
-      className="tabWrapper tabListTabWrapper"
+      aria-selected={true}
+      className="tabWrapper tabListTabWrapper active"
       data-testid="tab"
       role="tab"
     >
       <a
         className="tabInner tabListTabInner"
         onClick={[Function]}
       >
-        Third
+        Second
       </a>
     </li>
   </ul>
 </div>
 `;
 
-exports[`TabList renders correctly with activeTabId 1`] = `
+exports[`TabList renders correctly with children 1`] = `
 <div
   className="tabsWrapper compact"
   data-testid="tab-list"
@@ -66,20 +52,6 @@ exports[`TabList renders correctly with activeTabId 1`] = `
     role="tablist"
     tabIndex={0}
   >
-    <li
-      aria-disabled={false}
-      aria-selected={false}
-      className="tabWrapper tabListTabWrapper"
-      data-testid="tab"
-      role="tab"
-    >
-      <a
-        className="tabInner tabListTabInner"
-        onClick={[Function]}
-      >
-        First
-      </a>
-    </li>
     <li
       aria-disabled={false}
       aria-selected={true}
@@ -91,16 +63,16 @@ exports[`TabList renders correctly with activeTabId 1`] = `
         className="tabInner tabListTabInner"
         onClick={[Function]}
       >
-        Second
+        First
       </a>
     </li>
   </ul>
 </div>
 `;
 
-exports[`TabList renders correctly with children 1`] = `
+exports[`TabList renders correctly with className 1`] = `
 <div
-  className="tabsWrapper compact"
+  className="tabsWrapper test compact"
   data-testid="tab-list"
 >
   <ul
@@ -126,10 +98,11 @@ exports[`TabList renders correctly with children 1`] = `
 </div>
 `;
 
-exports[`TabList renders correctly with className 1`] = `
+exports[`TabList renders correctly with id 1`] = `
 <div
-  className="tabsWrapper test compact"
-  data-testid="tab-list"
+  className="tabsWrapper compact"
+  data-testid="tab-list_test"
+  id="test"
 >
   <ul
     className="tabsList"
@@ -154,11 +127,10 @@ exports[`TabList renders correctly with className 1`] = `
 </div>
 `;
 
-exports[`TabList renders correctly with id 1`] = `
+exports[`TabList renders correctly with noPadding 1`] = `
 <div
-  className="tabsWrapper compact"
-  data-testid="tab-list_test"
-  id="test"
+  className="tabsWrapper noPadding compact"
+  data-testid="tab-list"
 >
   <ul
     className="tabsList"
@@ -179,6 +151,34 @@ exports[`TabList renders correctly with id 1`] = `
         First
       </a>
     </li>
+    <li
+      aria-disabled={false}
+      aria-selected={false}
+      className="tabWrapper tabListTabWrapper"
+      data-testid="tab"
+      role="tab"
+    >
+      <a
+        className="tabInner tabListTabInner"
+        onClick={[Function]}
+      >
+        Second
+      </a>
+    </li>
+    <li
+      aria-disabled={false}
+      aria-selected={false}
+      className="tabWrapper tabListTabWrapper"
+      data-testid="tab"
+      role="tab"
+    >
+      <a
+        className="tabInner tabListTabInner"
+        onClick={[Function]}
+      >
+        Third
+      </a>
+    </li>
   </ul>
 </div>
 `;

diff --git a/src/components/Tabs/TabList/__tests__/tabList-snapshot-tests.jest.js b/src/components/Tabs/TabList/__tests__/tabList-snapshot-tests.jest.js
@@ -73,10 +73,10 @@ describe("TabList renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("stretched tab list", () => {
+  it("with noPadding", () => {
     const tree = renderer
       .create(
-        <TabList tabType="stretched">
+        <TabList noPadding>
           <Tab>First</Tab>
           <Tab>Second</Tab>
           <Tab>Third</Tab>