pr comments and styling

This commit is contained in:
Peter Clement 2025-02-13 10:23:11 +00:00
parent c4a3d94db6
commit ea57fe3fad
2 changed files with 22 additions and 33 deletions

View File

@ -1,11 +1,11 @@
<script> <script lang="ts">
import "@spectrum-css/typography/dist/index-vars.css" import "@spectrum-css/typography/dist/index-vars.css"
export let size = "M" export let size: "XS" | "S" | "M" | "L" | "XL" = "M"
export let serif = false export let serif: boolean = false
export let weight = null export let weight: string | null = null
export let textAlign = null export let textAlign: string | null = null
export let color = null export let color: string | null = null
</script> </script>
<p <p

View File

@ -1,12 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte" import { onMount } from "svelte"
import { import { Input, Label } from "@budibase/bbui"
Input,
Icon,
Body,
AbsTooltip,
TooltipPosition,
} from "@budibase/bbui"
import { previewStore, selectedScreen } from "@/stores/builder" import { previewStore, selectedScreen } from "@/stores/builder"
import type { ComponentContext } from "@budibase/types" import type { ComponentContext } from "@budibase/types"
@ -14,6 +8,8 @@
let testValue: string | undefined let testValue: string | undefined
$: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || []
$: hasUrlParams = routeParams.length > 0
$: placeholder = getPlaceholder(baseRoute) $: placeholder = getPlaceholder(baseRoute)
$: baseInput = createBaseInput(baseRoute) $: baseInput = createBaseInput(baseRoute)
$: updateTestValueFromContext($previewStore.selectedComponentContext) $: updateTestValueFromContext($previewStore.selectedComponentContext)
@ -73,18 +69,10 @@
}) })
</script> </script>
<div class="url-test-section"> {#if hasUrlParams}
<div class="url-test-section">
<div class="info"> <div class="info">
<Body size="XS">URL Variable Testing</Body> <Label size="M">Set temporary URL variables for design preview</Label>
<AbsTooltip
text="Test how your screen behaves with different URL parameters. Enter values in the format shown in the placeholder below."
position={TooltipPosition.Top}
noWrap
>
<div class="icon">
<Icon name="InfoOutline" size="S" disabled hoverable />
</div>
</AbsTooltip>
</div> </div>
<div class="url-test-container"> <div class="url-test-container">
<div class="base-input"> <div class="base-input">
@ -94,7 +82,8 @@
<Input value={testValue} on:change={onVariableChange} {placeholder} /> <Input value={testValue} on:change={onVariableChange} {placeholder} />
</div> </div>
</div> </div>
</div> </div>
{/if}
<style> <style>
.url-test-section { .url-test-section {
@ -115,7 +104,7 @@
} }
.base-input { .base-input {
width: 40%; width: 98px;
margin-right: -1px; margin-right: -1px;
} }