Skip to content

feat: CSS positioning utilities — relative/absolute + inset offsets#50

Merged
anilcancakir merged 2 commits intov1from
feat/css-positioning-utilities
Apr 4, 2026
Merged

feat: CSS positioning utilities — relative/absolute + inset offsets#50
anilcancakir merged 2 commits intov1from
feat/css-positioning-utilities

Conversation

@anilcancakir
Copy link
Copy Markdown
Collaborator

Summary

  • Adds PositionParser for CSS-like positioning (relative, absolute) with Stack/Positioned rendering in WDiv
  • Supports directional offsets (top-*, right-*, bottom-*, left-*), inset shortcuts (inset-*, inset-x-*, inset-y-*), negative offsets (-top-*), and arbitrary values (top-[24px], left-[50%])
  • fixed/sticky tokens are recognized but deferred (no rendering)

Changes

File Change
lib/src/parser/wind_style.dart WindPositionType enum + 5 position fields
lib/src/parser/parsers/position_parser.dart New parser — canParse/parse with theme scale + arbitrary values
lib/src/parser/wind_parser.dart Register PositionParser before FlexboxGridParser
lib/src/widgets/w_div.dart Stack/Positioned rendering for relative/absolute
test/parser/parsers/position_parser_test.dart 26 parser tests
test/widgets/w_div/position_test.dart 8 widget tests
doc/layout/positioning.md Full documentation page
example/lib/pages/layout/positioning.dart Demo page with 6 sections
example/lib/routes.dart Route registration
CHANGELOG.md Release notes
README.md Feature list update
skills/wind-ui/SKILL.md Utility reference update

Test plan

  • 26 parser tests: position types, offsets, insets, negatives, arbitrary values, last-class-wins, edge cases
  • 8 widget tests: Stack rendering, Positioned wrapping, mixed flex+absolute, inset-0, z-index passthrough, negative offsets
  • Full regression: 958 tests pass, 0 failures
  • dart analyze — 0 issues
  • Manual: run example app, navigate to Layout > Positioning page

Closes #49

Copilot AI review requested due to automatic review settings April 4, 2026 20:06
…ts (#49)

Add PositionParser for CSS-like positioning with Stack/Positioned rendering:

- `relative` parent creates Stack, `absolute` child becomes Positioned
- Offset tokens: top-*, right-*, bottom-*, left-* (spacing scale)
- Inset shortcuts: inset-*, inset-x-*, inset-y-*
- Negative offsets: -top-*, -inset-*
- Arbitrary values: top-[24px], left-[50%]
- fixed/sticky recognized but deferred (no rendering)

Includes 34 new tests (26 parser + 8 widget), documentation,
example page, and post-change checklist sync.

Closes #49
@anilcancakir anilcancakir force-pushed the feat/css-positioning-utilities branch from 10e3ef3 to 44747b5 Compare April 4, 2026 20:09
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds Tailwind-like CSS positioning support to Wind UI by introducing a new PositionParser and updating WDiv to render relative containers as Stack and absolute children as Positioned, along with documentation, example/demo wiring, and tests.

Changes:

  • Introduces PositionParser and new positioning fields on WindStyle (relative/absolute + top/right/bottom/left offsets).
  • Updates WDiv core layout to build Stack/Positioned structures when relative/absolute utilities are used.
  • Adds parser + widget tests, documentation, and an example page + route; updates README/CHANGELOG/SKILL reference docs.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
lib/src/parser/wind_style.dart Adds WindPositionType and new position offset fields to the immutable style object.
lib/src/parser/parsers/position_parser.dart New parser for relative/absolute and offset/inset utilities (including negatives/arbitrary).
lib/src/parser/wind_parser.dart Registers PositionParser in the orchestrator before flex/grid parsing.
lib/src/widgets/w_div.dart Adds Stack/Positioned rendering paths and skips flex wrappers for absolute-positioned widgets.
test/parser/parsers/position_parser_test.dart Adds unit tests covering position tokens, offsets, insets, negatives, arbitrary values, and edge cases.
test/widgets/w_div/position_test.dart Adds widget tests validating Stack/Positioned behavior in WDiv.
doc/layout/positioning.md New docs page describing positioning utilities and usage patterns.
example/lib/pages/layout/positioning.dart New demo page showcasing positioning patterns and an interactive overlay toggle.
example/lib/routes.dart Registers the new positioning demo route.
CHANGELOG.md Notes new positioning utilities under Unreleased.
README.md Updates supported utilities list to include positioning tokens.
skills/wind-ui/SKILL.md Updates skill reference with positioning utilities and notes limitations.
Comments suppressed due to low confidence (1)

skills/wind-ui/SKILL.md:166

  • SKILL.md lists left-[50%] as an “arbitrary offset”, but % offsets currently can’t be represented correctly with Positioned because offsets are stored as logical pixels (double). This reference should be updated to reflect actual supported units/behavior (or updated once percentage support is implemented).
- `child` and `children` are mutually exclusive on `WDiv`.
- `WDiv` auto-wraps in `WAnchor` if `hover:`, `focus:`, or `active:` is present in the `className`.
- `WButton` with `isLoading: true` activates `loading:` prefix classes and disables interaction.
- `WSelect` with `isMulti: true` must use `values` + `onMultiChange` instead of `value` + `onChange`.
- `WSpacer` is a `const`-friendly semantic spacer — prefer over `SizedBox` or empty `WDiv` for gaps between siblings.
- `WDatePicker` `mode`: `DatePickerMode.single` or `DatePickerMode.range`. Range mode uses `onRangeSelected` callback.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…ts, dark mode

- _isAbsolutePositioned now uses WindParser.parse with context + states
  instead of raw token matching — handles responsive/state prefixes correctly
- _buildPositionedChild passes child states for state-prefixed offsets
- Dynamic className/states extraction supports all Wind widgets, not just WDiv/WText
- Remove % unit from arbitrary offsets (Flutter Positioned uses logical pixels)
- Add dark: variants to all colors in positioning example page
- Use wrapWithTheme() helper in position widget tests
@anilcancakir anilcancakir merged commit cfe9c7a into v1 Apr 4, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants