spacing and css tweaks

sourcegraph · Apr 17, 2024 · 0f0b041 · 0f0b041
1 parent b3ff558
commit 0f0b041
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.stories.svelte b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.stories.svelte
@@ -1,7 +1,9 @@
 <script lang="ts" context="module">
     import { Story } from '@storybook/addon-svelte-csf'
 
+    import Popover from '$lib/Popover.svelte'
     import type { Progress, Skipped } from '$lib/shared'
+    import Button from '$lib/wildcard/Button.svelte'
 
     import ResultsIndicator from './ResultsIndicator.svelte'
 
@@ -90,7 +92,26 @@
         },
         {
             stateName: 'should display "Error" state',
-            state: 'complete',
+            state: 'error',
+            severity: 'error',
+            progress: {
+                done: true,
+                matchCount: 2364,
+                durationMs: 19000,
+                skipped: [
+                    {
+                        reason: 'shard-timedout',
+                        title: 'Internal server error',
+                        message: 'There was an error',
+                        severity: 'error',
+                    },
+                ],
+            },
+            suggestedItems: [],
+        },
+        {
+            stateName: 'should display "Error with suggested" state',
+            state: 'error',
             severity: 'error',
             progress: {
                 done: true,
@@ -102,6 +123,10 @@
                         title: 'Internal server error',
                         message: 'There was an error',
                         severity: 'error',
+                        suggested: {
+                            title: 'There was an error',
+                            queryExpression: '404',
+                        },
                     },
                 ],
             },
@@ -180,31 +205,19 @@
     <h1>ResultsIndicator.svelte</h1>
     <section>
         {#each states as { stateName, state, progress, suggestedItems, severity }}
-            <div class="scene">
-                <h4>It {stateName}</h4>
-                <div>
-                    <ResultsIndicator {state} {progress} {suggestedItems} {severity} />
-                </div>
-            </div>
+            <h4>It {stateName}</h4>
+            <Button variant={state === 'error' ? 'danger' : 'secondary'} size="sm" outline>
+                <svelte:fragment slot="custom" let:buttonClass>
+                    <button class="{buttonClass} progress-button">
+                        <ResultsIndicator {state} {suggestedItems} {progress} {severity} />
+                    </button>
+                </svelte:fragment>
+            </Button>
+            <br />
+            <br />
         {/each}
     </section>
 </Story>
 
 <style lang="scss">
-    section {
-        display: flex;
-        flex-flow: column wrap;
-        max-height: 65vh;
-        max-width: 100vw;
-        gap: 0.5rem 0.5rem;
-    }
-    .scene {
-        div {
-            border: 1px solid var(--border-color);
-            width: fit-content;
-            padding: 0.5rem;
-            border-radius: 4px;
-            margin-bottom: 3rem;
-        }
-    }
 </style>
diff --git a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
@@ -68,6 +68,8 @@
         min-width: 200px;
         max-width: fit-content;
 
+        padding: 0.25rem;
+
         .messages {
             display: flex;
             flex-flow: column nowrap;