Merge remote-tracking branch 'origin/main' into fix/2075-panel-tooltip-in-buttons-in-action-slot-triggers-overflow-menu

Author: anna-lach

.changeset/eager-bikes-look.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/form': patch
+---
+
+Fixed alignment of warning icon when an error spans over more than 2 lines.

packages/components/form/src/error.scss

@@ -1,8 +1,25 @@
 :host {
-  align-items: center;
+  align-items: start;
   color: var(--sl-color-foreground-negative-plain);
   display: flex;
   font-weight: var(--sl-text-new-typeset-fontWeight-semiBold);
   gap: var(--sl-size-050);
   padding-block-start: var(--sl-size-050);
 }
+
+slot {
+  display: inline-block;
+}
+
+sl-icon {
+  // Vertically center the icon with the text when the error message is a multi line and we can't center it with flexbox.
+  // The icon needs to be centered in the line-height of the text (1lh) and the size of the icon calculated with max() (same as in the icon component).
+  margin-block-start: calc((1lh - max(0.8em, var(--sl-icon-size))) / 2);
+}
+
+// There are some really old browsers that don't support `cap` yet, so we use a fallback with `em`.
+@supports (inline-size: 1cap) {
+  sl-icon {
+    margin-block-start: calc((1lh - max(1cap, var(--sl-icon-size))) / 2);
+  }
+}

packages/components/form/src/form-field.stories.ts

@@ -184,7 +184,10 @@ export const CustomError: Story = {
   args: {
     slot: () => html`
       <sl-text-field required show-validity="invalid"></sl-text-field>
-      <sl-error>This is a <strong>custom</strong> error</sl-error>
+      <sl-error
+        >This is a <strong>custom</strong> error with a lot of text so we can see what happens when you have a lot to
+        explain. Because forms are hard!</sl-error
+      >
     `
   }
 };