fix(FieldNote): fix icon alignment and size issues

re: EDS-1372
chanzuckerberg · Jun 20, 2024 · 367717e · 367717e
1 parent a5b3b47
commit 367717e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/components/FieldNote/FieldNote.module.css b/src/components/FieldNote/FieldNote.module.css
@@ -24,6 +24,9 @@
  */
 .field-note__icon {
   position: relative;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: calc(var(--eds-size-half) / 16 * 1rem);
   margin-right: calc(var(--eds-size-half) / 16 * 1rem);
 }
 

diff --git a/src/components/FieldNote/FieldNote.stories.tsx b/src/components/FieldNote/FieldNote.stories.tsx
@@ -32,6 +32,14 @@ export const WithErrorIcon: StoryObj<Args> = {
   },
 };
 
+export const WithLongText: StoryObj<Args> = {
+  args: {
+    ...WithErrorIcon.args,
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. Attristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.',
+  },
+};
+
 export const WithWarningIcon: StoryObj<Args> = {
   args: {
     children: 'This is a fieldnote.',