fix: add default and active CSS class to tab labels

webiny · Jul 19, 2024 · 53f2895 · 53f2895
1 parent f849060
commit 53f2895
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/packages/app-page-builder-elements/src/renderers/tabs.tsx b/packages/app-page-builder-elements/src/renderers/tabs.tsx
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import { Elements } from "~/components/Elements";
 import { createRenderer } from "~/createRenderer";
 import { useRenderer } from "~/hooks/useRenderer";
+import { ClassNames } from "@emotion/react";
 
 const TabsHeader = styled.div`
     display: flex;
@@ -44,17 +45,24 @@ export const createTabs = () => {
         return (
             <>
                 <TabsHeader>
-                    {element.elements.map((tab, index) => (
-                        <TabLabel
-                            key={index}
-                            onClick={() => {
-                                setSelectedTabElement(tab);
-                            }}
-                            active={tab.id === selectedTabElement.id}
-                        >
-                            {tab.data?.settings?.tab?.label || ""}
-                        </TabLabel>
-                    ))}
+                    {element.elements.map((tab, index) => {
+                        const active = tab.id === selectedTabElement.id;
+                        return (
+                            <ClassNames key={index}>
+                                {({ cx }) => (
+                                    <TabLabel
+                                        active={active}
+                                        className={cx("tab-label", { active })}
+                                        onClick={() => {
+                                            setSelectedTabElement(tab);
+                                        }}
+                                    >
+                                        {tab.data?.settings?.tab?.label || ""}
+                                    </TabLabel>
+                                )}
+                            </ClassNames>
+                        );
+                    })}
                 </TabsHeader>
                 <Elements element={{ ...element, elements: [selectedTabElement] }} />
             </>

diff --git a/packages/app-page-builder/src/editor/plugins/elements/tabs/PeTabs.tsx b/packages/app-page-builder/src/editor/plugins/elements/tabs/PeTabs.tsx
@@ -5,6 +5,7 @@ import { createRenderer, useRenderer, Elements } from "@webiny/app-page-builder-
 import { Element as ElementType } from "@webiny/app-page-builder-elements/types";
 import { useActiveElementId } from "~/editor/hooks/useActiveElementId";
 import { elementWithChildrenByIdSelector } from "~/editor/recoil/modules";
+import { ClassNames } from "@emotion/react";
 
 const TabsContainer = styled.div`
     width: 100%;
@@ -62,18 +63,25 @@ const PeTabs = createRenderer(() => {
     return (
         <TabsContainer>
             <TabsHeader>
-                {childrenElements.map((tab, index) => (
-                    <TabLabel
-                        key={index}
-                        onClick={() => {
-                            setSelectedTabElement(tab);
-                            setActiveElementId(tab.id);
-                        }}
-                        active={tab.id === selectedTabElement.id}
-                    >
-                        {tab.data?.settings?.tab?.label || ""}
-                    </TabLabel>
-                ))}
+                {childrenElements.map((tab, index) => {
+                    const active = tab.id === selectedTabElement.id;
+                    return (
+                        <ClassNames key={index}>
+                            {({ cx }) => (
+                                <TabLabel
+                                    active={active}
+                                    className={cx("tab-label", { active })}
+                                    onClick={() => {
+                                        setSelectedTabElement(tab);
+                                        setActiveElementId(tab.id);
+                                    }}
+                                >
+                                    {tab.data?.settings?.tab?.label || ""}
+                                </TabLabel>
+                            )}
+                        </ClassNames>
+                    );
+                })}
             </TabsHeader>
             <Elements
                 element={{ ...elementWithChildren, elements: [selectedTabElementWithChildren] }}