refactor(tabs): integrate v2 design (#895)

* refactor(tabs): integrate v2 design

closes db-ux-design-system/design-feedback#85

Co-Authored-By: Nicolas Merget <[email protected]>

* refactor: corrected styling

Co-Authored-By: Nicolas Merget <[email protected]>

* feat: added icon

* refactor: added small size

* feat: added small items with icons

* refactor: added correct color value

* refactor: button vertical alignment

* refactor: added pressed state

* Update tab-bar.scss

* refactor: simplification

* Update tab-bar.scss

* refactor: added missing parameter

* refactor: add relevant comment

* refactor: simply enabled multi-line content

* style: feedback

* refactor: we don't want to advertise for this one

* style: adaptions out of feedback

* refactor: corrected these declarations

---------

Co-authored-by: Nicolas Merget <[email protected]>

Author: mfranzke

source/_patterns/02-components/tab-bar/_tab-bar.md

@@ -4,6 +4,10 @@ state: complete
 tags: [style-1.6]
 ---
 
+## Multi-line
+
+The multi-line tabs haven't been developed, but are only available in the Sketch library. If you really need this pattern even also in the development, please set it up yourself e.g. with a `<br>` or differentiated label texts e.g. by `<span>` elements.
+
 ## Accessibility
 
 This pattern has been tested and approved regarding accessibility.

source/_patterns/02-components/tab-bar/_tab-bar.variables.scss

@@ -5,7 +5,9 @@ $tabBar-tabSection--backgroundColor: #fdfdfd !default; // TODO: This would need
 
 $tabBar-tab-focus-outline: 1px dotted $db-color-cool-gray-400 !default;
 
-$tabBar-tab-hover-backgroundColor: $db-color-cool-gray-100 !default;
+// $db-color-cool-gray-100
+$tabBar-tab-hover-backgroundColor: #{$db-color-cool-gray-700} + "1F" !default;
+$tabBar-tab-pressed-backgroundColor: #{$db-color-cool-gray-700} + "3D" !default;
 $tabBar-tab-active-border: #{to-rem(
 		$pxValue: 1
 	)} solid $db-color-cool-gray-500 !default;

source/_patterns/02-components/tab-bar/tab-bar.hbs

@@ -1,11 +1,11 @@
 {{! TODO: evaluate on the correct role and aria-label in here }}
-<div class="cmp-tab-bar" role="tablist">
+<div class="cmp-tab-bar" role="tablist"{{#if size}} data-size="{{ size }}"{{/if }}>
 	<!-- Pay attention to use a component wide, but component instance specific name to the following input[type="radio"] elements //-->
 	{{#each tabs }}
-		<input type="radio" name="cmp-tab-bar-tabs-01" id="radio_{{ @index }}" {{#if active }} checked{{/if }}{{#if disabled }}
+		<input type="radio" name="cmp-tab-bar-tabs-{{ ../identifier }}" id="tab_{{ ../identifier }}_{{ @index }}" {{#if active }} checked{{/if }}{{#if disabled }}
 			disabled{{/if }}>
-		<label for="radio_{{ @index }}" role="tab">{{ @index }}</label>
-		<section id="content_{{ @index }}" role="tabpanel">
+		<label for="tab_{{ ../identifier }}_{{ @index }}" role="tab"{{#if ../icon}} data-icon="{{ ../icon }}"{{/if }}>{{ label }}{{#if label2 }}<br>{{ label2 }}{{/if }}</label>
+		<section id="content_{{ ../identifier }}_{{ @index }}" role="tabpanel">
 			{{ content }}
 		</section>
 	{{/each }}

source/_patterns/02-components/tab-bar/tab-bar.listitems.json source/_patterns/02-components/tab-bar/tab-bar.json

@@ -1,4 +1,5 @@
 {
+	"identifier": "regular",
 	"tabs": [
 		{
 			"label": "Tab 01",

source/_patterns/02-components/tab-bar/tab-bar.scss

@@ -1,31 +1,34 @@
 @import "../../../css/partials.meta";
 @import "tab-bar.variables";
+@import "../../00-base/icons/icons.helpers";
+
+@mixin tab() {
+	& > input[type="radio"],
+	& > * > input[type="radio"] {
+		@content;
+	}
+}
 
 .cmp-tab-bar {
 	display: flex;
 	flex-wrap: wrap;
 
-	label[role="tab"],
-	section[role="tabpanel"] {
-		background-color: $tabBar-tabSection--backgroundColor;
-	}
+	gap: 0.25rem;
 
-	& > input[type="radio"],
-	& > * > input[type="radio"] {
+	@include tab() {
 		@include a11y-visually-hidden($partial: $partial);
 
 		& + label[role="tab"] {
-			border-top-left-radius: 4px;
-			border-top-right-radius: 4px;
 			cursor: pointer;
-			display: inline-block;
-			margin-left: to-rem($pxValue: 8);
-			padding: #{to-rem($pxValue: 5)} #{to-rem($pxValue: 32)};
+			display: flex;
+			padding: 0.875rem $db-spacing-m;
 			position: relative;
 			z-index: 1;
+			border-radius: 4px;
+			align-items: center;
 
-			&:first-of-type {
-				margin-left: to-rem($pxValue: 16);
+			&::before {
+				margin-inline-start: -0.125rem;
 			}
 		}
 
@@ -39,6 +42,10 @@
 				&:focus {
 					background-color: $tabBar-tab-hover-backgroundColor;
 				}
+
+				&:active {
+					background-color: $tabBar-tab-pressed-backgroundColor;
+				}
 			}
 		}
 
@@ -55,25 +62,44 @@
 
 		&:checked {
 			& + label[role="tab"] {
-				border: $tabBar-tab-active-border;
-				border-bottom: none;
 				font-weight: 700;
-				padding-top: to-rem($pxValue: 3);
-				transform: translateY(to-rem($pxValue: 1));
 
 				& + section[role="tabpanel"] {
 					display: initial;
 				}
+
+				// Puls
+				&::after {
+					background-color: $db-color-red-500;
+					border-radius: 5px;
+					content: "";
+					display: block;
+					height: 0.25rem;
+					inset-block-end: 0;
+					inset-inline: 0;
+					position: absolute;
+				}
 			}
 		}
 	}
 
+	label[role="tab"],
+	section[role="tabpanel"] {
+		background-color: $tabBar-tabSection--backgroundColor;
+	}
+
 	section[role="tabpanel"] {
-		border-top: $tabBar-tabpanel--borderTop;
-		box-shadow: $tabBar-tabpanel--boxShadow;
 		display: none;
 		flex-basis: 100%;
 		order: 1;
-		padding: to-rem($pxValue: 46) to-rem($pxValue: 50);
+		margin-block-start: 0.125rem;
+	}
+
+	&[data-size="small"] {
+		@include tab() {
+			& + label[role="tab"] {
+				padding-block: 0.625rem;
+			}
+		}
 	}
 }

source/_patterns/02-components/tab-bar/tab-bar~item-icon.json

@@ -0,0 +1,4 @@
+{
+	"identifier": "small-icon",
+	"icon": "account"
+}

source/_patterns/02-components/tab-bar/tab-bar~small-item-icon.json

@@ -0,0 +1,5 @@
+{
+	"identifier": "icon",
+	"icon": "account",
+	"size": "small"
+}

source/_patterns/02-components/tab-bar/tab-bar~small.json

@@ -0,0 +1,4 @@
+{
+	"identifier": "small",
+	"size": "small"
+}