fix: fix the formio-conten style

frameless · Sep 25, 2024 · ff95ded · ff95ded
1 parent 77e15ac
commit ff95ded
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 0 deletions.
diff --git a/.changeset/gorgeous-jokes-flow.md b/.changeset/gorgeous-jokes-flow.md
@@ -0,0 +1,5 @@
+---
+"@frameless/pdc-frontend": patch
+---
+
+Los het stijlprobleem van het Vormgeving-informatietekstblok in OpenForms op ([GitHub Issue frameless/strapi#881](https://github.com/frameless/strapi/issues/881)).
diff --git a/apps/pdc-frontend/package.json b/apps/pdc-frontend/package.json
@@ -57,6 +57,7 @@
     "@types/lodash.mergewith": "4.6.9",
     "@utrecht/focus-ring-css": "1.1.0",
     "@utrecht/form-label-css": "1.1.0",
+    "@utrecht/alert-css": "2.0.0",
     "@utrecht/multiline-data-css": "1.1.0",
     "@utrecht/textbox-css": "1.2.0",
     "eslint-config-next": "13.2.4",

diff --git a/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss b/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss
@@ -1,6 +1,7 @@
 @import "~@utrecht/multiline-data-css/src/mixin";
 @import "~@utrecht/form-label-css/src/mixin";
 @import "~@utrecht/textbox-css/src/mixin";
+@import "~@utrecht/alert-css/src/mixin";
 
 :root {
   --of-progress-indicator-padding-block-end: 0;
@@ -66,3 +67,34 @@
 .utrecht-form-container--openforms {
   flex: 1 1;
 }
+
+.openforms-formio-content {
+  &--info {
+    --of-formio-content-info-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("info");
+
+    flex-direction: column;
+  }
+  &--warning {
+    --of-formio-content-warning-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("warning");
+
+    flex-direction: column;
+  }
+  &--error {
+    --of-formio-content-error-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("error");
+
+    flex-direction: column;
+  }
+  &--success {
+    --of-formio-content-success-border-inline-start-style: none;
+    @include utrecht-alert;
+    @include utrecht-alert-type("ok");
+
+    flex-direction: column;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -8006,6 +8006,11 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@utrecht/[email protected]":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@utrecht/alert-css/-/alert-css-2.0.0.tgz#53903e9638dd20e381d348d34dace761a12651df"
+  integrity sha512-y1xJiJQcc41/w3lalY7PDR648/0937UAkzXeoZq2gNFy9nGetBMjMN+ViAajl8kaW/Np+cFKlKPiQ9KGS8WFUg==
+
 "@utrecht/[email protected]":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@utrecht/backdrop-css/-/backdrop-css-1.1.0.tgz#08f8f9efbfdf87866216c03f17a74ac56d0a9bba"