Ny spacing token på 0.375rem (#2370)

.changeset/silent-impalas-laugh.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-tokens": patch
+"@navikt/ds-css": patch
+---
+
+Ny spacing token på 0.375rem

@navikt/core/css/chips.css

@@ -160,11 +160,11 @@
 }
 
 .navds-chips--icon-left {
-  padding-left: 0.375rem;
+  padding-left: var(--a-spacing-1-alt);
 }
 
 .navds-chips--icon-right {
-  padding-right: 0.375rem;
+  padding-right: var(--a-spacing-1-alt);
 }
 
 .navds-chips--small .navds-chips--icon-right {

@navikt/core/css/copybutton.css

@@ -175,7 +175,7 @@
 }
 
 .navds-copybutton--small > .navds-copybutton__content {
-  gap: 0.375rem;
+  gap: var(--a-spacing-1-alt);
 }
 
 .navds-copybutton--xsmall > .navds-copybutton__content {

@navikt/core/css/form/radio-checkbox.css

@@ -59,7 +59,7 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: 0.375rem 0;
+  padding: var(--a-spacing-1-alt) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -101,7 +101,7 @@
   content: "";
   position: absolute;
   top: 50%;
-  transform: translate(0.375rem, -50%);
+  transform: translate(var(--a-spacing-1-alt), -50%);
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
@@ -126,7 +126,7 @@
   color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   position: absolute;
   height: 1.5rem;
-  transform: translate(0.375rem);
+  transform: translate(var(--a-spacing-1-alt));
   pointer-events: none;
 }
 

@navikt/core/css/form/select.css

@@ -51,7 +51,7 @@
 }
 
 .navds-form-field--small .navds-select__chevron {
-  right: 0.375rem;
+  right: var(--a-spacing-1-alt);
 }
 
 /**

@navikt/core/css/form/textarea.css

@@ -62,7 +62,7 @@
 }
 
 .navds-form-field--small .navds-textarea__input {
-  padding: 0.375rem;
+  padding: var(--a-spacing-1-alt);
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {

@navikt/core/css/pagination.css

@@ -52,8 +52,7 @@
 }
 
 .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
+  padding-inline: var(--a-spacing-1-alt);
 }
 
 .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {

@navikt/core/css/tabs.css

@@ -37,7 +37,7 @@
 }
 
 .navds-tabs--small .navds-tabs__scroll-button {
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
   width: 2rem;
 }
 
@@ -93,7 +93,7 @@
 
 .navds-tabs__tab--small {
   min-height: 2rem;
-  padding: 0.375rem var(--a-spacing-4);
+  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
 }
 
 .navds-tabs__tab-icon--top,

@navikt/core/css/tag.css

@@ -11,7 +11,7 @@
 
 .navds-tag--small {
   min-height: 1.5rem;
-  padding: 0 0.375rem;
+  padding: 0 var(--a-spacing-1-alt);
 }
 
 .navds-tag--xsmall {

@navikt/core/react/src/chips/chips.stories.tsx

@@ -1,24 +1,12 @@
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Chips } from ".";
 
-export default {
+const meta: Meta<typeof Chips> = {
   title: "ds-react/Chips",
   component: Chips,
-  argTypes: {
-    type: {
-      control: {
-        type: "radio",
-        options: ["toggle", "removable"],
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };
+export default meta;
 
 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
 
@@ -61,6 +49,16 @@ export const Default = (props) => {
     </Chips>
   );
 };
+Default.argTypes = {
+  type: {
+    control: { type: "radio" },
+    options: ["toggle", "removable"],
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};
 
 export const Toggle = () => {
   const [selected, setSelected] = useState<number[]>([2, 4]);

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -1,52 +1,36 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
-export default {
+
+const meta: Meta<typeof Textarea> = {
   title: "ds-react/Textarea",
   component: Textarea,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-    maxRows: {
-      type: "number",
-    },
-    minRows: {
-      type: "number",
-    },
-  },
-} as Meta;
+};
+export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof Textarea> = {
   render: (props) => {
-    return (
-      <Textarea
-        {...props}
-        maxLength={props?.maxLength ?? 100}
-        label="Ipsum enim quis culpa"
-      />
-    );
+    return <Textarea {...props} />;
   },
 
   args: {
     maxLength: 100,
+    label: "Ipsum enim quis culpa",
     resize: false,
   },
+
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["medium", "small"],
+    },
+    description: { type: "string" },
+    error: { type: "string" },
+    hideLabel: { type: "boolean" },
+    disabled: { type: "boolean" },
+    maxRows: { type: "number" },
+    minRows: { type: "number" },
+  },
 };
 
 export const Small = () => {

@navikt/core/react/src/layout/utilities/css.ts

@@ -4,6 +4,7 @@ export type SpacingScale =
   | "0"
   | "05"
   | "1"
+  | "1-alt"
   | "2"
   | "3"
   | "4"

@navikt/core/tokens/docs.json

@@ -508,6 +508,7 @@
     { "name": "--a-spacing-0", "value": "0" },
     { "name": "--a-spacing-05", "value": "0.125rem" },
     { "name": "--a-spacing-1", "value": "0.25rem" },
+    { "name": "--a-spacing-1-alt", "value": "0.375rem" },
     { "name": "--a-spacing-2", "value": "0.5rem" },
     { "name": "--a-spacing-3", "value": "0.75rem" },
     { "name": "--a-spacing-4", "value": "1rem" },

@navikt/core/tokens/src/spacing.json

@@ -10,6 +10,9 @@
       "1": {
         "value": "0.25rem"
       },
+      "1-alt": {
+        "value": "0.375rem"
+      },
       "2": {
         "value": "0.5rem"
       },

@navikt/core/tokens/stories/spacing.stories.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import { Tooltip } from "@navikt/ds-react";
 import { Meta } from "@storybook/react";
+import React from "react";
 import * as tokens from "../dist/tokens.js";
-import { Tooltip } from "@navikt/ds-react";
 
 export default {
   title: "ds-tokens/Spacing",
@@ -14,24 +14,15 @@ export const Spacing = () => {
     {}
   );
 
-  const sortObject = Object.fromEntries(
-    Object.entries(allSpacing).sort((a, b) => {
-      if (a[0].endsWith("05"))
-        return 0.5 - Number(b[0].replace("ASpacing", ""));
-      if (b[0].endsWith("05"))
-        return Number(a[0].replace("ASpacing", "")) - 0.5;
-      return (
-        Number(a[0].replace("ASpacing", "")) -
-        Number(b[0].replace("ASpacing", ""))
-      );
-    })
+  const sorted = Object.entries(allSpacing).sort(
+    (a, b) => Number(a[1].replace("rem", "")) - Number(b[1].replace("rem", ""))
   );
 
   const fontSize = 16;
 
   return (
     <div className="colgap">
-      {Object.entries(sortObject).map(([key, val]) => (
+      {sorted.map(([key, val]) => (
         <div
           key={key}
           style={{