fix(theme): remove bottom border and vertical padding from vertical t…

…abs (redhat-developer#135) Signed-off-by: Christoph Jerolimov <[email protected]>
04kash · Dec 12, 2024 · ddb78cc · ddb78cc
1 parent 9405846
commit ddb78cc
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/workspaces/theme/.changeset/moody-camels-design.md b/workspaces/theme/.changeset/moody-camels-design.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-theme': patch
+---
+
+remove bottom border and vertical padding from vertical tabs
diff --git a/workspaces/theme/plugins/mui4-test/src/components/TabExamples.tsx b/workspaces/theme/plugins/mui4-test/src/components/TabExamples.tsx
@@ -32,21 +32,23 @@ export const TabExamples = () => {
   return (
     <div>
       {colors.map(color => (
-        <div key={color} style={{ padding: '20px 0' }}>
+        <div key={color}>
+          <div style={{ padding: '20px 0' }}>color: {color ?? 'undefined'}</div>
           <Tabs
             value={selectedTab}
             indicatorColor="primary"
             textColor="primary"
             onChange={handleChange}
           >
-            <Tab label={`color: ${color}`} />
+            <Tab label="One" />
             <Tab label="Two" />
             <Tab label="Three" />
             <Tab label="Disabled" disabled />
           </Tabs>
         </div>
       ))}
 
+      <div style={{ padding: '20px 0' }}>Vertical test</div>
       <Tabs
         orientation="vertical"
         value={selectedTab}
@@ -55,7 +57,7 @@ export const TabExamples = () => {
         onChange={handleChange}
         aria-label="disabled tabs example"
       >
-        <Tab label="Vertical test" />
+        <Tab label="One" />
         <Tab label="Two" />
         <Tab label="Three" />
         <Tab label="Disabled" disabled />

diff --git a/workspaces/theme/plugins/mui5-test/src/components/TabExamples.tsx b/workspaces/theme/plugins/mui5-test/src/components/TabExamples.tsx
@@ -32,7 +32,8 @@ export const TabExamples = () => {
   return (
     <div>
       {colors.map(color => (
-        <div key={color} style={{ padding: '20px 0' }}>
+        <div key={color}>
+          <div style={{ padding: '20px 0' }}>color: {color ?? 'undefined'}</div>
           <Tabs
             value={selectedTab}
             indicatorColor="primary"
@@ -47,6 +48,7 @@ export const TabExamples = () => {
         </div>
       ))}
 
+      <div style={{ padding: '20px 0' }}>Vertical test</div>
       <Tabs
         orientation="vertical"
         value={selectedTab}
@@ -55,7 +57,7 @@ export const TabExamples = () => {
         onChange={handleChange}
         aria-label="disabled tabs example"
       >
-        <Tab label="Vertical test" />
+        <Tab label="One" />
         <Tab label="Two" />
         <Tab label="Three" />
         <Tab label="Disabled" disabled />

diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts
@@ -423,6 +423,10 @@ export const createComponents = (themeConfig: ThemeConfig): Components => {
           borderBottom: `1px solid ${general.tabsBottomBorderColor}`,
           padding: '0 1.5rem',
         },
+        vertical: {
+          borderBottom: `none`,
+          padding: 0,
+        },
         flexContainerVertical: {
           '& > button:hover': {
             boxShadow: `-3px 0 ${general.tabsBottomBorderColor} inset`,