feat(forms): include styles by default (#2918)

This PR includes the forms extension styles in the components package.
This means, that theses styles do not need to be imported separately.

These styles are very small in size (6 KB), and will not grow
substantially either.

It also allows automated generation of theme files, when needed.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx

@@ -28,15 +28,13 @@ import FormDiagram2 from 'Docs/uilib/extensions/forms/form-diagram-2.png'
 Field components can be used directly as they are, for example `Field.Email`:
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
 import { Field } from '@dnb/eufemia/extensions/forms'
 render(<Field.Email />)
 ```
 
 By building an entire form with components from Eufemia and Eufemia Forms, you save time and code:
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
 import { Card } from '@dnb/eufemia'
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
@@ -130,12 +128,23 @@ In this example, all state data, validation process and error handling are done
 
 ## Getting started
 
-You need to import the styles once:
+You import the components from with scopes, such as `Form` and `Field`:
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler onSubmit={console.log}>
+    <Field.String label="Custom Field" />
+    <Form.ButtonRow>
+      <Form.SubmitButton />
+    </Form.ButtonRow>
+  </Form.Handler>,
+)
 ```
 
+The needed styles are included in the Eufemia core package via `dnb-ui-components`.
+
 ### Field components
 
 The data-driven [base field components](/uilib/extensions/forms/base-fields) are named and structured according to the type of data they can display and produce based on the user's input and action in the interface.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/info.mdx

@@ -10,7 +10,6 @@ The `Form.Handler` component provides both the [Form.Element](/uilib/extensions/
 - It calls `preventDefault` by default.
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
 import { Form } from '@dnb/eufemia/extensions/forms'
 render(
   <Form.Handler

packages/dnb-eufemia/scripts/prebuild/tasks/styleFactory.ts

@@ -44,6 +44,7 @@ async function runStyleFactory() {
     customContent: `
       @import './core/utilities.scss';
       @import './${fallbackPrefix}-ui-fragments.scss';
+      @import './${fallbackPrefix}-ui-forms.scss';
     `,
     importContent: ({ relativeSource }) => `@import '${relativeSource}';`,
     searchGlob: [
@@ -123,6 +124,28 @@ async function runStyleFactory() {
       log.info('> Created the style file with all the extensions')
     }
   })
+
+  // forms
+  await runFactory({
+    outputFile: path.resolve(
+      __dirname,
+      `../../../src/style/${fallbackPrefix}-ui-forms.scss`
+    ),
+    customContent: `@import './core/utilities.scss';`,
+    importContent: ({ relativeSource }) => `@import '${relativeSource}';`,
+    searchGlob: [
+      path.resolve(
+        __dirname,
+        `../../../src/extensions/forms/**/style/${fallbackPrefix}-*.scss`
+      ),
+    ].concat(['!**/style/dnb-forms.*']),
+  }).then(() => {
+    if (isCLI) {
+      log.succeed(
+        '> PrePublish: "styleFactory" Created the style file with all the forms styles'
+      )
+    }
+  })
 }
 
 const runFactory = async ({

packages/dnb-eufemia/scripts/prebuild/tasks/themeFactory.ts

@@ -79,6 +79,7 @@ async function runThemeFactory() {
       ),
       ...processToNamesIgnoreList,
     ],
+    customContent: ({ name }) => `@import './${name}-theme-forms.scss';`,
     // output
     targetFile: 'components', // ui-theme-components.scss
     scssOutputPath: path.resolve(__dirname, '../../../src/style/themes'),
@@ -131,6 +132,27 @@ async function runThemeFactory() {
       )
     }
   })
