@reapit/elements_v5.0.0-beta.30

Notable changes

TopBar

• Many of the components related to the TopBar have been refactored and are now subcomponents of the TopBar itself;
• In general, this means consumers should now prefer use of TopBar.NavItem over direct use of the underlying components;
• The TopBar itself now renders as a <header> element, not a <nav> element.
• There's two new layout and a11y helpers for main nav items (TopBar.MainNav) and secondary nav items (TopBar.SecondaryNav);
• There's a new TopBar.BrandLogo component that provides product logos within the Reapit brand.
• Breaking changes:
  • TopBar.NavItem and TopBar.NavIconItem will always render as a link element; buttons are no longer supported;
  • TopBar.NavMenuItem and TopBar.NavIconMenuItem combine a button-based item with a built-in Menu. These should be used for any nav items that require a dropdown menu;
  • TopBar.NavSearchButton no longer changes to an icon-only button on small breakpoints. Rather, a separate TopBar.NavSearchIconItem is available. Further, the responsive behaviour is now handled by a new TopBar.NavSearch component.

Other

• Menu group dividers are now baked into Menu.Group
• CSS variables updated to included latest Design System updates
• Design token JSON files are now preprocessed (object keys sorted alphabetically) allowing for better PR diffs when Design have reordered their variables in Figma.

All commits

• fix: #470 top bar secondary nav applies correct display CSS property by @kurtdoherty in #471
• chore: #472 bump to v5.0.0-beta.30 and update changelog by @kurtdoherty in #473
• fix: fixing visual test by @dhoang3110 in #466
• fix: #474 SideBar list elements no longer impacted by user-agent styles by @kurtdoherty in #475
• feat: #476 Use CSS container queries in TopBar and NavSearchButton by @kurtdoherty in #478
• feat: #479 Add Lettings BDM to App Switcher by @kurtdoherty in #480
• chore!: #477 refactor NavSearchButton by @kurtdoherty in #481
• chore!: #477 fix up top bar nav search et al names by @kurtdoherty in #484
• chore!: #483 refactor NavItem into top bar folder by @kurtdoherty in #485
• chore!: #483 refactor NavDropdownButton into top bar folder by @kurtdoherty in #486
• chore!: #483 refactor NavIconItem into top bar folder by @kurtdoherty in #487
• chore!: #483 refactor AvatarButton into top bar folder by @kurtdoherty in #488
• chore: #483 Add new MainNav component to top bar by @kurtdoherty in #491
• chore: #483 Add new SecondaryNav component to top bar by @kurtdoherty in #492
• chore: #483 add extra tests and tidy up docs by @kurtdoherty in #493
• feat: #316 new Menu - add Menu Group's divider by @nurm717123 in #482
• feat: #494 Add BrandLogo to TopBar by @kurtdoherty in #495
• chore: Update CSS variables by @kurtdoherty in #499
• chore: #500 preprocess token files by @kurtdoherty in #501
• chore: update Storybook changelog re preprocessing of token files by @kurtdoherty in #506

New Contributors

• @dhoang3110 made their first contribution in #466

Full Changelog: https://github.com/reapit/elements/compare/@reapit/elements_v5.0.0-beta.29...@reapit/elements_v5.0.0-beta.30