feat: CSS positioning utilities — relative/absolute + inset offsets#50
Merged
anilcancakir merged 2 commits intov1from Apr 4, 2026
Merged
feat: CSS positioning utilities — relative/absolute + inset offsets#50anilcancakir merged 2 commits intov1from
anilcancakir merged 2 commits intov1from
Conversation
…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
10e3ef3 to
44747b5
Compare
There was a problem hiding this comment.
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
PositionParserand new positioning fields onWindStyle(relative/absolute+ top/right/bottom/left offsets). - Updates
WDivcore layout to buildStack/Positionedstructures whenrelative/absoluteutilities 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.mdlistsleft-[50%]as an “arbitrary offset”, but%offsets currently can’t be represented correctly withPositionedbecause 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
9 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PositionParserfor CSS-like positioning (relative,absolute) withStack/Positionedrendering in WDivtop-*,right-*,bottom-*,left-*), inset shortcuts (inset-*,inset-x-*,inset-y-*), negative offsets (-top-*), and arbitrary values (top-[24px],left-[50%])fixed/stickytokens are recognized but deferred (no rendering)Changes
lib/src/parser/wind_style.dartWindPositionTypeenum + 5 position fieldslib/src/parser/parsers/position_parser.dartlib/src/parser/wind_parser.dartlib/src/widgets/w_div.darttest/parser/parsers/position_parser_test.darttest/widgets/w_div/position_test.dartdoc/layout/positioning.mdexample/lib/pages/layout/positioning.dartexample/lib/routes.dartCHANGELOG.mdREADME.mdskills/wind-ui/SKILL.mdTest plan
dart analyze— 0 issuesCloses #49