Skip to content

feat(avalonia): P3 navigation and layout, dialog focus trap and demo app icons - #10

Merged
Shewart merged 6 commits into
mainfrom
feat/avalonia-p3-navigation
Oct 9, 2026
Merged

Shewart merged 6 commits into
mainfrom
feat/avalonia-p3-navigation

Conversation

@Shewart

@Shewart Shewart commented Oct 9, 2026

Copy link
Copy Markdown
Contributor

Ports the P3 tier to Avalonia, closes two overlay gaps left from P1, and gives both demos the ShellUI Native app icon.

Changes

P3 components

  • Collapsible, accordion, tabs, breadcrumb (and their parts), skeleton, scroll-area
  • Collapsible and accordion content animates its height and fades, through AnimateExpandAsync / SetExpanded in element-extensions (same approach as MAUI)
  • Accordion: single or multiple open items, rotating chevron, hover underline, divider between items
  • Tabs: muted strip, active pill with shadow, fade on switch; Left / Right select the neighbouring tab
  • Breadcrumb: chevron separators; the current page can't be clicked or focused
  • Skeleton: pulsing muted block (uses Border's CornerRadius)
  • ScrollArea: ScrollViewer with Fluent's auto-hiding scrollbar
  • sync-templates.py also recognises SetExpanded as an element-extensions dependency
  • Demo: new "Navigation and layout" section

Overlay fixes

  • Dialog, Drawer and Sheet keep keyboard focus inside while open: focus moves to the first control, Tab and Shift+Tab wrap around, and focus returns to the opener on close. The Dialog and Sheet close buttons are tab stops that close on Enter or Space
  • Dropdown, Popover, Select, DatePicker and TimePicker keep their 4px gap when they flip above the trigger. Avalonia flips the panel but keeps the downward offset, so the offset is now reversed after the flip

Demo app icons

  • Both demos use the ShellUI Native tile (same as the favicon)
  • MAUI: rounded tile on Windows and Mac; adaptive icon on Android, with the grid scaled down so a circle crop doesn't clip it; corners filled on iOS, which requires opaque icons
  • Avalonia: Assets/icon.ico for the exe and the window

Docs

  • COMPONENTS.md: Avalonia section and MAUI differences table updated (P3 added, focus trap described, flipped-gap row removed)
  • DEVELOPMENT_PLAN.md: P3 entry, overlay fixes, refreshed branch table

Verification

  • Solution and Avalonia demo build with 0 warnings / 0 errors at every commit; 765 tests pass; dotnet format check clean
  • Each P3 component, plus dialog / sheet / drawer / dropdown / popover / select / date-picker / time-picker, installed alone into a fresh dotnet new avalonia.app builds 0/0 with no MAUI code
  • Demo checked in light and dark: accordion toggle and animation, collapsible, tab switching by keyboard with the focus ring, scroll area, skeleton, breadcrumb
  • Focus trap checked with real key presses: Tab wraps, Shift+Tab goes back, Escape and Enter on the close button return focus to the trigger; a drawer with no focusable controls keeps focus on its panel
  • Flipped and unflipped panels both measured at 4px from the trigger
  • MAUI demo builds for Windows and Android with the new icons

Shewatipa Tseisi added 6 commits October 9, 2026 10:00
Collapsible, accordion, tabs and breadcrumb with their parts, skeleton and scroll-area. Expanding content animates its height through AnimateExpandAsync in element-extensions, as on MAUI. Tabs also switch with Left and Right.
…sheets

Focus moves to the first control in the content, Tab and Shift+Tab cycle inside it, and on close focus returns to the control that opened it. The Dialog and Sheet close buttons are tab stops that close on Enter or Space.
… trigger

Avalonia flips a panel that doesn't fit below but keeps the offset's sign, which pushed it onto the trigger. The offset is now mirrored once the flip is known. Applies to Dropdown, Popover, Select, DatePicker and TimePicker.
…form

Same tile as the favicon (assets/icon.svg). Android gets an adaptive icon with the grid inside the launcher's safe zone; iOS fills the rounded corners because its icons must be opaque. The Avalonia demo gets an .ico for the exe and the window.
@github-actions github-actions Bot added documentation Improvements or additions to documentation templates examples labels Oct 9, 2026
@Shewart
Shewart merged commit 189392e into main Oct 9, 2026
7 checks passed
@Shewart
Shewart deleted the feat/avalonia-p3-navigation branch October 9, 2026 13:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation examples templates

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant