Skip to content

Releases: enabledevmode/izzyblazor

v0.1.0-alpha.19

v0.1.0-alpha.19 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 27 Oct 21:31

Tabs that don't fit scroll by swipe on touch screens, and the docs site has more examples and five more hand-written Overviews. No API changes.

Fixed

  • Tabs that don't fit scroll by swipe on phones and tablets. A swipe that started on a tab didn't move the strip (a mouse wheel and TabLinks did), for horizontal tabs and for vertical tabs, which are a row on phones. Each tab's label is now a box of its own rather than display: contents; tabs look and click the same.

Docs site

  • Examples: OnThisPage has a demo, a guide with its outline beside it; PrevNext, Container and AspectRatio have a second example each. Every component now has at least two.
  • Overviews: Badge, Progress, CopyButton, Fieldset and OnThisPage have hand-written Overviews.
  • Search no longer lists headings from an Overview's Usage sample as sections of the page.
  • Crawlers are kept off query-string addresses (robots.txt), and one client is held to 60 pages a minute, after a crawler walking the Pagination examples slowed every page.

Full Changelog: v0.1.0-alpha.18...v0.1.0-alpha.19

v0.1.0-alpha.18

v0.1.0-alpha.18 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 27 Oct 05:08

Fixes for overlays and disclosures on interactive pages, tabs that scroll with a mouse wheel, and dialogs that keep their shape as they close. One parameter is gone: DialogClose.Reset.

Breaking

  • DialogClose no longer takes Reset. A reset button can't close a dialog (browsers ignore the close command on one, and the close form has nothing to reset), so it did nothing; it now throws. To reset a form as well, put a Button with Reset beside the DialogClose.

Fixed

  • Quick opens and closes on interactive pages end where the user left them, at any connection speed. Renders made before the user's latest change could arrive late and undo it: a Dialog or Drawer could open and close for ever, and an Accordion item double-clicked on a slow connection ended in the wrong state. The script and C# now count each change (IzzyToggleEventArgs.Seq, rendered as data-ib-seq), and a render that hasn't caught up is ignored. This covers Dialog, Drawer, Popover, Menu, Accordion and Collapsible.
  • Back or Forward with a dialog open no longer leaves the page unresponsive. Enhanced navigation removed the dialog's open attribute without closing it, so it stayed modal, unseen; it's now closed properly.
  • Closing a dialog no longer shrinks it to a line and re-centers it before it fades (most visible on phones). Safari and Firefox, which can't keep a closing dialog in the top layer, close it without the fade.
  • Close buttons that submit the dialog's close form no longer carry the close command, which Chromium ignored and warned about in the console on every page with a dialog.

Navigation

  • Tabs that don't fit scroll with a mouse wheel (the strip hides its scrollbar), handing back to the page at either end. The selected tab is scrolled into view when the page loads, after enhanced navigation, and when C# or the URL changes it.
  • FullWidth tabs keep equal widths but no narrower than their label, so they scroll instead of cutting labels off.

Disclosure

  • On interactive pages AccordionItem and Collapsible render data-open instead of open, and IzzyBlazor's script opens them, before the first paint. Static pages are unchanged. Styles that use [open] still apply.

Docs site

  • A demo's Desktop/Phone switch is hidden when the demo is narrower than 640px, where both looked the same.
  • The Collapsible custom-trigger example keeps its width when it opens, so its trigger no longer moves from under the pointer.

Full Changelog: v0.1.0-alpha.17...v0.1.0-alpha.18

v0.1.0-alpha.17

v0.1.0-alpha.17 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 26 Oct 22:25

A small fix release: a dialog opened from a link no longer shifts the page, and the dialog's close button sits in the corner with a larger X. No API changes.

Fixed

  • Opening a dialog from a link (?dialog=, or anything else that locks the page and arrives by enhanced navigation) no longer shifts the page sideways by the scrollbar's width. Enhanced navigation was dropping the width that pads the locked page in place of its scrollbar; it's now kept.

Overlays

  • Dialog's close button sits in the corner, 0.5rem from the top and end edges, with a 1.25rem icon (it was 1rem, centered on the title's line, and looked small and low). A title that wraps no longer puts the button halfway down its two lines. The title, body and header height are unchanged. Drawers share the header, so theirs moves too.

Docs site

  • A troubleshooting article, "Interactive parts stop responding in production": a circuit lives on the server that started it, so behind a load balancer each reader has to stay on one server. It covers the 404 "No Connection with that ID" in the console, sticky sessions, Azure SignalR Service, running one server (Fly.io's --ha=false) and WebSockets through a proxy. Render modes links it.
  • The site runs on one machine again, so Live examples, such as Slider's "Following the value live", keep their connection.

Full Changelog: v0.1.0-alpha.16...v0.1.0-alpha.17

v0.1.0-alpha.16

v0.1.0-alpha.16 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 26 Oct 17:23

The surface colors are renamed by what they do: an overlay floats above the page, and fills inside a surface go from subtle to strong in light and dark mode. Stepper gets a compact row on phones, SiteNav's menu button can sit at the start of the header, and a TabLink can be marked current whatever the URL. The docs site gets an MCP server for AI assistants.

Changed (check when you update)

Razor takes an old parameter name silently, so search your project for each of these.

  • Surface colors (C# and CSS variables; a custom theme that sets the variables must rename them too):
    • Color.SurfaceRaised → Color.SurfaceOverlay; --ib-color-surface-raised → --ib-color-surface-overlay; --ib-color-raised-border → --ib-color-overlay-border
    • Color.SurfaceContainerLow → Color.FillSubtle; --ib-color-surface-container-low → --ib-color-fill-subtle
    • Color.SurfaceContainer → Color.Fill; --ib-color-surface-container → --ib-color-fill
    • Color.SurfaceContainerHigh → Color.FillStrong; --ib-color-surface-container-high → --ib-color-fill-strong
  • SiteNav.MenuButtonAtEnd is replaced by MenuButtonPosition: MenuButtonAtEnd="false" is now MenuButtonPosition="MenuButtonPosition.InPlace"; the default, End, is unchanged.

New

  • SiteNav.MenuButtonPosition: End (the default), Start, before the brand, to match pages whose header starts with a SidebarToggle, or InPlace, where the links are. Start and End move the button visually, so Tab still reaches it where the SiteNav is written.
  • TabLink.Current marks a tab current (true) or not (false) whatever the URL, for a choice the page knows from elsewhere, such as a cookie. When one tab is set current, the tabs that follow the URL are unmarked; it renders aria-current="true", and a disabled tab is never current.
@* The billing period comes from a cookie, so the address can't tell which tab is current. *@
<Tabs Label="Billing" Variant="TabsVariant.Segmented">
    <TabLink Href="pricing?billing=monthly" Label="Monthly" Current="@(Billing == "monthly")" />
    <TabLink Href="pricing?billing=yearly" Label="Yearly" Current="@(Billing == "yearly")" />
</Tabs>

Layout

  • Stepper on phones: below 640px a horizontal stepper is a row of markers with only the current step's label, instead of a column; a finished step with an Href is still a link on its marker, with the focus ring there. Orientation.Vertical is unchanged.
  • AppSidebar: a collapsible sidebar's labels stay on one line from its breakpoint up, so they don't wrap while the width animates; a label too long for the sidebar ends in an ellipsis.
  • AppShell Inset: beside a sidebar (from its breakpoint up) the main panel has no gap of its own on that side, so an icon rail sits centered in its column.

Docs site

  • An MCP server at https://izzyblazor.com/mcp, /llms.txt, and an "AI assistants" article in Get started: search, components, types, examples and articles for coding assistants.
  • The Off · Static · Live switch uses the library's segmented link Tabs; the home page's menu button is on the left, as on the other pages.
  • Demos: Release notes redesigned; Checkout, Inbox with undo, Profile card, Collapsed from C# and Editor toolbar fixed at phone width; the IzzyTheme presets each describe their preset; the Box Surfaces example shows each color where it's used.
  • robots.txt and sitemap.xml answer HEAD.

Full Changelog: v0.1.0-alpha.15...v0.1.0-alpha.16

v0.1.0-alpha.15

v0.1.0-alpha.15 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 25 Oct 16:48

Highlight marks the words of a search in text, and Heading.SlugOf gives the id a heading gets, both built for the new search on izzyblazor.com. The docs site also gets search (Ctrl+K), a sitemap and canonical links for search engines.

New

  • Highlight shows text with each word of a query in a mark, for search results, a filtered list or a table filtered by a FilterForm. A word matches at the start of a word, the humps of a PascalCase name included ("field" marks the "Field" of "TextField"), or anywhere with Match="HighlightMatch.Anywhere"; case is ignored and touching matches are marked as one. Highlight.Find gives the ranges for your own markup. It works the same in every mode.
<Highlight Text="@product.Name" Query="@Query" />
<Highlight Text="@product.Description" Query="@Query" Match="HighlightMatch.Anywhere" />
  • Heading.SlugOf(text) returns the id a heading with that text gets once an OnThisPage lists it ("Rows & columns" is "rows-columns"), for linking to a section from another page.

Docs site

  • Search: the header's Search button or Ctrl+K opens results as you type, across components, parameters, articles, sections and demos; /search works with JavaScript off.
  • Off pages read the production stylesheet's no-script rules again (the minified @media (scripting: none) rules were dropped, so the Slider's fill and the Alert's close buttons were wrong in Off mode).
  • robots.txt, sitemap.xml, a canonical link on every page (without ?mode= and other queries), Open Graph titles, descriptions and addresses, and shorter descriptions.

Full Changelog: v0.1.0-alpha.14...v0.1.0-alpha.15

v0.1.0-alpha.14

v0.1.0-alpha.14 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 25 Oct 15:13

Toggle buttons and a Toolbar that drops its labels before anything moves into its menu. Also: enhanced navigation no longer flashes the old page from its top, a few accessibility fixes, and the documentation now lives only on izzyblazor.com.

New

  • Pressed on Button and IconButton makes a toggle button, such as Bold: screen readers hear "pressed" or "not pressed" (aria-pressed), and pressed it shows a tint and an edge in the accent's text color. With @bind-Pressed (PressedChanged) a click toggles it before OnClick on interactive pages; on static pages set it from the server's state and post the change with Submit, Name and Value. A link can't be pressed: Pressed with Href throws.
  • In a Toolbar's "…" menu a toggle is a checkbox item (menuitemcheckbox) that toggles the same.
  • Toolbar CollapseLabels: before anything moves into the "…" menu, ToolbarButtons with a StartIcon (in a ToolbarButtonGroup too) show only their icon, and ToolbarMenus with one keep their icon and chevron, all at once; items then move into the menu as before. The text stays for screen readers and, with script, is the tooltip. An item with Overflow="ToolbarOverflow.Never" keeps its text. It works with JavaScript off: the server adds one container query for it.
<Toolbar Label="Insert" CollapseLabels>
    <ToolbarButton StartIcon="Lucide.Heading">Heading</ToolbarButton>
    <ToolbarButton StartIcon="Lucide.List">List</ToolbarButton>
    <ToolbarIconButton Icon="Lucide.Bold" Label="Bold" @bind-Pressed="_bold" />
    <ToolbarButton StartIcon="Lucide.Send" Position="ToolbarPosition.End" Overflow="ToolbarOverflow.Never">Publish</ToolbarButton>
</Toolbar>
  • AppShellContext carries the shell's ScrollMode.

Changed (check when you update)

  • With ShellScroll.Main, AppMain is a tab stop (tabindex="0", was -1), so a main area that scrolls on its own can be scrolled from the keyboard when nothing in it takes focus. It shows a focus ring when the keyboard reaches it. With ShellScroll.Page nothing changes.
  • A tab's error count reads "Billing (1 error)" (was "Billing, 1 error", which Chrome read as "Billing , 1 error").
  • A selectable Table's checkbox column has a hidden "Select" heading (SelectRowLabel) while select-all is hidden with no script; once the script runs, the select-all checkbox names the column as before.
  • ColorPicker with ShowHex="false" is a square swatch, with or without script, instead of a full-width box with an empty stretch.
  • docs/getting-started.md, docs/styling.md and docs/components.md are gone from the repository: the same documentation, kept up to date, is on izzyblazor.com.

Fixed

  • Enhanced navigation no longer shows the old page from its top while the next one loads. Since .NET 10, Blazor scrolls to the top as soon as a link to another page is followed, before the response arrives (dotnet/aspnetcore#64015); IzzyBlazor's script keeps the page where it is and goes to the top (or the link's #fragment) once the new page is in. Interactive routing and NavigationManager.NavigateTo are unchanged.

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

v0.1.0-alpha.13

v0.1.0-alpha.13 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 25 Oct 05:10

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...
Read more

v0.1.0-alpha.12

v0.1.0-alpha.12 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 21 Oct 03:12

What a documentation site needs: an "On this page" outline built on the server, headings you can link to, code blocks with titles, line numbers and highlighted lines, live examples with their source, previous and next links, and a copy button for any text. The sidebar gets a panel mode for small screens and shows the brand in its drawer, and a dismissed Banner now stays dismissed for the session. Nothing was renamed or removed.

Changed (check when you update)

  • A Dismissible Banner is remembered for the browser session by default. Closing it writes a session cookie, and later pages leave it out until the browser closes. Before, only a banner with a RememberKey was remembered. Without a RememberKey, the key comes from the banner's Title, text and links, so a changed message shows again by itself, and banners with the same words and links share a dismissal. A banner whose text comes from a component of your own (a localizer) is remembered only with a RememberKey. Remember="DismissMemory.None" turns this off.
  • RememberKey alone now means the session, not a year. Add Remember="DismissMemory.Persistent" to keep the old year-long cookie.
  • The page's scrollbar is no longer themed by default under AppShell. Styled scrollbars never fade, and on Windows they replace the system's overlay scrollbars. IzzyTheme Scrollbars="ThemeScrollbars.Themed" (or .ib-scrollbars on <html>) brings the themed one back. A page-scrolling shell now sets scrollbar-gutter: stable, so opening the drawer no longer shifts the header; with classic scrollbars, a short page shows an empty strip where the scrollbar goes.
  • Menus are at least 15rem wide (were 10rem), submenus too, never wider than the window less 1rem. A submenu with no room beside its item (a phone) opens below it, over the menu. A MenuItem's Shortcut is drawn in a key cap (<kbd>) 24px from the label, with ⌘ ⌥ ⇧ ⌃ drawn as icons. Icons sit 10px from the label.
  • Vertical NavItem titles wrap instead of being cut short with an ellipsis. Horizontal menus stay on one line.
  • Headings get ids on a page with an OnThisPage. A Heading in AppMain gets an id slugged from its text ("Rows & columns" becomes rows-columns, a repeat -2) unless it sets one, and the levels the outline lists become links to themselves. Pages without an OnThisPage render headings as before.
  • A click anywhere on a Checkbox or Switch row toggles it, the hint included. A plain row is now only as wide as its label and hint, so blank space beside it doesn't toggle it; a ControlPosition.End row is the full width.
  • AppSidebar's drawer shows the shell's AppBrand in its top row when the sidebar has no SidebarHeader, so it never opens on an empty bar. Add a SidebarHeader to show something else.
  • A Code block with LineNumbers or HighlightLines renders each line as its own element (a mark when highlighted). With a Title, the language label gives way to a header row.
  • With JavaScript, the sidebar scrolls the current link into view when a page opens, and AppShell turns off its transitions while the window is resized (crossing the breakpoint no longer slides the drawer out).

New

  • OnThisPage: the page's outline, for AppAside. Each Heading in AppMain adds itself while the page renders, so the list is in the first response, with JavaScript off. MinLevel and MaxLevel (2 and 3) set the levels, Title the heading ("On this page"). With JavaScript it marks the section in view and adds headings from raw HTML (Prose, rendered Markdown). Headings in a CodeExample, a dialog or a popover aren't listed.
  • Heading: Outline="false" leaves a heading out; Anchor="true" or "false" turns its self-link on or off. A heading that holds a link or button of its own never gets one.
  • Code: Title (a file name in a header row), LineNumbers (not selected or copied), and HighlightLines="3-5,9", drawn on the server.
  • CodeExample: a live example over its source, colored on the server with a copy button. CodeExampleFile parts become tabs over the source; Collapsible hides it behind "Show code" (SourceOpen opens it). Also Code, Language, Title, HighlightLines, LineNumbers, MaxHeight, Center, ShowCodeText, HideCodeText, FilesLabel, and the --ib-example-padding and --ib-example-bg variables.
  • CopyButton: copies Text, or the value or text of the element named by For, and shows a check and "Copied" (CopiedLabel). An icon button named "Copy" (Label) unless it has content; it fits a field's EndAddon. Needs JavaScript, so it appears only when the script runs.
  • PrevNext: previous and next links for the end of an article (PreviousHref, PreviousTitle, NextHref, NextTitle, PreviousText, NextText, Label), side by side when there's room.
  • BadgeVariant.Plain: a badge's text in its color with no fill or border, for counts. NavItem BadgeVariant passes it to the item's badge.
  • AppSidebar SmallScreen="SidebarSmallScreen.Panel": below the breakpoint the sidebar opens under the header, full width, and SidebarToggle turns into its close button; works with JavaScript off. SidebarToggle CloseLabel names that button ("Close menu").
  • IzzyTheme Scrollbars (ThemeScrollbars.Auto, Themed, Native), and the .ib-scrollbars-native class.
  • Banner Remember (DismissMemory.Session, Persistent, None).
  • IzzyText: OnThisPage, PrevNextNavigation, Previous, Next, Copy, ShowCode, HideCode, SourceFiles.

Fixed

  • The skip link, SidebarToggle and the drawer's close and backdrop links went to the home page from any other page under <base href> (with JavaScript off; the skip link even with it). They now keep the page's path and query.
  • SiteNav's phone menu focuses its first link (it focused the hidden backdrop).

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

v0.1.0-alpha.11

v0.1.0-alpha.11 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 20 Oct 22:17

Every component with regions is now put together from parts, as Card was in alpha.10: write the parts among the content (DialogFooter, SidebarHeader, BannerActions…) and leave out the <ChildContent> wrapper. Content outside the parts is the body; an optional body part (DialogBody, SidebarBody) gives it layout props. Buttons follow one rule: Href makes it a link, so LinkButton is gone. HeaderNav is now SiteNav, and its phone menu opens under the header. Checkboxes, switches and fieldsets take an icon.

Changed (check when you update)

  • LinkButton is replaced by Button with Href. A Button with Href is a link (a) and keeps everything LinkButton had: External, HideExternalIcon, NewTabLabel, and no href while Disabled or Loading. A link throws if it's also given Submit, Reset, Name, Value, Form or FormAction; DialogTrigger and DialogClose can't take Href. IconButton with Href likewise throws with Submit or Reset, and now runs OnClick.
  • Dialog: Header is replaced by DialogHeader, and Footer and DialogActions by DialogFooter. DialogFooter is drawn where it's written, so write it last: last in the dialog, or last in a form that's last in the dialog, where its submit button submits the form with no Form="id". It reaches the dialog's edges (following ContentPadding) and stays in view while the body scrolls. To keep it at the bottom of a side drawer when the content is short, put the content in a DialogBody.
  • AppSidebar: Header and Footer are replaced by SidebarHeader and SidebarFooter. In the drawer, the SidebarHeader row is now the top bar, with the close button in it, instead of a close bar followed by the header as a second row.
  • Alert's Actions is replaced by AlertActions, written last in the alert; Banner's by BannerActions; EmptyState's by EmptyStateActions. AccordionItem's Header is replaced by AccordionHeader (an item no longer throws without a Title: give it a Title or an AccordionHeader, since that's its name).
  • HeaderNav is now SiteNav. Below its breakpoint the menu button opens the links in a panel under the header, which stays in view with the site's name, and the same button closes it. The sheet's own top bar, its close button and PanelHeader are gone (with CloseLabel); PanelFooter is SiteNavFooter, written among the links. The button's name is now "Menu" (IzzyText.Menu). CSS classes and the element are ib-site-nav… (were ib-header-nav…). In a shell with a sidebar, a SiteNavFooter doesn't move into the sidebar: use SidebarFooter.
  • The old names fail loudly for one release. <LinkButton>, <DialogActions>, <HeaderNav> and the old slots written as attributes (Footer="@...") are build errors (CS0619) naming the replacement. The old slots written as child elements (<Footer> in a Dialog, <Header> in an AppSidebar or AccordionItem, <Actions> in an Alert, Banner or EmptyState) throw when the component renders, naming the part to use, or fail to build with RZ9996 when written beside loose content. Search for <Header>, <Footer>, <Actions>, PanelHeader and PanelFooter rather than waiting for a page to throw.
  • CardPart, the public base of Card's parts, is replaced by ComponentPart, shared by every part a component draws in its own place.
  • In the collapsed sidebar rail, an AppBrand's name now hides by itself (it still shows in the drawer and the full sidebar), so a brand there needs no HideLabel.

New

  • DialogBody: the dialog's body with Stack's layout props. It fills the dialog, so a DialogFooter after it sits at the bottom of a side drawer; Flush runs it to the sides. SidebarBody: the sidebar's scrolling content with layout props.
  • Icon on Checkbox, Switch and Fieldset: a row icon before the label (with ControlPosition.End, a column at the start centered on the label and hint), or a section icon at the start of a fieldset's heading. Decorative. Put icons on rows or on sections, not both.
  • DialogFooter and AlertActions take Row's layout props (Justify moves the buttons; a dialog's are at the end by default).
  • Select shows the chosen text as a tooltip, so a value cut short can be read on hover.

Fixed

  • A collapsed full-height sidebar's header content is centered in its row beside an AppHeader (it sat at the top).
  • Opening the sidebar drawer focuses its close button.
  • A card part swapped in with @if/else kept showing its first content when it changed later.

Full Changelog: v0.1.0-alpha.10...v0.1.0-alpha.11

v0.1.0-alpha.9

v0.1.0-alpha.9 Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 18 Oct 19:35

Buttons submit with a bare Submit: <Button Submit>Save</Button>. One rename.

Changed (check when you update)

  • Type="ButtonType..." on Button, IconButton and MenuItem is replaced by Submit, or Reset on buttons. Write <Button Submit> for <Button Type="ButtonType.Submit">, <Button Reset> for ButtonType.Reset, and drop Type="ButtonType.Button" (a button that does nothing by itself is still the default). Setting both Submit and Reset throws.
  • Old markup fails to build. Type and ButtonType stay for this release, marked obsolete as errors, so every old use stops the build with error CS0619 and a message pointing to Submit. (Without them, Razor would take Type="ButtonType.Button" as a plain HTML attribute, and the browser would treat that button as a submit button.) They'll be removed in a later release.
  • This also ends a false "Wrong attribute value" warning in Rider and ReSharper, which checked <Button Type="..."> against HTML's <button type>.

Fixed

  • <DialogClose Reset> threw "can't set both Submit and Reset" (a DialogClose submits its close form by default); it now resets the form instead.
  • The error for setting both Submit and Reset names the component used (DialogTrigger, DialogClose), not Button, and is raised while the button is loading too.

Full Changelog: v0.1.0-alpha.8...v0.1.0-alpha.9