ADM-187 (#113)

* ADM-187; (Feat) Add columnSpan props to Tabs component * ADM-187; (Feat) Change styles for ColumnSpanTwo class in Tabs component --------- Co-authored-by: Arthur Volokhin <arthurvolokhin@MacBook-Air-Arthur.local>
dev-family · Mar 19, 2024 · 45f7a64 · 45f7a64
1 parent 622289c
commit 45f7a64
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 34 deletions.
diff --git a/admiral/ui/Tabs/Tabs.module.scss b/admiral/ui/Tabs/Tabs.module.scss
@@ -175,6 +175,10 @@ $transition-dur: '0.16s';
         }
     }
 
+    &__ColumnSpanTwo {
+        grid-column: 1 / -1;
+    }
+
     &:global(.#{$prefix}-top),
     &:global(.#{$prefix}-bottom) {
         flex-direction: column;

diff --git a/admiral/ui/Tabs/Tabs.tsx b/admiral/ui/Tabs/Tabs.tsx
@@ -5,7 +5,7 @@ import cn from 'classnames'
 import { TabsProps } from './interfaces'
 import styles from './Tabs.module.scss'
 
-function InternalTabs({ type, className, size, centered, ...props }: TabsProps) {
+function InternalTabs({ type, className, size, centered, columnSpan = 1, ...props }: TabsProps) {
     const getPopupContainer = useCallback(
         () => document.querySelector('#root > .Theme') as HTMLDivElement,
         [],
@@ -22,6 +22,7 @@ function InternalTabs({ type, className, size, centered, ...props }: TabsProps)
                     [styles.tabs__Centered]: centered,
                     [styles.tabs__SizeS]: size === 'S',
                     [styles.tabs__SizeL]: size === 'L',
+                    [styles.tabs__ColumnSpanTwo]: columnSpan === 2,
                 },
                 className,
             )}

diff --git a/admiral/ui/Tabs/interfaces.ts b/admiral/ui/Tabs/interfaces.ts
@@ -11,4 +11,5 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable' | 'direction' |
     type?: TabsType
     size?: TabsSizeType
     centered?: boolean
+    columnSpan?: 1 | 2
 }
diff --git a/lib/admiral.es.js b/lib/admiral.es.js
@@ -85779,28 +85779,30 @@ function Tabs$1(_ref, ref) {
 }
 var ForwardTabs = /* @__PURE__ */ React$4.forwardRef(Tabs$1);
 ForwardTabs.TabPane = TabPane;
-const tabs = "_tabs_1o5yo_1";
-const tabs__Centered = "_tabs__Centered_1o5yo_6";
-const tabs__SizeL = "_tabs__SizeL_1o5yo_9";
-const tabs__SizeS = "_tabs__SizeS_1o5yo_14";
-const tabs__Card = "_tabs__Card_1o5yo_17";
-const slideUpIn = "_slideUpIn_1o5yo_1";
-const slideUpOut = "_slideUpOut_1o5yo_1";
-const slideDownIn = "_slideDownIn_1o5yo_1";
-const slideDownOut = "_slideDownOut_1o5yo_1";
+const tabs = "_tabs_jy17a_1";
+const tabs__Centered = "_tabs__Centered_jy17a_6";
+const tabs__SizeL = "_tabs__SizeL_jy17a_9";
+const tabs__SizeS = "_tabs__SizeS_jy17a_14";
+const tabs__Card = "_tabs__Card_jy17a_17";
+const tabs__ColumnSpanTwo = "_tabs__ColumnSpanTwo_jy17a_88";
+const slideUpIn = "_slideUpIn_jy17a_1";
+const slideUpOut = "_slideUpOut_jy17a_1";
+const slideDownIn = "_slideDownIn_jy17a_1";
+const slideDownOut = "_slideDownOut_jy17a_1";
 var styles$b = {
   tabs,
   tabs__Centered,
   tabs__SizeL,
   tabs__SizeS,
   tabs__Card,
+  tabs__ColumnSpanTwo,
   slideUpIn,
   slideUpOut,
   slideDownIn,
   slideDownOut
 };
 function InternalTabs(_C) {
-  var _D = _C, { type, className, size, centered } = _D, props = __objRest(_D, ["type", "className", "size", "centered"]);
+  var _D = _C, { type, className, size, centered, columnSpan = 1 } = _D, props = __objRest(_D, ["type", "className", "size", "centered", "columnSpan"]);
   const getPopupContainer = useCallback$1(() => document.querySelector("#root > .Theme"), []);
   return /* @__PURE__ */ React__default.createElement(ForwardTabs, __spreadProps(__spreadValues({
     moreTransitionName: "tabs-dropdown-slide-up"
@@ -85809,7 +85811,8 @@ function InternalTabs(_C) {
       [styles$b.tabs__Card]: type === "card",
       [styles$b.tabs__Centered]: centered,
       [styles$b.tabs__SizeS]: size === "S",
-      [styles$b.tabs__SizeL]: size === "L"
+      [styles$b.tabs__SizeL]: size === "L",
+      [styles$b.tabs__ColumnSpanTwo]: columnSpan === 2
     }, className),
     moreIcon: /* @__PURE__ */ React__default.createElement(FiMoreHorizontal, null),
     prefixCls: "tabs",

diff --git a/lib/admiral.umd.js b/lib/admiral.umd.js
diff --git a/lib/admiral/ui/Tabs/Tabs.d.ts b/lib/admiral/ui/Tabs/Tabs.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TabPane } from 'rc-tabs';
 import { TabsProps } from './interfaces';
-declare function InternalTabs({ type, className, size, centered, ...props }: TabsProps): JSX.Element;
+declare function InternalTabs({ type, className, size, centered, columnSpan, ...props }: TabsProps): JSX.Element;
 export declare const Tabs: typeof InternalTabs & {
     TabPane: typeof TabPane;
 };

diff --git a/lib/admiral/ui/Tabs/interfaces.d.ts b/lib/admiral/ui/Tabs/interfaces.d.ts
@@ -7,4 +7,5 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable' | 'direction' |
     type?: TabsType;
     size?: TabsSizeType;
     centered?: boolean;
+    columnSpan?: 1 | 2;
 }
diff --git a/lib/style.css b/lib/style.css