Fix tab styling in forced-colors-mode (#6027)

public-ui · Feb 15, 2024 · 84989da · 84989da
2 parents d2f2580 + 873c27f
commit 84989da
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 11 deletions.
diff --git a/packages/samples/react/src/components/tabs/basic.tsx b/packages/samples/react/src/components/tabs/basic.tsx
@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolTabs } from '@public-ui/react';
 
 const tabs = [
@@ -20,11 +22,26 @@ const tabs = [
 		_label: 'Letzter Tab',
 	},
 ];
+
+const tabsWithoutIcons = tabs.map((tab) => ({
+	...tab,
+	_icons: undefined,
+}));
+
 export const TabsBasic: FC = () => (
-	<KolTabs _tabs={tabs}>
-		<div slot="tab-0">Inhalte von Tab 1</div>
-		<div slot="tab-1">Inhalte von Tab 2</div>
-		<div slot="tab-2">Inhalte von Tab 3</div>
-		<div slot="tab-3">Inhalte von Tab 4</div>
-	</KolTabs>
+	<>
+		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+
+		<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+	</>
 );
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-tabs-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-tabs-basic-firefox-linux.png
diff --git a/packages/themes/bmf/src/index.ts b/packages/themes/bmf/src/index.ts
@@ -2201,7 +2201,10 @@ export const BMF = KoliBri.createTheme('bmf', {
 		/* border-bottom: 0.025rem solid var(--color-midnight); */
 		color: var(--color-midnight);
 	}
-	button kol-span-wc > span {
+	button:not(.selected) kol-span-wc > span {
+		padding-bottom: 0.25em;
+	}
+	button.selected kol-span-wc > span {
 		border-bottom: 0.25em solid;
 	}
 	button kol-span-wc > span {

diff --git a/...hemes/default/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png b/...hemes/default/snapshots/theme-default/snapshot-for-tabs-basic-firefox-linux.png
diff --git a/packages/themes/default/src/components/tabs.scss b/packages/themes/default/src/components/tabs.scss
@@ -33,7 +33,11 @@ button.selected {
 	color: var(--color-primary);
 }
 
-button kol-span-wc > span {
+button:not(.selected) kol-span-wc > span {
+	padding-bottom: 0.25em;
+}
+
+button.selected kol-span-wc > span {
 	border-bottom: 0.25em solid;
 }
 

diff --git a/packages/themes/ecl/package.json b/packages/themes/ecl/package.json
@@ -9,7 +9,7 @@
 		"xtest": "npm-run-all test:*",
 		"test:ecl-ec": "THEME_MODULE=dist THEME_EXPORT=ECL_EC kolibri-visual-test",
 		"test:ecl-eu": "THEME_MODULE=dist THEME_EXPORT=ECL_EU kolibri-visual-test",
-		"test-update": "npm-run-all test-update:*",
+		"xtest-update": "npm-run-all test-update:*",
 		"test-update:ecl-ec": "THEME_MODULE=dist THEME_EXPORT=ECL_EC kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
 		"test-update:ecl-eu": "THEME_MODULE=dist THEME_EXPORT=ECL_EU kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
 		"pretest:ecl-ec": "pnpm build",

diff --git a/packages/themes/itzbund/package.json b/packages/themes/itzbund/package.json
@@ -7,7 +7,7 @@
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
 		"xtest": "THEME_MODULE=dist THEME_EXPORT=ITZBund kolibri-visual-test",
-		"test-update": "THEME_MODULE=dist THEME_EXPORT=ITZBund kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"xtest-update": "THEME_MODULE=dist THEME_EXPORT=ITZBund kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
 		"pretest": "pnpm build",
 		"pretest-update": "pnpm build"
 	},