Lerna versionbump [ci skip]

- @navikt/ds-react@0.11.7 - @navikt/ds-react-internal@0.6.7
[fix] input className only on field container (#1307 )
2026-10-13 17:22:02 +00:00 · 2021-10-26 09:08:48 +00:00 · 2021-10-26 10:54:34 +02:00 · 2021-10-25 15:54:41 +00:00 · 2021-10-25 17:36:52 +02:00 · 2021-10-25 17:36:41 +02:00
9 changed files with 49 additions and 40 deletions
@@ -20,3 +20,16 @@ import "@navikt/ds-css"
 Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/

 Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
+
+## Bruke styled-components eller emotion
+
+Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
+Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
+
+Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
+
+### Løsninger
+
+[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
+
+> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.5.6",
+  "version": "0.5.7",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -27,7 +27,7 @@
  "scripts": {
    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.mjs dotenv_config_path=figma-api/.env",
-    "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#262626=currentColor\" -d src svg",
+    "create-icons": "svgr --silent --typescript --ref --icon --title-prop --svg-props focusable={false} --replace-attr-values \"#262626=currentColor\" -d src svg",
    "convert-icons": "node figma-api/pngConverter.mjs",
    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
    "zip-icons": "node figma-api/zipIcons.mjs",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.11.4",
+  "version": "0.11.7",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.5.6",
+    "@navikt/ds-icons": "^0.5.7",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -81,7 +81,6 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
        focusable="false"
        role="img"
        variant={variant}
-        alt={`${variant}-ikon`}
        className="navds-alert__icon"
      />
      <BodyLong as="div" size={size} className="navds-alert__wrapper">
@@ -49,7 +49,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
  return (
    <div
      className={cl(
-        props.className,
+        className,
        "navds-form-field",
        `navds-form-field--${size}`,
        { "navds-select--error": hasError }
@@ -82,7 +82,6 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
          {...inputProps}
          ref={ref}
          className={cl(
-            className,
            "navds-select__input",
            "navds-body-short",
            `navds-body--${size ?? "medium"}`
@@ -49,7 +49,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
  return (
    <div
      className={cl(
-        props.className,
+        className,
        "navds-form-field",
        `navds-form-field--${size}`,
        { "navds-text-field--error": hasError }
@@ -81,7 +81,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
        ref={ref}
        type={type}
        className={cl(
-          className,
          "navds-text-field__input",
          "navds-body-short",
          `navds-body-${size ?? "medium"}`
@@ -63,7 +63,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
    return (
      <div
        className={cl(
-          props.className,
+          className,
          "navds-form-field",
          `navds-form-field--${size}`,
          { "navds-textarea--error": hasError }
@@ -96,7 +96,6 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
            {...inputProps}
            ref={ref}
            className={cl(
-              className,
              "navds-textarea__input",
              "navds-body-short",
              `navds-body-${size ?? "medium"}`,
@@ -10,32 +10,32 @@ export const DefaultIllustration = () => (
    aria-label="NAV veileder illustrasjon"
  >
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M32.8313 30.4421C31.7718 33.868 29.6975 36.7117 27.0391 38.452L27.1752 39.9777L27.1745 40.0397L25.7375 52.6154H16.6236L16.5857 52.3512L14.8238 40.0181L14.8891 38.4756C12.2173 36.7398 10.1312 33.8914 9.06565 30.4564C9.02952 30.4598 8.99291 30.4616 8.95588 30.4616C8.26662 30.4616 7.72058 29.8614 7.72058 29.1343V25.0202C7.72058 24.5328 7.96592 24.1022 8.33526 23.8712C8.9115 16.1905 14.3251 10.1539 20.946 10.1539C27.5491 10.1539 32.9517 16.1579 33.5525 23.8089C33.9838 24.0179 34.2794 24.4845 34.2794 25.0202V29.1343C34.2794 29.8618 33.7341 30.4616 33.0441 30.4616C32.9714 30.4616 32.9003 30.4549 32.8313 30.4421Z"
      fill="#F1F1F1"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M26.7182 38.8777C26.6663 41.624 24.1261 44.4415 21 44.4415C17.8604 44.4415 15.3116 41.5994 15.2813 38.8419C13.6546 39.2527 11.1714 40.4917 9.12177 42.5623C7.13699 44.5674 5.55884 47.5814 5.55884 49.9194V64H36.4412V49.9194C36.4412 47.5766 34.829 44.5575 32.8075 42.5501C30.7861 40.5427 28.3553 39.3204 26.7182 38.8777Z"
      fill="#0056B4"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M15.1786 38.9372C13.6802 39.4793 11.1664 40.6641 9.2647 42.4632C3.70588 41.2308 1.23529 38.3022 1.23529 38.3022C1.23529 38.3022 6.35673 33.325 6.35982 24.6197V24.6105C6.35982 14.4173 11.8831 7.38464 20.9827 7.38464C30.0836 7.38464 35.6068 14.4173 35.6068 24.6105H35.6396C35.6396 33.3219 40.7647 38.3022 40.7647 38.3022C40.7647 38.3022 38.2941 41.2308 32.7353 42.4616L32.7269 42.4632C30.8901 40.7984 28.2262 39.5144 26.7769 38.9715L26.7785 38.971L26.7209 38.3257L26.7521 38.2722C29.4867 36.5294 31.6086 33.5933 32.6316 30.0454C32.7569 30.1148 32.8983 30.1539 33.048 30.1539C33.5601 30.1539 33.9746 29.6984 33.9746 29.1343V25.0202C33.9746 24.5375 33.6712 24.134 33.2628 24.0275C33.2624 24.0219 33.262 24.0164 33.2616 24.0108C20.3323 25.4483 15.6749 16.616 15.2926 16.6154C15.2926 16.6154 10.9987 19.6923 8.94657 23.3506C8.94657 23.3506 8.6338 24.0412 8.63228 24.0644C8.28095 24.2092 8.03035 24.5821 8.03035 25.0202V29.1343C8.03035 29.6984 8.44586 30.1539 8.95693 30.1539C9.07019 30.1539 9.17868 30.1316 9.27895 30.0908C10.3132 33.6404 12.4486 36.5733 15.1961 38.3046L15.2063 38.3257L15.1804 38.9372H15.1786Z"
      fill="#D05C4A"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M16.584 26.9976C15.7859 27.062 15.5625 25.8029 15.803 24.9807C15.8482 24.8249 16.1124 24.1154 16.5802 24.1154C17.0473 24.1154 17.2536 24.5032 17.2823 24.5699C17.6259 25.3715 17.4571 26.9268 16.584 26.9976"
      fill="#262626"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M25.8405 26.9976C26.6386 27.062 26.862 25.8029 26.6215 24.9807C26.5763 24.8249 26.3121 24.1154 25.8444 24.1154C25.3772 24.1154 25.171 24.5032 25.1423 24.5699C24.7987 25.3715 24.9674 26.9268 25.8405 26.9976"
      fill="#262626"
    />
@@ -48,50 +48,50 @@ export const DefaultIllustration = () => (
      fill="#262626"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M32.1651 58H21.8343C21.3733 58 21 57.621 21 57.153V51.5143C21 51.0462 21.3733 50.6667 21.8343 50.6667H32.1651C32.6261 50.6667 33 51.0462 33 51.5143V57.153C33 57.621 32.6261 58 32.1651 58"
      fill="white"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M27.6207 51.8307H26.5502C26.4709 51.8307 26.407 51.7671 26.407 51.6882V51.5086C26.407 51.4303 26.4709 51.3661 26.5502 51.3661H27.6207C27.7 51.3661 27.764 51.4303 27.764 51.5086V51.6882C27.764 51.7671 27.7 51.8307 27.6207 51.8307"
      fill="#262626"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M26.7756 51.6667H27.3958V50H26.7756V51.6667Z"
      fill="#6A6A6A"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M27.1269 56.6651C25.839 56.6651 24.7947 55.6208 24.7947 54.3327C24.7947 53.0444 25.839 52 27.1269 52C28.4153 52 29.4597 53.0444 29.4597 54.3327C29.4597 55.6208 28.4153 56.6651 27.1269 56.6651Z"
      fill="#C30000"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M23.6667 55.3511L24.1434 54.1712H24.6015L24.1254 55.3511H23.6667Z"
      fill="#C30000"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M29.5496 55.3511L30.0202 54.1712H30.2699L29.7993 55.3511H29.5496Z"
      fill="#C30000"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M30.4752 55.3511L30.9457 54.1712H31.0783L30.6077 55.3511H30.4752Z"
      fill="#C30000"
    />
    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
      d="M29.1165 54.1712H28.7019C28.7019 54.1712 28.6733 54.1712 28.6632 54.1964L28.4337 54.8989L28.2044 54.1964C28.1943 54.1712 28.1656 54.1712 28.1656 54.1712H27.3683C27.3511 54.1712 27.3366 54.1856 27.3366 54.2028V54.4413C27.3366 54.2521 27.1352 54.1712 27.0173 54.1712C26.7533 54.1712 26.5765 54.3451 26.5215 54.6095C26.5185 54.4341 26.5039 54.3713 26.4567 54.3069C26.435 54.2754 26.4036 54.2489 26.3695 54.2269C26.2991 54.1857 26.236 54.1712 26.1003 54.1712H25.9409C25.9409 54.1712 25.9121 54.1712 25.9019 54.1964L25.7569 54.5558V54.2028C25.7569 54.1856 25.7426 54.1712 25.7253 54.1712H25.3566C25.3566 54.1712 25.3281 54.1712 25.3178 54.1964L25.167 54.5701C25.167 54.5701 25.152 54.6074 25.1864 54.6074H25.3281V55.3194C25.3281 55.3371 25.342 55.3511 25.3598 55.3511H25.7253C25.7426 55.3511 25.7569 55.3371 25.7569 55.3194V54.6074H25.8994C25.9812 54.6074 25.9985 54.6097 26.0303 54.6245C26.0495 54.6317 26.0667 54.6464 26.0762 54.6632C26.0954 54.6995 26.1003 54.7431 26.1003 54.8716V55.3194C26.1003 55.3371 26.1145 55.3511 26.132 55.3511H26.4823C26.4823 55.3511 26.5219 55.3511 26.5376 55.312L26.6152 55.1201C26.7185 55.2647 26.8884 55.3511 27.0996 55.3511H27.1458C27.1458 55.3511 27.1856 55.3511 27.2014 55.312L27.3366 54.9771V55.3194C27.3366 55.3371 27.3511 55.3511 27.3683 55.3511H27.726C27.726 55.3511 27.7654 55.3511 27.7813 55.312C27.7813 55.312 27.9243 54.9569 27.9249 54.9542H27.9251C27.9306 54.9246 27.8933 54.9246 27.8933 54.9246H27.7656V54.3153L28.1672 55.312C28.1829 55.3511 28.2225 55.3511 28.2225 55.3511H28.645C28.645 55.3511 28.6847 55.3511 28.7004 55.312L29.1457 54.2094C29.1611 54.1712 29.1165 54.1712 29.1165 54.1712V54.1712ZM27.3366 54.9246H27.0964C27.0007 54.9246 26.9229 54.8472 26.9229 54.7515C26.9229 54.6559 27.0007 54.578 27.0964 54.578H27.1635C27.2589 54.578 27.3366 54.6559 27.3366 54.7515V54.9246Z"
      fill="white"
    />
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.6.4",
+  "version": "0.6.7",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -33,8 +33,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.5.6",
-    "@navikt/ds-react": "^0.11.4",
+    "@navikt/ds-icons": "^0.5.7",
+    "@navikt/ds-react": "^0.11.7",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
Author	SHA1	Message	Date
github-actions[bot]	f19ea3d0fe	Lerna versionbump [ci skip] - @navikt/ds-react@0.11.7 - @navikt/ds-react-internal@0.6.7	2021-10-26 09:08:48 +00:00
Andreas Nordahl	260ee43f09	[fix] input className only on field container (#1307 )	2021-10-26 10:54:34 +02:00
github-actions[bot]	a1bdcd4df5	Lerna versionbump [ci skip] - @navikt/ds-icons@0.5.7 - @navikt/ds-react@0.11.6 - @navikt/ds-react-internal@0.6.6	2021-10-25 15:54:41 +00:00
Ken	5669efc0dd	[FIX] Gjør ikoner default focusable={false} (#1304 )	2021-10-25 17:36:52 +02:00
Karl O	00a02fa8ae	[FIX] bruk camelCase isteden for kebab-case i react svg (#1306 )	2021-10-25 17:36:41 +02:00
github-actions[bot]	93f1d199cd	Lerna versionbump [ci skip] - @navikt/ds-react@0.11.5 - @navikt/ds-react-internal@0.6.5	2021-10-25 08:07:17 +00:00
Ken	a69db74d79	[FIX] Fjernet alt-tag fra alert-ikon, trenger bare aria-label (#1302 )	2021-10-25 09:49:56 +02:00
Ken	717b70a011	Litt dokumentasjon om forwardedAs (#1303 )	2021-10-25 09:49:49 +02:00