Skip to content

v0.1.0-alpha.13

Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 25 Oct 05:10
· 106 commits to main since this release

A new Toolbar: one row of controls that stays one row, with what doesn't fit moving into a "…" menu that works with JavaScript off. Also: the names replaced in alpha.11 are gone, checkboxes, switches, radios, segments and sliders lose ReadOnly, dark mode is darker, segmented controls get a raised look, and a long list of accessibility and static-page fixes. Nothing moves on the page any more when IzzyBlazor's script arrives.

Toolbar

Toolbar holds its own items, written straight in it: ToolbarButton, ToolbarIconButton, ToolbarButtonGroup (of ToolbarButtons and ToolbarIconButtons; moves as one) and ToolbarMenu (a submenu in the "…" menu), which take the same parameters as Button, IconButton, ButtonGroup and Menu. ToolbarText is text that stays in the bar; ToolbarItem holds anything else (a field, a SegmentedControl, a Tooltip), with a Width and its MenuContent; ToolbarSeparator draws a line that goes with its neighbors.

<Toolbar Label="Editor">
    <ToolbarButtonGroup Label="History">
        <ToolbarIconButton Icon="Lucide.Undo2" Label="Undo" />
        <ToolbarIconButton Icon="Lucide.Redo2" Label="Redo" />
    </ToolbarButtonGroup>
    <ToolbarSeparator />
    <ToolbarButton StartIcon="Lucide.Link">Link</ToolbarButton>
    <ToolbarButton Position="ToolbarPosition.End" Overflow="ToolbarOverflow.Never" Accent="Accent.Primary" Variant="ButtonVariant.Solid">Publish</ToolbarButton>
    <ToolbarButton StartIcon="Lucide.Printer" Overflow="ToolbarOverflow.Always">Print</ToolbarButton>
