diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 771cb8b0e6..85c6dc6e36 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -200,11 +200,12 @@
// Build up full styles and split them into variables and non-variables
$: baseStyles = getBaseStyles(definition)
- $: parsedStyles = parseStyles({
+ $: styles = {
...baseStyles,
...instance._styles?.normal,
...ephemeralStyles,
- })
+ }
+ $: parsedStyles = parseStyles(styles)
$: wrapperCSS = buildStyleString(parsedStyles.variables)
// Update component context
@@ -214,6 +215,7 @@
styles: {
...instance._styles,
normal: parsedStyles.nonVariables,
+ variables: parsedStyles.variables,
custom: customCSS,
id,
empty: emptyState,
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index a5450ffe4c..3e58fef787 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -95,7 +95,7 @@
/* Ensure all top level children have grid styles applied */
.grid :global(> .component) {
display: flex;
- overflow: hidden;
+ overflow: auto;
/* On desktop, use desktop metadata and fall back to mobile */
/* Position vars */
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 0a313bba53..e168754f3b 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -1,14 +1,16 @@
@@ -18,10 +20,7 @@
{title}
class:active
on:click={() => {
- builderStore.actions.updateStyles(
- { [style]: value },
- $componentStore.selectedComponent._id
- )
+ builderStore.actions.updateStyles({ [style]: value }, componentId)
}}
>
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 540204f817..1fecec5376 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -20,11 +20,12 @@
// TODO: respect dependsOn keys
- $: id = $builderStore.selectedComponentId
- $: parent = findComponentParent($builderStore.screen.props, id)
- $: instance = componentStore.actions.getComponentInstance(id)
- $: state = $instance?.state
+ $: componentId = $builderStore.selectedComponentId
+ $: component = $componentStore.selectedComponent
$: definition = $componentStore.selectedComponentDefinition
+ $: parent = findComponentParent($builderStore.screen.props, componentId)
+ $: instance = componentStore.actions.getComponentInstance(componentId)
+ $: state = $instance?.state
$: showBar =
definition?.showSettingsBar !== false &&
!$dndIsDragging &&
@@ -36,12 +37,13 @@
}
}
$: settings = getBarSettings(definition)
- $: isRoot = id === $builderStore.screen?.props?._id
+ $: isRoot = componentId === $builderStore.screen?.props?._id
$: insideGrid =
parent?._component.endsWith("/container") && parent.layout === "grid"
$: showGridStyles = insideGrid && definition?.grid?.showControls !== false
$: gridHAlignVar = $getGridVar("h-align")
$: gridVAlignVar = $getGridVar("v-align")
+ $: gridStyles = $state?.styles?.variables
const getBarSettings = definition => {
let allSettings = []
@@ -141,7 +143,7 @@
{#if showBar}
@@ -151,24 +153,32 @@
value="start"
icon="AlignLeft"
title="Align left"
+ {gridStyles}
+ {componentId}
/>
{/if}
@@ -206,6 +224,7 @@
value={option.value}
icon={option.barIcon}
title={option.barTitle || option.label}
+ {component}
/>
{/each}
{:else}
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 446a367282..a93ffb77af 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -1,18 +1,19 @@
@@ -20,7 +21,6 @@
{
if (prop) {
@@ -50,7 +50,4 @@
background-color: rgba(13, 102, 208, 0.1);
color: var(--spectrum-global-color-blue-600);
}
- .rotate {
- transform: rotate(90deg);
- }
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
index b078d048d2..a292d7d838 100644
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@@ -1,10 +1,11 @@
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 8b83729fde..3900d065e8 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -1,12 +1,13 @@
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index a357f86de4..5879232e89 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,5 +1,5 @@
-import { builderStore } from "stores"
-import { derived, get } from "svelte/store"
+import { builderStore, componentStore } from "stores"
+import { derived, get, readable } from "svelte/store"
/**
* We use CSS variables on components to control positioning and layout of
@@ -91,13 +91,13 @@ export const getBaseGridVars = definition => {
}
// Gets the current value of a certain grid CSS variable for a component
-export const getGridVarValue = (component, variable) => {
+export const getGridVarValue = (styles, variable) => {
// Try the desired variable
- let val = component?._styles?.normal?.[variable]
+ let val = styles?.[variable]
// Otherwise try the other device variables
if (!val) {
- val = component?._styles?.normal?.[getOtherDeviceGridVar(variable)]
+ val = styles?.[getOtherDeviceGridVar(variable)]
}
// Otherwise use the default