Merge pull request #332 from appwrite/fix-alert-alignment

Fix: alignment when there's only title

Author: ItzNotABug

v2/pink-sb/.genauigkeit/references/chromium/components-alert-inline--only-title-desktop.png

@@ -39,26 +39,37 @@
     class:error={status === 'error'}
 >
     <Stack gap="s" direction="row">
-        <span class="primary-color">
-            <Icon icon={getIcon()} />
+        <span class="icon-holder" class:center-align={!$$slots.default}>
+            <Icon icon={getIcon()} color="--alert-primary-color" />
         </span>
+
         <Stack>
             <Stack gap="s" direction="row" justifyContent="space-between" alignItems="flex-start">
                 <Stack>
-                    <div>
-                        {#if title}
-                            <h5 class="primary-color">{title}</h5>
-                        {/if}
-                        <slot />
-                    </div>
+                    {#if title || $$slots.default}
+                        <Stack gap="none">
+                            {#if title}
+                                <h5 style:color="var(--alert-primary-color)">{title}</h5>
+                            {/if}
+                            {#if $$slots.default}
+                                <slot />
+                            {/if}
+                        </Stack>
+                    {/if}
                     {#if $$slots.actions}
                         <Stack direction="row">
                             <slot name="actions" />
                         </Stack>
                     {/if}
                 </Stack>
+
                 {#if dismissible}
-                    <Button icon variant="text" size="s" on:click={() => dispatch('dismiss')}>
+                    <Button
+                        icon
+                        size="s"
+                        variant="extra-compact"
+                        on:click={() => dispatch('dismiss')}
+                    >
                         <span class="close">
                             <Icon icon={IconX} color="--fgcolor-neutral-tertiary" />
                         </span>
@@ -79,6 +90,7 @@
         border-radius: var(--border-radius-s);
         border: var(--border-width-s) solid var(--border-neutral-strong);
         background: var(--bgcolor-neutral-default);
+        --alert-primary-color: var(--fgcolor-info);
 
         h5 {
             color: var(--fgcolor-neutral-primary);
@@ -90,26 +102,24 @@
             line-height: 140%; /* 19.6px */
             letter-spacing: -0.063px;
         }
+        .icon-holder.center-align {
+            display: flex;
+            align-self: baseline;
+        }
         &.success {
             border-color: var(--border-success-weak);
             background: var(--bgcolor-success-weaker);
-            .primary-color {
-                color: var(--fgcolor-success);
-            }
+            --alert-primary-color: var(--fgcolor-success);
         }
         &.warning {
             border-color: var(--border-warning-weak);
             background: var(--bgcolor-warning-weaker);
-            .primary-color {
-                color: var(--fgcolor-warning);
-            }
+            --alert-primary-color: var(--fgcolor-warning);
         }
         &.error {
             border-color: var(--border-error-weak);
             background: var(--bgcolor-error-weaker);
-            .primary-color {
-                color: var(--fgcolor-error);
-            }
+            --alert-primary-color: var(--fgcolor-error);
         }
         .close {
             color: var(--fgcolor-neutral-tertiary);

v2/pink-sb/src/lib/alert/Inline.svelte

@@ -19,8 +19,33 @@
     };
 </script>
 
-<script>
+<script lang="ts">
+    import { Layout, Typography } from '$lib/index.ts';
     import { Story, Template } from '@storybook/addon-svelte-csf';
+
+    const alerts = [
+        {
+            status: 'info',
+            title: 'To complete, add this OAuth2 redirect URI to your Appwrite app config.',
+            content: undefined
+        },
+        {
+            status: 'success',
+            title: 'OAuth2 redirect URI added successfully. Your Appwrite app is now ready!',
+            content: 'You can now authenticate users via Appwrite without any additional setup.'
+        },
+        {
+            status: 'warning',
+            title: 'The OAuth2 redirect URI is missing. You may encounter login issues.',
+            content:
+                'To avoid authentication problems, ensure the URI is correctly added to your Appwrite app.'
+        },
+        {
+            status: 'error',
+            title: 'Failed to add OAuth2 redirect URI. Please try again or check your configuration.',
+            content: undefined
+        }
+    ] as const;
 </script>
 
 <Template let:args>
@@ -36,3 +61,24 @@
 <Story name="Success" args={{ status: 'success' }} />
 <Story name="Warning" args={{ status: 'warning' }} />
 <Story name="Error" args={{ status: 'error' }} />
+<Story name="Only title">
+    <div style:max-width="600px" style:margin-inline="auto" style:padding-block-start="4rem">
+        <Layout.Stack gap="l">
+            {#each alerts as alert}
+                <Layout.Stack gap="xxxs">
+                    <Typography.Text variant="m-500">{alert.status.toUpperCase()}</Typography.Text>
+
+                    {#if alert.content}
+                        <!-- with slot content -->
+                        <Alert.Inline title={alert.title} status={alert.status} dismissible>
+                            {alert.content}
+                        </Alert.Inline>
+                    {:else}
+                        <!-- without slot content -->
+                        <Alert.Inline title={alert.title} status={alert.status} dismissible />
+                    {/if}
+                </Layout.Stack>
+            {/each}
+        </Layout.Stack>
+    </div>
+</Story>