v0.6.2

Added

• Comprehensive tests for DiamondDSTheme to improve coverage and ensure theme consistency.
• Added overrides for MuiButtonGroup for improved styling consistency.

Changed

• Refactored the theme architecture to improve maintainability and compatibility with Material React Table (MRT).
• Updated border and alpha colour tokens to align with the design system theme and improve visual consistency.
• Updated Avatar and MuiToggleButton theme overrides for improved styling consistency.
• Updated the project's Node.js version.

Fixed

• Updated the theme implementation to satisfy the new test suite and improve reliability.
• Fixed initial theme flash by updating ColourSchemeButton and the development index.
• Fixed colour scheme transition animation flicker when switching between light and dark modes.
• Fixed minor compatibility issues
• Fixed the Storybook installation link.

v0.6.2-alpha.1

Added

• Comprehensive tests for DiamondDSTheme to improve coverage and ensure theme consistency.
• Added overrides for MuiButtonGroup for improved styling consistency.

Changed

• Refactored the theme architecture to improve maintainability and compatibility with Material React Table (MRT).
• Updated border and alpha colour tokens to align with the design system theme and improve visual consistency.
• Updated Avatar and MuiToggleButton theme overrides for improved styling consistency.
• Updated the project's Node.js version.

Fixed

• Updated the theme implementation to satisfy the new test suite and improve reliability.
• Fixed initial theme flash by updating ColourSchemeButton and the development index.
• Fixed colour scheme transition animation flicker when switching between light and dark modes.
• Fixed minor compatibility issues
• Fixed the Storybook installation link.

v0.6.1-alpha.1

Added

• Diamond DS Theme: a new design system theme based on semantic roles and tokens.
• Design system documentation, including overview, component standards, and usage guidance.
• Component guidance for Button, TextField, and MaterialReactTable.
• Inter, Outfit and IBM Plex Mono fonts.
• New Image and ImageWithZoom components with loading indicators and zoom support.

Changed

• Breaking MUI v7 is now required.
• Breaking Replaced previous theming approach with Diamond DS Theme.
• Breaking Updated all components to use the new Diamond DS Theme and support light and dark modes.
• Updated Logo and ImageColourSchemeSwitch to use tone (default/inverse) and fixedTone to adapt to surface colour. Deprecated use of interchange prop.
• Improved accessibility and colour contrast.
• Navbar uses short logo (if available) on small screen sizes.

Removed

• Breaking Removed legacy Diamond and Generic themes.
• Removed legacy colour documentation.

Fixed

• Fixed DataCell and DataBox in JsonForms to prevent dash appearing when zero should be displayed.

v0.5.0-beta.1

Version 0.5.0-beta.1

Install via NPM at https://www.npmjs.com/package/@diamondlightsource/sci-react-ui/v/0.5.0-beta.1

Changed

• Packages updated to latest.
• Security on package management tightened.
• Breaking MUI has been upgraded from v6.5 to v7. Check their documentation
• Breaking keycloak-js has been moved from a direct dependency to a peer and optional dependency, so must now be installed by the consuming application.

Fixed

• Icon imports were causing issues downstream when components are unit tested.
• JsonForms were showing "-" when an int of zero was passed in.

v0.4.1 - 2026-02-24

Fixed

• Progress and ProgressDelayed were not exported
• Fix User login button having wrong colour

Changed

• The NavMenu will now close if something is selected.
• Updated styles of User (style now similar to NavMenu)

v0.4.0

Version 0.4.0

Install via NPM at https://www.npmjs.com/package/@diamondlightsource/sci-react-ui/v/0.4.0

Added

• New Progress component based on Diamond Light added.
• New ProgressDelayed component so that the progress isn't shown at all when it's a small wait.
• NavMenu component added for creating dropdown menus in the Navbar
  • NavMenuLink component extends NavLink to work in the NavMenu
• AuthProvider added for authentication to Keycloak.
  • An auth parameter was added to User to simplify when AuthProvider is used.
• ScrollableImages can now display in a wide view, with multiple images.

Fixed

• Hovering over a slot caused a popup with the slot title in. This has been removed.
• Stopped Bar-based components (e.g. Navbar, Footer) from expanding when a parent component has a set height
• The base Bar component was not being exported.
• Various fixes to improve accessibility
• ScrollableImages could attempt accessing images outside of array.

Changed

• BaseTheme/DiamondTheme secondary colour of dark theme has been much darkened. (You can select DiamondOldTheme if you prefer the older one!)
• Remove first-child css selector as it causes problems with server-side rendering.

v0.3.0

Version 0.3.0

Install via NPM at https://www.npmjs.com/package/@diamondlightsource/sci-react-ui/v/0.3.0

Added

• Logo component, to easily add the theme logo to anywhere
• ImageColourSchemeSwitch takes a parameter interchange to swap image based on the opposite
  of the colour scheme switch - for use with alternative background colours.
• BaseBar component is the base for all the bars used in SciReactUI. Can also be used itself.
• AppBar is a bar to show the main title of your App.
• JsonForms renderers have been added for use with readonly mode in JsonForms.
• Support for TIFFs in ScrollableImages component

Fixed

• Themes were not inheriting all details from their parents.
• Fixed alt text on logos.
• Fixed Footer was not adhering to Container width. (Can be turned off with containerWidth setting)
• Fixed bug in Footer Links where alignment was out on first link.
• Ordering of StoryBook now more intuitive.

Changed

• Breaking change: The use of color has been replaced with colour throughout.
  • ImageColorSchemeSwitch, ImageColorSchemeSwitchType and ImageColorSchemeSwitchProps
    renamed to ImageColourSchemeSwitch, ImageColourSchemeSwitchType and ImageColourSchemeSwitchProps respectively
  • User component color prop renamed to colour.
• RootProps on Breadcrumbs has been removed. There props can be passed in directly.
  e.g. <Breadcrumbs sx={{color:"red"}} /> instead of <Breadcrumbs rootProps={{sx: { color: "red" } }}/>

v0.2.0

Version 0.2.0

Key improvements:

• React route integration

Install via NPM at https://www.npmjs.com/package/@diamondlightsource/sci-react-ui/v/0.2.0

Changes

Fixed

• Styles added to Navbar and Footer incorrectly remove built in styles.

Changed

• Breadcrumbs component takes optional linkComponent prop for page routing.
• Navbar, NavLink and FooterLink will use routing library for links if provided with linkComponent and to props.
• Navbar uses slots for positioning elements. Breaking change: elements must now use rightSlot for positioning to the far right.

v0.1.0

Changes this version:

Added

• Breadcrumbs take object array (CustomLink) for total control over names and links.

Fixed

• Stopped flicker between colour modes when starting an app in dark mode.
• Footer links stopped from moving on hover when only showing links.
• Footer links now correctly center horizontally, if needed.
• NavBar positions items correctly in multiple screen widths.
• User hides id and name when on very small screens

Changed

• Footer links now align with copyright when there is no logo.

For full changes read the changelog.md file