Forker/OpenNoodl
1
0
Fork 0
mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-12 07:12:54 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity
Files
7fc49ae3a8e9f07e2c239f140fdefa640aed17b6
OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/STYLE-002-element-configs/README.md

819 lines
22 KiB
Markdown
Raw Blame History

# STYLE-002: Element Configs & Variants
## Overview
Define default configurations and pre-built style variants for Noodl's core visual nodes. When users drag a Button, Group, Text, or Input onto the canvas, it should look good immediately and offer variant options via a simple dropdown.
**Phase:** 8 (Styles Overhaul)
**Priority:** HIGH (core feature of Phase 8)
**Effort:** 16-20 hours
**Risk:** Medium
**Dependencies:** STYLE-001 (Token System)
---
## Background
### Current State
- Visual nodes render with browser defaults (unstyled)
- Users must manually style every element from scratch
- No variant system for quick style switching
- Existing "style variants" feature is underutilized (requires manual setup)
### Target State
- Visual nodes have sensible, themed defaults on creation
- Common components (Button, Input) have pre-built variants (Primary, Secondary, etc.)
- Variants reference project tokens (change token → all variants update)
- Users can create custom variants and save them
---
## Core Visual Nodes to Configure
| Node | Default Variants | Notes |
|------|------------------|-------|
| **Button** | primary, secondary, outline, ghost, destructive, link | Most important |
| **Group** | default, card, section, inset | Container patterns |
| **Text** | body, heading-1 through heading-6, muted, label, code | Typography hierarchy |
| **TextInput** | default, error | Form inputs |
| **TextArea** | default, error | Multi-line input |
| **Checkbox** | default | Form control |
| **Radio Button** | default | Form control |
| **Switch** | default | Toggle control |
| **Image** | default, rounded, circle | Image display |
---
## Element Configurations
### Button Config
```typescript
const ButtonConfig: ElementConfig = {
nodeType: 'net.noodl.visual.button',
// Default styling applied on node creation
defaults: {
// Layout defaults
paddingTop: 'var(--space-2)',
paddingBottom: 'var(--space-2)',
paddingLeft: 'var(--space-4)',
paddingRight: 'var(--space-4)',
// Typography defaults
fontSize: 'var(--text-sm)',
fontWeight: 'var(--font-medium)',
fontFamily: 'var(--font-sans)',
// Border defaults
borderRadius: 'var(--radius-md)',
// Behavior
cursor: 'pointer',
// Default variant
_variant: 'primary'
},
// Size presets
sizes: {
sm: {
paddingTop: 'var(--space-1)',
paddingBottom: 'var(--space-1)',
paddingLeft: 'var(--space-2)',
paddingRight: 'var(--space-2)',
fontSize: 'var(--text-xs)',
},
md: {
paddingTop: 'var(--space-2)',
paddingBottom: 'var(--space-2)',
paddingLeft: 'var(--space-4)',
paddingRight: 'var(--space-4)',
fontSize: 'var(--text-sm)',
},
lg: {
paddingTop: 'var(--space-3)',
paddingBottom: 'var(--space-3)',
paddingLeft: 'var(--space-6)',
paddingRight: 'var(--space-6)',
fontSize: 'var(--text-base)',
},
xl: {
paddingTop: 'var(--space-4)',
paddingBottom: 'var(--space-4)',
paddingLeft: 'var(--space-8)',
paddingRight: 'var(--space-8)',
fontSize: 'var(--text-lg)',
}
},
// Style variants
variants: {
primary: {
backgroundColor: 'var(--primary)',
color: 'var(--primary-foreground)',
borderWidth: '0',
boxShadow: 'var(--shadow-sm)',
states: {
hover: {
backgroundColor: 'var(--primary-hover)',
},
active: {
transform: 'scale(0.98)',
},
disabled: {
opacity: '0.5',
cursor: 'not-allowed',
}
}
},
secondary: {
backgroundColor: 'var(--secondary)',
color: 'var(--secondary-foreground)',
borderWidth: '0',
boxShadow: 'var(--shadow-sm)',
states: {
hover: {
backgroundColor: 'var(--secondary-hover)',
},
active: {
transform: 'scale(0.98)',
},
disabled: {
opacity: '0.5',
cursor: 'not-allowed',
}
}
},
outline: {
backgroundColor: 'transparent',
color: 'var(--foreground)',
borderWidth: 'var(--border-1)',
borderColor: 'var(--border)',
borderStyle: 'solid',
states: {
hover: {
backgroundColor: 'var(--accent)',
color: 'var(--accent-foreground)',
},
disabled: {
opacity: '0.5',
cursor: 'not-allowed',
}
}
},
ghost: {
backgroundColor: 'transparent',
color: 'var(--foreground)',
borderWidth: '0',
states: {
hover: {
backgroundColor: 'var(--accent)',
color: 'var(--accent-foreground)',
},
disabled: {
opacity: '0.5',
cursor: 'not-allowed',
}
}
},
destructive: {
backgroundColor: 'var(--destructive)',
color: 'var(--destructive-foreground)',
borderWidth: '0',
boxShadow: 'var(--shadow-sm)',
states: {
hover: {
backgroundColor: 'var(--destructive-hover)',
},
disabled: {
opacity: '0.5',
cursor: 'not-allowed',
}
}
},
link: {
backgroundColor: 'transparent',
color: 'var(--primary)',
borderWidth: '0',
textDecoration: 'none',
paddingLeft: '0',
paddingRight: '0',
states: {
hover: {
textDecoration: 'underline',
}
}
}
}
};
```
### Group Config
```typescript
const GroupConfig: ElementConfig = {
nodeType: 'net.noodl.visual.group',
defaults: {
// Flexbox defaults
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
// No default variant - groups start transparent
_variant: 'default'
},
variants: {
default: {
backgroundColor: 'transparent',
padding: '0',
borderWidth: '0',
borderRadius: '0',
},
card: {
backgroundColor: 'var(--surface)',
padding: 'var(--space-4)',
borderWidth: 'var(--border-1)',
borderColor: 'var(--border-subtle)',
borderStyle: 'solid',
borderRadius: 'var(--radius-lg)',
boxShadow: 'var(--shadow-md)',
},
section: {
padding: 'var(--space-8)',
},
inset: {
backgroundColor: 'var(--muted)',
padding: 'var(--space-4)',
borderRadius: 'var(--radius-md)',
},
'flex-row': {
flexDirection: 'row',
alignItems: 'center',
gap: 'var(--space-2)',
},
'flex-col': {
flexDirection: 'column',
gap: 'var(--space-2)',
},
centered: {
alignItems: 'center',
justifyContent: 'center',
}
}
};
```
### Text Config
```typescript
const TextConfig: ElementConfig = {
nodeType: 'net.noodl.visual.text',
// ============================================================
// 🐛 BUG FIX: Text element default sizing
// ============================================================
// ISSUE: Text elements default to 100% width in a way that
// causes overflow when siblings are added. The element forces
// full width instead of sharing space with siblings.
//
// ROOT CAUSE: Default width is set to '100%' with no flex-shrink,
// causing the element to refuse to shrink when siblings exist.
//
// FIX: Set proper flex defaults so text elements participate
// correctly in flex layout:
// - flexShrink: '1' (allow shrinking)
// - flexGrow: '0' (don't expand beyond content)
// - width: 'auto' (size to content by default)
// - minWidth: '0' (allow shrinking below content size if needed)
// ============================================================
defaults: {
// FIXED: Proper flex participation defaults
width: 'auto', // Was: '100%' - caused overflow
height: 'auto', // Content height (correct)
flexShrink: '1', // NEW: Allow shrinking in flex container
flexGrow: '0', // NEW: Don't expand beyond content
minWidth: '0', // NEW: Allow shrinking below content
// Typography defaults
fontFamily: 'var(--font-sans)',
fontSize: 'var(--text-base)',
fontWeight: 'var(--font-normal)',
lineHeight: 'var(--leading-normal)',
color: 'var(--foreground)',
// Default variant
_variant: 'body'
},
variants: {
body: {
fontSize: 'var(--text-base)',
fontWeight: 'var(--font-normal)',
lineHeight: 'var(--leading-normal)',
color: 'var(--foreground)',
},
'heading-1': {
fontSize: 'var(--text-4xl)',
fontWeight: 'var(--font-bold)',
lineHeight: 'var(--leading-tight)',
color: 'var(--foreground)',
letterSpacing: 'var(--tracking-tight)',
},
'heading-2': {
fontSize: 'var(--text-3xl)',
fontWeight: 'var(--font-semibold)',
lineHeight: 'var(--leading-tight)',
color: 'var(--foreground)',
},
'heading-3': {
fontSize: 'var(--text-2xl)',
fontWeight: 'var(--font-semibold)',
lineHeight: 'var(--leading-snug)',
color: 'var(--foreground)',
},
'heading-4': {
fontSize: 'var(--text-xl)',
fontWeight: 'var(--font-semibold)',
lineHeight: 'var(--leading-snug)',
color: 'var(--foreground)',
},
'heading-5': {
fontSize: 'var(--text-lg)',
fontWeight: 'var(--font-medium)',
lineHeight: 'var(--leading-normal)',
color: 'var(--foreground)',
},
'heading-6': {
fontSize: 'var(--text-base)',
fontWeight: 'var(--font-medium)',
lineHeight: 'var(--leading-normal)',
color: 'var(--foreground)',
},
muted: {
fontSize: 'var(--text-sm)',
color: 'var(--muted-foreground)',
},
label: {
fontSize: 'var(--text-sm)',
fontWeight: 'var(--font-medium)',
color: 'var(--foreground)',
},
small: {
fontSize: 'var(--text-xs)',
color: 'var(--muted-foreground)',
},
code: {
fontFamily: 'var(--font-mono)',
fontSize: 'var(--text-sm)',
backgroundColor: 'var(--muted)',
padding: '2px 4px',
borderRadius: 'var(--radius-sm)',
},
lead: {
fontSize: 'var(--text-xl)',
color: 'var(--muted-foreground)',
lineHeight: 'var(--leading-relaxed)',
},
blockquote: {
fontStyle: 'italic',
borderLeftWidth: '4px',
borderLeftColor: 'var(--border)',
borderLeftStyle: 'solid',
paddingLeft: 'var(--space-4)',
color: 'var(--muted-foreground)',
}
}
};
```
### TextInput Config
```typescript
const TextInputConfig: ElementConfig = {
nodeType: 'net.noodl.visual.textinput',
defaults: {
// Sizing
width: '100%',
height: 'auto',
// Spacing
paddingTop: 'var(--space-2)',
paddingBottom: 'var(--space-2)',
paddingLeft: 'var(--space-3)',
paddingRight: 'var(--space-3)',
// Typography
fontFamily: 'var(--font-sans)',
fontSize: 'var(--text-base)',
color: 'var(--foreground)',
// Border
borderWidth: 'var(--border-1)',
borderColor: 'var(--border)',
borderStyle: 'solid',
borderRadius: 'var(--radius-md)',
// Background
backgroundColor: 'var(--background)',
// Default variant
_variant: 'default'
},
variants: {
default: {
borderColor: 'var(--border)',
backgroundColor: 'var(--background)',
states: {
focus: {
borderColor: 'var(--ring)',
boxShadow: '0 0 0 2px var(--ring)',
outline: 'none',
},
disabled: {
backgroundColor: 'var(--muted)',
opacity: '0.5',
cursor: 'not-allowed',
},
placeholder: {
color: 'var(--muted-foreground)',
}
}
},
error: {
borderColor: 'var(--destructive)',
states: {
focus: {
borderColor: 'var(--destructive)',
boxShadow: '0 0 0 2px var(--destructive)',
}
}
}
}
};
```
---
## Implementation
### Phase 1: Config System Architecture (4-6 hrs)
**Files to create:**
```
packages/noodl-editor/src/editor/src/models/
├── ElementConfigs/
│ ├── ElementConfigModel.ts # Main config model
│ ├── ElementConfigTypes.ts # TypeScript interfaces
│ ├── configs/
│ │ ├── ButtonConfig.ts
│ │ ├── GroupConfig.ts
│ │ ├── TextConfig.ts
│ │ ├── TextInputConfig.ts
│ │ ├── CheckboxConfig.ts
│ │ └── index.ts # Exports all configs
│ ├── ElementConfigRegistry.ts # Registry for configs
│ └── index.ts
```
**TypeScript Interfaces:**
```typescript
interface ElementConfig {
nodeType: string;
defaults: Record<string, string>;
sizes?: Record<string, Record<string, string>>;
variants: Record<string, VariantConfig>;
}
interface VariantConfig {
[property: string]: string | StateConfig;
states?: StateConfig;
}
interface StateConfig {
hover?: Record<string, string>;
active?: Record<string, string>;
focus?: Record<string, string>;
disabled?: Record<string, string>;
placeholder?: Record<string, string>;
}
interface ElementConfigRegistry {
configs: Map<string, ElementConfig>;
register(config: ElementConfig): void;
get(nodeType: string): ElementConfig | undefined;
getVariants(nodeType: string): string[];
applyDefaults(node: NodeModel): void;
applyVariant(node: NodeModel, variantName: string): void;
}
```
### Phase 2: Node Creation Integration (4-5 hrs)
**Files to modify:**
```
packages/noodl-editor/src/editor/src/models/
├── NodeModel.ts # Apply defaults on creation
├── NodeGraphModel.ts # Hook into node creation
packages/noodl-viewer-react/src/
├── nodes/basic/Text.jsx # Fix defaults (BUG FIX)
├── nodes/controls/Button.jsx # Apply variant styles
└── react-component-node.js # Variant resolution
```
**Tasks:**
1. Hook into node creation lifecycle
2. Apply config defaults when node is created
3. Store variant selection in node data
4. Apply variant styles at render time
5. **BUG FIX**: Fix Text element default sizing
**Node Creation Flow:**
```typescript
// In NodeGraphModel.ts or similar
function createNode(nodeType: string, position: Point): NodeModel {
const node = new NodeModel(nodeType, position);
// Apply element config defaults
const config = ElementConfigRegistry.get(nodeType);
if (config) {
ElementConfigRegistry.applyDefaults(node);
}
return node;
}
```
### Phase 3: Variant Selector UI (4-5 hrs)
**Files to create/modify:**
```
packages/noodl-core-ui/src/components/inputs/
├── VariantSelector/
│ ├── VariantSelector.tsx
│ ├── VariantSelector.module.scss
│ ├── VariantSelector.stories.tsx
│ ├── VariantPreview.tsx # Visual preview of variant
│ └── index.ts
packages/noodl-editor/src/editor/src/views/panels/propertyeditor/
├── VariantSection.tsx # Variant section in property panel
```
**Variant Selector UI:**
```
┌───────────────────────────────────────────┐
│ Variant: [Primary ▼] │
│ ┌─────────────────────────────┐ │
│ │ ● Primary [████████████] │ │
│ │ Secondary [████████████] │ │
│ │ Outline [░░░░░░░░░░░░] │ │
│ │ Ghost [············] │ │
│ │ Destructive[████████████] │ │
│ │ Link [____________] │ │
│ │ ─────────────────────────── │ │
│ │ + Create Variant │ │
│ └─────────────────────────────┘ │
└───────────────────────────────────────────┘
```
### Phase 4: State Handling (3-4 hrs)
**Tasks:**
1. Implement hover state application
2. Implement active/pressed state
3. Implement focus state
4. Implement disabled state
5. Implement placeholder styling (inputs)
**State Implementation:**
```typescript
// In react-component-node.js or component wrapper
function applyVariantStates(
baseStyles: CSSProperties,
variant: VariantConfig,
states: { isHovered: boolean; isActive: boolean; isFocused: boolean; isDisabled: boolean }
): CSSProperties {
let styles = { ...baseStyles };
if (states.isDisabled && variant.states?.disabled) {
styles = { ...styles, ...variant.states.disabled };
} else {
if (states.isHovered && variant.states?.hover) {
styles = { ...styles, ...variant.states.hover };
}
if (states.isActive && variant.states?.active) {
styles = { ...styles, ...variant.states.active };
}
if (states.isFocused && variant.states?.focus) {
styles = { ...styles, ...variant.states.focus };
}
}
return styles;
}
```
---
## Text Element Bug Fix Details
### Current Behavior (Bug)
```
Parent Group (row layout)
├── Text "Hello" → Takes 100% width, pushes sibling off-screen
└── Text "World" → Overflows to the right (not visible)
```
### Expected Behavior (After Fix)
```
Parent Group (row layout)
├── Text "Hello" → Takes ~50% width (flex shrinks)
└── Text "World" → Takes ~50% width (both visible)
```
### Root Cause Analysis
The Text node's default styling sets `width: 100%` without proper flex shrink behavior:
```javascript
// Current (problematic) defaults in Text.jsx
const defaultStyle = {
width: '100%', // Forces full width
height: 'auto',
// Missing: flexShrink, flexGrow, minWidth
};
```
### Fix Implementation
```javascript
// Fixed defaults in Text.jsx
const defaultStyle = {
width: 'auto', // Changed from '100%'
height: 'auto',
flexShrink: 1, // Allow shrinking
flexGrow: 0, // Don't expand beyond content
minWidth: 0, // Allow shrinking below intrinsic size
};
```
### Files to Modify
```
packages/noodl-viewer-react/src/nodes/basic/Text.jsx
- Update defaultStyle object
- Add flexShrink, flexGrow, minWidth defaults
packages/noodl-runtime/src/nodes/basic/text.js (if exists)
- Mirror changes for runtime consistency
```
### Testing the Fix
1. Create a Group with row layout
2. Add two Text elements as children
3. **Before fix**: Second text overflows
4. **After fix**: Both texts share space equally
---
## Custom Variant Creation
Users should be able to create their own variants:
### "Save as Variant" Flow
```
┌─────────────────────────────────────────────────────────────────┐
│ CREATE NEW VARIANT │
├─────────────────────────────────────────────────────────────────┤
│ │
│ This button has custom styling. Save it as a reusable variant? │
│ │
│ Variant Name: [success-button ] │
│ │
│ Apply to: │
│ ○ This project only │
│ ● All projects (global) │
│ │
│ Preview: │
│ ┌─────────────────────────────────────┐ │
│ │ [ Success ] │ │
│ └─────────────────────────────────────┘ │
│ │
│ [Cancel] [Save Variant] │
└─────────────────────────────────────────────────────────────────┘
```
### Storage
```typescript
interface CustomVariant extends VariantConfig {
name: string;
nodeType: string;
scope: 'project' | 'global';
createdAt: Date;
}
// Project-scoped variants stored in project file
// Global variants stored in user preferences
```
---
## Testing Strategy
### Unit Tests
- Config registry operations
- Variant style resolution
- State style merging
- Token reference resolution in variants
### Integration Tests
- Node creation applies defaults
- Variant change updates styles
- State changes reflect visually
- Custom variants persist
### Manual Testing Checklist
- [ ] Create Button, verify styled by default
- [ ] Change Button variant, see instant update
- [ ] Create Group with "card" variant
- [ ] Create Text with "heading-1" variant
- [ ] **Test Text bug fix**: Two Text elements in row layout share space
- [ ] Create custom variant and reuse it
- [ ] Hover/active/disabled states work correctly
---
## Success Criteria
- [ ] All listed nodes have default configs
- [ ] Variant dropdown appears in property panel
- [ ] Variants reference tokens correctly
- [ ] State styles apply on interaction
- [ ] Custom variant creation works
- [ ] **Text element bug is fixed**
- [ ] No regression in existing projects
---
## Dependencies
**Blocked By:**
- STYLE-001 (Token System) - variants reference tokens
**Blocks:**
- STYLE-004 (Property Panel UX) - uses variant selector
---
*Last Updated: January 2026*
Reference in New Issue View Git Blame Copy Permalink