Merge branch 'main' into refactor-accordion-animation

navikt · Jan 23, 2025 · 21841aa · 21841aa
2 parents 8449974 + b4f37e8
commit 21841aa
Show file tree

Hide file tree

Showing 64 changed files with 446 additions and 502 deletions.
diff --git a/@navikt/aksel-icons/CHANGELOG.md b/@navikt/aksel-icons/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons
 
+## 7.10.0
+
 ## 7.9.2
 
 ## 7.9.1

diff --git a/@navikt/aksel-icons/figma-plugin/package.json b/@navikt/aksel-icons/figma-plugin/package.json
@@ -28,7 +28,7 @@
     "postcss": "^8.4.31",
     "postcss-url": "^10.1.3",
     "typescript": "5.5.4",
-    "vite": "^5.4.6",
+    "vite": "^5.4.12",
     "vite-plugin-singlefile": "^1.0.0",
     "vite-plugin-svgr": "^4.2.0"
   }

diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.9.2",
+  "version": "7.10.0",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

diff --git a/@navikt/aksel-stylelint/CHANGELOG.md b/@navikt/aksel-stylelint/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 7.10.0
+
 ## 7.9.2
 
 ## 7.9.1

diff --git a/@navikt/aksel-stylelint/package.json b/@navikt/aksel-stylelint/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.9.2",
+  "version": "7.10.0",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^7.9.2",
-    "@navikt/ds-tokens": "^7.9.2",
+    "@navikt/ds-css": "^7.10.0",
+    "@navikt/ds-tokens": "^7.10.0",
     "concurrently": "9.0.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",

diff --git a/@navikt/aksel/CHANGELOG.md b/@navikt/aksel/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/aksel
 
+## 7.10.0
+
+### Patch Changes
+
+- Updated dependencies [[`d29509d`](https://github.com/navikt/aksel/commit/d29509dc0ad0ef6bff38ad9a2a820d3bd1770aaa), [`fad913c`](https://github.com/navikt/aksel/commit/fad913ce6b27580a2f7b54984955324d1af08196), [`715a34a`](https://github.com/navikt/aksel/commit/715a34ac7d4aa46b5b7b5990e5e1cd528cfd7f6b)]:
+  - @navikt/ds-css@7.10.0
+
 ## 7.9.2
 
 ### Patch Changes

diff --git a/@navikt/aksel/package.json b/@navikt/aksel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.9.2",
+  "version": "7.10.0",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "^7.9.2",
+    "@navikt/ds-css": "^7.10.0",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

diff --git a/@navikt/core/css/CHANGELOG.md b/@navikt/core/css/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 7.10.0
+
+### Minor Changes
+
+- Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element. ([#3507](https://github.com/navikt/aksel/pull/3507))
+
+### Patch Changes
+
+- Button: Using `<Loader />` within `icon`-prop now supported. ([#3515](https://github.com/navikt/aksel/pull/3515))
+
+- Combobox: Always render `maxSelected` message when `isMultiSelect` is set. ([#3506](https://github.com/navikt/aksel/pull/3506))
+
 ## 7.9.2
 
 ### Patch Changes

diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css
@@ -497,7 +497,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css
@@ -100,7 +100,7 @@
   height: 22px;
   align-self: center;
   background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-accordion__header-chevron {

diff --git a/@navikt/core/css/darkside/action-menu.darkside.css b/@navikt/core/css/darkside/action-menu.darkside.css
@@ -107,7 +107,7 @@
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger);
   }
 }
 

diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css
@@ -17,26 +17,28 @@
   box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 .navds-button--small,
 .navds-button--xsmall {
   --__axc-button-icon-margin: -2px;
-  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--small {
   padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
+  gap: var(--ax-space-6);
 }
 
 .navds-button--xsmall {
   padding: var(--ax-space-2) var(--ax-space-8);
   gap: var(--ax-space-4);
+
+  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--icon-only {
@@ -159,7 +161,7 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-strong);
 
   background-color: transparent;
   color: var(--ax-text-default);
@@ -178,7 +180,7 @@
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-default);
+    --__axc-button-border-color: var(--ax-border-strong);
 
     color: var(--ax-text-default);
     background-color: transparent;
@@ -262,7 +264,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

diff --git a/@navikt/core/css/darkside/chat.darkside.css b/@navikt/core/css/darkside/chat.darkside.css
@@ -73,14 +73,14 @@
 .navds-chat--info {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-info-raised);
+    background-color: var(--ax-bg-info-moderate);
   }
 }
 
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-raised);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 

diff --git a/@navikt/core/css/darkside/chips.darkside.css b/@navikt/core/css/darkside/chips.darkside.css
@@ -72,7 +72,7 @@
 .navds-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-default);
+  color: var(--ax-text-accent-strong);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);

diff --git a/@navikt/core/css/darkside/copybutton.darkside.css b/@navikt/core/css/darkside/copybutton.darkside.css
@@ -67,12 +67,8 @@
     --__axc-copybutton-padding: var(--ax-space-4);
   }
 
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
   & > .navds-copybutton__content {
-    gap: var(--ax-space-6);
+    gap: var(--ax-space-4);
   }
 }
 
