Adjusted tab view styles in settings panel (#1389)

* Adjusted tab view styles in settings panel REF https://linear.app/ghost/issue/PLG-187/align-components-with-admin-x-design-system-styles - The spacing and border styles are adjusted to accommodate single tab view - The design settings tab is removed from the html node component as it was only there for testing purposes * Updated test
TryGhost · Nov 11, 2024 · 7dd82ba · 7dd82ba
1 parent c1d60dc
commit 7dd82ba
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 12 deletions.
diff --git a/packages/koenig-lexical/src/components/ui/TabView.jsx b/packages/koenig-lexical/src/components/ui/TabView.jsx
@@ -10,11 +10,13 @@ const TabView = ({tabs, defaultTab, tabContent}) => {
 
     return (
         <>
-            <div className="no-scrollbar flex w-full gap-5 border-b border-grey-300 px-6 dark:border-grey-900">
+            <div className={`no-scrollbar flex w-full gap-5 px-6 ${tabs.length > 1 ? 'border-b border-grey-300 dark:border-grey-900' : ''}`}>
                 {tabs.map(tab => (
                     <button
                         key={tab.id}
-                        className={`-mb-px cursor-pointer appearance-none whitespace-nowrap border-b-2 pb-3 pt-4 text-sm font-semibold transition-all ${
+                        className={`-mb-px appearance-none whitespace-nowrap text-sm font-semibold transition-all ${
+                            tabs.length > 1 ? 'cursor-pointer border-b-2 pb-3 pt-4' : 'cursor-default pt-6'
+                        } ${
                             activeTab === tab.id
                                 ? 'border-black text-black dark:border-white dark:text-white'
                                 : 'border-transparent text-grey-600 hover:border-grey-500 dark:text-white'
@@ -27,7 +29,7 @@ const TabView = ({tabs, defaultTab, tabContent}) => {
                     </button>
                 ))}
             </div>
-            <div className="flex flex-col gap-3 p-6">
+            <div className="flex flex-col gap-3 p-6 pt-4">
                 {tabContent[activeTab]}
             </div>
         </>

diff --git a/packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx b/packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx
@@ -36,7 +36,6 @@ export function HtmlNodeComponent({nodeKey, html}) {
     };
 
     const tabs = [
-        {id: 'design', label: 'Design'},
         {id: 'visibility', label: 'Visibility'}
     ];
 
@@ -66,12 +65,6 @@ export function HtmlNodeComponent({nodeKey, html}) {
         </>
     );
 
-    const designSettings = (
-        <div className="text-sm font-medium tracking-normal text-grey-900 dark:text-grey-300">
-            Some design settings
-        </div>
-    );
-
     const updateHtml = (value) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
@@ -143,7 +136,6 @@ export function HtmlNodeComponent({nodeKey, html}) {
                     onMouseDown={e => e.preventDefault()}
                 >
                     {{
-                        design: designSettings,
                         visibility: visibilitySettings
                     }}
                 </SettingsPanel>

diff --git a/packages/koenig-lexical/test/e2e/paste-behaviour.test.js b/packages/koenig-lexical/test/e2e/paste-behaviour.test.js
@@ -554,7 +554,6 @@ test.describe('Paste behaviour', async () => {
                         <div>
                             <div draggable="true">
                                 <div>
-                                    <button type="button">Design</button>
                                     <button type="button">Visibility</button>
                                 </div>
                                 <div>