feat(Forms): add Form.Card with different default appearance than Card (use Form.Card in forms instead of Card)

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

@@ -148,6 +148,8 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p
 - replace `useError` with `useValidation`.
 - replace Form.Iterate label variable `{itemNr}` with `{itemNo}`.
 - replace `Form.FieldProps` with `Field.Provider`.
+- replace `<Card stack>...</Card>` with `<Form.Card>...</Form.Card>`.
+- replace `<Card>...</Card>` with `<Form.Card>...</Form.Card>`.
 
 ## NumberFormat
 

packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx

@@ -5,7 +5,6 @@ import {
   Flex,
   Grid,
   H2,
-  Hr,
   P,
   Section,
   Table,
@@ -172,10 +171,8 @@ export const Stack = () => {
   return (
     <ComponentBox data-visual-test="layout-card-stack">
       <Card stack>
-        <Field.String label="Label" value="Value" />
-        <Field.String label="Label" value="Value" />
-        <Hr />
-        <Form.SubmitButton />
+        <P>Stacked content</P>
+        <P>Stacked content</P>
       </Card>
     </ComponentBox>
   )
@@ -184,25 +181,25 @@ export const Stack = () => {
 export const VerticalFields = () => {
   return (
     <ComponentBox>
-      <Card>
+      <Form.Card>
         <Flex.Vertical>
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
         </Flex.Vertical>
-      </Card>
+      </Form.Card>
     </ComponentBox>
   )
 }
 
 export const HorizontalFields = () => {
   return (
     <ComponentBox>
-      <Card>
+      <Form.Card>
         <Flex.Horizontal>
           <Field.String label="Label" value="Value" width="small" />
           <Field.String label="Label" value="Value" width="stretch" />
         </Flex.Horizontal>
-      </Card>
+      </Form.Card>
     </ComponentBox>
   )
 }
@@ -275,14 +272,14 @@ export const WithOutset = () => {
   return (
     <ComponentBox data-visual-test="layout-card-outset">
       <Flex.Vertical>
-        <Form.MainHeading>Main heading</Form.MainHeading>
+        <Form.MainHeading>I'm left aligned</Form.MainHeading>
         <Card stack outset>
           <P>Card content</P>
           <Card>
             <P>Nested card</P>
           </Card>
         </Card>
-        <Form.SubmitButton />
+        <Form.SubmitButton text="I'm also left aligned" />
       </Flex.Vertical>
     </ComponentBox>
   )

packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx

@@ -12,17 +12,23 @@ import * as Examples from './Examples'
 
 ### Vertical fields
 
+When using Eufemia Forms, you may want to use [Form.Card](/uilib/extensions/forms/Form/Card/) instead of the original Card component.
+
 <Examples.VerticalFields />
 
 ### Horizontal fields
 
+When using Eufemia Forms, you may want to use [Form.Card](/uilib/extensions/forms/Form/Card/) instead of the original Card component.
+
 <Examples.HorizontalFields />
 
 ### Stack
 
-The Card components needs to have `stack={true}` or `align="stretch"` in order to stretch its children components.
+When `stack` is set to `true`, the Card will add a gap between its children and stretch them to the full.
+
+For [form components](uilib/extensions/forms/), you should use [Form.Card](/uilib/extensions/forms/Form/Card/) instead of the original Card component.
 
-For [form components](uilib/extensions/forms/), you should use `stack={true}` to get the correct spacing.
+When `stack` is set to `true`, the Card will add a gap between its children and stretch them to the full.
 
 <Examples.Stack />
 
@@ -34,6 +40,7 @@ Nested cards have `responsive={false}` by default and will not behave responsive
 
 ## With `outset`
 
+When using `outset`, the Card will break out of the layout container.
 On small screens (mobile) the outset is removed.
 
 <Examples.WithOutset />

packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx

@@ -6,7 +6,7 @@
 import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import styled from '@emotion/styled'
-import { Textarea, HelpButton, Flex, Card } from '@dnb/eufemia/src'
+import { Textarea, HelpButton, Flex } from '@dnb/eufemia/src'
 import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const RowsCols = () => (
@@ -154,7 +154,7 @@ export const MaxLength = () => (
   <Wrapper>
     <ComponentBox hideCode>
       <Form.Handler>
-        <Card stack>
+        <Form.Card>
           <Field.String
             label="Label"
             placeholder="Write more than 3 characters to demonstrate the limit"
@@ -164,7 +164,7 @@ export const MaxLength = () => (
             characterCounter={{ max: 3, variant: 'up' }}
           />
           <Form.SubmitButton text="Test" />
-        </Card>
+        </Form.Card>
       </Form.Handler>
     </ComponentBox>
   </Wrapper>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx

@@ -6,7 +6,7 @@ import {
   Value,
   JSONSchema,
 } from '@dnb/eufemia/src/extensions/forms'
-import { Card, Flex } from '@dnb/eufemia/src'
+import { Flex } from '@dnb/eufemia/src'
 
 export const TestdataSchema: JSONSchema = {
   type: 'object',
@@ -102,7 +102,7 @@ export const Default = () => {
         sessionStorageId="provider-example-1"
       >
         <Flex.Stack>
-          <Card stack>
+          <Form.Card>
             <Flex.Vertical divider="line" gap="small">
               <Field.String
                 path="/requiredString"
@@ -164,7 +164,7 @@ export const Default = () => {
                 <Form.SubmitButton />
               </Form.ButtonRow>
             </Flex.Vertical>
-          </Card>
+          </Form.Card>
         </Flex.Stack>
       </DataContext.Provider>
     </ComponentBox>
@@ -192,7 +192,7 @@ export const ValidationWithJsonSchema = () => {
         onSubmitRequest={() => console.log('onSubmitRequest')}
       >
         <Flex.Stack>
-          <Card stack>
+          <Form.Card>
             <Flex.Vertical divider="line" gap="small">
               <Field.String
                 path="/requiredString"
@@ -252,7 +252,7 @@ export const ValidationWithJsonSchema = () => {
                 <Form.SubmitButton />
               </Form.ButtonRow>
             </Flex.Vertical>
-          </Card>
+          </Form.Card>
         </Flex.Stack>
       </DataContext.Provider>
     </ComponentBox>