@reapit/elements_v5.0.0-beta.38

Notable Changes

🎉 New things

• Elements now supports subpath entry points for individual components. This mean consumers can now avoid importing "the world" from the root package entry point (@reapit/elements) and instead, make import exactly what they need:
  • Components can now be imported via @reapit/elements/core/*. For example, Button and AnchorButton can be imported from @reapit/elements/core/button.
  • Deprecated components can now be imported via @reapit/elements/deprecated/*.
  • Note: While everything is still available via the root entry point, consumers are encouraged to switch to these new entry points as the root entry point will be removed in future.
• Added PageHeader.LeadingElement to help size leading elements (like images) in the page header correctly.
• Added PrimaryTabs. This replaces the deprecated Tabs component.
• Added SecondaryTabs.
• Added SplitButton. This replaces the now deprecated (and renamed) DeprecatedSplitButton.
• Added some low-level helpers for working with URLSearchParams. These are available for import from @reapit/elements/utils/url-search-params.

💔 Breaking Changes

• The original SplitButton has been deprecated and renamed to DeprecatedSplitButton.

🪦 Deprecations

All v4 components we intend to replace or retire in v5 have been marked with a deprecation annotation. This will mean many existing components used by consumers will now show a strikethrough in IDEs. Deprecated components may be renamed in future to allow their replacement to use their current name.

What's Changed

• chore: bump package version by @kurtdoherty in #606
• feat: Add new PageHeader.LeadingElement component by @kurtdoherty in #607
• chore: Move deprecated to dedicated folder by @kurtdoherty in #608
• feat: Add new URLSearchParams helpers by @kurtdoherty in #609
• chore: update changelog by @kurtdoherty in #610
• chore: Add subpath entry points for all components by @kurtdoherty in #611
• feat: Add new PrimaryTabs component by @kurtdoherty in #612
• feat: Add new SecondaryTabs component by @kurtdoherty in #613
• chore: Rename __test__ folders to __tests__ by @kurtdoherty in #614
• chore: deprecate existing SplitButton component by @kurtdoherty in #616
• feat: Add SplitButtonAction component by @kurtdoherty in #617
• feat: Add SplitButtonMenuButton component by @kurtdoherty in #618
• feat: Add SplitButton component by @kurtdoherty in #619
• feat: support PrimaryTabs in Drawer by @kurtdoherty in #620
• chore: update changelog with release date by @kurtdoherty in #621

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

@reapit/elements_v5.0.0-beta.37

Notable Changes

🎉 New components

• CompactSelectNative
• PageHeader

🐛 Fixes

• Chip height fixed by #595
• Floating button regression fixed by #592
• Focus style regression in DeprecatedButton fixed by #593
• Alignment issue in DeprecatedNav fixed by #602

💔 Breaking changes

• Chip no longer supports isDisabled; rather disabled or aria-disabled should be used instead.
• The original PageHeader has been deprecated. It is still available via DeprecatedPageHeader.

What's Changed

• chore: bump package version by @kurtdoherty in #590
• feat: Add new CompactSelectNative component by @kurtdoherty in #591
• fix: #582 visual regression in deprecated MobileControls by @kurtdoherty in #592
• fix: #581 visual regression in DeprecatedButton focus styles by @kurtdoherty in #593
• chore: align Chip with Button and tweak styles in other components by @kurtdoherty in #595
• chore: deprecate existing PageHeader component by @kurtdoherty in #594
• feat: Add new PageHeader.Title component by @kurtdoherty in #596
• chore: stop using CSS all property as it unsets CSS variables too by @kurtdoherty in #598
• feat: Add new PageHeader.Subtitle component by @kurtdoherty in #599
• chore: remove margin on Features by @kurtdoherty in #600
• feat: Add new PageHeader.SupplementaryInfo component by @kurtdoherty in #601
• fix: #597 DeprecatedNav alignment regression by @kurtdoherty in #602
• feat: Add new PageHeader component by @kurtdoherty in #603
• chore: update design tokens by @kurtdoherty in #604
• chore: update changelog with release date by @kurtdoherty in #605

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

@reapit/elements_v5.0.0-beta.36

Notable Changes

Fixes a CSS regression for DeprecatedButton released in @reapit/elements_v5.0.0-beta.35.

What's Changed

• chore: bump package version by @kurtdoherty in #587
• fix: regression with deprecated button icon class by @kurtdoherty in #588
• chore: update changelog with release date by @kurtdoherty in #589

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

@reapit/elements_v5.0.0-beta.35

Notable Changes

🎉 New Components

• New Accordion component is available.
• New Button and AnchorButton components are available.
• Features now provides pre-built components for common items: Features.Bedrooms, Features.Bathrooms, Features.CarSpaces, and Features.LandSize.
• New icons have been added: MenuCollapseIcon, MenuExpandIcon and ChangeLogIcon. See Icons | Migrating to v5 for more info.

💔 Breaking Changes

Global CSS resets

Previously, the Elements stylesheet, @reapit/elements/styles.css, included a collection CSS reset styles that were applied globally to all elements based on their tag name. These have now been removed. If your UI relies on these resets, they are available via a separate stylesheet, @reapit/elements/reset.css, that you can import/include prior to the main Elements stylesheet.

Importantly, the CSS reset no longer applies -webkit-font-smoothing: antialiasing or -moz-osx-font-smoothing: grayscale. See Stop fixing font smoothing for an explanation behind this decision.

Components

Many Elements v4 components have been grouped under a new "Deprecated" section in the Storybook side bar. Consumers of these components should consider them to be implicitly deprecated. Explicit deprecation and renaming will come in a future beta version. The URL for these components' documentation will have changed as a result of this relocation.

The following components have either been deprecated and renamed (including their related classes in the Elements stylesheet), or removed:

• Accordion, now DeprecatedAccordion.
• Button, now DeprecatedButton.
• DrawCloseIcon has been removed. It's still available via <DeprecatedIcon icon="drawClose" />.

The following components have received breaking changes to their prop interfaces:

• Badge: variant is now colour and isReversed is now variant="reversed".
• Features: aria-label has been replaced with label.
• Tag: no longer supports an as prop.

What's Changed

• chore: bump package version by @kurtdoherty in #563
• chore: #133 deprecate v4 accordion by @kurtdoherty in #564
• chore: fix css lint issues by @kurtdoherty in #566
• feat: Add new Accordion.Summary component by @kurtdoherty in #565
• feat: Add new Accordion component by @kurtdoherty in #567
• chore: move all v4 component docs to a "Deprecated" group in Storybook by @kurtdoherty in #569
• chore: #556 Move global resets to separate reset.css by @kurtdoherty in #558
• chore: add latest icons by @kurtdoherty in #570
• chore: #571 deprecate existing Button by @kurtdoherty in #572
• feat: Add new ButtonBase component by @kurtdoherty in #573
• feat: Add new Button and AnchorButton components by @kurtdoherty in #574
• chore: #421-variable-token-update-tooltips by @rpt-rfoxy in #509
• chore: refactor Tag and TagGroup to match Chip and ChipGroup by @kurtdoherty in #577
• fix: resolve broken storybook builds by @kurtdoherty in #579
• fix: refactor Badge and remove buggy deprecated icon change by @kurtdoherty in #578
• feat: refactor Features and add new sizes by @kurtdoherty in #575
• chore: refactor Breadcrumbs and update docs by @kurtdoherty in #583
• chore: upgrade tooling by @kurtdoherty in #584
• chore: update changelog with release date by @kurtdoherty in #585
• fix: badge usage in icon migration docs by @kurtdoherty in #586

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

@reapit/elements_v5.0.0-beta.34

Notable Changes

• SideBar and TopBar now use the new icons internally. They also size the new icons correctly when supplied by consumers.

What's Changed

• chore: bump package version by @kurtdoherty in #555
• chore: add basic CSS linting by @kurtdoherty in #551
• chore: add basic icon migration guide by @kurtdoherty in #561
• chore: SideBar uses new icons and sizes them correctly by @kurtdoherty in #559
• chore: TopBar uses new icons and sizes them correctly by @kurtdoherty in #560
• chore: add release date for beta.34 release by @kurtdoherty in #562

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

@reapit/elements_v5.0.0-beta.33

Notable Changes

• AppSwitcher now exported properly
• Regression in AppSwitcher UI (and NavIconItem) fixed

What's Changed

• chore: bump package version by @kurtdoherty in #552
• chore: export app switcher by @kurtdoherty in #553
• fix: app switcher/nav icon item regressions by @kurtdoherty in #554

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

@reapit/elements_v5.0.0-beta.32

Notable Changes

🎉 New additions

• BottomBar has been refactored to align with the patterns used by SideBar and TopBar. It is also now properly exported from the lib.
• Text now supports colour inherit, but remember, this utility component is only intended for prototyping or use in Element's documentation
• Table cells now support alignment options

🐛 Fixes

• Types are included again in the published NPM artefact 🤦
• Icons colour prop renamed to color

What's Changed

• fix: #368 tablecell aligment by @rpt-rfoxy in #444
• feat: #218 added v5 Table Row Selection Component with Table Provider by @DanishAli-Reapit in #467
• chore: bump package version by @kurtdoherty in #537
• feat: Add new size to icons and make it the default by @kurtdoherty in #539
• feat: Add inherit option for text colour by @kurtdoherty in #540
• fix: #542 types are now built properly by @kurtdoherty in #543
• feat: use native color SVG attribute for icons by @kurtdoherty in #544
• chore: refactor bottom bar item as subcomponent of bottom bar by @kurtdoherty in #545
• chore: add new bottom bar menu list as subcomponent of bottom bar by @kurtdoherty in #546
• chore: update design tokens by @kurtdoherty in #541
• chore: Update drawer to use new overlay/50 variable by @kurtdoherty in #547
• chore: refactor bottom bar by @kurtdoherty in #548
• chore: add date for beta.32 release in changelog by @kurtdoherty in #549

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

@reapit/elements_v5.0.0-beta.31

Notable Changes

🎉 New components

• New SupplementaryInfo, Link, Drawer and icon components have all been added.
• Chip and ChipGroup are now correctly exported from Elements, so can actually be used now too 😅

💔 Breaking Changes

• v4 Drawer has been deprecated and renamed to DeprecatedDrawer. Use the new Drawer instead.
• v4 Icon has been deprecated and renamed to DeprecatedIcon. Use the new icons instead.
• SideBar.MenuItem and SideBar.SubmenuItem isActive prop replaced with aria-current attribute.
• Support for Node.js 18.x/20.x has been dropped. Minimum requirement is now Node.js 22.

All commits

• chore: bump version to v5.0.0-beta.31 and prepare changelog by @kurtdoherty in #507
• chore: #503 add font and Text helpers by @kurtdoherty in #504
• chore: #503 use font in AppSwitcher, Avatar, SideBar, and TopBar by @kurtdoherty in #505
• feat: #497 Add SupplementaryInfo by @kurtdoherty in #498
• feat: #513 Add Link component by @kurtdoherty in #514
• chore: #497 use font helper in SupplementaryInfo by @kurtdoherty in #512
• chore: scout Avatar sizing and SupplementaryInfo export by @kurtdoherty in #515
• chore: scout barrel file exports by @kurtdoherty in #517
• chore: #145 Deprecate existing Drawer component by @kurtdoherty in #516
• chore: #513 export new Link component by @kurtdoherty in #519
• chore: #337 v5 avatar css update var by @nurm717123 in #355
• feat: #145 Add new DrawerBody component by @kurtdoherty in #518
• chore: #421-variable-token-update [button] by @rpt-rfoxy in #502
• chore: #421-variable-token-update-skeleton by @rpt-rfoxy in #510
• chore: #421-variable-token-update-table-tootlbar by @rpt-rfoxy in #511
• chore: bump Vite, Vitest, TypeScript, Linaria et al by @kurtdoherty in #526
• chore: bump Storybook, Node.js and Yarn by @kurtdoherty in #527
• chore: deprecate existing icons by @kurtdoherty in #528
• feat: Add new icon SVGs by @kurtdoherty in #529
• feat: Add generate:icons script by @kurtdoherty in #530
• feat: Generate new icon components by @kurtdoherty in #531
• feat: #145 Add new DrawerFooter component by @kurtdoherty in #520
• feat: #145 Add new DrawerHeader component by @kurtdoherty in #521
• chore: #532 add width to side bar and align items with top bar items by @kurtdoherty in #533
• feat: #145 Add new DrawerContext and ElDrawer styled element by @kurtdoherty in #522
• feat: #145 Add new useDialogController and useDialogObserver hooks by @kurtdoherty in #523
• feat: #145 Add new useCancelCloseRequests and useWithStopPropagation by @kurtdoherty in #524
• feat: #145 Add new Drawer component by @kurtdoherty in #525
• chore: update design tokens by @kurtdoherty in #534
• feat: Update SideBar.MenuGroup behaviour when the current page changes by @kurtdoherty in #535
• chore: update changelog with release date by @kurtdoherty in #536

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

@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

@reapit/elements_v5.0.0-beta.29

What's Changed

• chore: bumpup beta version to v5.0.0-beta.29 by @ksolanki7 in #459
• feat: #316 new Menu - support supplementaryInfo & badge by @nurm717123 in #460
• feat: #316 new Menu - support maxHeight and adjust MenuGroup style by @nurm717123 in #461
• feat: #137 export AvatarRectangle by @nurm717123 in #463
• feat: #428 enhance app switcher menu by @kurtdoherty in #462
• feat: #468 Allow SideBar.MenuGroup to be forced active by @kurtdoherty in #469

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