Merge pull request #73 from miljodir/MALIN-635-designsystem-fikse-tabs

Tabs fiks
miljodir · Jan 16, 2024 · 5bc86a6 · 5bc86a6
2 parents 7281c3f + 4f54a72
commit 5bc86a6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

diff --git a/packages/css/src/tabs/tabs.css b/packages/css/src/tabs/tabs.css
@@ -18,14 +18,27 @@
 }
 
 .md-tabs-container ul li .md-tabs-button {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
   font-size: 1em;
   font-weight: 400;
-  padding: 13px 24px 13px 24px;
+  padding: 13px 24px 12px 24px;
   border: 0;
   background-color: transparent;
   border-bottom: 1px solid var(--mdGreyColor80);
-  transition: border 0.1s linear, background 0.1s linear, margin 0.1s linear;
-  margin-bottom: 3px;
+}
+.md-tabs-container ul li .md-tabs-button::after {
+  content: attr(data-text);
+  content: attr(data-text) / '';
+  height: 0;
+  visibility: hidden;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+  font-weight: 600;
 }
 
 .md-tabs-container ul li .md-tabs-button.md-tabs-button--disabled {
@@ -36,17 +49,17 @@
 
 .md-tabs-container ul li .md-tabs-button.md-tabs-button--selected {
   font-weight: 600;
+  padding: 13px 24px 9px 24px;
   border-bottom: 4px solid var(--mdPrimaryColor80);
-  margin-bottom: 0px;
 }
-
 .md-tabs-container ul li .md-tabs-button:not(.md-tabs-button--disabled):hover {
   background-color: var(--mdPrimaryColor20);
   cursor: pointer;
 }
 
 .md-tabs-container ul li .md-tabs-button:not(.md-tabs-button--disabled):focus {
   outline: 2px solid var(--mdPrimaryColor);
+  outline-offset: -2px;
   background-color: var(--mdPrimaryColor20);
   cursor: pointer;
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git a/packages/react/src/tabs/MdTabTitle.tsx b/packages/react/src/tabs/MdTabTitle.tsx
@@ -30,6 +30,7 @@ const MdTabTitle: React.FunctionComponent<MdTabTitleProps> = ({
           return !disabled && setSelectedTab(index);
         }}
         tabIndex={disabled ? -1 : 0}
+        data-text={title}
       >
         {title}
       </button>