From 171d36a403e4784653e8de3c9457ffce388bd248 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 20 Sep 2023 12:57:57 +0200
Subject: [PATCH] tweaks again

---
 .../components/form/Textfield/Textfield.mdx   |  5 +++
 .../form/Textfield/Textfield.module.css       | 34 +++++++++----------
 .../form/Textfield/Textfield.stories.tsx      |  6 +---
 .../components/form/Textfield/Textfield.tsx   |  6 ++--
 4 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/components/form/Textfield/Textfield.mdx b/packages/react/src/components/form/Textfield/Textfield.mdx
index b4718e6517..be79a1b322 100644
--- a/packages/react/src/components/form/Textfield/Textfield.mdx
+++ b/packages/react/src/components/form/Textfield/Textfield.mdx
@@ -9,5 +9,10 @@ import * as TextfieldStories from './Textfield.stories';
 <Primary />
 <Controls />
 
+## Antall tegn
+
 <Canvas of={TextfieldStories.WithCharacterCounter} />
+
+## Kontrollert
+
 <Canvas of={TextfieldStories.Controlled} />
diff --git a/packages/react/src/components/form/Textfield/Textfield.module.css b/packages/react/src/components/form/Textfield/Textfield.module.css
index 00787d4344..075537dcf8 100644
--- a/packages/react/src/components/form/Textfield/Textfield.module.css
+++ b/packages/react/src/components/form/Textfield/Textfield.module.css
@@ -13,6 +13,18 @@
   display: inline-block;
 }
 
+.label {
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--fds-spacing-1);
+  align-items: center;
+}
+
+.description {
+  color: var(--fds-semantic-text-neutral-subtle);
+}
+
 .input {
   font: inherit;
   position: relative;
@@ -26,18 +38,6 @@
   border-radius: var(--fds-border_radius-medium);
 }
 
-.label {
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--fds-spacing-1);
-  align-items: center;
-}
-
-.description {
-  color: var(--fds-semantic-text-neutral-subtle);
-}
-
 .disabled {
   opacity: 0.3;
 }
@@ -63,16 +63,16 @@
   }
 }
 
-.inputSufix {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
 .inputPrefix {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+.inputSufix {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .prefix {
   border-right: 0;
   border-top-right-radius: 0;
diff --git a/packages/react/src/components/form/Textfield/Textfield.stories.tsx b/packages/react/src/components/form/Textfield/Textfield.stories.tsx
index 509164172e..67c241e2c0 100644
--- a/packages/react/src/components/form/Textfield/Textfield.stories.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.stories.tsx
@@ -17,6 +17,7 @@ export const Preview: Story = {
     label: 'Label',
     disabled: false,
     readOnly: false,
+    size: 'medium',
     description: '',
   },
 };
@@ -25,12 +26,7 @@ export const WithCharacterCounter: Story = {
   args: {
     label: 'Label',
     characterLimit: {
-      label: (count) =>
-        count > -1
-          ? `${count} character Left`
-          : `${Math.abs(count)} characters to many.`,
       maxCount: 5,
-      srLabel: `Field with room for ${5} characters.`,
     },
   },
 };
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
index ddc521fe7e..950da07464 100644
--- a/packages/react/src/components/form/Textfield/Textfield.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -104,13 +104,13 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
       >
         {label && (
           <Label
+            size={size}
+            weight='medium'
+            htmlFor={inputProps.id}
             className={cn(
               classes.label,
               hideLabel && utilityClasses.visuallyHidden,
             )}
-            htmlFor={inputProps.id}
-            size={size}
-            weight='medium'
           >
             {readOnly && (
               <PadlockLockedFillIcon