feat(Forms): add `layoutOptions` for enhanced horizontal label layout #4208

tujoworker · 2024-11-04T08:56:43Z

This PR introduces a new property, layoutOptions, allowing for adjustment of the width in horizontally aligned layouts.
Since its primary use case is for input fields, we are also updating the docs examples for the String and Number fields accordingly.

Quick example:

<Field.Provider
  layout="horizontal"
  layoutOptions={{
    width: 'medium', // can be a rem value
  }}
>
  <Field.String label="Label text" />
  <Field.Number label="Label with a long text that will wrap" />
  <Field.Currency label="Currency field />
</Field.Provider>

vercel · 2024-11-04T08:56:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 10:57am

codesandbox-ci · 2024-11-04T09:03:46Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

langz · 2024-11-04T14:55:11Z

Should we also document the props layout, layoutOptionsandlabelHeight` here?
https://eufemia-git-feat-label-horizontal-layout-eufemia.vercel.app/uilib/extensions/forms/feature-fields/Provider/properties/

langz · 2024-11-04T14:47:38Z

packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss

@@ -16,4 +16,4 @@ $THEME_FALLBACK: 'ui';

 @import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss';
 @import '../../../extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.scss';
-@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss';


Nice find 👏

Did this error cause some kind of styling issue as of today? 🤔

Yes, indeed.

labelDescription did change its color. But we did not have any visual tests on this one, so I added two now.

langz · 2024-11-04T14:48:46Z

...ld/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-small-screen.snap.png

I guess it makes sense that the height has decreased in this screenshot as part of this PR?

langz · 2024-11-04T14:56:49Z

packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts

@@ -21,6 +21,16 @@ export const fieldBlockSharedProperties: PropertiesTableProps = {
    type: 'string',
    status: 'optional',
  },
+  layoutOptions: {


Suggested change

layoutOptions: {

horizontalLayoutOptions: {

Based on the description of the layoutOptions prop, it seems like its only use is to set additional options for the horizontal layout. Perhaps the prop name should reflect so as well? 🤔

I had the same thought a while. But I don't think we need to do so. Because its an object. So its extendible. And we can add new properties to it.

tujoworker

Nice findings. Thank you so much. I added some more tests.

tujoworker · 2024-11-05T09:09:06Z

...ld/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-small-screen.snap.png

tujoworker · 2024-11-05T10:17:11Z

packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss

@@ -16,4 +16,4 @@ $THEME_FALLBACK: 'ui';

 @import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss';
 @import '../../../extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.scss';
-@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss';
+@import '../../../extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss';


Yes, indeed.

labelDescription did change its color. But we did not have any visual tests on this one, so I added two now.

## [10.55.0](v10.54.1...v10.55.0) (2024-11-08) ### ⚡ Refactoring * center cards on ultra-wide monitors and fix capitalization typo ([#4214](#4214)) ([0ec1388](0ec1388)) ### 📝 Documentation * **CountryFlag:** `iso` defaults to `NO` ([#4234](#4234)) ([cab3c32](cab3c32)) * display all Value components in the Value menu ([#4231](#4231)) ([d260a9c](d260a9c)) ### 🐛 Bug Fixes * ensure components having `fieldset` inside still can use spacing ([#4236](#4236)) ([d4e4334](d4e4334)) * **Forms:** add Iterate support for Field.PostalCodeAndCity when using `country` with a path ([#4215](#4215)) ([6f80ed9](6f80ed9)), closes [#4200](#4200) * **Forms:** ensure `Field.Number` with `percent` and without a value renders correctly ([#4230](#4230)) ([96fa2a5](96fa2a5)), closes [#4228](#4228) * **Forms:** fix vertical gap between Field.ArraySelection toggle buttons with checkbox variant ([#4217](#4217)) ([83f0b37](83f0b37)) * **Forms:** remove extra space from Value.* components with `inline` property ([#4246](#4246)) ([8b96fd1](8b96fd1)) * **Forms:** should display error underneath fields when nested inside Field.Selection or Field.ArraySelection ([#4225](#4225)) ([c0f1a02](c0f1a02)) * remove legacy `fieldset` reset ([#4237](#4237)) ([a2f368b](a2f368b)) * **Upload:** alignment when displaying single DL item ([#4210](#4210)) ([5f745f5](5f745f5)) * **Upload:** fix `UploadFile` type to include `id` as required ([#4218](#4218)) ([b24fdfd](b24fdfd)) ### ✨ Features * **Card:** add style for nested cards ([#4244](#4244)) ([f45aa4a](f45aa4a)) * **Card:** remove `beta` badge ([#4211](#4211)) ([67a4fbd](67a4fbd)) * **ChildrenWithAge:** add maximum possible value to joint-responsibility & daycare ([#4219](#4219)) ([9b9c517](9b9c517)) * **CountryFlag:** add iso to properties table ([#4232](#4232)) ([9dc57cb](9dc57cb)) * **DatePicker:** Convert to functional components with typescript and hooks ([#2799](#2799)) ([45687ea](45687ea)) * **Forms:** add `layoutOptions` for enhanced horizontal label layout ([#4208](#4208)) ([8d84d97](8d84d97)) * **Forms:** add `transformLabel` to Value.Composition ([#4207](#4207)) ([c966bc1](c966bc1)) * **Forms:** add `Value.Upload` component ([#4233](#4233)) ([3adddac](3adddac)) * **Forms:** add EditButton, CancelButton and DoneButton to Form.Section containers ([#4223](#4223)) ([092abcd](092abcd)) * **ListFormat:** add `ListFormat` component ([#4238](#4238)) ([63613f1](63613f1)) * **Upload:** add `download` prop to enable file downloads instead of opening in a new tab ([#4213](#4213)) ([3e92934](3e92934))

tujoworker · 2024-11-08T15:52:53Z

🎉 This PR is included in version 10.55.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

vercel bot deployed to Preview November 4, 2024 09:10 View deployment

tujoworker requested a review from langz November 4, 2024 11:35

tujoworker force-pushed the feat/label-horizontal-layout branch from 6877ae5 to 74b7485 Compare November 4, 2024 12:30

vercel bot deployed to Preview November 4, 2024 12:39 View deployment

langz approved these changes Nov 4, 2024

View reviewed changes

tujoworker commented Nov 5, 2024

View reviewed changes

tujoworker force-pushed the feat/label-horizontal-layout branch from 74b7485 to a0e6a34 Compare November 5, 2024 10:18

vercel bot deployed to Preview November 5, 2024 10:41 View deployment

feat(Forms): add layoutOptions for enhanced horizontal label layout

b44573b

tujoworker force-pushed the feat/label-horizontal-layout branch from a0e6a34 to b44573b Compare November 5, 2024 10:44

vercel bot deployed to Preview November 5, 2024 10:57 View deployment

tujoworker merged commit 8d84d97 into main Nov 5, 2024
10 checks passed

tujoworker deleted the feat/label-horizontal-layout branch November 5, 2024 11:21

tujoworker added the released label Nov 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Forms): add `layoutOptions` for enhanced horizontal label layout #4208

feat(Forms): add `layoutOptions` for enhanced horizontal label layout #4208

tujoworker commented Nov 4, 2024 •

edited

Loading

vercel bot commented Nov 4, 2024 •

edited

Loading

codesandbox-ci bot commented Nov 4, 2024 •

edited

Loading

langz commented Nov 4, 2024 •

edited

Loading

langz Nov 4, 2024 •

edited

Loading

tujoworker Nov 5, 2024

langz Nov 4, 2024

tujoworker Nov 5, 2024

langz Nov 4, 2024

tujoworker Nov 5, 2024

tujoworker left a comment

tujoworker Nov 5, 2024

tujoworker Nov 5, 2024

tujoworker commented Nov 8, 2024

feat(Forms): add layoutOptions for enhanced horizontal label layout #4208

feat(Forms): add layoutOptions for enhanced horizontal label layout #4208

Conversation

tujoworker commented Nov 4, 2024 • edited Loading

vercel bot commented Nov 4, 2024 • edited Loading

codesandbox-ci bot commented Nov 4, 2024 • edited Loading

langz commented Nov 4, 2024 • edited Loading

langz Nov 4, 2024 • edited Loading

Choose a reason for hiding this comment

tujoworker Nov 5, 2024

Choose a reason for hiding this comment

langz Nov 4, 2024

Choose a reason for hiding this comment

tujoworker Nov 5, 2024

Choose a reason for hiding this comment

langz Nov 4, 2024

Choose a reason for hiding this comment

tujoworker Nov 5, 2024

Choose a reason for hiding this comment

tujoworker left a comment

Choose a reason for hiding this comment

tujoworker Nov 5, 2024

Choose a reason for hiding this comment

tujoworker Nov 5, 2024

Choose a reason for hiding this comment

tujoworker commented Nov 8, 2024

feat(Forms): add `layoutOptions` for enhanced horizontal label layout #4208

feat(Forms): add `layoutOptions` for enhanced horizontal label layout #4208

tujoworker commented Nov 4, 2024 •

edited

Loading

vercel bot commented Nov 4, 2024 •

edited

Loading

codesandbox-ci bot commented Nov 4, 2024 •

edited

Loading

langz commented Nov 4, 2024 •

edited

Loading

langz Nov 4, 2024 •

edited

Loading