feat(Forms): add Form.Card with different default appearance than C…

…ard (use `Form.Card` in forms instead of Card) (#4318) With this we introduce `Form.Card` a new wrapper component for Card. It defaults to true on `outset` and `stack`. So when using it, it automatically gives the needed styles for classical forms. [Here](https://eufemia-git-feat-forms-card-eufemia.vercel.app/uilib/extensions/forms/Form/Card/) are the docs. <img width="567" alt="Screenshot 2024-11-21 at 20 04 43" src="https://github.com/user-attachments/assets/95d98bd4-297c-4355-8ee1-2f8aa7579b5e"> We also need to set a higher gap between the Wizard sidebar and its content: <img width="708" alt="Screenshot 2024-11-21 at 22 13 51" src="https://github.com/user-attachments/assets/e0328554-61bd-4ff3-8058-8a9bdd803bf4"> --------- Co-authored-by: Anders <[email protected]>
dnbexperience · Nov 22, 2024 · 7bbc0ca · 7bbc0ca
1 parent 46f68ae
commit 7bbc0ca
Show file tree

Hide file tree

Showing 142 changed files with 804 additions and 549 deletions.
diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx b/...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
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx b/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>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx b/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 />

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx b/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>

diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx b/...nb-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>