Skip to content

Commit

Permalink
took a minute to figure out where I messed up here
Browse files Browse the repository at this point in the history
  • Loading branch information
@shyakadavis
shyakadavis committed Sep 30, 2024
1 parent 81e7ecb commit c03c0f3
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 53 deletions.
19 changes: 12 additions & 7 deletions src/lib/components/ui/button/button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@
type Props = ButtonProps & (NormalButton | SVGButton);
let { children, ...rest }: Props = $props();
let { children, class: class_name = undefined, ...rest }: Props = $props();
</script>

<!-- If a user provides `svg_only` prop, then the button should be an icon-only button -->
{#if rest.svg_only}
<ButtonPrimitive.Root
class={cn(
button_variants({ variant: rest.variant, svg_size: rest.size, className: rest.class }),
button_variants({ variant: rest.variant, svg_size: rest.size }),
{
'rounded-full': rest.shape === 'circle'
}
},
class_name
)}
{...rest}
>
Expand All @@ -25,10 +26,14 @@
{:else}
<ButtonPrimitive.Root
disabled={rest.loading || rest.disabled}
class={cn(button_variants({ variant: rest.variant, size: rest.size, className: rest.class }), {
'rounded-full': rest.shape === 'rounded',
'shadow-shadow-border-small': rest.shadow
})}
class={cn(
button_variants({ variant: rest.variant, size: rest.size }),
{
'rounded-full': rest.shape === 'rounded',
'shadow-shadow-border-small': rest.shadow
},
class_name
)}
{...rest}
>
{#if rest.loading}
Expand Down
92 changes: 47 additions & 45 deletions src/lib/components/ui/feedback/feedback.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { Icons } from '$lib/assets/icons/index.js';
import { Button } from '$lib/components/ui/button';
import { Button, button_variants } from '$lib/components/ui/button';
import * as Popover from '$lib/components/ui/popover';
import { Textarea } from '$lib/components/ui/textarea';
import { cn } from '$lib/utils';
Expand All @@ -26,7 +26,7 @@
let height = spring(48, { stiffness: 0.2, damping: 1.2 });
let radius = spring(30, { stiffness: 0.2, damping: 1.2 });
let current_reaction: number | undefined = $state(undefined);
let inline_feedback_el: HTMLTextAreaElement | undefined = $state(undefined);
let inline_feedback_el: HTMLTextAreaElement | null = $state(null);
function toggle_inline_feedback(i: number | undefined) {
if (current_reaction === i || i === undefined) {
Expand Down Expand Up @@ -56,51 +56,53 @@

{#if variant === 'default'}
<Popover.Root>
<Popover.Trigger>
{#snippet child({ props })}
<Button {...props} variant="secondary" size="sm" class="text-gray-900">Feedback</Button>
{/snippet}
<Popover.Trigger
class={cn(button_variants({ size: 'sm', variant: 'secondary' }), 'text-gray-900')}
>
Feedback
</Popover.Trigger>
<Popover.Content sideOffset={8} class="w-[340px] rounded-xl p-0">
<form>
<main class="grid gap-3 p-2">
<Textarea placeholder="Your feedback..." bind:value={md} />
{#if md}
<div transition:slide class="grid gap-2 text-sm">
<h2 class="text-xs text-gray-900">Preview</h2>
<Markdown {md} />
<Popover.Portal>
<Popover.Content sideOffset={8} class="w-[340px] rounded-xl p-0">
<form>
<main class="grid gap-3 p-2">
<Textarea placeholder="Your feedback..." bind:value={md} />
{#if md}
<div transition:slide class="grid gap-2 text-sm">
<h2 class="text-xs text-gray-900">Preview</h2>
<Markdown {md} />
</div>
{/if}
<div class="flex w-full items-center justify-end gap-1 text-xs text-gray-900">
<Icons.Markdown aria-hidden class="h-[14px] w-[22px]" />
<span class="sr-only">Markdown</span>
supported.
</div>
{/if}
<div class="flex w-full items-center justify-end gap-1 text-xs text-gray-900">
<Icons.Markdown aria-hidden class="h-[14px] w-[22px]" />
<span class="sr-only">Markdown</span>
supported.
</div>
</main>
<footer
class="flex items-center justify-between rounded-b-xl border-t border-accents-2 bg-accents-1 p-3"
>
<span class="flex items-center gap-1">
{#each reactions as { emoji: Emoji, label }}
<Button
variant="tertiary"
svg_only
aria-label={label}
size="sm"
shape="circle"
class="group hover:bg-blue-300"
>
<Emoji
aria-hidden="true"
class="text-gray-900 group-hover:text-blue-900 [&>path]:group-hover:fill-blue-900"
/>
</Button>
{/each}
</span>
<Button type="submit" size="sm">Send</Button>
</footer>
</form>
</Popover.Content>
</main>
<footer
class="flex items-center justify-between rounded-b-xl border-t border-accents-2 bg-accents-1 p-3"
>
<span class="flex items-center gap-1">
{#each reactions as { emoji: Emoji, label }}
<Button
variant="tertiary"
svg_only
aria-label={label}
size="sm"
shape="circle"
class="group hover:bg-blue-300"
>
<Emoji
aria-hidden="true"
class="text-gray-900 group-hover:text-blue-900 [&>path]:group-hover:fill-blue-900"
/>
</Button>
{/each}
</span>
<Button type="submit" size="sm">Send</Button>
</footer>
</form>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
{:else if variant === 'inline'}
<!-- TODO: Toggle on click outside: https://github.com/svecosystem/runed/pull/46 -->
Expand Down
9 changes: 8 additions & 1 deletion src/lib/components/ui/popover/popover-content.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@
</script>

<PopoverPrimitive.Content
class={cn('z-50 w-72 rounded-md border bg-background-100 p-4 shadow-md outline-none', class_name)}
class={cn(
'z-50 w-72 rounded-md border bg-background-100 p-4 shadow-md outline-none',
// open animation
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
// close animation
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
class_name
)}
{...rest}
>
{@render children?.()}
Expand Down

0 comments on commit c03c0f3

Please sign in to comment.