From a9e649b546cbd6d13e4ea1705e4d94842b2601e8 Mon Sep 17 00:00:00 2001 From: egor Date: Thu, 10 Nov 2022 14:10:58 +0100 Subject: [PATCH 01/29] style: setup new pages for form demo --- .../basiselementen/basiselementen.stories.mdx | 25 +++++ .../nl-design-system/basiselementen/form.tsx | 93 +++++++++++++++++++ .../common/patches/_fieldsets.scss | 34 +++++++ .../nl-design-system/common/style.scss | 1 + 4 files changed, 153 insertions(+) create mode 100644 documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx create mode 100644 documentation/demopages/nl-design-system/basiselementen/form.tsx create mode 100644 documentation/demopages/nl-design-system/common/patches/_fieldsets.scss diff --git a/documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx b/documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx new file mode 100644 index 0000000000..f686803203 --- /dev/null +++ b/documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx @@ -0,0 +1,25 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs"; +import Form from "./form"; + + + +# Demo + + + +
+ + diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx new file mode 100644 index 0000000000..2dd978c85c --- /dev/null +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -0,0 +1,93 @@ +import { Button } from '@nl-rvo/components/button/css/template'; +import { RadioButtonField } from '@nl-rvo/components/form-field/css/radiobutton-field.template'; +import { TextInputField } from '@nl-rvo/components/form-field/css/textinput-field.template'; +import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template'; +import '../common/style.scss'; +import { ButtonGroup, Fieldset, Heading1 } from '@utrecht/component-library-react'; + +const Form = () => { + return ( +
+ Gegevens zonnepanelen invullen + +
+ + +
+
+ + +
+
+
Factuurdatum
+
+ Vul de datum in die op de factuur van de zonnepanelen staat. +
+ + + + + + + +
Adres zonnepanelen
+
Vul het adres in waar de zonnepanelen zijn geplaatst.
+ + + + + + + + + + +
+ + + + + +
+ ); +}; + +export default Form; diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss new file mode 100644 index 0000000000..af98b8a0fb --- /dev/null +++ b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss @@ -0,0 +1,34 @@ +.basiselementen-theme { + .rvo-nl-demo-page { + background-color: var(--basiselementen-color-wit); + .utrecht-form-fieldset { + background-color: var(--basiselementen-color-grijs1); + } + } + .basiselementen-demo-page { + background-color: var(--basiselementen-color-lichtblauw-tint2); + padding-block: 32px; + padding-inline: 32px; + } + form { + margin-inline: auto; + width: min(680px, 100%); + } + .utrecht-form-fieldset { + background-color: var(--basiselementen-color-wit); + margin-block-end: 4px; + margin-block-start: 4px; + padding-block: 32px; + padding-inline: 32px; + } + .utrecht-form-fieldset:first-of-type { + margin-block-start: 32px; + } + .utrecht-form-fieldset:last-of-type { + margin-block-end: 32px; + } + .utrecht-form-field { + margin-block-end: 16px; + margin-block-start: 16px; + } +} diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss index f9aa4ced52..466c79214e 100644 --- a/documentation/demopages/nl-design-system/common/style.scss +++ b/documentation/demopages/nl-design-system/common/style.scss @@ -11,6 +11,7 @@ /* Component patches Patch files will be removed when components have been updated and released */ @use "patches/breadcrumbs"; +@use "patches/fieldsets"; @use "patches/link"; @use "patches/lists"; @use "patches/datalist"; From b0bb84628f132bcb062cf453c676b21d7adb87a7 Mon Sep 17 00:00:00 2001 From: egor Date: Fri, 11 Nov 2022 10:53:57 +0100 Subject: [PATCH 02/29] feat: corrected fieldset division --- .../demopages/nl-design-system/basiselementen/form.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 2dd978c85c..c8b9aee18f 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -37,16 +37,15 @@ const Form = () => {
Vul de datum in die op de factuur van de zonnepanelen staat.
- - + +
Adres zonnepanelen
Vul het adres in waar de zonnepanelen zijn geplaatst.
- From 47879986da2ff8b07d3a5432d611b821da7ab14a Mon Sep 17 00:00:00 2001 From: egor Date: Fri, 11 Nov 2022 15:52:09 +0100 Subject: [PATCH 03/29] style: improved mockup layout --- .../demopages/nl-design-system/common/patches/_fieldsets.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss index af98b8a0fb..c3176f2d8d 100644 --- a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss +++ b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss @@ -1,6 +1,7 @@ .basiselementen-theme { .rvo-nl-demo-page { background-color: var(--basiselementen-color-wit); + padding-inline: 32px; .utrecht-form-fieldset { background-color: var(--basiselementen-color-grijs1); } @@ -12,7 +13,7 @@ } form { margin-inline: auto; - width: min(680px, 100%); + width: min(768px, 100%); } .utrecht-form-fieldset { background-color: var(--basiselementen-color-wit); From 5c18b85677610a8e95346b9ca9881916aa6f2552 Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 23 Nov 2022 17:17:10 +0100 Subject: [PATCH 04/29] fix: using utrecht buttons --- .../nl-design-system/basiselementen/form.tsx | 64 +++++++------------ 1 file changed, 22 insertions(+), 42 deletions(-) diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index c8b9aee18f..127e0962d1 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -1,9 +1,8 @@ -import { Button } from '@nl-rvo/components/button/css/template'; -import { RadioButtonField } from '@nl-rvo/components/form-field/css/radiobutton-field.template'; -import { TextInputField } from '@nl-rvo/components/form-field/css/textinput-field.template'; +import { RadioButtonField } from '@nl-rvo/components/form-field-radio-button/css/template'; +import { TextInputField } from '@nl-rvo/components/form-field-textinput/css/template'; import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template'; import '../common/style.scss'; -import { ButtonGroup, Fieldset, Heading1 } from '@utrecht/component-library-react'; +import { Button, ButtonGroup, Fieldset, Heading1 } from '@utrecht/component-library-react'; const Form = () => { return ( @@ -11,24 +10,25 @@ const Form = () => { Gegevens zonnepanelen invullen
- +
- + +
@@ -38,49 +38,29 @@ const Form = () => { Vul de datum in die op de factuur van de zonnepanelen staat. - - - + + +
Adres zonnepanelen
Vul het adres in waar de zonnepanelen zijn geplaatst.
- - - + + + - - + +
- - From df1e5a271a9d1891c89224a341398488015c017f Mon Sep 17 00:00:00 2001 From: egor Date: Thu, 24 Nov 2022 15:43:05 +0100 Subject: [PATCH 05/29] style: flex layout system for forms --- .../nl-design-system/basiselementen/form.tsx | 93 ++++++++++++++----- .../common/basiselementen/_form-layout.scss | 56 +++++++++++ .../nl-design-system/common/style.scss | 1 + 3 files changed, 125 insertions(+), 25 deletions(-) create mode 100644 documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 127e0962d1..3b4e8430a4 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -1,16 +1,26 @@ import { RadioButtonField } from '@nl-rvo/components/form-field-radio-button/css/template'; -import { TextInputField } from '@nl-rvo/components/form-field-textinput/css/template'; -import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template'; import '../common/style.scss'; -import { Button, ButtonGroup, Fieldset, Heading1 } from '@utrecht/component-library-react'; +import { + Button, + ButtonGroup, + Fieldset, + FormField, + FormLabel, + Heading1, + Textbox, +} from '@utrecht/component-library-react'; const Form = () => { return (
Gegevens zonnepanelen invullen - -
- + +
+ + Uw naam + + + { ]} >
-
- +
+ + Uw naam + + { ]} >
-
-
Factuurdatum
+
+

Factuurdatum

Vul de datum in die op de factuur van de zonnepanelen staat.
- - - - - + + Dag + + + + Maand + + + + Jaar + +
-
+
Adres zonnepanelen
Vul het adres in waar de zonnepanelen zijn geplaatst.
- - - - - - - - - + + Straatnaam + + + + Huisnummer + + + + Toevoeging + + + + Postcode + + + + Plaatsnaam + +
-

Factuurdatum

-
- Vul de datum in die op de factuur van de zonnepanelen staat. -
+ +

Factuurdatum

+
+ Vul de datum in die op de factuur van de zonnepanelen staat. +
+ {
-
Adres zonnepanelen
-
Vul het adres in waar de zonnepanelen zijn geplaatst.
+ +
Adres zonnepanelen
+
+ Vul het adres in waar de zonnepanelen zijn geplaatst. +
+ Straatnaam diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss index c3176f2d8d..2fb9e2f834 100644 --- a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss +++ b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss @@ -19,7 +19,8 @@ background-color: var(--basiselementen-color-wit); margin-block-end: 4px; margin-block-start: 4px; - padding-block: 32px; + padding-block-end: 24px; + padding-block-start: 16px; padding-inline: 32px; } .utrecht-form-fieldset:first-of-type { @@ -29,7 +30,7 @@ margin-block-end: 32px; } .utrecht-form-field { - margin-block-end: 16px; - margin-block-start: 16px; + margin-block-end: 8px; + margin-block-start: 8px; } } From b0e02013c3fbb8eec2e3cdd1c6bd0588f0d8e04c Mon Sep 17 00:00:00 2001 From: egor Date: Thu, 24 Nov 2022 16:28:33 +0100 Subject: [PATCH 07/29] style: refactored flex to grid --- .../nl-design-system/basiselementen/form.tsx | 22 +++------- .../common/basiselementen/_form-layout.scss | 44 ++++++++----------- 2 files changed, 23 insertions(+), 43 deletions(-) diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 7ae0a2a1b7..606d828d65 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -16,7 +16,7 @@ const Form = () => { Gegevens zonnepanelen invullen
- + Uw naam @@ -31,7 +31,7 @@ const Form = () => { >
- + Uw naam @@ -52,27 +52,15 @@ const Form = () => { Vul de datum in die op de factuur van de zonnepanelen staat.
- + Dag - + Maand - + Jaar diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index d71483d79b..c6d1390a57 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -1,55 +1,47 @@ .basiselementen-theme { .basiselementen-layout-form { - --basiselementen-layout-form-flex-wrap: wrap; - --basiselementen-layout-form-display: flex; + --basiselementen-layout-form-display: grid; --basiselementen-layout-form-gap-block: 0; --basiselementen-layout-form-gap-inline: 1ch; - --basiselementen-layout-form-grow: 1; - --basiselementen-layout-form-shrink: 0; - --basiselementen-layout-form-basis: 100%; - --basiselementen-layout-form-width: 100%; - - display: var(--basiselementen-layout-form-display); - flex-direction: column; + --basiselementen-layout-form-grid-column: 1 / -1; &__fieldset { display: var(--basiselementen-layout-form-display); - flex-direction: row; - flex-wrap: var(--basiselementen-layout-form-flex-wrap); + flex-direction: column; gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); + grid-template-columns: repeat(12, 1fr); & > * { - width: var(--basiselementen-layout-form-width); + display: var(--basiselementen-layout-form-display); + flex-direction: column; + grid-column: var(--basiselementen-layout-form-grid-column); } } &__field { - display: flex; - flex: var(--basiselementen-layout-form-grow) var(--basiselementen-layout-form-shrink) - var(--basiselementen-layout-form-basis); + display: var(--basiselementen-layout-form-display); flex-direction: column; gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); - width: auto; - - &--collapse { - --basiselementen-layout-form-grow: 0; - } + grid-column: var(--basiselementen-layout-form-grid-column); &--xs { - --basiselementen-layout-form-basis: calc(100% / 12); + --basiselementen-layout-form-grid-column: auto / span 1; } &--sm { - --basiselementen-layout-form-basis: calc(100% / 6); + --basiselementen-layout-form-grid-column: auto / span 2; } &--md { - --basiselementen-layout-form-basis: calc(100% / 3); + --basiselementen-layout-form-grid-column: auto / span 4; } &--lg { - --basiselementen-layout-form-basis: calc(100% / 2); + --basiselementen-layout-form-grid-column: auto / span 8; } &--xl { - --basiselementen-layout-form-basis: calc(100% / 1.5); + --basiselementen-layout-form-grid-column: auto / span 10; + } + &--half { + --basiselementen-layout-form-grid-column: auto / span 6; } &--full { - --basiselementen-layout-form-basis: calc(100% / 1); + --basiselementen-layout-form-grid-column: 1 / -1; } } } From 99c467de90edaec5fc6a5411084befd11a69134d Mon Sep 17 00:00:00 2001 From: egor Date: Fri, 25 Nov 2022 09:18:14 +0100 Subject: [PATCH 08/29] style: allowing rules to be called on rvo theme --- .../common/basiselementen/_form-layout.scss | 92 ++++++++++--------- 1 file changed, 51 insertions(+), 41 deletions(-) diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index c6d1390a57..e25cfe891a 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -1,48 +1,58 @@ -.basiselementen-theme { - .basiselementen-layout-form { - --basiselementen-layout-form-display: grid; - --basiselementen-layout-form-gap-block: 0; - --basiselementen-layout-form-gap-inline: 1ch; - --basiselementen-layout-form-grid-column: 1 / -1; - - &__fieldset { - display: var(--basiselementen-layout-form-display); - flex-direction: column; - gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); - grid-template-columns: repeat(12, 1fr); - & > * { - display: var(--basiselementen-layout-form-display); - flex-direction: column; - grid-column: var(--basiselementen-layout-form-grid-column); - } - } +.basiselementen-layout-form { + --basiselementen-layout-form-display: grid; + --basiselementen-layout-form-gap-block: 0; + --basiselementen-layout-form-gap-inline: 1ch; + --basiselementen-layout-form-grid-column: 1 / -1; - &__field { + &__fieldset { + display: var(--basiselementen-layout-form-display); + flex-direction: column; + gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); + grid-template-columns: repeat(12, 1fr); + + & > * { display: var(--basiselementen-layout-form-display); flex-direction: column; - gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); grid-column: var(--basiselementen-layout-form-grid-column); - &--xs { - --basiselementen-layout-form-grid-column: auto / span 1; - } - &--sm { - --basiselementen-layout-form-grid-column: auto / span 2; - } - &--md { - --basiselementen-layout-form-grid-column: auto / span 4; - } - &--lg { - --basiselementen-layout-form-grid-column: auto / span 8; - } - &--xl { - --basiselementen-layout-form-grid-column: auto / span 10; - } - &--half { - --basiselementen-layout-form-grid-column: auto / span 6; - } - &--full { - --basiselementen-layout-form-grid-column: 1 / -1; - } + } + } + + &__field { + display: var(--basiselementen-layout-form-display); + flex-direction: column; + gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); + grid-column: var(--basiselementen-layout-form-grid-column); + + &--xs { + --basiselementen-layout-form-grid-column: auto / span 1; + } + + &--sm { + --basiselementen-layout-form-grid-column: auto / span 2; + } + + &--md { + --basiselementen-layout-form-grid-column: auto / span 4; + } + + &--lg { + --basiselementen-layout-form-grid-column: auto / span 8; + } + + &--xl { + --basiselementen-layout-form-grid-column: auto / span 10; + } + + &--quarter { + --basiselementen-layout-form-grid-column: auto / span 3; + } + + &--half { + --basiselementen-layout-form-grid-column: auto / span 6; + } + + &--full { + --basiselementen-layout-form-grid-column: 1 / -1; } } } From 60dfcc304f5acfcacdfb0ff5a15fc05c48d33b3a Mon Sep 17 00:00:00 2001 From: egor Date: Fri, 25 Nov 2022 10:14:49 +0100 Subject: [PATCH 09/29] style: added missing tokens --- .../src/components/rvo/checkbox.tokens.json | 32 +++++++++++ .../src/components/rvo/select.tokens.json | 15 ++++++ .../utrecht/custom-radio-button.tokens.json | 53 +++++++++++++++++++ 3 files changed, 100 insertions(+) create mode 100644 proprietary/basiselementen-design-tokens/src/components/rvo/checkbox.tokens.json create mode 100644 proprietary/basiselementen-design-tokens/src/components/rvo/select.tokens.json create mode 100644 proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json diff --git a/proprietary/basiselementen-design-tokens/src/components/rvo/checkbox.tokens.json b/proprietary/basiselementen-design-tokens/src/components/rvo/checkbox.tokens.json new file mode 100644 index 0000000000..37a9689883 --- /dev/null +++ b/proprietary/basiselementen-design-tokens/src/components/rvo/checkbox.tokens.json @@ -0,0 +1,32 @@ +{ + "rvo": { + "checkbox": { + "size": { "value": "24px" }, + "icon": { + "size": { "value": "16px" }, + "color": { "value": "{basiselementen.color.wit}" } + }, + "background-color": { "value": "{basiselementen.color.wit}" }, + "border-width": { "value": "1px" }, + "border-color": { "value": "{basiselementen.color.zwart}" }, + "focus": { + "border-color": {}, + "border-width": {}, + "background-color": {} + }, + "checked": { + "background-color": { "value": "{basiselementen.color.hemelblauw}" } + }, + "hover": { + "background-color": { "value": "{basiselementen.color.donkerblauw}" }, + "border-color": { "value": "{basiselementen.color.hemelblauw}" } + }, + "disabled": { + "border-color": { "value": "{basiselementen.color.grijs3}" }, + "border-width": {}, + "background-color": { "value": "{basiselementen.color.wit}" }, + "color": { "value": "{basiselementen.color.grijs3}" } + } + } + } +} diff --git a/proprietary/basiselementen-design-tokens/src/components/rvo/select.tokens.json b/proprietary/basiselementen-design-tokens/src/components/rvo/select.tokens.json new file mode 100644 index 0000000000..541ad285bf --- /dev/null +++ b/proprietary/basiselementen-design-tokens/src/components/rvo/select.tokens.json @@ -0,0 +1,15 @@ +{ + "rvo": { + "select": { + "icon": { + "background-color": { "value": "{basiselementen.color.hemelblauw}" }, + "color": { "value": "{basiselementen.color.wit}" } + }, + "outline-offset": { "value": "0" }, + "padding-block-end": { "value": "9px" }, + "padding-block-start": { "value": "10px" }, + "padding-inline-end": { "value": "50px" }, + "padding-inline-start": { "value": "18px" } + } + } +} diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json new file mode 100644 index 0000000000..3f0e232b21 --- /dev/null +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json @@ -0,0 +1,53 @@ +{ + "utrecht": { + "custom-radio-button": { + "size": { "value": "24px" }, + "border-color": { "value": "{basiselementen.color.grijs4}" }, + "color": { "value": "{basiselementen.color.zwart}" }, + "border-width": { "value": "1px" }, + "background-color": { "value": "{basiselementen.color.wit}" }, + "border-radius": { "value": "0" }, + "padding": {}, + "icon": { + "size": { "value": "18px" } + }, + "active": { + "border-color": {}, + "border-width": {}, + "background-color": {}, + "color": {} + }, + "focus": { + "border-color": {}, + "border-width": {}, + "background-color": {} + }, + "disabled": { + "border-color": { "value": "{basiselementen.color.grijs3}" }, + "border-width": {}, + "background-color": { "value": "{basiselementen.color.wit}" }, + "color": {} + }, + "checked": { + "border-color": {}, + "border-width": {}, + "background-color": {}, + "color": {}, + "active": { + "border-color": {}, + "background-color": {} + } + }, + "invalid": { + "border-color": {}, + "border-width": {}, + "background-color": {}, + "color": {}, + "active": { + "border-color": {}, + "background-color": {} + } + } + } + } +} From dadb6b600e5126caf478432253466cff9624e461 Mon Sep 17 00:00:00 2001 From: egor Date: Fri, 25 Nov 2022 12:19:29 +0100 Subject: [PATCH 10/29] style: align and patch styles with rvo and utrecht --- .../nl-design-system/basiselementen/form.tsx | 23 +++++++++--------- .../common/basiselementen/_form-layout.scss | 20 +++++----------- .../common/patches/_fieldsets.scss | 11 +++++++-- .../common/patches/_form-rvo-layout.scss | 16 +++++++++++++ .../nl-design-system/common/style.scss | 1 + .../basiselementen/layout.tokens.json | 23 ++++++++++++++++++ .../rvo/custom-radio-button.tokens.json | 24 +++++++++++++++++++ .../utrecht/custom-radio-button.tokens.json | 16 ++++++------- .../basiselementen/layout.tokens.json | 23 ++++++++++++++++++ 9 files changed, 121 insertions(+), 36 deletions(-) create mode 100644 documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss create mode 100644 proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json create mode 100644 proprietary/basiselementen-design-tokens/src/components/rvo/custom-radio-button.tokens.json create mode 100644 proprietary/design-tokens/src/components/basiselementen/layout.tokens.json diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 606d828d65..80d3aa0ddf 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -16,37 +16,36 @@ const Form = () => { Gegevens zonnepanelen invullen
- + Uw naam
- + Uw naam -
- +

Factuurdatum

Vul de datum in die op de factuur van de zonnepanelen staat. @@ -66,7 +65,7 @@ const Form = () => {
- +
Adres zonnepanelen
Vul het adres in waar de zonnepanelen zijn geplaatst. diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index e25cfe891a..3de742d003 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -1,27 +1,19 @@ .basiselementen-layout-form { - --basiselementen-layout-form-display: grid; - --basiselementen-layout-form-gap-block: 0; - --basiselementen-layout-form-gap-inline: 1ch; - --basiselementen-layout-form-grid-column: 1 / -1; - &__fieldset { + column-gap: var(--basiselementen-layout-form-column-gap); display: var(--basiselementen-layout-form-display); flex-direction: column; - gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); - grid-template-columns: repeat(12, 1fr); - - & > * { - display: var(--basiselementen-layout-form-display); - flex-direction: column; - grid-column: var(--basiselementen-layout-form-grid-column); - } + grid-template-columns: var(--basiselementen-layout-form-grid-template-columns); + row-gap: var(--basiselementen-layout-form-row-gap); } &__field { + align-content: space-between; + column-gap: var(--basiselementen-layout-form-column-gap); display: var(--basiselementen-layout-form-display); flex-direction: column; - gap: var(--basiselementen-layout-form-gap-block) var(--basiselementen-layout-form-gap-inline); grid-column: var(--basiselementen-layout-form-grid-column); + row-gap: var(--basiselementen-layout-form-row-gap); &--xs { --basiselementen-layout-form-grid-column: auto / span 1; diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss index 2fb9e2f834..c78ce18152 100644 --- a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss +++ b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss @@ -2,33 +2,40 @@ .rvo-nl-demo-page { background-color: var(--basiselementen-color-wit); padding-inline: 32px; + .utrecht-form-fieldset { background-color: var(--basiselementen-color-grijs1); } } + .basiselementen-demo-page { background-color: var(--basiselementen-color-lichtblauw-tint2); padding-block: 32px; padding-inline: 32px; } + form { margin-inline: auto; width: min(768px, 100%); } + .utrecht-form-fieldset { background-color: var(--basiselementen-color-wit); margin-block-end: 4px; margin-block-start: 4px; - padding-block-end: 24px; - padding-block-start: 16px; + padding-block-end: 32px; + padding-block-start: 24px; padding-inline: 32px; } + .utrecht-form-fieldset:first-of-type { margin-block-start: 32px; } + .utrecht-form-fieldset:last-of-type { margin-block-end: 32px; } + .utrecht-form-field { margin-block-end: 8px; margin-block-start: 8px; diff --git a/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss new file mode 100644 index 0000000000..0e78e53ba5 --- /dev/null +++ b/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss @@ -0,0 +1,16 @@ +.basiselementen-layout-form { + .rvo-form-field, + .rvo-layout-column { + column-gap: var(--basiselementen-layout-form-column-gap); + display: var(--basiselementen-layout-form-display); + flex-direction: column; + grid-column: var(--basiselementen-layout-form-grid-column); + row-gap: var(--basiselementen-layout-form-row-gap); + } + .rvo-layout-column { + row-gap: var(--basiselementen-layout-form-column-gap); + } + .rvo-layout-row { + column-gap: var(--basiselementen-layout-form-column-gap); + } +} diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss index f6db582163..808a8d56c6 100644 --- a/documentation/demopages/nl-design-system/common/style.scss +++ b/documentation/demopages/nl-design-system/common/style.scss @@ -16,3 +16,4 @@ @use "patches/link"; @use "patches/lists"; @use "patches/datalist"; +@use "patches/form-rvo-layout"; diff --git a/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json b/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json new file mode 100644 index 0000000000..9c4acffa42 --- /dev/null +++ b/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json @@ -0,0 +1,23 @@ +{ + "basiselementen": { + "layout": { + "form": { + "display": { + "value": "grid" + }, + "row-gap": { + "value": "0" + }, + "column-gap": { + "value": "1ch" + }, + "grid-column": { + "value": "1 / -1" + }, + "grid-template-columns": { + "value": "repeat(12, 1fr)" + } + } + } + } +} diff --git a/proprietary/basiselementen-design-tokens/src/components/rvo/custom-radio-button.tokens.json b/proprietary/basiselementen-design-tokens/src/components/rvo/custom-radio-button.tokens.json new file mode 100644 index 0000000000..9b64d9d361 --- /dev/null +++ b/proprietary/basiselementen-design-tokens/src/components/rvo/custom-radio-button.tokens.json @@ -0,0 +1,24 @@ +{ + "rvo": { + "custom-radio-button": { + "label": { + "disabled": { + "color": { "value": "{basiselementen.color.grijs3}" } + } + }, + "hover": { + "border-color": { + "value": "{basiselementen.color.hemelblauw}" + } + }, + "checked": { + "border-color": { + "value": "{basiselementen.color.hemelblauw}" + }, + "background": { + "value": "radial-gradient(circle, {basiselementen.color.wit} 30%, {basiselementen.color.hemelblauw} 30%)" + } + } + } + } +} diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json index 3f0e232b21..a65517e005 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/custom-radio-button.tokens.json @@ -2,7 +2,7 @@ "utrecht": { "custom-radio-button": { "size": { "value": "24px" }, - "border-color": { "value": "{basiselementen.color.grijs4}" }, + "border-color": { "value": "{basiselementen.color.zwart}" }, "color": { "value": "{basiselementen.color.zwart}" }, "border-width": { "value": "1px" }, "background-color": { "value": "{basiselementen.color.wit}" }, @@ -14,7 +14,7 @@ "active": { "border-color": {}, "border-width": {}, - "background-color": {}, + "background-color": { "value": "{basiselementen.color.hemelblauw}" }, "color": {} }, "focus": { @@ -29,17 +29,17 @@ "color": {} }, "checked": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {}, + "border-color": { "value": "{basiselementen.color.hemelblauw}" }, + "border-width": { "value": "3px" }, + "background-color": { "value": "{basiselementen.color.hemelblauw}" }, + "color": { "value": "{basiselementen.color.hemelblauw}" }, "active": { "border-color": {}, - "background-color": {} + "background-color": { "value": "{basiselementen.color.hemelblauw}" } } }, "invalid": { - "border-color": {}, + "border-color": { "value": "{basiselementen.color.grijs3}" }, "border-width": {}, "background-color": {}, "color": {}, diff --git a/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json b/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json new file mode 100644 index 0000000000..81f4d91bbd --- /dev/null +++ b/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json @@ -0,0 +1,23 @@ +{ + "basiselementen": { + "layout": { + "form": { + "display": { + "value": "grid" + }, + "row-gap": { + "value": "0.5ex" + }, + "column-gap": { + "value": "1ch" + }, + "grid-column": { + "value": "1 / -1" + }, + "grid-template-columns": { + "value": "repeat(12, 1fr)" + } + } + } + } +} From f318d00da8c1bb1ed2256d3415d5b5589d897da2 Mon Sep 17 00:00:00 2001 From: egor Date: Fri, 25 Nov 2022 15:54:35 +0100 Subject: [PATCH 11/29] style: allow fields and fieldset to have different gaps --- .../common/basiselementen/_form-layout.scss | 28 ++++++++--------- .../common/patches/_form-rvo-layout.scss | 10 +++---- .../basiselementen/layout.tokens.json | 30 ++++++++++++------- .../basiselementen/layout.tokens.json | 30 ++++++++++++------- 4 files changed, 59 insertions(+), 39 deletions(-) diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index 3de742d003..d84fd2bc38 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -1,50 +1,50 @@ .basiselementen-layout-form { &__fieldset { - column-gap: var(--basiselementen-layout-form-column-gap); + column-gap: var(--basiselementen-layout-form-fieldset-column-gap); display: var(--basiselementen-layout-form-display); flex-direction: column; - grid-template-columns: var(--basiselementen-layout-form-grid-template-columns); - row-gap: var(--basiselementen-layout-form-row-gap); + grid-template-columns: var(--basiselementen-layout-form-fieldset-grid-template-columns); + row-gap: var(--basiselementen-layout-form-fieldset-row-gap); } &__field { align-content: space-between; - column-gap: var(--basiselementen-layout-form-column-gap); + column-gap: var(--basiselementen-layout-form-field-column-gap); display: var(--basiselementen-layout-form-display); flex-direction: column; - grid-column: var(--basiselementen-layout-form-grid-column); - row-gap: var(--basiselementen-layout-form-row-gap); + grid-column: var(--basiselementen-layout-form-field-grid-column); + row-gap: var(--basiselementen-layout-form-field-row-gap); &--xs { - --basiselementen-layout-form-grid-column: auto / span 1; + --basiselementen-layout-form-field-grid-column: auto / span 1; } &--sm { - --basiselementen-layout-form-grid-column: auto / span 2; + --basiselementen-layout-form-field-grid-column: auto / span 2; } &--md { - --basiselementen-layout-form-grid-column: auto / span 4; + --basiselementen-layout-form-field-grid-column: auto / span 4; } &--lg { - --basiselementen-layout-form-grid-column: auto / span 8; + --basiselementen-layout-form-field-grid-column: auto / span 8; } &--xl { - --basiselementen-layout-form-grid-column: auto / span 10; + --basiselementen-layout-form-field-grid-column: auto / span 10; } &--quarter { - --basiselementen-layout-form-grid-column: auto / span 3; + --basiselementen-layout-form-field-grid-column: auto / span 3; } &--half { - --basiselementen-layout-form-grid-column: auto / span 6; + --basiselementen-layout-form-field-grid-column: auto / span 6; } &--full { - --basiselementen-layout-form-grid-column: 1 / -1; + --basiselementen-layout-form-field-grid-column: 1 / -1; } } } diff --git a/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss index 0e78e53ba5..3f748c219c 100644 --- a/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss +++ b/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss @@ -1,16 +1,16 @@ .basiselementen-layout-form { .rvo-form-field, .rvo-layout-column { - column-gap: var(--basiselementen-layout-form-column-gap); + column-gap: var(--basiselementen-layout-form-field-column-gap); display: var(--basiselementen-layout-form-display); flex-direction: column; - grid-column: var(--basiselementen-layout-form-grid-column); - row-gap: var(--basiselementen-layout-form-row-gap); + grid-column: var(--basiselementen-layout-form-field-grid-column); + row-gap: var(--basiselementen-layout-form-field-row-gap); } .rvo-layout-column { - row-gap: var(--basiselementen-layout-form-column-gap); + row-gap: var(--basiselementen-layout-form-field-column-gap); } .rvo-layout-row { - column-gap: var(--basiselementen-layout-form-column-gap); + column-gap: var(--basiselementen-layout-form-field-column-gap); } } diff --git a/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json b/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json index 9c4acffa42..07d8250851 100644 --- a/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json @@ -5,17 +5,27 @@ "display": { "value": "grid" }, - "row-gap": { - "value": "0" + "fieldset": { + "row-gap": { + "value": "1ex" + }, + "column-gap": { + "value": "1ch" + }, + "grid-template-columns": { + "value": "repeat(12, 1fr)" + } }, - "column-gap": { - "value": "1ch" - }, - "grid-column": { - "value": "1 / -1" - }, - "grid-template-columns": { - "value": "repeat(12, 1fr)" + "field": { + "row-gap": { + "value": "0" + }, + "column-gap": { + "value": "1ch" + }, + "grid-column": { + "value": "1 / -1" + } } } } diff --git a/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json b/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json index 81f4d91bbd..2f749f1786 100644 --- a/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json +++ b/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json @@ -5,17 +5,27 @@ "display": { "value": "grid" }, - "row-gap": { - "value": "0.5ex" + "fieldset": { + "row-gap": { + "value": "{rvo.space.xs}" + }, + "column-gap": { + "value": "{rvo.space.sm}" + }, + "grid-template-columns": { + "value": "repeat(12, 1fr)" + } }, - "column-gap": { - "value": "1ch" - }, - "grid-column": { - "value": "1 / -1" - }, - "grid-template-columns": { - "value": "repeat(12, 1fr)" + "field": { + "row-gap": { + "value": "0" + }, + "column-gap": { + "value": "{rvo.space.sm}" + }, + "grid-column": { + "value": "1 / -1" + } } } } From 3c8d4b4116274407c8074796b2b1eb417d72dc80 Mon Sep 17 00:00:00 2001 From: egor Date: Mon, 28 Nov 2022 07:43:53 +0100 Subject: [PATCH 12/29] style: allow fields to jump to a new line --- .../nl-design-system/common/basiselementen/_form-layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index d84fd2bc38..d689a5cb90 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -46,5 +46,9 @@ &--full { --basiselementen-layout-form-field-grid-column: 1 / -1; } + + &--start { + grid-column-start: 1; + } } } From cdd5cad1940fef47f291e37038e7dd898a71a313 Mon Sep 17 00:00:00 2001 From: egor Date: Mon, 28 Nov 2022 08:25:54 +0100 Subject: [PATCH 13/29] style: added class for thirds --- .../nl-design-system/common/basiselementen/_form-layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index d689a5cb90..651024e719 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -35,6 +35,10 @@ --basiselementen-layout-form-field-grid-column: auto / span 10; } + &--third { + --basiselementen-layout-form-field-grid-column: auto / span 4; + } + &--quarter { --basiselementen-layout-form-field-grid-column: auto / span 3; } From 9250c411fe6660e32e5d17d3c154690cd5a84db3 Mon Sep 17 00:00:00 2001 From: egor Date: Tue, 29 Nov 2022 13:37:38 +0100 Subject: [PATCH 14/29] style: moved grid to fieldsets and fields --- .../nl-design-system/basiselementen/form.tsx | 104 +++++++------- .../common/basiselementen/_form-layout.scss | 127 ++++++++++++------ .../common/patches/_fieldsets.scss | 45 +++---- .../common/patches/_form-rvo-layout.scss | 18 ++- .../basiselementen/layout.tokens.json | 33 ----- .../form-field-description.tokens.json | 12 -- .../components/utrecht/form-field.tokens.json | 29 +++- .../utrecht/form-fieldset.tokens.json | 24 +++- .../basiselementen/layout.tokens.json | 33 ----- .../components/rvo/form-fieldset.tokens.json | 14 +- .../form-field-description.tokens.json | 12 -- .../components/utrecht/form-field.tokens.json | 26 +++- .../utrecht/form-fieldset.tokens.json | 9 ++ 13 files changed, 263 insertions(+), 223 deletions(-) delete mode 100644 proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json delete mode 100644 proprietary/basiselementen-design-tokens/src/components/utrecht/form-field-description.tokens.json delete mode 100644 proprietary/design-tokens/src/components/basiselementen/layout.tokens.json delete mode 100644 proprietary/design-tokens/src/components/utrecht/form-field-description.tokens.json diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 80d3aa0ddf..fa1810a1d1 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -1,10 +1,12 @@ -import { RadioButtonField } from '@nl-rvo/components/form-field-radio-button/css/template'; import '../common/style.scss'; import { Button, ButtonGroup, + CustomRadioButton, Fieldset, + FieldsetLegend, FormField, + FormFieldDescription, FormLabel, Heading1, Textbox, @@ -12,82 +14,86 @@ import { const Form = () => { return ( -
+
Gegevens zonnepanelen invullen -
- +
+ Uw naam - -
-
- - Uw naam - +
+ + Staat uw naam op de energierekening + + + + + Ja + + + + + + Nee + -
-
- -

Factuurdatum

-
- Vul de datum in die op de factuur van de zonnepanelen staat. -
+
+ + Staat uw naam op de factuur van de zonnepanelen + + + + + Ja + + + + + + Nee + - +
+
+ Factuurdatum + Vul de datum in die op de factuur van de zonnepanelen staat. + Dag - + - + Maand - + - + Jaar - + + Vul een geldige datum in.
-
- -
Adres zonnepanelen
-
- Vul het adres in waar de zonnepanelen zijn geplaatst. -
- - +
+ Adres zonnepanelen + Vul het adres in waar de zonnepanelen zijn geplaatst. + Straatnaam - + Huisnummer - + Toevoeging - + Postcode - + Plaatsnaam diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index 651024e719..0809883fbe 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -1,58 +1,103 @@ -.basiselementen-layout-form { - &__fieldset { - column-gap: var(--basiselementen-layout-form-fieldset-column-gap); - display: var(--basiselementen-layout-form-display); +.basiselementen-demo-page, +.rvo-nl-demo-page { + .utrecht-form-fieldset { + column-gap: var(--utrecht-form-fieldset-column-gap); + display: var(--utrecht-form-fieldset-display); flex-direction: column; - grid-template-columns: var(--basiselementen-layout-form-fieldset-grid-template-columns); - row-gap: var(--basiselementen-layout-form-fieldset-row-gap); - } + grid-template-columns: var(--utrecht-form-fieldset-grid-template-columns); + margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); + margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); + row-gap: var(--utrecht-form-fieldset-row-gap); + &:last-of-type, + &:first-of-type { + margin-block-start: 0; + } + &__legend--label { + color: var(--utrecht-form-label-color); + display: block; + font-size: var(--utrecht-form-label-font-size); + font-weight: var(--utrecht-form-label-font-weight); + } + & > * { + align-content: space-between; + column-gap: var(--utrecht-form-field-column-gap); + display: var(--utrecht-form-field-display); + flex-direction: column; + grid-column: var(--utrecht-form-field-grid-column); + margin-block-end: 0; + margin-block-start: 0; + row-gap: var(--utrecht-form-field-row-gap); + } - &__field { - align-content: space-between; - column-gap: var(--basiselementen-layout-form-field-column-gap); - display: var(--basiselementen-layout-form-display); - flex-direction: column; - grid-column: var(--basiselementen-layout-form-field-grid-column); - row-gap: var(--basiselementen-layout-form-field-row-gap); + .utrecht-form-field { + min-width: var(--utrecht-form-field-min-width); - &--xs { - --basiselementen-layout-form-field-grid-column: auto / span 1; - } + &--xs { + --utrecht-form-field-min-width: 7ch; + --utrecht-form-field-grid-column: auto / span 1; + } - &--sm { - --basiselementen-layout-form-field-grid-column: auto / span 2; - } + &--sm { + --utrecht-form-field-min-width: 12ch; + --utrecht-form-field-grid-column: auto / span 2; + } - &--md { - --basiselementen-layout-form-field-grid-column: auto / span 4; - } + &--md { + --utrecht-form-field-min-width: 20ch; + --utrecht-form-field-grid-column: auto / span 4; + } - &--lg { - --basiselementen-layout-form-field-grid-column: auto / span 8; - } + &--lg { + --utrecht-form-field-min-width: 35ch; + --utrecht-form-field-grid-column: auto / span 8; + } - &--xl { - --basiselementen-layout-form-field-grid-column: auto / span 10; - } + &--xl { + --utrecht-form-field-min-width: 50ch; + --utrecht-form-field-grid-column: auto / span 10; + } - &--third { - --basiselementen-layout-form-field-grid-column: auto / span 4; - } + &--third { + --utrecht-form-field-min-width: 20ch; + --utrecht-form-field-grid-column: auto / span 4; + } - &--quarter { - --basiselementen-layout-form-field-grid-column: auto / span 3; - } + &--quarter { + --utrecht-form-field-min-width: 15ch; + --utrecht-form-field-grid-column: auto / span 3; + } - &--half { - --basiselementen-layout-form-field-grid-column: auto / span 6; + &--half { + --utrecht-form-field-min-width: 30ch; + --utrecht-form-field-grid-column: auto / span 6; + } + + &--full { + --utrecht-form-field-min-width: 70ch; + --utrecht-form-field-grid-column: 1 / -1; + } + + &--start { + grid-column-start: 1; + } } - &--full { - --basiselementen-layout-form-field-grid-column: 1 / -1; + label:has(input) { + align-items: center; + column-gap: var(--utrecht-form-field-column-gap); + display: flex; + font-weight: 400; } - &--start { - grid-column-start: 1; + .utrecht-form-field-description--invalid { + color: var(--basiselementen-color-rood); + } + .utrecht-form-field-description { + margin-block-end: var(--utrecht-form-field-description-margin-block-end); + margin-block-start: var(--utrecht-form-field-description-margin-block-start); + } + .utrecht-form-field-description:has(+ .utrecht-form-field) { + margin-block-end: 2ex; } } } diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss index c78ce18152..a351fc350a 100644 --- a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss +++ b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss @@ -2,7 +2,7 @@ .rvo-nl-demo-page { background-color: var(--basiselementen-color-wit); padding-inline: 32px; - + form, .utrecht-form-fieldset { background-color: var(--basiselementen-color-grijs1); } @@ -12,32 +12,25 @@ background-color: var(--basiselementen-color-lichtblauw-tint2); padding-block: 32px; padding-inline: 32px; - } - - form { - margin-inline: auto; - width: min(768px, 100%); - } - - .utrecht-form-fieldset { - background-color: var(--basiselementen-color-wit); - margin-block-end: 4px; - margin-block-start: 4px; - padding-block-end: 32px; - padding-block-start: 24px; - padding-inline: 32px; - } - .utrecht-form-fieldset:first-of-type { - margin-block-start: 32px; - } - - .utrecht-form-fieldset:last-of-type { - margin-block-end: 32px; - } + .utrecht-form-fieldset { + background-color: var(--basiselementen-color-wit); + padding-block: 32px; + padding-inline: 32px; + } - .utrecht-form-field { - margin-block-end: 8px; - margin-block-start: 8px; + .utrecht-form-fieldset__legend { + font-size: var(--utrecht-form-label-font-size); + } + form { + margin-block-start: 32px; + margin-inline: auto; + padding-block: 32px; + padding-inline: 32px; + width: min(768px, 100%); + } } } +.utrecht-form-fieldset--subtle .utrecht-form-label:not(.utrecht-form-fieldset__legend) { + font-weight: 400; +} diff --git a/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss index 3f748c219c..3504345808 100644 --- a/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss +++ b/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss @@ -1,16 +1,22 @@ -.basiselementen-layout-form { +.basiselementen-demo-page { .rvo-form-field, .rvo-layout-column { - column-gap: var(--basiselementen-layout-form-field-column-gap); + column-gap: var(--utrecht-form-field-column-gap); display: var(--basiselementen-layout-form-display); flex-direction: column; - grid-column: var(--basiselementen-layout-form-field-grid-column); - row-gap: var(--basiselementen-layout-form-field-row-gap); + grid-column: var(--utrecht-form-field-grid-column); + row-gap: var(--utrecht-form-field-row-gap); } .rvo-layout-column { - row-gap: var(--basiselementen-layout-form-field-column-gap); + row-gap: var(--utrecht-form-field-column-gap); } .rvo-layout-row { - column-gap: var(--basiselementen-layout-form-field-column-gap); + column-gap: var(--utrecht-form-field-column-gap); + } +} + +.rvo-nl-demo-page { + .rvo-form-field { + padding-block-end: var(--rvo-space-xl); } } diff --git a/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json b/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json deleted file mode 100644 index 07d8250851..0000000000 --- a/proprietary/basiselementen-design-tokens/src/components/basiselementen/layout.tokens.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "basiselementen": { - "layout": { - "form": { - "display": { - "value": "grid" - }, - "fieldset": { - "row-gap": { - "value": "1ex" - }, - "column-gap": { - "value": "1ch" - }, - "grid-template-columns": { - "value": "repeat(12, 1fr)" - } - }, - "field": { - "row-gap": { - "value": "0" - }, - "column-gap": { - "value": "1ch" - }, - "grid-column": { - "value": "1 / -1" - } - } - } - } - } -} diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field-description.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field-description.tokens.json deleted file mode 100644 index 3689863dc7..0000000000 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field-description.tokens.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "utrecht": { - "form-field-description": { - "margin-block-end": { - "value": "12px" - }, - "margin-block-start": { - "value": "0" - } - } - } -} diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json index 00f8b78267..3b2dd824ca 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json @@ -1,11 +1,32 @@ { "utrecht": { "form-field": { - "margin-block-start": { - "value": "18px" + "description": { + "margin-block-start": { "value": "1ex" }, + "margin-block-end": { "value": "1ex" } }, - "margin-block-end": { - "value": "8px" + "invalid": { + "border-inline-start-color": {}, + "border-inline-start-width": {}, + "padding-inline-start": {} + }, + "label": { + "margin-block-end": {} + }, + "margin-block-end": { "value": "9px" }, + "margin-block-start": { "value": "9px" }, + "min-width": { "value": "100%" }, + "display": { + "value": "grid" + }, + "column-gap": { + "value": "1ch" + }, + "grid-column": { + "value": "1 / -1" + }, + "row-gap": { + "value": "0" } } } diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json index 56ec9d0beb..4a0a591f0a 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -1,17 +1,33 @@ { "utrecht": { "form-fieldset": { - "margin-block-end": {}, - "margin-block-start": {}, + "display": { + "value": "grid" + }, + "margin-block-end": { "value": "9px" }, + "margin-block-start": { "value": "9px" }, + "section": { + "background-color": { "value": "{basiselementen.color.grijs2}" }, + "color": { "value": "{basiselementen.color.zwart}" } + }, "legend": { "color": {}, "font-family": {}, "font-size": { "value": "1.25rem" }, "font-weight": { "value": "{basiselementen.font-weight.bold}" }, "line-height": { "value": "150%" }, - "margin-block-end": { "value": "4px" }, - "margin-block-start": {}, + "margin-block-end": { "value": "0" }, + "margin-block-start": { "value": "0" }, "text-transform": {} + }, + "column-gap": { + "value": "1ch" + }, + "grid-template-columns": { + "value": "repeat(12, 1fr)" + }, + "row-gap": { + "value": "0" } } } diff --git a/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json b/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json deleted file mode 100644 index 2f749f1786..0000000000 --- a/proprietary/design-tokens/src/components/basiselementen/layout.tokens.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "basiselementen": { - "layout": { - "form": { - "display": { - "value": "grid" - }, - "fieldset": { - "row-gap": { - "value": "{rvo.space.xs}" - }, - "column-gap": { - "value": "{rvo.space.sm}" - }, - "grid-template-columns": { - "value": "repeat(12, 1fr)" - } - }, - "field": { - "row-gap": { - "value": "0" - }, - "column-gap": { - "value": "{rvo.space.sm}" - }, - "grid-column": { - "value": "1 / -1" - } - } - } - } - } -} diff --git a/proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json b/proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json index 6c6c1ee6c6..3a1e0b8aa5 100644 --- a/proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json +++ b/proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json @@ -5,7 +5,19 @@ "padding-block-end": { "value": "calc({rvo.space.xs} + {rvo.space.md})" }, "padding-block-start": { "value": "calc({rvo.space.xs} + {rvo.space.md})" }, "padding-inline-end": { "value": "calc({rvo.space.xs} + {rvo.space.md})" }, - "padding-inline-start": { "value": "calc({rvo.space.xs} + {rvo.space.md})" } + "padding-inline-start": { "value": "calc({rvo.space.xs} + {rvo.space.md})" }, + "display": { + "value": "grid" + }, + "column-gap": { + "value": "1ch" + }, + "grid-column": { + "value": "1 / -1" + }, + "row-gap": { + "value": "{rvo.space.sm}" + } } } } diff --git a/proprietary/design-tokens/src/components/utrecht/form-field-description.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field-description.tokens.json deleted file mode 100644 index ec195600d0..0000000000 --- a/proprietary/design-tokens/src/components/utrecht/form-field-description.tokens.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "utrecht": { - "form-field-description": { - "margin-block-end": { - "value": "0px" - }, - "margin-block-start": { - "value": "0px" - } - } - } -} diff --git a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json index 9b0673123f..981a46beaf 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json @@ -1,11 +1,33 @@ { "utrecht": { "form-field": { + "description": { + "margin-block-start": { "value": "0" }, + "margin-block-end": { "value": "{rvo.space.2xs}" } + }, + "label": { + "margin-block-start": { "value": "0" }, + "margin-block-end": { + "value": "0" + } + }, "margin-block-start": { - "value": "{rvo.space.2xs}" + "value": "0" }, "margin-block-end": { - "value": "{rvo.space.2xs}" + "value": "0" + }, + "display": { + "value": "grid" + }, + "column-gap": { + "value": "1ch" + }, + "grid-column": { + "value": "1 / -1" + }, + "row-gap": { + "value": "0" } } } diff --git a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json index 8c5a6e751a..104aab4477 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -12,6 +12,15 @@ "margin-block-end": { "value": "{rvo.space.2xs}" }, "margin-block-start": {}, "text-transform": {} + }, + "display": { + "value": "grid" + }, + "column-gap": { + "value": "1ch" + }, + "row-gap": { + "value": "{rvo.space.2xs}" } } } From b52f6cd3c97c58ae871762d2f7a32e33aef8026e Mon Sep 17 00:00:00 2001 From: egor Date: Tue, 29 Nov 2022 15:04:50 +0100 Subject: [PATCH 15/29] style: added sections to fieldsets --- .../demopages/nl-design-system/basiselementen/form.tsx | 10 +++++----- .../nl-design-system/common/patches/_fieldsets.scss | 4 ++-- .../src/components/utrecht/form-fieldset.tokens.json | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index fa1810a1d1..5c42721026 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -17,13 +17,13 @@ const Form = () => {
Gegevens zonnepanelen invullen -
+
Uw naam
-
+
Staat uw naam op de energierekening @@ -40,7 +40,7 @@ const Form = () => {
-
+
Staat uw naam op de factuur van de zonnepanelen @@ -57,7 +57,7 @@ const Form = () => {
-
+
Factuurdatum Vul de datum in die op de factuur van de zonnepanelen staat. @@ -74,7 +74,7 @@ const Form = () => { Vul een geldige datum in.
-
+
Adres zonnepanelen Vul het adres in waar de zonnepanelen zijn geplaatst. diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss index a351fc350a..631053d28c 100644 --- a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss +++ b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss @@ -13,8 +13,8 @@ padding-block: 32px; padding-inline: 32px; - .utrecht-form-fieldset { - background-color: var(--basiselementen-color-wit); + .utrecht-form-fieldset--section { + background-color: var(--utrecht-form-fieldset-section-background-color); padding-block: 32px; padding-inline: 32px; } diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json index 4a0a591f0a..282b3f0afd 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -7,8 +7,8 @@ "margin-block-end": { "value": "9px" }, "margin-block-start": { "value": "9px" }, "section": { - "background-color": { "value": "{basiselementen.color.grijs2}" }, - "color": { "value": "{basiselementen.color.zwart}" } + "background-color": { "value": "{basiselementen.color.wit}" }, + "color": {} }, "legend": { "color": {}, From bb33bf8fcf7c79df41f9a7909a21738037b79e22 Mon Sep 17 00:00:00 2001 From: egor Date: Tue, 29 Nov 2022 15:10:16 +0100 Subject: [PATCH 16/29] style: align content token --- .../common/basiselementen/_form-field.scss | 14 -------------- .../common/basiselementen/_form-layout.scss | 2 +- .../demopages/nl-design-system/common/style.scss | 1 - .../src/components/utrecht/form-field.tokens.json | 7 +++++-- .../components/utrecht/form-fieldset.tokens.json | 2 +- 5 files changed, 7 insertions(+), 19 deletions(-) delete mode 100644 documentation/demopages/nl-design-system/common/basiselementen/_form-field.scss diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-field.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-field.scss deleted file mode 100644 index aafc765be5..0000000000 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-field.scss +++ /dev/null @@ -1,14 +0,0 @@ -/* @FORM */ - -.basiselementen-theme { - .utrecht-form-label { - margin-block: 8px; - } - .utrecht-form-field { - /* Trigger calculation for additional margins - * This is a hack. MUST REMOVE!!! - * This requires base elements to have their own react components or use Utrecht components directly - */ - --utrecht-space-around: 1; - } -} diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index 0809883fbe..f424186012 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -19,7 +19,7 @@ font-weight: var(--utrecht-form-label-font-weight); } & > * { - align-content: space-between; + align-content: var(--utrecht-form-field-align-content); column-gap: var(--utrecht-form-field-column-gap); display: var(--utrecht-form-field-display); flex-direction: column; diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss index 808a8d56c6..3c4176468c 100644 --- a/documentation/demopages/nl-design-system/common/style.scss +++ b/documentation/demopages/nl-design-system/common/style.scss @@ -5,7 +5,6 @@ @use "rvo/table"; /* Basiselementen temp styling */ -@use "basiselementen/form-field"; @use "basiselementen/form-layout"; @use "basiselementen/root"; diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json index 3b2dd824ca..21cde699a0 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json @@ -2,7 +2,7 @@ "utrecht": { "form-field": { "description": { - "margin-block-start": { "value": "1ex" }, + "margin-block-start": { "value": "0" }, "margin-block-end": { "value": "1ex" } }, "invalid": { @@ -26,7 +26,10 @@ "value": "1 / -1" }, "row-gap": { - "value": "0" + "value": "0.5ex" + }, + "align-content": { + "value": "space-between" } } } diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json index 282b3f0afd..aef76fd28f 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -27,7 +27,7 @@ "value": "repeat(12, 1fr)" }, "row-gap": { - "value": "0" + "value": "2ex" } } } From 170704dcf889de01a1dae83528ccf925b799bfbb Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 09:05:33 +0100 Subject: [PATCH 17/29] fix: setting active and checked radio styles --- .../utrecht/custom-radio-button.tokens.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json b/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json index 31e0bbb565..b5c6dbaf6f 100644 --- a/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/custom-radio-button.tokens.json @@ -12,10 +12,10 @@ "size": { "value": "{rvo.size.md}" } }, "active": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} + "border-color": { "value": "{utrecht.form-input.border-color}" }, + "border-width": { "value": "{utrecht.form-input.border-width}" }, + "background-color": { "value": "{rvo.color.wit}" }, + "color": { "value": "{utrecht.form-input.color}" } }, "focus": { "border-color": {}, @@ -29,8 +29,8 @@ "color": {} }, "checked": { - "border-color": {}, - "border-width": {}, + "border-color": { "value": "{utrecht.form-input.border-color}" }, + "border-width": { "value": "{utrecht.form-input.border-width}" }, "background-color": {}, "color": {}, "active": { From 863549727461ee12139855c6b5b43ab30d3fd10d Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 09:45:46 +0100 Subject: [PATCH 18/29] fix: more row space for labels and inputs for rvo --- .../design-tokens/src/components/utrecht/form-field.tokens.json | 2 +- .../src/components/utrecht/form-fieldset.tokens.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json index 981a46beaf..bf6deeda38 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json @@ -27,7 +27,7 @@ "value": "1 / -1" }, "row-gap": { - "value": "0" + "value": "{rvo.space.xs}" } } } diff --git a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json index 104aab4477..f2b3ef1aad 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -20,7 +20,7 @@ "value": "1ch" }, "row-gap": { - "value": "{rvo.space.2xs}" + "value": "{rvo.space.xs}" } } } From 1a361bbea1e1efbd43457ab7dcbae28e2431c064 Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 11:38:04 +0100 Subject: [PATCH 19/29] feat: added section styling --- components/form-fieldset/css/template.tsx | 10 ++++++- .../nl-design-system/algemeen/Formulier.tsx | 6 ++--- .../common/basiselementen/_form-layout.scss | 12 +++++++++ .../common/patches/_fieldsets.scss | 27 ++++++++++--------- .../common/patches/_form-rvo-layout.scss | 22 --------------- .../nl-design-system/common/style.scss | 1 - .../components/utrecht/form-field.tokens.json | 4 +-- .../utrecht/form-fieldset.tokens.json | 12 ++++++--- .../components/utrecht/form-field.tokens.json | 5 +++- .../utrecht/form-fieldset.tokens.json | 8 ++++++ 10 files changed, 61 insertions(+), 46 deletions(-) delete mode 100644 documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss diff --git a/components/form-fieldset/css/template.tsx b/components/form-fieldset/css/template.tsx index baa4fa7402..12b453c33c 100644 --- a/components/form-fieldset/css/template.tsx +++ b/components/form-fieldset/css/template.tsx @@ -11,6 +11,7 @@ import './index.scss'; export interface IFieldsetProps { legend: string; disabled?: boolean; + section?: boolean; fields?: ITextInputFieldProps[]; hideFields?: boolean; } @@ -22,6 +23,9 @@ export const argTypes = { disabled: { control: 'boolean', }, + section: { + control: 'boolean', + }, fields: { type: { name: 'array', @@ -32,11 +36,15 @@ export const argTypes = { export const Fieldset: React.FC> = ({ legend = defaultArgs.legend, disabled = defaultArgs.disabled, + section = defaultArgs.section, fields, children, }: PropsWithChildren) => { return ( - + {legend && {legend}} {children || (fields && diff --git a/documentation/demopages/nl-design-system/algemeen/Formulier.tsx b/documentation/demopages/nl-design-system/algemeen/Formulier.tsx index 7bddaed390..bc1522841b 100644 --- a/documentation/demopages/nl-design-system/algemeen/Formulier.tsx +++ b/documentation/demopages/nl-design-system/algemeen/Formulier.tsx @@ -36,7 +36,7 @@ const Formulier = () => { Heading
-
+
{
-
+
{ >
-
+
diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss index f424186012..897c424046 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss @@ -8,10 +8,20 @@ margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); row-gap: var(--utrecht-form-fieldset-row-gap); + &--section { + background-color: var(--utrecht-form-fieldset-section-background-color); + color: var(--utrecht-form-fieldset-section-color); + padding-block-end: var(--utrecht-form-fieldset-section-padding-inline-end); + padding-block-start: var(--utrecht-form-fieldset-section-padding-inline-start); + padding-inline-end: var(--utrecht-form-fieldset-section-padding-inline-end); + padding-inline-start: var(--utrecht-form-fieldset-section-padding-inline-start); + } + &:last-of-type, &:first-of-type { margin-block-start: 0; } + &__title, &__legend--label { color: var(--utrecht-form-label-color); display: block; @@ -30,6 +40,8 @@ } .utrecht-form-field { + margin-block-end: var(--utrecht-form-field-margin-block-end, 0); + margin-block-start: var(--utrecht-form-field-margin-block-start, 0); min-width: var(--utrecht-form-field-min-width); &--xs { diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss index 631053d28c..b33aa6cc32 100644 --- a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss +++ b/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss @@ -1,10 +1,22 @@ +.rvo-theme { + .rvo-nl-demo-page { + .utrecht-form-field:not(:last-of-type) { + padding-block-end: var(--rvo-space-xs); + } + } +} + .basiselementen-theme { .rvo-nl-demo-page { background-color: var(--basiselementen-color-wit); padding-inline: 32px; - form, - .utrecht-form-fieldset { - background-color: var(--basiselementen-color-grijs1); + form { + background-color: var(--basiselementen-color-lichtblauw-tint2); + margin-block-start: 32px; + margin-inline: auto; + padding-block: 32px; + padding-inline: 32px; + width: min(768px, 100%); } } @@ -13,15 +25,6 @@ padding-block: 32px; padding-inline: 32px; - .utrecht-form-fieldset--section { - background-color: var(--utrecht-form-fieldset-section-background-color); - padding-block: 32px; - padding-inline: 32px; - } - - .utrecht-form-fieldset__legend { - font-size: var(--utrecht-form-label-font-size); - } form { margin-block-start: 32px; margin-inline: auto; diff --git a/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss deleted file mode 100644 index 3504345808..0000000000 --- a/documentation/demopages/nl-design-system/common/patches/_form-rvo-layout.scss +++ /dev/null @@ -1,22 +0,0 @@ -.basiselementen-demo-page { - .rvo-form-field, - .rvo-layout-column { - column-gap: var(--utrecht-form-field-column-gap); - display: var(--basiselementen-layout-form-display); - flex-direction: column; - grid-column: var(--utrecht-form-field-grid-column); - row-gap: var(--utrecht-form-field-row-gap); - } - .rvo-layout-column { - row-gap: var(--utrecht-form-field-column-gap); - } - .rvo-layout-row { - column-gap: var(--utrecht-form-field-column-gap); - } -} - -.rvo-nl-demo-page { - .rvo-form-field { - padding-block-end: var(--rvo-space-xl); - } -} diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss index 3c4176468c..8757d94152 100644 --- a/documentation/demopages/nl-design-system/common/style.scss +++ b/documentation/demopages/nl-design-system/common/style.scss @@ -15,4 +15,3 @@ @use "patches/link"; @use "patches/lists"; @use "patches/datalist"; -@use "patches/form-rvo-layout"; diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json index 21cde699a0..31cf7acc3e 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json @@ -13,8 +13,8 @@ "label": { "margin-block-end": {} }, - "margin-block-end": { "value": "9px" }, - "margin-block-start": { "value": "9px" }, + "margin-block-end": { "value": "0" }, + "margin-block-start": { "value": "0" }, "min-width": { "value": "100%" }, "display": { "value": "grid" diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json index aef76fd28f..6c0b2c907c 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -1,14 +1,15 @@ { "utrecht": { "form-fieldset": { - "display": { - "value": "grid" - }, "margin-block-end": { "value": "9px" }, "margin-block-start": { "value": "9px" }, "section": { "background-color": { "value": "{basiselementen.color.wit}" }, - "color": {} + "color": {}, + "padding-block-end": { "value": "36px" }, + "padding-block-start": { "value": "36px" }, + "padding-inline-end": { "value": "36px" }, + "padding-inline-start": { "value": "36px" } }, "legend": { "color": {}, @@ -20,6 +21,9 @@ "margin-block-start": { "value": "0" }, "text-transform": {} }, + "display": { + "value": "grid" + }, "column-gap": { "value": "1ch" }, diff --git a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json index bf6deeda38..7cd4f0c72a 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json @@ -12,7 +12,7 @@ } }, "margin-block-start": { - "value": "0" + "value": "{rvo.space.xs}" }, "margin-block-end": { "value": "0" @@ -28,6 +28,9 @@ }, "row-gap": { "value": "{rvo.space.xs}" + }, + "align-content": { + "value": "space-between" } } } diff --git a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json index f2b3ef1aad..e7bc835f6f 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -3,6 +3,14 @@ "form-fieldset": { "margin-block-end": {}, "margin-block-start": {}, + "section": { + "background-color": { "value": "{rvo.color.grijs1}" }, + "color": {}, + "padding-block-end": { "value": "{rvo.space.xl}" }, + "padding-block-start": { "value": "{rvo.space.xl}" }, + "padding-inline-end": { "value": "{rvo.space.xl}" }, + "padding-inline-start": { "value": "{rvo.space.xl}" } + }, "legend": { "color": {}, "font-family": {}, From 81b1e08ed8f0a30da6b5aeefce15aad536a04512 Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 11:39:38 +0100 Subject: [PATCH 20/29] feat: added aria-describedby attributes --- .../nl-design-system/basiselementen/form.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 5c42721026..68fd2bc333 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -27,6 +27,7 @@ const Form = () => { Staat uw naam op de energierekening + @@ -57,9 +58,14 @@ const Form = () => {
-
+
Factuurdatum - Vul de datum in die op de factuur van de zonnepanelen staat. + + Vul de datum in die op de factuur van de zonnepanelen staat. + Dag @@ -72,11 +78,18 @@ const Form = () => { Jaar - Vul een geldige datum in. + + Vul een geldige datum in. +
-
+
Adres zonnepanelen - Vul het adres in waar de zonnepanelen zijn geplaatst. + + Vul het adres in waar de zonnepanelen zijn geplaatst. + Straatnaam From b5a6aa2db89ccb95936c4d6f2b1024692208cd1a Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 11:56:37 +0100 Subject: [PATCH 21/29] fix: restructured patches and form styling --- .../_fieldsets.scss => basiselementen/_forms.scss} | 11 ----------- .../{basiselementen => patches}/_form-layout.scss | 4 +++- .../demopages/nl-design-system/common/rvo/_form.scss | 7 +++++++ .../demopages/nl-design-system/common/style.scss | 4 ++-- 4 files changed, 12 insertions(+), 14 deletions(-) rename documentation/demopages/nl-design-system/common/{patches/_fieldsets.scss => basiselementen/_forms.scss} (73%) rename documentation/demopages/nl-design-system/common/{basiselementen => patches}/_form-layout.scss (98%) diff --git a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss b/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss similarity index 73% rename from documentation/demopages/nl-design-system/common/patches/_fieldsets.scss rename to documentation/demopages/nl-design-system/common/basiselementen/_forms.scss index b33aa6cc32..e1b78928d5 100644 --- a/documentation/demopages/nl-design-system/common/patches/_fieldsets.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss @@ -1,11 +1,3 @@ -.rvo-theme { - .rvo-nl-demo-page { - .utrecht-form-field:not(:last-of-type) { - padding-block-end: var(--rvo-space-xs); - } - } -} - .basiselementen-theme { .rvo-nl-demo-page { background-color: var(--basiselementen-color-wit); @@ -34,6 +26,3 @@ } } } -.utrecht-form-fieldset--subtle .utrecht-form-label:not(.utrecht-form-fieldset__legend) { - font-weight: 400; -} diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss similarity index 98% rename from documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss rename to documentation/demopages/nl-design-system/common/patches/_form-layout.scss index 897c424046..58dec811f6 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss @@ -93,7 +93,9 @@ grid-column-start: 1; } } - + &--subtle .utrecht-form-label { + font-weight: 400; + } label:has(input) { align-items: center; column-gap: var(--utrecht-form-field-column-gap); diff --git a/documentation/demopages/nl-design-system/common/rvo/_form.scss b/documentation/demopages/nl-design-system/common/rvo/_form.scss index 0829a708c0..b6e2795b18 100644 --- a/documentation/demopages/nl-design-system/common/rvo/_form.scss +++ b/documentation/demopages/nl-design-system/common/rvo/_form.scss @@ -3,3 +3,10 @@ .rvo-form { min-width: 600px; } +.rvo-theme { + .rvo-nl-demo-page { + .utrecht-form-field:not(:last-of-type) { + padding-block-end: var(--rvo-space-xs); + } + } +} diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss index 8757d94152..efefe9d682 100644 --- a/documentation/demopages/nl-design-system/common/style.scss +++ b/documentation/demopages/nl-design-system/common/style.scss @@ -5,13 +5,13 @@ @use "rvo/table"; /* Basiselementen temp styling */ -@use "basiselementen/form-layout"; @use "basiselementen/root"; +@use "basiselementen/forms"; /* Component patches Patch files will be removed when components have been updated and released */ @use "patches/breadcrumbs"; -@use "patches/fieldsets"; @use "patches/link"; @use "patches/lists"; @use "patches/datalist"; +@use "patches/form-layout"; From eb574c400a0ac49a67ca8607e034ef49762c709c Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 13:27:02 +0100 Subject: [PATCH 22/29] style: nested fieldsets --- .../nl-design-system/basiselementen/form.tsx | 144 +++++++++--------- .../common/patches/_form-layout.scss | 8 +- .../nl-design-system/common/rvo/_form.scss | 7 + .../src/components/rvo/form-field.tokens.json | 9 -- .../components/rvo/form-fieldset.tokens.json | 23 --- 5 files changed, 83 insertions(+), 108 deletions(-) delete mode 100644 proprietary/design-tokens/src/components/rvo/form-field.tokens.json delete mode 100644 proprietary/design-tokens/src/components/rvo/form-fieldset.tokens.json diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 68fd2bc333..c1b7dadf05 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -18,28 +18,30 @@ const Form = () => { Gegevens zonnepanelen invullen
- - Uw naam - - -
-
- - Staat uw naam op de energierekening - +
+ + Uw naam + + +
+
+ + Staat uw naam op de energierekening + - - - - Ja - - - - - - Nee - - + + + + Ja + + + + + + Nee + + +
@@ -58,58 +60,54 @@ const Form = () => {
-
- Factuurdatum - - Vul de datum in die op de factuur van de zonnepanelen staat. - - - Dag - - - - Maand - - - - Jaar - - - - Vul een geldige datum in. - -
-
- Adres zonnepanelen - - Vul het adres in waar de zonnepanelen zijn geplaatst. - - - Straatnaam - - - - Huisnummer - - - - Toevoeging - - - - Postcode - - - - Plaatsnaam - - +
+
+ Factuurdatum + + Vul de datum in die op de factuur van de zonnepanelen staat. + + + Dag + + + + Maand + + + + Jaar + + + + Vul een geldige datum in. + +
+
+ Adres zonnepanelen + + Vul het adres in waar de zonnepanelen zijn geplaatst. + + + Straatnaam + + + + Huisnummer + + + + Toevoeging + + + + Postcode + + + + Plaatsnaam + + +
-
- - Staat uw naam op de factuur van de zonnepanelen - - - - - Ja - - - - - - Nee - - -
+
+
+ + Staat uw naam op de factuur van de zonnepanelen + + + + + Ja + + + + + + Nee + + +
+
Factuurdatum From 11d7a300b90b93aea1d06f4b064118c78650169b Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 13:36:23 +0100 Subject: [PATCH 24/29] style: fix for nested fieldsets in basiselementen --- .../src/components/utrecht/form-field.tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json index 31cf7acc3e..c090805a78 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json @@ -14,7 +14,7 @@ "margin-block-end": {} }, "margin-block-end": { "value": "0" }, - "margin-block-start": { "value": "0" }, + "margin-block-start": { "value": "1ex" }, "min-width": { "value": "100%" }, "display": { "value": "grid" From c44e7b99f7249b32192f74cd1d8b08e9b4e7e7f1 Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 17:57:48 +0100 Subject: [PATCH 25/29] style: using the new utrecht fieldset setup --- components/form-fieldset/css/template.tsx | 10 +- .../nl-design-system/algemeen/Formulier.tsx | 6 +- .../nl-design-system/basiselementen/form.tsx | 45 +++-- .../common/patches/_form-layout.scss | 176 +++++++++--------- package-lock.json | 12 +- .../components/utrecht/form-field.tokens.json | 2 +- .../utrecht/form-fieldset.tokens.json | 2 +- 7 files changed, 126 insertions(+), 127 deletions(-) diff --git a/components/form-fieldset/css/template.tsx b/components/form-fieldset/css/template.tsx index 12b453c33c..baa4fa7402 100644 --- a/components/form-fieldset/css/template.tsx +++ b/components/form-fieldset/css/template.tsx @@ -11,7 +11,6 @@ import './index.scss'; export interface IFieldsetProps { legend: string; disabled?: boolean; - section?: boolean; fields?: ITextInputFieldProps[]; hideFields?: boolean; } @@ -23,9 +22,6 @@ export const argTypes = { disabled: { control: 'boolean', }, - section: { - control: 'boolean', - }, fields: { type: { name: 'array', @@ -36,15 +32,11 @@ export const argTypes = { export const Fieldset: React.FC> = ({ legend = defaultArgs.legend, disabled = defaultArgs.disabled, - section = defaultArgs.section, fields, children, }: PropsWithChildren) => { return ( - + {legend && {legend}} {children || (fields && diff --git a/documentation/demopages/nl-design-system/algemeen/Formulier.tsx b/documentation/demopages/nl-design-system/algemeen/Formulier.tsx index bc1522841b..7bddaed390 100644 --- a/documentation/demopages/nl-design-system/algemeen/Formulier.tsx +++ b/documentation/demopages/nl-design-system/algemeen/Formulier.tsx @@ -36,7 +36,7 @@ const Formulier = () => { Heading
-
+
{
-
+
{ >
-
+
diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index 64bef37583..ecdf2cbe8b 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -17,7 +17,8 @@ const Form = () => {
Gegevens zonnepanelen invullen -
+
+ {' '}
Uw naam @@ -42,27 +43,25 @@ const Form = () => {
-
-
- - Staat uw naam op de factuur van de zonnepanelen - - - - - Ja - - - - - - Nee - - -
-
-
-
+
+ + Staat uw naam op de factuur van de zonnepanelen + + + + + Ja + + + + + + Nee + + +
+
+
Factuurdatum Vul de datum in die op de factuur van de zonnepanelen staat. @@ -83,7 +82,7 @@ const Form = () => { Vul een geldige datum in.
-
+
Adres zonnepanelen Vul het adres in waar de zonnepanelen zijn geplaatst. diff --git a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss index b64967ead6..df3a07e519 100644 --- a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss @@ -1,119 +1,127 @@ .basiselementen-demo-page, .rvo-nl-demo-page { - .utrecht-form-fieldset { + div.utrecht-form-fieldset { + background-color: var(--utrecht-form-fieldset-section-background-color); + color: var(--utrecht-form-fieldset-section-color); + display: block; + margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); + margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); + padding-block-end: var(--utrecht-form-fieldset-section-padding-block-end); + padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); + padding-inline-end: var(--utrecht-form-fieldset-section-padding-inline-end); + padding-inline-start: var(--utrecht-form-fieldset-section-padding-inline-start); + & > * > div.utrecht-form-fieldset { + margin-block-end: 0; + margin-block-start: 0; + padding-block-end: 0; + padding-block-start: 0; + padding-inline-end: 0; + padding-inline-start: 0; + } + & > * > div.utrecht-form-fieldset:not(:first-of-type) { + padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); + } + &--subtle .utrecht-form-label { + font-weight: 400; + } + } + fieldset.utrecht-form-fieldset, + .utrecht-form-fieldset__fieldset { column-gap: var(--utrecht-form-fieldset-column-gap); display: var(--utrecht-form-fieldset-display); flex-direction: column; grid-template-columns: var(--utrecht-form-fieldset-grid-template-columns); - margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); - margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); row-gap: var(--utrecht-form-fieldset-row-gap); - &--section { - background-color: var(--utrecht-form-fieldset-section-background-color); - color: var(--utrecht-form-fieldset-section-color); - padding-block-end: var(--utrecht-form-fieldset-section-padding-block-end); - padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); - padding-inline-end: var(--utrecht-form-fieldset-section-padding-inline-end); - padding-inline-start: var(--utrecht-form-fieldset-section-padding-inline-start); - } - &:last-of-type, &:first-of-type { margin-block-start: 0; } - &__title, - &__legend--label { - color: var(--utrecht-form-label-color); - display: block; - font-size: var(--utrecht-form-label-font-size); - font-weight: var(--utrecht-form-label-font-weight); - } & > * { align-content: var(--utrecht-form-field-align-content); column-gap: var(--utrecht-form-field-column-gap); display: var(--utrecht-form-field-display); flex-direction: column; grid-column: var(--utrecht-form-field-grid-column); - margin-block-end: 0; - margin-block-start: 0; row-gap: var(--utrecht-form-field-row-gap); } - & + .utrecht-form-fieldset { - margin-block-start: 2ex; + } + .utrecht-form-fieldset { + &__title, + &__legend--label { + color: var(--utrecht-form-label-color); + display: block; + font-size: var(--utrecht-form-label-font-size); + font-weight: var(--utrecht-form-label-font-weight); + margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end, 0); + margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start, 0); } - .utrecht-form-field { - margin-block-end: var(--utrecht-form-field-margin-block-end, 0); - margin-block-start: var(--utrecht-form-field-margin-block-start, 0); - min-width: var(--utrecht-form-field-min-width); - - &--xs { - --utrecht-form-field-min-width: 7ch; - --utrecht-form-field-grid-column: auto / span 1; - } - &--sm { - --utrecht-form-field-min-width: 12ch; - --utrecht-form-field-grid-column: auto / span 2; - } - - &--md { - --utrecht-form-field-min-width: 20ch; - --utrecht-form-field-grid-column: auto / span 4; - } - - &--lg { - --utrecht-form-field-min-width: 35ch; - --utrecht-form-field-grid-column: auto / span 8; - } - - &--xl { - --utrecht-form-field-min-width: 50ch; - --utrecht-form-field-grid-column: auto / span 10; - } + label:has(input) { + align-items: center; + column-gap: var(--utrecht-form-field-column-gap); + display: flex; + font-weight: 400; + } + } + .utrecht-form-field { + margin-block-end: var(--utrecht-form-field-margin-block-end, 0); + margin-block-start: var(--utrecht-form-field-margin-block-start, 0); + min-width: var(--utrecht-form-field-min-width); - &--third { - --utrecht-form-field-min-width: 20ch; - --utrecht-form-field-grid-column: auto / span 4; - } + &--xs { + --utrecht-form-field-min-width: 7ch; + --utrecht-form-field-grid-column: auto / span 1; + } - &--quarter { - --utrecht-form-field-min-width: 15ch; - --utrecht-form-field-grid-column: auto / span 3; - } + &--sm { + --utrecht-form-field-min-width: 12ch; + --utrecht-form-field-grid-column: auto / span 2; + } - &--half { - --utrecht-form-field-min-width: 30ch; - --utrecht-form-field-grid-column: auto / span 6; - } + &--md { + --utrecht-form-field-min-width: 20ch; + --utrecht-form-field-grid-column: auto / span 4; + } - &--full { - --utrecht-form-field-min-width: 70ch; - --utrecht-form-field-grid-column: 1 / -1; - } + &--lg { + --utrecht-form-field-min-width: 35ch; + --utrecht-form-field-grid-column: auto / span 8; + } - &--start { - grid-column-start: 1; - } + &--xl { + --utrecht-form-field-min-width: 50ch; + --utrecht-form-field-grid-column: auto / span 10; } - &--subtle .utrecht-form-label { - font-weight: 400; + + &--third { + --utrecht-form-field-min-width: 20ch; + --utrecht-form-field-grid-column: auto / span 4; } - label:has(input) { - align-items: center; - column-gap: var(--utrecht-form-field-column-gap); - display: flex; - font-weight: 400; + + &--quarter { + --utrecht-form-field-min-width: 15ch; + --utrecht-form-field-grid-column: auto / span 3; } - .utrecht-form-field-description--invalid { - color: var(--basiselementen-color-rood); + &--half { + --utrecht-form-field-min-width: 30ch; + --utrecht-form-field-grid-column: auto / span 6; } - .utrecht-form-field-description { - margin-block-end: var(--utrecht-form-field-description-margin-block-end); - margin-block-start: var(--utrecht-form-field-description-margin-block-start); + + &--full { + --utrecht-form-field-min-width: 70ch; + --utrecht-form-field-grid-column: 1 / -1; } - .utrecht-form-field-description:has(+ .utrecht-form-field) { - margin-block-end: 2ex; + + &--start { + grid-column-start: 1; } } + .utrecht-form-field-description--invalid { + color: var(--basiselementen-color-rood); + } + .utrecht-form-field-description { + margin-block-end: var(--utrecht-form-field-description-margin-block-end); + margin-block-start: var(--utrecht-form-field-description-margin-block-start); + } } diff --git a/package-lock.json b/package-lock.json index 631a953e35..74e55024ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50467,7 +50467,7 @@ }, "packages/components-react": { "name": "@nl-rvo/components-react", - "version": "1.0.0-alpha.48", + "version": "1.0.0-alpha.51", "license": "EUPL-1.2", "devDependencies": { "@babel/core": "7.18.10", @@ -50682,7 +50682,7 @@ }, "packages/web-components-css": { "name": "@nl-rvo/component-library-css", - "version": "1.0.0-alpha.235", + "version": "1.0.0-alpha.238", "dev": true, "license": "EUPL-1.2", "devDependencies": { @@ -50783,7 +50783,7 @@ }, "proprietary/assets": { "name": "@nl-rvo/assets", - "version": "1.0.0-alpha.170", + "version": "1.0.0-alpha.173", "license": "SEE LICENSE IN LICENSE.md", "devDependencies": { "sass": "^1.53.0" @@ -50791,7 +50791,7 @@ }, "proprietary/basiselementen-design-tokens": { "name": "@nl-rvo/basiselementen-design-tokens", - "version": "1.0.0-alpha.32", + "version": "1.0.0-alpha.35", "license": "SEE LICENSE IN LICENSE.md", "devDependencies": { "chokidar-cli": "3.0.0", @@ -50802,7 +50802,7 @@ }, "proprietary/design-tokens": { "name": "@nl-rvo/design-tokens", - "version": "1.0.0-alpha.178", + "version": "1.0.0-alpha.181", "license": "SEE LICENSE IN LICENSE.md", "devDependencies": { "chokidar-cli": "3.0.0", @@ -50813,7 +50813,7 @@ }, "uxpin-merge": { "name": "@nl-rvo/uxpin-merge", - "version": "1.0.1-alpha.2", + "version": "1.0.1-alpha.3", "license": "EUPL-1.2", "dependencies": { "@emotion/react": "11.9.3", diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json index c090805a78..31cf7acc3e 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json @@ -14,7 +14,7 @@ "margin-block-end": {} }, "margin-block-end": { "value": "0" }, - "margin-block-start": { "value": "1ex" }, + "margin-block-start": { "value": "0" }, "min-width": { "value": "100%" }, "display": { "value": "grid" diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json index 6c0b2c907c..40867181a2 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -14,7 +14,7 @@ "legend": { "color": {}, "font-family": {}, - "font-size": { "value": "1.25rem" }, + "font-size": {}, "font-weight": { "value": "{basiselementen.font-weight.bold}" }, "line-height": { "value": "150%" }, "margin-block-end": { "value": "0" }, From 1a4da95e2e1dc3d056430eba58d4cd8f6adf5b42 Mon Sep 17 00:00:00 2001 From: egor Date: Wed, 30 Nov 2022 18:04:59 +0100 Subject: [PATCH 26/29] fix(style): based on the new utrecht fieldset setup --- .../demopages/nl-design-system/basiselementen/form.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index ecdf2cbe8b..be4e41e1f9 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -12,6 +12,11 @@ import { Textbox, } from '@utrecht/component-library-react'; +/* load from local: + * Version required: 1.0.0-alpha.190 + * '../../../../../utrecht/packages/component-library-react' + */ + const Form = () => { return (
From 7c5fa475ba08fab434752cf74a04469a7230136d Mon Sep 17 00:00:00 2001 From: egor Date: Thu, 1 Dec 2022 09:21:43 +0100 Subject: [PATCH 27/29] style: responsive layout --- .../nl-design-system/basiselementen/form.tsx | 4 +- .../common/basiselementen/_forms.scss | 26 +++++++- .../common/patches/_form-layout.scss | 48 +------------- .../common/patches/_layout-sizes.scss | 63 +++++++++++++++++++ .../nl-design-system/common/style.scss | 1 + 5 files changed, 91 insertions(+), 51 deletions(-) create mode 100644 documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index be4e41e1f9..c69271e633 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -104,11 +104,11 @@ const Form = () => { Toevoeging - + Postcode - + Plaatsnaam diff --git a/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss b/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss index e1b78928d5..bf16bed243 100644 --- a/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss +++ b/documentation/demopages/nl-design-system/common/basiselementen/_forms.scss @@ -14,15 +14,35 @@ .basiselementen-demo-page { background-color: var(--basiselementen-color-lichtblauw-tint2); - padding-block: 32px; - padding-inline: 32px; + padding-block: 9px; + padding-inline: 9px; form { margin-block-start: 32px; margin-inline: auto; + padding-block: 9px; + padding-inline: 9px; + } + .utrecht-form-fieldset { + padding-block: 9px; + padding-inline: 9px; + } + @media (min-width: 768px) { + form { + padding-block: 36px; + padding-inline: 36px; + } + .utrecht-form-fieldset { + padding-block: 36px; + padding-inline: 36px; + } + } + } + + @media (min-width: 768px) { + .basiselementen-demo-page { padding-block: 32px; padding-inline: 32px; - width: min(768px, 100%); } } } diff --git a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss index df3a07e519..c3344e1247 100644 --- a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss @@ -43,6 +43,7 @@ flex-direction: column; grid-column: var(--utrecht-form-field-grid-column); row-gap: var(--utrecht-form-field-row-gap); + width: unset; } } .utrecht-form-fieldset { @@ -66,52 +67,7 @@ .utrecht-form-field { margin-block-end: var(--utrecht-form-field-margin-block-end, 0); margin-block-start: var(--utrecht-form-field-margin-block-start, 0); - min-width: var(--utrecht-form-field-min-width); - - &--xs { - --utrecht-form-field-min-width: 7ch; - --utrecht-form-field-grid-column: auto / span 1; - } - - &--sm { - --utrecht-form-field-min-width: 12ch; - --utrecht-form-field-grid-column: auto / span 2; - } - - &--md { - --utrecht-form-field-min-width: 20ch; - --utrecht-form-field-grid-column: auto / span 4; - } - - &--lg { - --utrecht-form-field-min-width: 35ch; - --utrecht-form-field-grid-column: auto / span 8; - } - - &--xl { - --utrecht-form-field-min-width: 50ch; - --utrecht-form-field-grid-column: auto / span 10; - } - - &--third { - --utrecht-form-field-min-width: 20ch; - --utrecht-form-field-grid-column: auto / span 4; - } - - &--quarter { - --utrecht-form-field-min-width: 15ch; - --utrecht-form-field-grid-column: auto / span 3; - } - - &--half { - --utrecht-form-field-min-width: 30ch; - --utrecht-form-field-grid-column: auto / span 6; - } - - &--full { - --utrecht-form-field-min-width: 70ch; - --utrecht-form-field-grid-column: 1 / -1; - } + min-width: var(--utrecht-form-field-min-width, unset); &--start { grid-column-start: 1; diff --git a/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss b/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss new file mode 100644 index 0000000000..2d5548bcf9 --- /dev/null +++ b/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss @@ -0,0 +1,63 @@ +.utrecht-form-field { + &--full-1 { + --utrecht-form-field-grid-column: auto / span 11; + } + &--third { + --utrecht-form-field-min-width: 20ch; + --utrecht-form-field-grid-column: auto / span 4; + } + &--quarter { + --utrecht-form-field-min-width: 12ch; + --utrecht-form-field-grid-column: auto / span 3; + } + &--half { + --utrecht-form-field-grid-column: auto / span 6; + } + &--full { + --utrecht-form-field-grid-column: 1 / -1; + } +} +@media (min-width: 768px) { + .utrecht-form-field { + &--xs { + --utrecht-form-field-min-width: 7ch; + --utrecht-form-field-grid-column: auto / span 1; + } + &--sm { + --utrecht-form-field-min-width: 12ch; + --utrecht-form-field-grid-column: auto / span 2; + } + &--md { + --utrecht-form-field-min-width: 20ch; + --utrecht-form-field-grid-column: auto / span 4; + } + &--lg { + --utrecht-form-field-grid-column: auto / span 8; + } + &--xl { + --utrecht-form-field-grid-column: auto / span 10; + } + } +} +@media not all and (min-width: 768px) { + .utrecht-form-field { + &--xs { + --utrecht-form-field-min-width: 7ch; + --utrecht-form-field-grid-column: auto / span 2; + } + &--sm { + --utrecht-form-field-min-width: 12ch; + --utrecht-form-field-grid-column: auto / span 3; + } + &--md { + --utrecht-form-field-min-width: 20ch; + --utrecht-form-field-grid-column: auto / span 6; + } + &--lg { + --utrecht-form-field-grid-column: 1 / -1; + } + &--xl { + --utrecht-form-field-grid-column: 1 / -1; + } + } +} diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss index efefe9d682..743df56851 100644 --- a/documentation/demopages/nl-design-system/common/style.scss +++ b/documentation/demopages/nl-design-system/common/style.scss @@ -15,3 +15,4 @@ @use "patches/lists"; @use "patches/datalist"; @use "patches/form-layout"; +@use "patches/layout-sizes"; From 6aededb19198cf7d32a836bb3e311588f87da2b1 Mon Sep 17 00:00:00 2001 From: egor Date: Thu, 1 Dec 2022 15:14:37 +0100 Subject: [PATCH 28/29] fix: regression with new fieldsets --- components/form-field/css/index.scss | 6 +- components/form-field/css/template.tsx | 12 +- components/form-fieldset/css/template.tsx | 3 +- documentation/demopages/algemeen/Filters.tsx | 423 +++++++++--------- .../demopages/algemeen/SearchInNav.tsx | 49 +- documentation/demopages/common/style.scss | 13 +- .../nl-design-system/basiselementen/form.tsx | 9 +- .../common/patches/_form-layout.scss | 146 +++--- .../common/patches/_layout-sizes.scss | 4 + .../nl-design-system/common/rvo/_form.scss | 4 + .../nl-design-system/common/style.scss | 2 +- 11 files changed, 347 insertions(+), 324 deletions(-) diff --git a/components/form-field/css/index.scss b/components/form-field/css/index.scss index a4f026ed62..bd29f3eb9e 100644 --- a/components/form-field/css/index.scss +++ b/components/form-field/css/index.scss @@ -3,6 +3,10 @@ * Copyright (c) 2021 Community for NL Design System */ +.rvo-form-field { + clear: both; +} + .rvo-form-field__label-text { - font-weight: var(--rvo-form-field-label-font-weight); + font-weight: var(--utrecht-form-label-font-weight); } diff --git a/components/form-field/css/template.tsx b/components/form-field/css/template.tsx index 5dc24cc0fd..a288154f79 100644 --- a/components/form-field/css/template.tsx +++ b/components/form-field/css/template.tsx @@ -77,13 +77,11 @@ export const Field: React.FC> = ({ } return ( - -
- {label} - {helperTextMarkup} - {errorText && } - {warningText && } -
+ + {label} + {helperTextMarkup} + {errorText && } + {warningText && } {children} ); diff --git a/components/form-fieldset/css/template.tsx b/components/form-fieldset/css/template.tsx index baa4fa7402..1890f003c7 100644 --- a/components/form-fieldset/css/template.tsx +++ b/components/form-fieldset/css/template.tsx @@ -3,7 +3,6 @@ * Copyright (c) 2021 Community for NL Design System */ import { FieldsetLegend, Fieldset as FieldsetUtrecht } from '@utrecht/component-library-react'; -import clsx from 'clsx'; import React, { PropsWithChildren } from 'react'; import { ITextInputFieldProps, TextInputField } from '../../form-field-textinput/css/template'; import { defaultArgs } from './defaultArgs'; @@ -36,7 +35,7 @@ export const Fieldset: React.FC> = ({ children, }: PropsWithChildren) => { return ( - + {legend && {legend}} {children || (fields && diff --git a/documentation/demopages/algemeen/Filters.tsx b/documentation/demopages/algemeen/Filters.tsx index d39473a2ca..91339dcbec 100644 --- a/documentation/demopages/algemeen/Filters.tsx +++ b/documentation/demopages/algemeen/Filters.tsx @@ -1,6 +1,4 @@ -// import { Button } from '@nl-rvo/components/button/css/template'; import { TextInputField } from '@nl-rvo/components/form-field-textinput/css/template'; -import { Fieldset } from '@nl-rvo/components/form-fieldset/css/template'; import { Header } from '@nl-rvo/components/header/css/template'; import { Heading } from '@nl-rvo/components/heading/css/template'; import { Icon } from '@nl-rvo/components/icon/css/template'; @@ -9,6 +7,7 @@ import { Link } from '@nl-rvo/components/link/css/template'; import { MaxWidthLayout } from '@nl-rvo/components/max-width-layout/css/template'; import { MenuBar } from '@nl-rvo/components/menubar/css/template'; import '../common/style.scss'; +import { Fieldset, FormField } from '@utrecht/component-library-react'; const Filters = () => { return ( @@ -46,233 +45,242 @@ const Filters = () => {
-
- - +
+ + -
- -
- -
-
- Maak een keuze -
-
-
- -
- - - + + + +
+ +
-
-
-
- -
- -
-
- Maak een keuze -
+
+
+ Maak een keuze
-
-
- - - +
+ +
+ + + + +
+
+ + +
+ +
-
-
-
- -
- -
-
- Maak een keuze -
+
+
+ Maak een keuze
-
-
+
+ +
+ + + + +
+
+ + +
+ +
-
-
-
- -
- -
-
- Maak een keuze -
+
+
+ Maak een keuze
-
-
- +
+ +
+ +
+
+ + +
+ +
+
+
+ Maak een keuze +
+
-
- - + +
+ + +
+
+
+
@@ -334,6 +342,7 @@ const Filters = () => {
{''} diff --git a/documentation/demopages/algemeen/SearchInNav.tsx b/documentation/demopages/algemeen/SearchInNav.tsx index 42012fdc78..ee843edaaa 100644 --- a/documentation/demopages/algemeen/SearchInNav.tsx +++ b/documentation/demopages/algemeen/SearchInNav.tsx @@ -1,12 +1,11 @@ import { Button } from '@nl-rvo/components/button/css/template'; import { TextInputField } from '@nl-rvo/components/form-field-textinput/css/template'; -import { Fieldset } from '@nl-rvo/components/form-fieldset/css/template'; import { Header } from '@nl-rvo/components/header/css/template'; import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template'; import { MaxWidthLayout } from '@nl-rvo/components/max-width-layout/css/template'; import { MenuBar } from '@nl-rvo/components/menubar/css/template'; import '../common/style.scss'; - +import { Fieldset, FormField } from '@utrecht/component-library-react'; const SearchInNav = () => { return (
@@ -25,27 +24,31 @@ const SearchInNav = () => { />
-
-
- -
- - -
- -
-
+
+ +
+
+ + + + + + +
+
+ +
diff --git a/documentation/demopages/common/style.scss b/documentation/demopages/common/style.scss index ee1c46e732..635e761bb5 100644 --- a/documentation/demopages/common/style.scss +++ b/documentation/demopages/common/style.scss @@ -440,7 +440,7 @@ line-height: var(--rvo-line-height-md); margin-inline-end: auto; margin-inline-start: auto; - max-width: 580; + max-width: 580px; padding-inline-end: var(--rvo-space-xl); padding-inline-start: var(--rvo-space-xl); } @@ -689,6 +689,13 @@ /* @SEARCH IN NAV */ + /* stylelint-disable */ + .search-form { + background-color: var(--rvo-color-grijs1); + padding-block-end: var(--rvo-space-xl); + } + /* stylelint-enable */ + .rvo-topnav__link--search-active { background-color: var(--rvo-color-grijs1); color: var(--rvo-color-grijs7); @@ -713,7 +720,9 @@ padding-block-end: 0.6rem; padding-block-start: 0.75rem; } - + .rvo-inline-form .utrecht-form-field { + align-content: unset; + } .rvo-inline-form .utrecht-button { align-self: flex-end; } diff --git a/documentation/demopages/nl-design-system/basiselementen/form.tsx b/documentation/demopages/nl-design-system/basiselementen/form.tsx index c69271e633..b914dcb99f 100644 --- a/documentation/demopages/nl-design-system/basiselementen/form.tsx +++ b/documentation/demopages/nl-design-system/basiselementen/form.tsx @@ -12,11 +12,6 @@ import { Textbox, } from '@utrecht/component-library-react'; -/* load from local: - * Version required: 1.0.0-alpha.190 - * '../../../../../utrecht/packages/component-library-react' - */ - const Form = () => { return (
@@ -24,13 +19,13 @@ const Form = () => {
{' '} -
+
Uw naam
-
+
Staat uw naam op de energierekening diff --git a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss index c3344e1247..8119bb521f 100644 --- a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss @@ -1,83 +1,81 @@ -.basiselementen-demo-page, -.rvo-nl-demo-page { - div.utrecht-form-fieldset { - background-color: var(--utrecht-form-fieldset-section-background-color); - color: var(--utrecht-form-fieldset-section-color); - display: block; - margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); - margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); - padding-block-end: var(--utrecht-form-fieldset-section-padding-block-end); +div.utrecht-form-fieldset { + background-color: var(--utrecht-form-fieldset-section-background-color); + color: var(--utrecht-form-fieldset-section-color); + display: block; + margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); + margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); + padding-block-end: var(--utrecht-form-fieldset-section-padding-block-end); + padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); + padding-inline-end: var(--utrecht-form-fieldset-section-padding-inline-end); + padding-inline-start: var(--utrecht-form-fieldset-section-padding-inline-start); + & > * > div.utrecht-form-fieldset { + margin-block-end: 0; + margin-block-start: 0; + padding-block-end: 0; + padding-block-start: 0; + padding-inline-end: 0; + padding-inline-start: 0; + } + & > * > div.utrecht-form-fieldset:not(:first-of-type) { padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); - padding-inline-end: var(--utrecht-form-fieldset-section-padding-inline-end); - padding-inline-start: var(--utrecht-form-fieldset-section-padding-inline-start); - & > * > div.utrecht-form-fieldset { - margin-block-end: 0; - margin-block-start: 0; - padding-block-end: 0; - padding-block-start: 0; - padding-inline-end: 0; - padding-inline-start: 0; - } - & > * > div.utrecht-form-fieldset:not(:first-of-type) { - padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); - } - &--subtle .utrecht-form-label { - font-weight: 400; - } } - fieldset.utrecht-form-fieldset, - .utrecht-form-fieldset__fieldset { - column-gap: var(--utrecht-form-fieldset-column-gap); - display: var(--utrecht-form-fieldset-display); + &--subtle .utrecht-form-label { + font-weight: 400; + } +} +fieldset.utrecht-form-fieldset, +.utrecht-form-fieldset__fieldset { + column-gap: var(--utrecht-form-fieldset-column-gap); + display: var(--utrecht-form-fieldset-display); + flex-direction: column; + grid-template-columns: var(--utrecht-form-fieldset-grid-template-columns); + row-gap: var(--utrecht-form-fieldset-row-gap); + &:last-of-type, + &:first-of-type { + margin-block-start: 0; + } + & > * { + align-content: var(--utrecht-form-field-align-content); + column-gap: var(--utrecht-form-field-column-gap); + display: var(--utrecht-form-field-display); flex-direction: column; - grid-template-columns: var(--utrecht-form-fieldset-grid-template-columns); - row-gap: var(--utrecht-form-fieldset-row-gap); - &:last-of-type, - &:first-of-type { - margin-block-start: 0; - } - & > * { - align-content: var(--utrecht-form-field-align-content); - column-gap: var(--utrecht-form-field-column-gap); - display: var(--utrecht-form-field-display); - flex-direction: column; - grid-column: var(--utrecht-form-field-grid-column); - row-gap: var(--utrecht-form-field-row-gap); - width: unset; - } + grid-column: var(--utrecht-form-field-grid-column); + row-gap: var(--utrecht-form-field-row-gap); + width: unset; } - .utrecht-form-fieldset { - &__title, - &__legend--label { - color: var(--utrecht-form-label-color); - display: block; - font-size: var(--utrecht-form-label-font-size); - font-weight: var(--utrecht-form-label-font-weight); - margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end, 0); - margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start, 0); - } - - label:has(input) { - align-items: center; - column-gap: var(--utrecht-form-field-column-gap); - display: flex; - font-weight: 400; - } +} +.utrecht-form-fieldset { + clear: both; + &__legend--label { + color: var(--utrecht-form-label-color); + display: block; + float: none; + font-size: var(--utrecht-form-label-font-size); + font-weight: var(--utrecht-form-label-font-weight); + margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end, 0); + margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start, 0); } - .utrecht-form-field { - margin-block-end: var(--utrecht-form-field-margin-block-end, 0); - margin-block-start: var(--utrecht-form-field-margin-block-start, 0); - min-width: var(--utrecht-form-field-min-width, unset); - &--start { - grid-column-start: 1; - } - } - .utrecht-form-field-description--invalid { - color: var(--basiselementen-color-rood); + label:has(input) { + align-items: center; + column-gap: var(--utrecht-form-field-column-gap); + display: flex; } - .utrecht-form-field-description { - margin-block-end: var(--utrecht-form-field-description-margin-block-end); - margin-block-start: var(--utrecht-form-field-description-margin-block-start); +} +.utrecht-form-field { + clear: both; + margin-block-end: var(--utrecht-form-field-margin-block-end, 0); + margin-block-start: var(--utrecht-form-field-margin-block-start, 0); + min-width: var(--utrecht-form-field-min-width, unset); + + &--start { + grid-column-start: 1 !important; } } +.utrecht-form-field-description--invalid { + color: var(--basiselementen-color-rood); +} +.utrecht-form-field-description { + margin-block-end: var(--utrecht-form-field-description-margin-block-end); + margin-block-start: var(--utrecht-form-field-description-margin-block-start); +} diff --git a/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss b/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss index 2d5548bcf9..9382c366da 100644 --- a/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss +++ b/documentation/demopages/nl-design-system/common/patches/_layout-sizes.scss @@ -59,5 +59,9 @@ &--xl { --utrecht-form-field-grid-column: 1 / -1; } + &--quarter { + --utrecht-form-field-min-width: 12ch; + --utrecht-form-field-grid-column: auto / span 6; + } } } diff --git a/documentation/demopages/nl-design-system/common/rvo/_form.scss b/documentation/demopages/nl-design-system/common/rvo/_form.scss index 078f6be33d..181ad00cf0 100644 --- a/documentation/demopages/nl-design-system/common/rvo/_form.scss +++ b/documentation/demopages/nl-design-system/common/rvo/_form.scss @@ -2,6 +2,10 @@ .rvo-form { min-width: 600px; + .rvo-form-field { + clear: both; + } + .utrecht-form-fieldset { background-color: var(--rvo-color-grijs1); padding-block-end: calc(var(--rvo-space-xs) + var(--rvo-space-md)); diff --git a/documentation/demopages/nl-design-system/common/style.scss b/documentation/demopages/nl-design-system/common/style.scss index 743df56851..4fd1fae4ec 100644 --- a/documentation/demopages/nl-design-system/common/style.scss +++ b/documentation/demopages/nl-design-system/common/style.scss @@ -14,5 +14,5 @@ @use "patches/link"; @use "patches/lists"; @use "patches/datalist"; -@use "patches/form-layout"; @use "patches/layout-sizes"; +@use "patches/form-layout"; From 34821ae8c18a7a6e11328045e46306ec748f29f1 Mon Sep 17 00:00:00 2001 From: egor Date: Fri, 2 Dec 2022 17:51:09 +0100 Subject: [PATCH 29/29] fix: reinstated explicit grid modifier class --- components/form-field/css/template.tsx | 12 ++- components/form-fieldset/css/template.tsx | 3 +- documentation/demopages/algemeen/Filters.tsx | 2 +- .../demopages/algemeen/SearchInNav.tsx | 2 +- documentation/demopages/common/style.scss | 4 +- .../common/patches/_form-layout.scss | 95 +++++++++++-------- package-lock.json | 50 +++++++++- package.json | 2 +- .../components/utrecht/form-field.tokens.json | 17 +--- .../utrecht/form-fieldset.tokens.json | 27 ++---- .../components/utrecht/form-field.tokens.json | 15 --- .../utrecht/form-fieldset.tokens.json | 9 -- 12 files changed, 122 insertions(+), 116 deletions(-) diff --git a/components/form-field/css/template.tsx b/components/form-field/css/template.tsx index a288154f79..5dc24cc0fd 100644 --- a/components/form-field/css/template.tsx +++ b/components/form-field/css/template.tsx @@ -77,11 +77,13 @@ export const Field: React.FC> = ({ } return ( - - {label} - {helperTextMarkup} - {errorText && } - {warningText && } + +
+ {label} + {helperTextMarkup} + {errorText && } + {warningText && } +
{children} ); diff --git a/components/form-fieldset/css/template.tsx b/components/form-fieldset/css/template.tsx index 1890f003c7..baa4fa7402 100644 --- a/components/form-fieldset/css/template.tsx +++ b/components/form-fieldset/css/template.tsx @@ -3,6 +3,7 @@ * Copyright (c) 2021 Community for NL Design System */ import { FieldsetLegend, Fieldset as FieldsetUtrecht } from '@utrecht/component-library-react'; +import clsx from 'clsx'; import React, { PropsWithChildren } from 'react'; import { ITextInputFieldProps, TextInputField } from '../../form-field-textinput/css/template'; import { defaultArgs } from './defaultArgs'; @@ -35,7 +36,7 @@ export const Fieldset: React.FC> = ({ children, }: PropsWithChildren) => { return ( - + {legend && {legend}} {children || (fields && diff --git a/documentation/demopages/algemeen/Filters.tsx b/documentation/demopages/algemeen/Filters.tsx index 91339dcbec..88c892bdfc 100644 --- a/documentation/demopages/algemeen/Filters.tsx +++ b/documentation/demopages/algemeen/Filters.tsx @@ -45,7 +45,7 @@ const Filters = () => {
-
+
diff --git a/documentation/demopages/algemeen/SearchInNav.tsx b/documentation/demopages/algemeen/SearchInNav.tsx index ee843edaaa..28041934ce 100644 --- a/documentation/demopages/algemeen/SearchInNav.tsx +++ b/documentation/demopages/algemeen/SearchInNav.tsx @@ -27,7 +27,7 @@ const SearchInNav = () => {
-
+
diff --git a/documentation/demopages/common/style.scss b/documentation/demopages/common/style.scss index 635e761bb5..007a95007f 100644 --- a/documentation/demopages/common/style.scss +++ b/documentation/demopages/common/style.scss @@ -720,9 +720,7 @@ padding-block-end: 0.6rem; padding-block-start: 0.75rem; } - .rvo-inline-form .utrecht-form-field { - align-content: unset; - } + .rvo-inline-form .utrecht-button { align-self: flex-end; } diff --git a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss index 8119bb521f..ce877f55c3 100644 --- a/documentation/demopages/nl-design-system/common/patches/_form-layout.scss +++ b/documentation/demopages/nl-design-system/common/patches/_form-layout.scss @@ -1,51 +1,60 @@ -div.utrecht-form-fieldset { - background-color: var(--utrecht-form-fieldset-section-background-color); - color: var(--utrecht-form-fieldset-section-color); - display: block; - margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); - margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); - padding-block-end: var(--utrecht-form-fieldset-section-padding-block-end); - padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); - padding-inline-end: var(--utrecht-form-fieldset-section-padding-inline-end); - padding-inline-start: var(--utrecht-form-fieldset-section-padding-inline-start); - & > * > div.utrecht-form-fieldset { - margin-block-end: 0; - margin-block-start: 0; - padding-block-end: 0; - padding-block-start: 0; - padding-inline-end: 0; - padding-inline-start: 0; - } - & > * > div.utrecht-form-fieldset:not(:first-of-type) { - padding-block-start: var(--utrecht-form-fieldset-section-padding-block-start); - } - &--subtle .utrecht-form-label { - font-weight: 400; - } +.utrecht-form-fieldset--grid { + --utrecht-form-fieldset-display: grid; + --utrecht-form-fieldset-row-gap: var( + --utrecht-form-fieldset-margin-block-start, + var(--utrecht-form-fieldset-margin-block-end, 0) + ); + --utrecht-form-fieldset-column-gap: var( + --utrecht-form-fieldset-margin-block-start, + var(--utrecht-form-fieldset-margin-block-end, 0) + ); + --utrecht-form-fieldset-grid-template-columns: repeat(12, 1fr); + --utrecht-form-field-display: grid; + --utrecht-form-field-align-content: space-between; + --utrecht-form-field-column-gap: var( + --utrecht-form-field-margin-block-start, + var(--utrecht-form-field-margin-block-end, 0) + ); + --utrecht-form-field-grid-column: 1 / -1; + --utrecht-form-field-row-gap: var( + --utrecht-form-field-margin-block-start, + var(--utrecht-form-field-margin-block-end, 0) + ); } -fieldset.utrecht-form-fieldset, -.utrecht-form-fieldset__fieldset { - column-gap: var(--utrecht-form-fieldset-column-gap); - display: var(--utrecht-form-fieldset-display); - flex-direction: column; - grid-template-columns: var(--utrecht-form-fieldset-grid-template-columns); - row-gap: var(--utrecht-form-fieldset-row-gap); +.utrecht-form-fieldset--grid fieldset.utrecht-form-fieldset, +.utrecht-form-fieldset--grid .utrecht-form-fieldset__fieldset { + column-gap: var(--utrecht-form-fieldset-column-gap, inherit); + display: var(--utrecht-form-fieldset-display, inherit); + grid-template-columns: var(--utrecht-form-fieldset-grid-template-columns, 1fr); + row-gap: var(--utrecht-form-fieldset-row-gap, inherit); &:last-of-type, &:first-of-type { margin-block-start: 0; } & > * { - align-content: var(--utrecht-form-field-align-content); - column-gap: var(--utrecht-form-field-column-gap); - display: var(--utrecht-form-field-display); - flex-direction: column; - grid-column: var(--utrecht-form-field-grid-column); - row-gap: var(--utrecht-form-field-row-gap); + align-content: var(--utrecht-form-field-align-content, initial); + column-gap: var(--utrecht-form-field-column-gap, inherit); + display: var(--utrecht-form-field-display, block); + grid-column: var(--utrecht-form-field-grid-column, none); + row-gap: var(--utrecht-form-field-row-gap, inherit); width: unset; } } + +div.utrecht-form-fieldset { + background-color: var(--utrecht-form-fieldset-background-color); + color: var(--utrecht-form-fieldset-color); + margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0); + margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0); + padding-block-end: var(--utrecht-form-fieldset-padding-block-end); + padding-block-start: var(--utrecht-form-fieldset-padding-block-start); + padding-inline-end: var(--utrecht-form-fieldset-padding-inline-end); + padding-inline-start: var(--utrecht-form-fieldset-padding-inline-start); +} .utrecht-form-fieldset { - clear: both; + &--subtle .utrecht-form-label { + font-weight: 400; + } &__legend--label { color: var(--utrecht-form-label-color); display: block; @@ -55,19 +64,25 @@ fieldset.utrecht-form-fieldset, margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end, 0); margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start, 0); } - label:has(input) { align-items: center; column-gap: var(--utrecht-form-field-column-gap); display: flex; } + & div.utrecht-form-fieldset { + margin-block-end: 0; + margin-block-start: 0; + padding-block-end: 0; + padding-block-start: 0; + padding-inline-end: 0; + padding-inline-start: 0; + } } .utrecht-form-field { clear: both; margin-block-end: var(--utrecht-form-field-margin-block-end, 0); margin-block-start: var(--utrecht-form-field-margin-block-start, 0); min-width: var(--utrecht-form-field-min-width, unset); - &--start { grid-column-start: 1 !important; } diff --git a/package-lock.json b/package-lock.json index 74e55024ea..a0497d9589 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@typescript-eslint/eslint-plugin": "5.30.0", "@typescript-eslint/parser": "5.30.0", "@utrecht/component-library-css": "1.0.0-alpha.355", - "@utrecht/component-library-react": "1.0.0-alpha.164", + "@utrecht/component-library-react": "1.0.0-alpha.190", "@utrecht/components": "1.0.0-alpha.316", "eslint": "8.18.0", "eslint-config-prettier": "8.5.0", @@ -20184,9 +20184,10 @@ "license": "EUPL-1.2" }, "node_modules/@utrecht/component-library-react": { - "version": "1.0.0-alpha.164", + "version": "1.0.0-alpha.190", + "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.190.tgz", + "integrity": "sha512-ywHcEDVo/UIlAMLlFyHuq9rIDMydYv7WrvKMDGvdlpLbcOyfbZENOfue1vMhqrZV5ScDbiDwhjrjR3BbhIZ86Q==", "dev": true, - "license": "EUPL-1.2", "dependencies": { "clsx": "1.2.1", "date-fns": "2.29.3" @@ -50536,6 +50537,29 @@ "csstype": "^3.0.2" } }, + "packages/components-react/node_modules/@utrecht/component-library-react": { + "version": "1.0.0-alpha.164", + "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.164.tgz", + "integrity": "sha512-m43+0P5qqA6PHtzfETectB+8L7XnWOjkm8YN8fkkacMU/iRdLT7tuF9S7FUc4yyzsuNvLFrQjwocqL0mkxHuAA==", + "dev": true, + "dependencies": { + "clsx": "1.2.1", + "date-fns": "2.29.3" + }, + "peerDependencies": { + "react": "16 - 18", + "react-dom": "16 - 18" + } + }, + "packages/components-react/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "packages/components-react/node_modules/react": { "version": "18.2.0", "dev": true, @@ -59556,6 +59580,22 @@ "csstype": "^3.0.2" } }, + "@utrecht/component-library-react": { + "version": "1.0.0-alpha.164", + "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.164.tgz", + "integrity": "sha512-m43+0P5qqA6PHtzfETectB+8L7XnWOjkm8YN8fkkacMU/iRdLT7tuF9S7FUc4yyzsuNvLFrQjwocqL0mkxHuAA==", + "dev": true, + "requires": { + "clsx": "1.2.1", + "date-fns": "2.29.3" + } + }, + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "dev": true + }, "react": { "version": "18.2.0", "dev": true, @@ -68884,7 +68924,9 @@ "dev": true }, "@utrecht/component-library-react": { - "version": "1.0.0-alpha.164", + "version": "1.0.0-alpha.190", + "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.190.tgz", + "integrity": "sha512-ywHcEDVo/UIlAMLlFyHuq9rIDMydYv7WrvKMDGvdlpLbcOyfbZENOfue1vMhqrZV5ScDbiDwhjrjR3BbhIZ86Q==", "dev": true, "requires": { "clsx": "1.2.1", diff --git a/package.json b/package.json index 42438a5aee..4864176c09 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@typescript-eslint/eslint-plugin": "5.30.0", "@typescript-eslint/parser": "5.30.0", "@utrecht/component-library-css": "1.0.0-alpha.355", - "@utrecht/component-library-react": "1.0.0-alpha.164", + "@utrecht/component-library-react": "1.0.0-alpha.190", "@utrecht/components": "1.0.0-alpha.316", "eslint": "8.18.0", "eslint-config-prettier": "8.5.0", diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json index 31cf7acc3e..08e9fbb4ff 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-field.tokens.json @@ -15,22 +15,7 @@ }, "margin-block-end": { "value": "0" }, "margin-block-start": { "value": "0" }, - "min-width": { "value": "100%" }, - "display": { - "value": "grid" - }, - "column-gap": { - "value": "1ch" - }, - "grid-column": { - "value": "1 / -1" - }, - "row-gap": { - "value": "0.5ex" - }, - "align-content": { - "value": "space-between" - } + "min-width": { "value": "100%" } } } } diff --git a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json index 40867181a2..4db0004d6e 100644 --- a/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/basiselementen-design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -3,14 +3,13 @@ "form-fieldset": { "margin-block-end": { "value": "9px" }, "margin-block-start": { "value": "9px" }, - "section": { - "background-color": { "value": "{basiselementen.color.wit}" }, - "color": {}, - "padding-block-end": { "value": "36px" }, - "padding-block-start": { "value": "36px" }, - "padding-inline-end": { "value": "36px" }, - "padding-inline-start": { "value": "36px" } - }, + "background-color": { "value": "{basiselementen.color.wit}" }, + "color": {}, + "padding-block-end": { "value": "36px" }, + "padding-block-start": { "value": "36px" }, + "padding-inline-end": { "value": "36px" }, + "padding-inline-start": { "value": "36px" }, + "legend": { "color": {}, "font-family": {}, @@ -20,18 +19,6 @@ "margin-block-end": { "value": "0" }, "margin-block-start": { "value": "0" }, "text-transform": {} - }, - "display": { - "value": "grid" - }, - "column-gap": { - "value": "1ch" - }, - "grid-template-columns": { - "value": "repeat(12, 1fr)" - }, - "row-gap": { - "value": "2ex" } } } diff --git a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json index 7cd4f0c72a..b0c3ba7e99 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-field.tokens.json @@ -16,21 +16,6 @@ }, "margin-block-end": { "value": "0" - }, - "display": { - "value": "grid" - }, - "column-gap": { - "value": "1ch" - }, - "grid-column": { - "value": "1 / -1" - }, - "row-gap": { - "value": "{rvo.space.xs}" - }, - "align-content": { - "value": "space-between" } } } diff --git a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json index e7bc835f6f..e4d5c85a92 100644 --- a/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json +++ b/proprietary/design-tokens/src/components/utrecht/form-fieldset.tokens.json @@ -20,15 +20,6 @@ "margin-block-end": { "value": "{rvo.space.2xs}" }, "margin-block-start": {}, "text-transform": {} - }, - "display": { - "value": "grid" - }, - "column-gap": { - "value": "1ch" - }, - "row-gap": { - "value": "{rvo.space.xs}" } } }