MALIN-635 fix: no width change on weight change

miljodir · Jan 16, 2024 · 4f54a72 · 4f54a72
1 parent fc50e71
commit 4f54a72
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 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,13 +18,28 @@
 }
 
 .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 12px 24px;
   border: 0;
   background-color: transparent;
   border-bottom: 1px solid var(--mdGreyColor80);
 }
+.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 {
   background-color: var(--mdGreyColor20);

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>