🐛 [open-formulieren/open-forms#3577] Fix overflow issue because of du…

…plicated error styles Suppress the formio styles alltogether and apply more NL DS styles for a more consistent look. The explicit width: 100% declarations are removed as they cause overflows due to box-sizing rules, but the behaviour without setting these appears to be correct in our and other's themes.
open-formulieren · Nov 8, 2023 · e0050c8 · e0050c8
1 parent c5efbdf
commit e0050c8
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 9 deletions.
diff --git a/src/formio/components/Select.stories.js b/src/formio/components/Select.stories.js
@@ -1,6 +1,9 @@
+import {userEvent, within} from '@storybook/testing-library';
+
 import {withUtrechtDocument} from 'story-utils/decorators';
+import {sleep} from 'utils';
 
-import {SingleFormioComponent} from './story-util';
+import {MultipleFormioComponents, SingleFormioComponent} from './story-util';
 
 export default {
   title: 'Form.io components / Vanilla / Select',
@@ -49,3 +52,52 @@ export const Select = {
     label: 'Welke optie is het meest onduidelijk?',
   },
 };
+
+export const RequiredWithValidationError = {
+  render: MultipleFormioComponents,
+  args: {
+    components: [
+      {
+        type: 'select',
+        key: 'selectRequired',
+        label: 'Required select',
+        data: {
+          values: [
+            {
+              label: 'Optie A',
+              value: 'radioA',
+            },
+            {
+              label: 'Optie B',
+              value: 'radioB',
+            },
+            {
+              label: 'Optie C',
+              value: 'radioC',
+            },
+          ],
+        },
+        validate: {
+          required: true,
+        },
+      },
+      {
+        label: 'Check validations',
+        showValidations: true,
+        key: 'submit1',
+        type: 'button',
+        input: true,
+        action: 'notSubmit',
+      },
+    ],
+  },
+
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    // just form.io things...
+    await sleep(100);
+
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
diff --git a/src/scss/components/_deprecated-select.scss b/src/scss/components/_deprecated-select.scss
@@ -21,26 +21,44 @@ $select-background-color: var(--of-select-background-color, $color-white);
   $item-hpadding: $grid-margin-1;
   $vborders: $typography-size-border;
 
-  width: 100%;
-
   // The wrapper div.
   // Style as a regular input.
   .choices {
     @include body;
-    @include border(all, $size: 1px);
     @include rows(1, min-height);
+
     position: relative;
     display: flex;
     align-items: center;
+
+    background-color: var(
+      --utrecht-select-background-color,
+      var(--utrecht-form-control-background-color, var(--of-color-bg))
+    );
+    border-bottom-width: var(--utrecht-select-border-bottom-width, 1px);
+    border-color: var(--utrecht-select-border-color, var(--of-field-border-color));
     border-radius: 0;
+    border-style: solid;
+    border-width: var(--utrecht-select-border-width, 1px);
+
     font-weight: bold;
     padding: 0 $list-hpadding;
-    width: 100%;
+
+    max-inline-size: calc(
+      var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size)) - 2 * #{$list-hpadding}
+    );
 
     .choices__list {
-      background-color: var(--of-color-bg);
-      border-color: var(--of-field-border-color);
-      color: var(--of-color-fg);
+      background-color: var(
+        --utrecht-select-background-color,
+        var(--utrecht-form-control-background-color, var(--of-color-bg))
+      );
+      border-color: var(--utrecht-select-border-color, var(--of-field-border-color));
+      color: var(--utrecht-select-color, var(--of-color-fg));
+      max-inline-size: var(
+        --utrecht-select-max-inline-size,
+        var(--utrecht-form-control-max-inline-size)
+      );
 
       .is-highlighted {
         background-color: var(--of-select-highlighted-bg);
@@ -93,7 +111,7 @@ $select-background-color: var(--of-select-background-color, $color-white);
 
   // Available choices.
   .selection + .choices__list {
-    left: 0;
+    left: -1px; // border width
   }
 
   // Items within the available choices.

diff --git a/src/scss/components/_errors.scss b/src/scss/components/_errors.scss
@@ -21,3 +21,9 @@
     }
   }
 }
+
+// the formio styles conflict with our NL DS components, applying double padding and
+// causing overflows, so we reset them.
+.formio-error-wrapper {
+  all: revert;
+}