January 2025 update

Grapes v1 has been available for a month now. This significant new version introduced new colors, refreshed components, new fonts, and new icons. Nearly half of the codebase has been rewritten. However, the journey does not end here and Grapes continues to evolve.

Over January, more than 20 new versions of Grapes have been released. Let's explore what's new in these versions.

Breaking change

Accordion

The web platform is continuously evolving, with more and more features becoming available across browsers. For example, the name attribute on the details element is now supported across all browsers (MDN documentation). Additionally, the ability to animate the height property from or to the value auto is now possible (Chrome documentation).

With these new platform capabilities becoming baseline, it was time for us to rewrite the Accordion component in Grapes to take advantage of these features.

As a result, Grapes v1.28.0 has one less dependency (react-animate-height has been removed) but includes a breaking change.

Avatar and HighlightIcon

In order to align our prop with Figma and our new design tokens, we have moved the prop size in the Avatar and HighlightIcon components from a t-shirt scale to a number scale. Please visit our codemod page for more information.

<Avatar
  size="m"
  size={32} 
  src="/avatar.webp"
  text="Michael Murphy"
/>

Components update

This month, we are excited to welcome two new components: The FloatingActionBar and the Block component.

The Table component has also received many new features, including the Table.Mini variant, which provides a more compact view, as well as the ability to group rows together.

Floating Action Bar

The FloatingActionBar component should be used when a user wants to perform an action that applies to multiple items, such as in a Table or a ListBox component.

Discover the FloatingActionBar

Table: Table.Mini

Table.Mini is a variant of the Table with a compact view and less features. It should only be used to display row data.

Table.Mini doesn't support:

• Cell and Row variant
• Sort
• Empty state
• Selectable

Discover the Table.Mini

Table: Group row together

Starting with Grapes 1.27.0, you can now group row together to form group in a Table. Here is a demo:

Learn more about grouping row together

Table and ListBox: No more left indicator

The left indicator is no longer, a small design change but with a huge consequence, as it removed many technical limitations.

As a result, you can now freely use a Dropdown or a popover in a Listbox or a Table without needing to use a Grapes hack.

Component removal

The component GridContainer, deprecated for more than a year, has been removed from Grapes starting v1.29.0.

Tailwind CSS

Tailwind CSS version 4 has been released, which represents a significant rewrite of the framework with many breaking changes. Our Tailwind CSS preset is not compatible with this new version 4.

Furthermore, the browser support requirements for Tailwind CSS v4 are higher than those for Grapes. We do not expect Spendesk to migrate to this new version before at least Q3 2025.

In the meantime, we will experiment with Tailwind CSS 4 on this website to ensure we are prepared for the future.

Also our preset for Tailwind CSS v3 continues to evolve. In Grapes 1.29.0, we updated the screen size settings to better align with the guidelines on responsiveness and added new helpers.

Example

<div className="max-w-[1000px]" /> 
<div className="max-w-lg" />  

<div className="max-w-[632px]" /> 
<div className="max-w-md" />