@@ -96,26 +92,14 @@
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-space-4);
+    gap: var(--ax-space-2);
   }
 }
 
 /* ----------------------------- CopyButton Icon ---------------------------- */
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
-
-  &:first-of-type {
-    margin-left: -0.25rem;
-  }
-
-  &:last-of-type {
-    margin-right: -0.25rem;
-  }
-
-  &:only-child {
-    margin: 0;
-  }
 }
 
 .navds-copybutton--active .navds-copybutton__icon {
@@ -146,14 +130,6 @@
 
   &.navds-copybutton--active {
     color: var(--ax-text-success);
-
-    &:hover {
-      color: var(--ax-text-success-strong);
-    }
-  }
-
-  &:hover {
-    color: var(--ax-text-accent-strong);
   }
 
   &:disabled {
@@ -165,11 +141,6 @@
 .navds-copybutton--neutral {
   color: var(--ax-text-subtle);
 
-  &:hover,
-  &.navds-copybutton--active {
-    color: var(--ax-text-default);
-  }
-
   &:disabled {
     color: var(--ax-text-subtle);
   }
@@ -179,5 +150,5 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-space-8);
+  gap: var(--ax-space-6);
 }
diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css
@@ -15,7 +15,7 @@
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
   & .navds-combobox__wrapper:hover {
-    border-color: var(--ax-border-focus);
+    border-color: var(--ax-border-accent-strong);
   }
 }
 
@@ -31,6 +31,10 @@
   opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
+    &:hover {
+      border-color: var(--ax-border-default);
+    }
+
     & *:hover {
       cursor: not-allowed;
     }
@@ -80,9 +84,9 @@
   border-radius: var(--ax-border-radius-medium);
 
   &:has(.navds-combobox__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-    border-color: var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
   }
 
   &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -113,15 +117,19 @@
   &:hover {
     cursor: text;
   }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-default);
+  }
 }
 
 .navds-combobox--error {
   & .navds-combobox__wrapper-inner {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
     &:has(.navds-combobox__input:focus-visible) {
-      border-color: var(--ax-border-danger);
+      border-color: var(--ax-border-danger-strong);
     }
   }
 }
@@ -230,7 +238,7 @@
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
-  max-height: 290px;
+  max-height: 316px;
   overflow: clip;
   position: absolute;
   left: 0;
@@ -268,7 +276,7 @@
   border-radius: var(--ax-border-radius-medium);
   border: 0;
   margin-inline: var(--ax-space-8);
-  margin-block: var(--ax-space-4);
+  margin-block: var(--ax-space-2);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -307,7 +315,6 @@
 .navds-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
 }
 
 .navds-combobox__list-item {
@@ -321,10 +328,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
   }
 
   & svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 }
 
@@ -344,14 +352,14 @@
   justify-content: flex-start;
   gap: 0.25rem;
   margin: 0;
-  margin-block: calc(var(--ax-space-4) * -1);
-  padding-block: var(--ax-space-16);
+  margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
     color: var(--ax-text-default);
   }
 
   &:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 }