+
+  // forms
+  await runFactory({
+    // input
+    filesToFindGlob: [
+      path.resolve(
+        __dirname,
+        '../../../src/extensions/forms/**/style/themes/**/*-theme-*.scss'
+      ),
+      ...processToNamesIgnoreList,
+    ].concat(['!**/forms/style/themes/*']),
+    // output
+    targetFile: 'forms', // ui-theme-forms.scss
+    scssOutputPath: path.resolve(__dirname, '../../../src/style/themes'),
+  }).then(() => {
+    if (isCLI) {
+      log.succeed(
+        '> PrePublish: "themeFactory" Created the themes files with all the components, elements, fragments and extensions'
+      )
+    }
+  })
 }
 
 export async function runFactory({

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss

@@ -1,5 +1,3 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-array-selection {
   &--options-layout-vertical &__options {
     display: flex;

packages/dnb-eufemia/src/extensions/forms/Field/Expiry/style/dnb-expiry.scss

@@ -1,5 +1,3 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-expiry {
   .dnb-multi-input-mask {
     width: var(--forms-field-width--small);

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss

@@ -1,11 +1,9 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-phone-number {
   &__country-code {
-    width: 9rem;
+    width: calc(var(--forms-field-width--medium) - 2rem);
 
     .dnb-autocomplete__shell {
-      width: 9rem;
+      width: calc(var(--forms-field-width--medium) - 2rem);
     }
   }
 

packages/dnb-eufemia/src/extensions/forms/Field/Selection/style/dnb-selection.scss

@@ -1,5 +1,3 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-selection {
   &--width {
     &-large {

packages/dnb-eufemia/src/extensions/forms/style/dnb-forms.scss

@@ -1,6 +1 @@
-@import '../Form/style/dnb-forms-form.scss';
-@import '../Field/style/dnb-forms-field.scss';
-@import '../StepsLayout/style/index.scss';
-@import '../utils/TestElement/style/dnb-test-element.scss';
-@import '../FieldBlock/style/dnb-field-block.scss';
-@import '../ValueBlock/style/dnb-value-block.scss';
+@import '../../../style/dnb-ui-forms.scss';

packages/dnb-eufemia/src/extensions/style/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import '../../style/themes/theme-ui/ui-theme-extensions.scss'
+
+import { warn } from '../../shared/helpers'
+
+// @deprecated - this warning should be remove when forms is out of beta
+warn(
+  "This import statement is not needed and can be removed: import '@dnb/eufemia/extensions/forms/style'"
+)

packages/dnb-eufemia/src/style/dnb-ui-components.scss

@@ -6,6 +6,7 @@
 
 @import './core/utilities.scss';
 @import './dnb-ui-fragments.scss';
+@import './dnb-ui-forms.scss';
 @import '../components/accordion/style/dnb-accordion.scss';
 @import '../components/anchor/style/dnb-anchor.scss';
 @import '../components/autocomplete/style/dnb-autocomplete.scss';

packages/dnb-eufemia/src/style/dnb-ui-forms.scss

@@ -0,0 +1,19 @@
+/**
+ * ATTENTION: This file is auto generated by using "styleFactory".
+ * Do not change the content!
+ *
+ */
+
+@import './core/utilities.scss';
+@import '../extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss';
+@import '../extensions/forms/Field/Expiry/style/dnb-expiry.scss';
+@import '../extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss';
+@import '../extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.scss';
+@import '../extensions/forms/Field/Selection/style/dnb-selection.scss';
+@import '../extensions/forms/FieldBlock/style/dnb-field-block.scss';
+@import '../extensions/forms/Form/ButtonRow/style/dnb-form-button-row.scss';
+@import '../extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss';
+@import '../extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss';
+@import '../extensions/forms/StepsLayout/style/dnb-steps-layout.scss';
+@import '../extensions/forms/ValueBlock/style/dnb-value-block.scss';
+@import '../extensions/forms/utils/TestElement/style/dnb-test-element.scss';

packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-components.scss

@@ -57,3 +57,4 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/upload/style/themes/dnb-upload-theme-ui.scss';
 @import '../../../fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss';
 @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';
+@import './eiendom-theme-forms.scss';

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

@@ -0,0 +1,15 @@
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+
+// Add "ui" themes, if file don't exists
+$THEME_FALLBACK: 'ui';
+
+// Import shared styles
+@import '../../dnb-ui-forms.scss';
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
+ */

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

@@ -58,3 +58,4 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/timeline/style/themes/dnb-timeline-theme-ui.scss';
 @import '../../../components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss';
 @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';
+@import './sbanken-theme-forms.scss';

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

@@ -0,0 +1,15 @@
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+
+// Add "ui" themes, if file don't exists
+$THEME_FALLBACK: 'ui';
+
+// Import shared styles
+@import '../../dnb-ui-forms.scss';
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
+ */

packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-components.scss

@@ -53,3 +53,4 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/upload/style/themes/dnb-upload-theme-ui.scss';
 @import '../../../fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss';
 @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';
+@import './ui-theme-forms.scss';

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

@@ -0,0 +1,15 @@
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+
+// Add "ui" themes, if file don't exists
+$THEME_FALLBACK: 'ui';
+
+// Import shared styles
+@import '../../dnb-ui-forms.scss';
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
+ */