feat: sync changes from v2 to v2-develop

.github/workflows/release.yaml

@@ -103,7 +103,7 @@ jobs:
         target: ['alpha', 'v2-develop']
     steps:
       - name: Call create sync pr
-        uses: gisce/create-sync-pr@v0.0.6
+        uses: gisce/create-sync-pr@v0.0.9
         with:
           repository: ${{ env.LIBRARY_NAME }}
           targetBranch: ${{ matrix.target }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.52.2",
+  "version": "2.53.0",
   "engines": {
     "node": "20.5.0"
   },
@@ -36,7 +36,7 @@
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "2.1.1",
     "@gisce/ooui": "2.27.0",
-    "@gisce/react-formiga-components": "1.8.0",
+    "@gisce/react-formiga-components": "1.9.0",
     "@gisce/react-formiga-table": "1.9.1",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",

src/widgets/containers/Notebook.tsx

@@ -1,11 +1,33 @@
 import React from "react";
-import { Tabs } from "antd";
+import { Tabs, theme } from "antd";
+import styled from "styled-components";
 import iconMapper from "@/helpers/iconMapper";
 
 import { Notebook as NotebookOoui, Group as GroupOoui } from "@gisce/ooui";
 import { Group } from "@/index";
 const { TabPane } = Tabs;
 
+const StyledTabs = styled(Tabs)<{ borderRadius?: string }>`
+  .ant-tabs-content-holder {
+    border-left: 1px solid rgba(228, 228, 231, var(--tw-border-opacity));
+    border-right: 1px solid rgba(228, 228, 231, var(--tw-border-opacity));
+    border-bottom: 1px solid rgba(228, 228, 231, var(--tw-border-opacity));
+    padding: 15px;
+    border-bottom-left-radius: ${(props) => props.borderRadius || "5px"};
+    border-bottom-right-radius: ${(props) => props.borderRadius || "5px"};
+    margin-top: -1px;
+  }
+
+  .ant-tabs > .ant-tabs-nav {
+    /* So that there is no gap between the content and tabs */
+    margin-bottom: 0;
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: 0 !important;
+  }
+`;
+
 type Props = {
   ooui: NotebookOoui;
   responsiveBehaviour: boolean;
@@ -14,6 +36,7 @@ type Props = {
 function Notebook(props: Props): React.ReactElement {
   const { ooui, responsiveBehaviour } = props;
   const tabs = ooui.pages;
+  const { token } = theme.useToken();
 
   function getPageIcon(icon: string) {
     if (icon) {
@@ -24,7 +47,11 @@ function Notebook(props: Props): React.ReactElement {
   }
 
   return (
-    <Tabs defaultActiveKey="1" tabPosition={ooui.tabPosition}>
+    <StyledTabs
+      defaultActiveKey="1"
+      tabPosition={ooui.tabPosition}
+      borderRadius={`${token.borderRadius}px`}
+    >
       {tabs
         .filter((page: any) => !page.invisible)
         .map((page: any) => {
@@ -45,7 +72,7 @@ function Notebook(props: Props): React.ReactElement {
             </TabPane>
           );
         })}
-    </Tabs>
+    </StyledTabs>
   );
 }