Update tab styling (#811)

* Update tab styling

* Apply eslint-fixer changes

* Automatic frontend build

---------

Co-authored-by: vin0401 <[email protected]>

assets/css/globals.css

@@ -27,35 +27,3 @@
   src: url(../fonts/Lato-Bold.ttf);
   font-weight: 700;
 }
-
-* {
-  box-sizing: border-box;
-}
-
-/** MESSAGE **/
-.ant-message {
-  position: absolute;
-  bottom: 20px !important;
-  top: unset !important;
-}
-
-@keyframes moveUp {
-  0% {
-      transform: translateY(+30%);
-      opacity: 0;
-  }
-  100% {
-      transform: translateY(0);
-      opacity: 1;
-  }
-}
-
-.ant-message .ant-message-move-up-appear,
-.ant-message .ant-message-move-up-enter {
-  animation-name: moveUp;
-}
-
-.ant-message .ant-message-move-up-leave {
-  animation-name: moveUp;
-  animation-direction: reverse;
-}

assets/js/src/core/components/tabs/tabs.stories.tsx

@@ -11,9 +11,9 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import { type Meta } from '@storybook/react'
-import { Tabs } from './tabs'
-import React, { Fragment } from 'react'
+import { type StoryObj, type Meta } from '@storybook/react'
+import { type ITabsProps, Tabs } from './tabs'
+import React from 'react'
 
 const config: Meta = {
   title: 'Components/Data Display/Tabs',
@@ -23,7 +23,7 @@ const config: Meta = {
 
 export default config
 
-export const _default = {
+export const _default: StoryObj<ITabsProps> = {
   args: {
     items: [
       {
@@ -50,15 +50,15 @@ export const _default = {
   }
 }
 
-export const ActiveKey = {
+export const ActiveKey: StoryObj<ITabsProps> = {
   args: {
     ..._default.args,
     activeKey: 'tab-3',
     onChange: (key) => { console.log('change tab', key) }
   }
 }
 
-export const Closeable = {
+export const Closeable: StoryObj<ITabsProps> = {
   args: {
     ..._default.args,
     onClose: (key) => { console.log('click close button', key) }

assets/js/src/core/components/tabs/tabs.styles.tsx

@@ -23,6 +23,13 @@ export const useStyles = createStyles(({ token, css }) => {
           margin-left: ${token.marginXXS}px;
         }
       }
+
+      .ant-tabs-nav-list {
+        padding-left: ${token.paddingXS}px;
+        padding-right: ${token.paddingXS}px;
+        align-items: center;
+      }
+
       &.ant-tabs-line .ant-tabs-nav .ant-tabs-tab {
         border-radius: 0;
         background: none;

assets/js/src/core/components/tabs/tabs.tsx

@@ -14,14 +14,19 @@
 import React, { type RefObject } from 'react'
 import { Tabs as AntdTabs, type TabsProps } from 'antd'
 import { useStyles } from '@Pimcore/components/tabs/tabs.styles'
+import cn from 'classnames'
 
 export interface ITabsProps extends TabsProps {
   onClose?: (any) => void
 }
 
 const Component = ({ items, className, activeKey, onClose, onChange, ...props }: ITabsProps, ref: RefObject<HTMLElement | null>): React.JSX.Element => {
   const { styles } = useStyles()
-  const classNames = ['ant-tabs-line', styles.tabs, className]
+  const classNames = cn(
+    'ant-tabs-line',
+    styles.tabs,
+    className
+  )
 
   const onEdit = (key: string | React.MouseEvent<HTMLElement>, action: 'add' | 'remove'): void => {
     if (action === 'remove' && onClose !== undefined) {
@@ -32,14 +37,14 @@ const Component = ({ items, className, activeKey, onClose, onChange, ...props }:
   return (
     <AntdTabs
       activeKey={ activeKey }
-      className={ classNames.join(' ') }
+      className={ classNames }
       hideAdd
       items={ items }
       onChange={ onChange }
       onEdit={ onEdit }
       type={ onClose !== undefined ? 'editable-card' : 'line' }
-    >
-    </AntdTabs>
+      { ...props }
+    />
   )
 }
 

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/layout-related/components/tabpanel/tabpanel.tsx

@@ -14,9 +14,9 @@
 import React from 'react'
 import { type AbstractObjectLayoutDefinition } from '../../dynamic-type-object-layout-abstract'
 import { ObjectComponent } from '@Pimcore/modules/data-object/editor/types/object/tab-manager/tabs/edit/components/object-component'
-import { Tabs, type TabsProps } from 'antd'
 import { Box } from '@Pimcore/components/box/box'
 import { BaseView } from '../../views/base-view'
+import { type ITabsProps, Tabs } from '@Pimcore/components/tabs/tabs'
 
 export interface TabpanelProps extends AbstractObjectLayoutDefinition {
   title?: string
@@ -27,7 +27,7 @@ export interface TabpanelProps extends AbstractObjectLayoutDefinition {
 }
 
 export const Tabpanel = ({ children, border, collapsed, collapsible, title }: TabpanelProps): React.JSX.Element => {
-  const items: TabsProps['items'] = children.map((child, index) => {
+  const items: ITabsProps['items'] = children.map((child, index) => {
     const tabPanelChild = {
       ...child,
       title: undefined
@@ -54,7 +54,9 @@ export const Tabpanel = ({ children, border, collapsed, collapsible, title }: Ta
       collapsible={ collapsible }
       title={ title }
     >
-      <Tabs items={ items } />
+      <Tabs
+        items={ items }
+      />
     </BaseView>
   )
 }

assets/js/src/core/modules/element/editor/tabs/editor-tabs.styles.tsx

@@ -29,7 +29,7 @@ export const useStyle = createStyles(({ token, css }) => {
         height: 100%;
       }
 
-      &.ant-tabs .ant-tabs-tab {
+      &.ant-tabs > .ant-tabs-nav > .ant-tabs-nav-wrap > .ant-tabs-nav-list > .ant-tabs-tab {
         margin: 0 ${token.paddingXS}px !important;
         transition: color .2s;
 
@@ -68,7 +68,7 @@ export const useStyle = createStyles(({ token, css }) => {
         margin-inline-end: 0;
       }
       
-      .ant-tabs-tab {
+      &.ant-tabs > .ant-tabs-nav > .ant-tabs-nav-wrap > .ant-tabs-nav-list > .ant-tabs-tab {
         padding: 0;
         
         &:first-of-type {

public/build/4ffb32d9-3783-46ae-a0eb-ab77689f32ce/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/4ffb32d9-3783-46ae-a0eb-ab77689f32ce/main.js"
+      ]
+    }
+  }
+}

public/build/4ffb32d9-3783-46ae-a0eb-ab77689f32ce/main.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/*!
+ * 
+ *       /**
+ *        * Pimcore
+ *        *
+ *        * This source file is available under two different licenses:
+ *        * - Pimcore Open Core License (POCL)
+ *        * - Pimcore Commercial License (PCL)
+ *        * Full copyright and license information is available in
+ *        * LICENSE.md which is distributed with this source code.
+ *        *
+ *        *  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+ *        *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+ *        * /
+ *
+ */

public/build/4ffb32d9-3783-46ae-a0eb-ab77689f32ce/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/4ffb32d9-3783-46ae-a0eb-ab77689f32ce/main.js": "/bundles/pimcorestudioui/build/4ffb32d9-3783-46ae-a0eb-ab77689f32ce/main.js"
+}

public/build/bd8596bf-5b64-4d0d-989d-152f0abcbb2e/105.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/*!
+ * 
+ *       /**
+ *        * Pimcore
+ *        *
+ *        * This source file is available under two different licenses:
+ *        * - Pimcore Open Core License (POCL)
+ *        * - Pimcore Commercial License (PCL)
+ *        * Full copyright and license information is available in
+ *        * LICENSE.md which is distributed with this source code.
+ *        *
+ *        *  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+ *        *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+ *        * /
+ *
+ */

public/build/bd8596bf-5b64-4d0d-989d-152f0abcbb2e/core-dll.js.LICENSE.txt

@@ -0,0 +1,138 @@
+/* @preserve
+ * Leaflet 1.9.4, a JS library for interactive maps. https://leafletjs.com
+ * (c) 2010-2023 Vladimir Agafonkin, (c) 2010-2011 CloudMade
+ */
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * 
+ *       /**
+ *        * Pimcore
+ *        *
+ *        * This source file is available under two different licenses:
+ *        * - Pimcore Open Core License (POCL)
+ *        * - Pimcore Commercial License (PCL)
+ *        * Full copyright and license information is available in
+ *        * LICENSE.md which is distributed with this source code.
+ *        *
+ *        *  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+ *        *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+ *        * /
+ *
+ */
+
+/*! @license DOMPurify 3.2.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.1/LICENSE */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+   * react-table
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+/**
+   * table-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.21.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.28.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.28.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/

public/build/bd8596bf-5b64-4d0d-989d-152f0abcbb2e/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/bd8596bf-5b64-4d0d-989d-152f0abcbb2e/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/bd8596bf-5b64-4d0d-989d-152f0abcbb2e/core-dll.js"
+      ]
+    }
+  }
+}