fix(FieldBlock): remove max-width for label when width stretch (#4406)

Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Dec 13, 2024 · 20c02d4 · 20c02d4
1 parent 85ad8a4
commit 20c02d4
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 2 deletions.
diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
@@ -85,7 +85,7 @@ export const Widths = () => {
           <TestElement>Contents</TestElement>
         </FieldBlock>
         <FieldBlock
-          label="Stretch (affects outer block element)"
+          label="Stretch (affects outer block element). This label is long to validate that label also stretches full width."
           width="stretch"
         >
           <TestElement>Contents</TestElement>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts
@@ -53,7 +53,7 @@ export const stringProperties: PropertiesTableProps = {
     status: 'optional',
   },
   width: {
-    doc: '`false` for no width (use browser default), small, medium or large for predefined standard widths, stretch for fill available width.',
+    doc: '`false` for no width (use browser default), small, medium or large for predefined standard widths, stretch to fill available width.',
     type: ['string', 'false'],
     status: 'optional',
   },

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/stories/String.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/stories/String.stories.tsx
@@ -5,6 +5,31 @@ import { Flex } from '../../../../../components'
 export default {
   title: 'Eufemia/Extensions/Forms/String',
 }
+export const StringAndLabelStretch = () => {
+  return (
+    <Form.Card>
+      <Form.SubHeading>Subheading</Form.SubHeading>
+      <Field.String
+        help={{ title: 'Help title', content: 'Help content' }}
+        path="/moreInfo"
+        label="Her kan du gi oss andre opplysninger som du tror kan være relevante for søknaden. Ønsker du for eksempel fastrente eller rammelån, kan du skrive det her."
+        multiline
+        autoresize
+        maxLength={250}
+        characterCounter={{
+          max: 250,
+          variant: 'down',
+        }}
+      />
+      <Field.Number
+        label="Her kan du gi oss andre opplysninger som du tror kan være relevante for søknaden. Ønsker du for eksempel fastrente eller rammelån, kan du skrive det her."
+        placeholder="Enter a number..."
+        size="large"
+        width="stretch"
+      />
+    </Form.Card>
+  )
+}
 
 export const String = () => {
   return (

diff --git a/...ests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png b/...ests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png
diff --git a/...k/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png b/...k/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss
@@ -45,6 +45,9 @@ fieldset.dnb-forms-field-block {
   &--width {
     &-stretch {
       flex-grow: 1;
+      label.dnb-form-label {
+        max-width: none;
+      }
     }
     @include allAbove(x-small) {
       &-custom {