tweaks again

digdir · Sep 20, 2023 · 171d36a · 171d36a
1 parent c1669bf
commit 171d36a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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