</Toolbar>
  • Every item takes Position (ToolbarPosition.Start, the default, Center or End), Priority (lowest moves first) and Overflow (ToolbarOverflow.Auto, the default; Never for the main action; Always for what only the menu needs). A button in a ToolbarButtonGroup takes its Position from the group. ToolbarSeparator takes Position.
  • In the "…" menu an item keeps its Href, Submit/Name/Value/FormAction/Form and OnClick, so the menu works with JavaScript off: the server works out the widths at which each item moves, from its label in Inter, and writes them as container queries (with IzzyTheme's nonce, or Nonce). The script measures the real widths and corrects them without moving anything, and makes the bar a toolbar with one tab stop and arrow keys. A ToolbarIconButton's menu item shows its icon and its Label.
  • Buttons default to Ghost, Neutral and Sm. Wrap wraps onto more rows instead of using a menu. Label (optional) names the toolbar; name each one when a page has several. MoreLabel names "…" (IzzyText.MoreActions, "More actions").
  • A ToolbarItem moves into the menu only when it has MenuContent, which stands in for it there; the buttons inside it are plain Buttons that stay with it.
  • A plain Button, IconButton, ButtonGroup or Menu directly in a Toolbar or a ToolbarButtonGroup throws, naming the toolbar item to use (or ToolbarItem).
  • The toolbar draws its items itself, so a cascading value written around an item inside the toolbar doesn't reach it, and an item an @if adds after the first render comes after the rest of its position.

Changed (check when you update)

  • The names replaced in 0.1.0-alpha.11 are removed. They were kept through alpha.12 so old markup failed to build. Gone: LinkButton (use Button with Href), HeaderNav (SiteNav), DialogActions (DialogFooter), ButtonType and the Type parameter of Button, IconButton and MenuItem (Submit, Reset), and the slot parameters AccordionItem.Header, Alert/Banner/EmptyState.Actions, Dialog.Header/Footer and AppSidebar.Header/Footer. Old slot markup now gets Razor's RZ10012 warning (an unknown element) instead of an error, so check your build warnings.
  • Checkbox, Switch, CheckboxGroup, RadioGroup, SegmentedControl and Slider have no ReadOnly. HTML has no read-only checkbox, radio or range. ReadOnly moved off FieldBase onto the fields that keep it (TextField, TextArea, NumberField, ColorPicker, Select, Combobox, MultiSelect). On the six it's a build error, and a readonly attribute passed any other way throws. In a read-only Form they're disabled and hidden inputs post their values. Use Disabled.
  • Heading throws on As. Level sets its element, and As was silently ignored. Use TextBlock for text that looks like a heading but isn't one.
  • Switch refuses Indeterminate (it throws).
  • FilterSelect and FilterCheckbox need a Label (they were named by the query key). Their first option defaults to "{Label}: All".
  • More mistakes throw: a Card with Href and no Title; an AppMain whose id differs from its AppShell's MainId.
  • Dark mode is darker. Every gray set's dark surface steps down: neutral surface #0d0d0f (was #141416), stone #0e0f10, slate #0f1218, with the page, containers, raised fill, border and outline moving with it. Text and outlines keep their contrast. A hex Gray's dark ladder follows, and BrandPalette checks against the new surfaces.
  • Segmented controls have a filled track and a raised chosen item. SegmentedControl, ColorSchemeSwitch Segmented and segmented Tabs, from --ib-color-segment and the new --ib-color-on-segment, --ib-color-segment-edge and --ib-color-segment-track. Segmented Tabs drop the track's outline.
  • Disabled fields drop their border, as do disabled add-ons, ColorPicker's and MultiSelect's boxes and the segmented track (read-only keeps it); also in a disabled fieldset. A disabled control's field icons dim (a Select's chevron).
  • Switch follows Size: tracks are 28×16, 36×20 or 44×24px (were 36×20 at every size).
  • NavLabel heads its group: 24px above and 8px below (was 12px above), in the text color instead of the faintest one.
  • A Code block's fill is quieter in light mode (surface-container-low); inline code is unchanged.
  • TextArea AutoGrow starts at Rows lines instead of a fixed two field heights.
  • A Tabs tab is a span holding its radio and a label stretched over it (so role="tab" isn't on a label). Check CSS of your own that targets the tab's label.
  • MultiSelect draws its chips on the server and reads RendererInfo, so a bUnit test rendering one must set it.
  • A static TextField no longer writes a posted password back into its HTML; the field is empty after a failed post.
  • AppShell reserves the scrollbar strip only with JavaScript off. With script the page has a scrollbar only while it scrolls, and is padded while a dialog, drawer or panel locks it, so nothing shifts.
  • NavItem and TabLink with a query are current only when the page's query is the same (in any order), and never for pages below. In a Tabs nav, when a link with a query matches, links without one give way.
  • Focus moves on when the focused control is removed (a Tag's remove button, a row's Delete): to the next control in the same container, else the one before, else the next on the page.
  • Popover's centered and side placements size to their content and fall back below or above the trigger when neither side has room; Tooltip's flip at the window's edges.
  • izzyblazor.css no longer carries an inline source map, Debug included (1.1 MB down to 322 KB).

New

  • Toolbar, ToolbarButton, ToolbarIconButton, ToolbarButtonGroup, ToolbarMenu, ToolbarText, ToolbarItem, ToolbarSeparator, ToolbarPosition and ToolbarOverflow (above).
  • CheckboxGroup SelectAll: a box that checks or clears every option, showing a dash when some are checked; SelectAllText ("Select all"). Needs script (static pages too); with JavaScript off it isn't shown. CheckboxGroup ItemDescription: an option's description, apart from its name.
  • IconButton: Name, Value, Form and FormAction, as on Button (they throw with Href).
  • ColorPicker PresetText names the presets. FieldError Id. FieldFrame AnnounceRequired.
  • ModeSupportAttribute on every component, saying what works with JavaScript off, on static pages with the script and on interactive pages. It changes nothing at run time; the docs site shows it. Every …Changed callback outside the form fields (@bind-Open, Table's @bind-Sort and the rest) is marked interactive only.
  • IzzyText: MoreActions, SelectAll, Chosen, Required, Confirm, Search, SkipToContent, CodeBlock, ValueInvalid and NumberInvalid, for text that was hard-coded English.

Fixed

  • Nothing moves when IzzyBlazor's script arrives. Parts shown or hidden by the script moved the page 7-82px about 200ms after it loaded; CSS now decides by @media (scripting), MultiSelect draws its chips on the server, and Combobox keeps its select until ready. An on-demand element whose code can't load is laid out as with no script.
  • Accessibility: a code block is a group named by its Title (or "Code"); a loading IconButton reads "Loading Delete"; a DialogHeader is a level-2 heading, and DialogService dialogs without a title are named by DialogOptions.Label or the message; a labeled Divider is read as its text; Fieldset's Description describes the group; Combobox and MultiSelect announce "No matches" through a status beside the list; copy buttons announce "Copied" through a live region; MultiSelect's input is described by its chosen options; FormErrors is read once (no longer also role="alert"); NavLabel and NavDivider are valid list items; a required CheckboxGroup says "(required)"; CheckboxGroup, RadioGroup and SegmentedControl take focus after a failed static post; TextArea's count is linked as its description; a required Combobox or MultiSelect sets aria-required.
  • The skip link moves focus to the main area under enhanced navigation too, and is inert while the sidebar drawer is open. SidebarToggle and the close links are plain links with JavaScript off and buttons with aria-expanded with script.
  • Static pages: a closed ?dialog= stays out of the address after an enhanced load; a dismissed Alert stays closed after a post; the first edit of a field with errors from the last post hides them; Escape closes a server-opened Dialog or Drawer where closedby is supported (Chrome and Edge 134, Firefox 141).
  • Combobox: changing the choice with Search on an interactive page keeps it (the select fell back to the placeholder and posted nothing); Enter and leaving wait for search results; Enter with the list open never submits the form; duplicate values show once; server search reopens on the first results, not the last search's.
  • FilterForm: inputs of your own (a date) apply when they change; an interactive page keeps its page number on load; Back and Forward forget what was being typed; Clear focuses the first filter; the button area keeps its height while empty.
  • Checkbox and Switch: links in a label can be clicked.
  • Slider: quick key presses on an interactive page aren't undone.
  • ToastRegion: a toast shown before NavigateTo on an interactive page stays, and a toast reusing an earlier one's element gets its own timer.
  • Dialogs, drawers and panels reach the window's edge on AppShell pages, with the backdrop covering the scrollbar strip.
  • AppBrand with an icon in a SidebarHeader re-rendered forever (a full-height sidebar hung the server).
  • Tabs: after enhanced navigation the selection follows the server's markup again; arrows from a clicked disabled tab go to the next enabled one.
  • IconButton in a Tooltip leaves out its native title, so hovering shows one tooltip. A hidden Tooltip without script no longer makes the page scroll sideways.
  • Card: CardFooter stays at the bottom of a stretched card; a linked card's media sit above its link.
  • MultiSelect: chips follow the field's Size and density; a disabled one looks disabled with script and its chips lose their remove buttons; the chevron stays beside the first row of chips; chips that fill a row don't add an empty one.
  • SegmentedControl with HideLabel has no space above it, so it lines up in a row. A read-only ColorPicker shows its hex box so it can be focused.
  • A plain [EmailAddress] or [Url] no longer sends .NET's English message, so the browser's own shows.

Full Changelog: v0.1.0-alpha.12...v0.1.0-alpha.13