segmentio/evergreen

This system is a comprehensive React UI component library that provides a wide range of accessible interface elements, including form controls, data display widgets, and layout primitives. It features a modern, token-based theming system and supports server-side rendering with automatic hydration. The library also includes tooling for automated code migrations and interactive documentation via Storybook.

78 changes.

The project underwent a comprehensive migration from JavaScript to TypeScript, modernizing its build infrastructure and removing legacy monorepo structures. This period saw the introduction of a vast array of new UI components, including form fields, dialogs, and tables, alongside significant refactoring of existing elements to support React 18 and improved accessibility. Documentation was extensively updated with Storybook stories, and server-side rendering capabilities were added to support modern web frameworks.

34 changes.

This period focused on migrating the codebase to TypeScript and implementing a new token-based default theme system to standardize the UI library. It involved the development of numerous new components, including file uploaders, pagination, and empty states, alongside comprehensive test coverage and automated codemods to facilitate the upgrade from version 6 to 7.

Introduces the FilePicker component, allowing users to select one or multiple files via a native file input wrapped in a styled UI. The component supports standard file attributes (accept, multiple, required, disabled, capture) and exposes onChange and onBlur callbacks. A new placeholder prop is available to customize the text shown in the input field when no files are selected, defaulting to 'Select a file to upload…'. The component also allows customization of the button text via browseOrReplaceText and the input display via inputText props.

src/file-picker/src · high confidence

The alert module now exports a new InlineAlert component in addition to the existing Alert component. InlineAlert provides a compact, single-line alert variant with a left-aligned icon and text, suitable for inline messaging, while the standard Alert component remains available for block-level notifications with optional titles, icons, and a dismissible close button.

src/alert/src · high confidence

Added Storybook stories for the SelectMenu component, demonstrating single-select, multi-select, and filtered selection modes. The examples showcase usage of the closeOnSelect prop, custom option rendering with icons and subtext, and customizable filter placeholders and icons.

src/select-menu/stories · high confidence

Added Storybook documentation for the Tooltip component, demonstrating its usage with various configurations. The stories showcase basic tooltips with text and icons, control over visibility via the isShown prop, and the new showDelay prop for delayed appearance. Additionally, examples illustrate positioning options including TOP\_LEFT, TOP, TOP\_RIGHT, LEFT, RIGHT, BOTTOM\_LEFT, BOTTOM, and BOTTOM\_RIGHT.

src/menu/stories, src/tooltip/stories · high confidence

Added Storybook stories demonstrating the Table component's advanced features, including an AdvancedTable with custom sorting and filtering, an EditableTable with inline cell editing and selection, and a VirtualTable supporting variable row heights and programmatic scrolling controls.

src/table/stories · high confidence

Introduces the new \<Textarea /\> and \<TextareaField /\> components to the product. The \<Textarea /\> component provides a styled, accessible text input with support for spell-checking, Grammarly integration, and invalid states. The \<TextareaField /\> component wraps \<Textarea /\> within a \<FormField\>, automatically managing accessibility attributes (such as aria-describedby for descriptions, hints, and validation messages) and providing props for labels, hints, and validation messaging to create a complete form field experience.

src/textarea/src · high confidence

This change introduces several new UI components and associated Storybook documentation. The \Group\ component provides an accessible container for grouping related elements with WAI-ARIA support and size variants. The \Stack\ component manages z-index layering via React Context to prevent conflicts. The \StatusIndicator\ component displays status hints with configurable colors and dot sizes. Additionally, new Storybook stories have been added for the \colors\ system (displaying palette, functional colors, and scales), as well as documentation stories for the new \Group\, \Stack\, and \StatusIndicator\ components.

src/colors · high confidence

A new Storybook entry has been added for the Autocomplete component, providing interactive examples that demonstrate key features such as allowing custom values, opening the menu on focus, disabling filtering, and triggering the dropdown via a button.

src/autocomplete/stories · high confidence

A new Storybook entry has been added for the badges section, providing interactive visualizations for the Badge and Pill components. The stories iterate through available theme fills to display badges in various colors and states (including interactive mode), and demonstrate pills with randomized numeric content, allowing users to preview component styling and behavior directly in the Storybook interface.

src/badges/stories · high confidence

Added a new Storybook entry at src/buttons/stories/index.stories.js that demonstrates the Button and IconButton components across various sizes (small, medium, large), appearances (primary, default, destructive, minimal), intents (success, warning, danger), and icon placements (before/after). The stories also include examples for disabled states and custom color overrides, providing a visual reference for developers using the button library.

src/buttons/stories · high confidence

New Storybook stories have been added for the layers (Pane, Card) and switch components, allowing users to visually inspect and interact with these UI elements in isolation. The Pane and Card stories demonstrate various elevation states, background colors, border sides, and interactive hover/active states, while the Switch stories showcase default and custom height configurations, including disabled and checked states.

src/layers/stories, src/switch/stories · high confidence

A new Storybook entry has been added for the radio component, providing interactive documentation for both the Radio and RadioGroup components. The stories demonstrate various usage patterns, including default states, disabled states, checked states, and different sizes (12px and 16px), as well as the less common indeterminate state for single radios.

src/radio/stories · high confidence

This change introduces a new Storybook entry point (\src/text-input/stories/index.stories.js\) that documents the \TextInput\ and \TextInputField\ components. The stories demonstrate various visual states and configurations, including different appearance modes (default, none), sizes (small, medium, large), disabled and invalid states, and controlled usage patterns. It also includes a comprehensive 'Settings example' story that showcases the components within a realistic form layout, complete with labels, descriptions, validation messages, and associated action buttons.

src/text-input/stories · high confidence

A new Storybook entry has been added for the textarea component area, providing visual documentation and interactive examples for both the base Textarea and the TextareaField wrapper. The stories demonstrate various states including default, disabled, invalid, and fixed (non-resizable) modes, as well as controlled usage and validation scenarios for the TextareaField component.

src/textarea/stories · high confidence

A new Storybook entry has been added for the Avatar component, demonstrating its usage across various configurations. The stories showcase automatic color generation based on user names, support for square shapes, custom hash values for anonymous users, a range of sizes (16px to 128px), and manual color overrides. This provides a visual reference for developers integrating the Avatar component.

src/avatar/stories, src/toaster/stories · high confidence

A new Storybook story has been added to demonstrate how core UI components (Button, TextInput, Textarea, Heading) render under the default theme. The story displays text inputs and buttons in various states (primary, success, destructive, minimal) and disabled variants, providing a visual reference for the default theme's appearance.

src/theme/stories · high confidence

The \src/icons/generated\ directory now includes a set of new React icon components (such as \AddColumnLeftIcon\, \AirplaneIcon\, and \AlignmentBottomIcon\). These files are auto-generated wrappers that expose specific SVG paths for 16px and 20px sizes, allowing users to import and render these additional icons in their applications.

src/icons/generated · high confidence

The src/positioner module now exposes the Positioner component and the getPosition utility function directly from its index file, making these specific items available for import by consumers of the package.

src/positioner · high confidence

This change introduces the core Positioner component and its underlying positioning engine (getPosition.js) for the first time. The Positioner component manages the placement of floating elements (like popovers and tooltips) relative to a target, handling viewport boundary constraints, dynamic resizing, and scroll/resize events to keep content visible. It integrates with react-transition-group for animations and uses a Portal to render content outside the DOM hierarchy, ensuring correct stacking order via the Stack component. The accompanying getPosition.js module provides the mathematical logic for calculating coordinates, flipping positions to avoid overflow, and determining transform origins for smooth animations.

src/positioner/src · high confidence

This change introduces the Storybook stories for the Tab component, providing users with interactive examples and usage guidelines. The documentation covers standard tab usage with Tablist, link-based navigation with TabNavigation, styling options like min-width, and the implementation of disabled states, ensuring developers can correctly implement accessible tab interfaces.

src/tabs/stories · high confidence

Added new Badge and Pill UI components to the library. The Badge component provides a styled inline-block element with support for appearance and color theming via the style config system, and includes an optional interactive mode that applies hover opacity effects. The Pill component is a convenience wrapper around Badge that enforces a fully rounded border radius, allowing users to easily create pill-shaped status indicators.

src/badges/src · high confidence

Adds a new Combobox component that wraps the Autocomplete control to provide a combined text input and dropdown interface. The component introduces support for an \isLoading\ state, which displays a spinner in the toggle button and automatically disables both the input and the button, and a \disabled\ prop for full control over interactivity. It also includes an \openOnFocus\ option to automatically expand the menu when the input receives focus, and forwards standard UI-box styling props for layout customization.

src/combobox/src · high confidence

The new EmptyState component provides a consistent way to display empty states in the UI, supporting both horizontal and vertical orientations. It allows developers to pass an icon, title, and description, and can include primary action buttons or link-style call-to-actions. The component is theme-aware, adapting to light or dark backgrounds, and is designed to integrate seamlessly with existing layout components like Popover and Table.

src/empty-states · high confidence

This change introduces the FormField component and its associated sub-components (FormFieldLabel, FormFieldDescription, FormFieldHint, FormFieldValidationMessage) to the library. The FormField component now provides a structured way to render form inputs with associated metadata, including an optional label with an asterisk for required fields, a description displayed above the input, a hint displayed below, and a validation message that includes an error icon and is marked with role='alert' for accessibility. The validation message is rendered conditionally based on the presence of a string or node prop, and the component supports composition with Box primitives for layout and spacing.

src/form-field/src · high confidence

This change establishes a new \src/constants\ directory that exports shared design and logic values, including \MimeType\ (supporting formats like .ogg, .mp3, and .pdf), \Position\ and \AbsolutePosition\ for layout anchoring, \StackingOrder\ for z-index management, \Intent\ for UI states, \Key\ for keyboard handling, and \FileRejectionReason\ for validation feedback. Additionally, a new \src/file-uploader\ module is introduced, exposing the \FileUploader\ and \FileCard\ components along with utility functions for handling MIME types, file splitting, and message generation.

src/constants · high confidence

Added the Autocomplete component, which integrates Downshift for state management and react-tiny-virtual-list for performance, and the AutocompleteItem component for rendering list entries. The Autocomplete component supports fuzzy filtering via fuzzaldrin-plus, allows custom item-to-string mapping, and handles positioning relative to the target input. The AutocompleteItem component renders options with optional icons and highlights/selection states.

src/autocomplete/src · high confidence

Added a new Pagination component that provides navigation between pages with enhanced accessibility features, including specific aria-labels for previous and next page buttons ('Previous page' and 'Next page') and page buttons ('Page X'). The component supports both known and unknown total page counts, displays ellipses for overflow scenarios, and includes a usePaginationBehavior hook for managing page state. Tests and Storybook stories have been added to verify the component's behavior and accessibility attributes.

src/pagination · high confidence

A new CornerDialog component is introduced, providing a fixed-position dialog that slides in from a specified corner (defaulting to bottom-right) using CSS keyframe animations defined via ui-box. The component supports configurable titles, intents, and footer actions (confirm/cancel), and manages its visibility state through a React Transition Group to handle enter and exit animation sequences, including callbacks for open and close completion.

src/corner-dialog/src · high confidence

This change introduces the core components for the new file uploading experience. The FileUploader component provides a drag-and-drop zone with support for multiple files, MIME type validation, size limits, and state management for dragging, errors, and initial states. It utilizes the new FileCard component to display individual file details, including previews for images, file type icons, loading indicators, and validation messages, along with a remove button. The BrowseOrDragText component handles the customizable call-to-action text within the drop zone, supporting both static strings and dynamic functions for internationalization or conditional rendering.

src/file-uploader/src · high confidence

This change introduces the \Image\ component, which renders an HTML \img\ element using the \Box\ primitive, and adds \majorScale\ and \minorScale\ helper functions to the \scales\ module for converting unitless numbers into pixel values based on 8px and 4px grids respectively. It also includes Storybook stories for the new Image component to facilitate visual testing and documentation.

src/image · high confidence

The \src/layers/src\ directory now includes new \Pane\ and \Card\ components. \Pane\ is a TypeScript-based wrapper around \ui-box\ that provides styling capabilities for background, borders, and elevation levels (0-4), while \Card\ is a React component that composes \Pane\ to offer a consistent card-like layout. These components utilize the existing \useStyleConfig\ hook for theming and support polymorphic rendering via \forwardRef\.

src/layers/src · high confidence

This change introduces the new Radio and RadioGroup components to the product. The Radio component provides a styled, accessible radio input with support for size variants (12px or 16px), disabled states, and validation attributes. The RadioGroup component manages a collection of Radio buttons, handling selection logic for both controlled (via \value\) and uncontrolled (via \defaultValue\) modes, and automatically generates an HTML \name\ attribute to ensure proper browser grouping behavior.

src/radio/src · high confidence

A new SearchInput component has been added to the library, wrapping the existing TextInput to provide a dedicated search experience. It renders a magnifying glass icon on the left side, with the icon size dynamically adjusting based on the input's height. The underlying input element is explicitly set to type="search", and the component supports standard props like disabled state and appearance variants while composing the base TextInput behavior.

src/search-input/src · high confidence

This change introduces the new TagInput component, which allows users to input and manage multiple values (tags) within a single field. The component supports adding tags via configurable keys (defaulting to Enter) or on blur, and enables individual tag removal via a clickable cross icon. It integrates with an Autocomplete feature to suggest values from a provided list and includes validation support through an isInvalid prop. The implementation relies on internal Tag and Badge components for rendering and uses standard React hooks for state management.

src/tag-input/src · high confidence

The src/buttons/src directory now contains new implementations for the Button, IconButton, and TextDropdownButton components. These components utilize the ui-box library for styling and support features such as loading states with spinners, icon placement (before/after), and intent-based theming. The Button component introduces an 'intent' prop for semantic coloring, while the IconButton and TextDropdownButton provide specialized variants for icon-only and dropdown-trigger interactions respectively.

src/buttons/src · high confidence

The src/hooks directory now exports a new set of React hooks including useClickable, useForceUpdate, useId, useIsomorphicLayoutEffect, useLatest, useMergedRef, usePrevious, and useStyleConfig. These additions provide standardized utilities for handling click interactions, forcing component updates, generating stable IDs, managing refs, tracking previous values, and applying theme-based style configurations to components.

src/hooks · high confidence

The src/tabs/src directory now includes three new components: Tab, TabNavigation, and Tablist. The Tab component provides a selectable, accessible tab element with support for disabled states, keyboard navigation, and ARIA attributes (role='tab', aria-selected, aria-current). It uses a style config system for theming and warns developers if they mistakenly pass onClick instead of onSelect. TabNavigation renders a semantic \<nav\> element, and Tablist renders a container with role='tablist', establishing the foundational structure for a tabbed interface.

src/tabs/src · high confidence

This change introduces the core \TextInput\ component and the \TextInputField\ wrapper, establishing the foundation for text input handling in the UI library. The \TextInput\ component provides a styled input element with support for disabled states, invalidity indicators, and theme-based font families, while \TextInputField\ integrates this input with form field semantics, including labels, hints, descriptions, and validation messages. A key behavioral addition is the automatic association of \aria-describedby\ attributes with the input, linking it to any provided description, hint, or validation message for improved accessibility.

src/text-input/src · high confidence

The Avatar component is now available, allowing users to display user images with automatic fallback to initials when the image is unavailable or not provided. It supports configurable sizes, shapes (round or square), and automatic color generation based on the user's name. The component includes utilities for extracting initials and generating consistent hash values for styling.

src/avatar/src · high confidence

The Checkbox component is now available, allowing users to select options with standard, checked, disabled, and indeterminate states. It supports passing a ref to the underlying input element and integrates with the design system via ui-box for styling. The component includes built-in accessibility features such as aria-invalid support and proper label association.

src/checkbox/src · high confidence

The Dialog component is introduced in this location, providing a modal overlay with configurable header, body, and footer sections. It features open/close animations (scaling and opacity) driven by ui-box keyframes, and supports customization via props such as containerProps, contentContainerProps, and overlayProps. The component includes default cancel/confirm buttons with loading states, close-on-escape/overlay-click behavior, and auto-focus capabilities.

src/dialog/src · high confidence

The Switch component is now available in the library, providing a checkbox-style toggle control that supports a configurable height, disabled state, and an optional check icon that animates with a spring easing effect when toggled. It integrates with the existing design system by using ui-box for layout and spacing, and exposes a useStyleConfig hook to allow for appearance-based theming and pseudo-selector styling (such as hover, focus, and active states) on the track and handle elements.

src/switch/src · high confidence

This change introduces a new Toaster component for displaying toast notifications. The implementation includes a ToastManager for state management, a Toast component for individual notification rendering with animations, and a main Toaster class that handles DOM mounting and exposes methods like notify, success, warning, danger, and remove. The component supports React 18 via createRoot when available, and includes features such as auto-dismissal timers, close buttons, and z-index stacking.

src/toaster/src · high confidence

A new Manager component has been added to the src/manager location to facilitate state management within stories and examples. This React component accepts a render-prop function as a child, providing access to the current state and a setState function, allowing developers to easily manage and update local state in interactive documentation or demo contexts.

src/manager · high confidence

This change introduces the core Menu components (Menu, MenuItem, MenuOption, MenuGroup, MenuOptionsGroup, MenuDivider) to the codebase. The Menu component now supports keyboard navigation (arrow keys, Home, End) with proper focus management that skips disabled items. MenuItem handles disabled states with specific styling (muted colors, not-allowed cursor) and supports icons, secondary text, and intent-based coloring. MenuOptionsGroup provides a convenient way to render radio-button style options with automatic selection tracking and change callbacks.

src/menu/src · high confidence

A new Portal component has been added to the library, allowing children to be rendered into a dedicated DOM element appended to the document body. This component uses React's createPortal API and ensures that the container element is properly removed from the DOM when the component unmounts, preventing memory leaks and stale DOM nodes.

src/portal · high confidence

This change introduces the new Select and SelectField components. The Select component now uses ui-box for styling and correctly associates validation, description, and hint nodes with aria-describedby for better screen reader support. The SelectField wrapper component automatically generates the aria-describedby attribute using these helper nodes, ensuring that assistive technologies can properly announce context and validation messages to users.

src/select/src · high confidence

Added a new Storybook file for the SideSheet component that demonstrates various usage patterns, including rendering with titles and subtitles, tabbed content, closing the sheet from within its children, and different positioning options.

src/side-sheet/stories · high confidence

A new TextareaField component has been introduced, providing identical semantics to the existing TextInputField component. This addition is exposed via the src/textarea/index.js entry point alongside the core Textarea component, allowing users to utilize a field-based wrapper for textarea inputs consistent with the library's input field patterns.

src/textarea · high confidence

Added a new example in the \examples/ssr-next\ directory demonstrating how to implement server-side rendering with Next.js and Evergreen UI. The example includes a custom \\_document.js\ file that extracts and injects server-rendered CSS and hydration scripts, along with a basic \index.js\ page and necessary configuration files (\.babelrc\, \.gitignore\) to ensure correct styling and environment setup.

examples · high confidence

This release introduces new components for the Table system: EditableCell and SelectMenuCell allow cells to be edited inline or selected via a dropdown menu, respectively. A new SearchTableHeaderCell provides built-in filtering in table headers. The Table.VirtualBody component now supports virtualized rendering for large datasets, including dynamic height estimation for rows with auto-height content. Additionally, focus management for arrow keys has been improved in selectable cells and rows.

src/table/src · high confidence

The Popover component in src/popover/src now supports controlled visibility via the isShown prop, allowing external state management of the popover's open/close state. It includes comprehensive focus management that brings focus inside the popover when opened and returns it to the trigger element when closed, with support for autofocus elements. The component handles keyboard navigation with Escape key closing (configurable via shouldCloseOnEscapePress) and arrow key focus movement. It also provides body click handling with configurable close behavior (shouldCloseOnExternalClick) and exposes onBodyClick callback for custom body click handling. The implementation uses imperative open/close methods via ref and supports both click and hover triggers.

src/popover/src · high confidence

Added a new Storybook entry for the Popover component that demonstrates its various interaction patterns and configuration options. The stories illustrate how to control positioning (top, bottom, left, right, and their combinations), manage closing behavior (including disabling close on body click or escape key press), handle auto-focus for text inputs, and integrate with scrolling containers. It also showcases advanced usage such as manual toggle control via render props and smart positioning adjustments.

src/popover/stories · high confidence

Evergreen now supports server-side rendering (SSR) by providing an extractStyles function that returns CSS styles, a cache object, and a hydration script tag. The hydration script can include a nonce attribute for Content Security Policy compliance. An autoHydrate function is also exported to automatically hydrate the application on the client side by reading the hydration data from the DOM.

src/ssr/src · high confidence

The Spinner component has been updated to accept a new \delay\ prop, allowing users to specify a time in milliseconds before the spinner becomes visible. This is useful for preventing flickering during rapid state changes. The implementation uses React state and effects to manage the visibility timer, and Storybook stories have been added to demonstrate the default behavior, custom sizing, and the new delay feature.

src/spinner/src · high confidence

The 'Evergreen' color package has been removed from the codebase. This change eliminates the default export previously provided by the \packages/colors\ module, meaning applications relying on this specific color definition will no longer have access to it.

packages/colors · high confidence

The storybook entry for the Combobox component has been updated to demonstrate additional usage scenarios, specifically adding examples for disabled and loading states alongside existing patterns like custom widths and full-width layouts.

src/combobox/stories · high confidence

The storybook for the CornerDialog component has been updated to showcase additional usage patterns. Specifically, the examples now include configurations for the \hasClose\ and \hasCancel\ props to control the visibility of close and cancel buttons, as well as the \position\ prop to demonstrate placement in all four corners (top-left, top-right, bottom-right, bottom-left) of the viewport.

src/corner-dialog/stories · high confidence

The Dialog storybook examples have been updated to showcase advanced usage patterns, specifically the ability to handle asynchronous confirmation actions via a new loading state and to fully control dialog behavior (such as closing and header/footer visibility) through render props. The new \DialogManager\ helper component in the stories manages the \isShown\ and \isLoading\ state, allowing the examples to demonstrate how to display a 'Loading...' state on the confirm button and automatically close the dialog after a simulated delay, as well as how to implement self-managed close buttons and hide headers/footers for custom layouts.

src/dialog/stories · high confidence

The src/form-field location now explicitly re-exports its internal components (FormField, FormFieldDescription, FormFieldHint, FormFieldLabel, and FormFieldValidationMessage) from the main index.js file, allowing consumers to import these specific sub-components directly from the package root rather than navigating deeper into the source structure.

src/form-field · high confidence

The file-uploader component now includes utility functions to handle file acceptance, rejection, and display. Users will see specific error messages when files are rejected due to invalid type, size, or count limits. Additionally, file names are truncated in the center for better readability, and appropriate icons are displayed based on the file type (image, video, or document).

src/file-uploader/src/utils · high confidence

The theme module has been refactored to use React's Context API, replacing previous implementation details with a modern approach. Consumers can now access the current theme via the new \useTheme\ hook or the \withTheme\ higher-order component, while \ThemeProvider\ and \ThemeConsumer\ are exposed for context management. Additionally, utility functions (\get\, \getValue\, \mergeTheme\, \resolveThemeTokens\) are provided to help resolve theme tokens and merge theme configurations, supporting a more flexible and type-safe theming experience.

src/theme/src · high confidence

The library now includes a set of new internal utility modules in src/lib to support component functionality and improve code organization. These additions include helpers for DOM detection (canUseDom), safe function invocation (safe-invoke), and value checking (has-value, is-function). It introduces a new mechanism for managing body scroll prevention (prevent-body-scroll) that tracks previous styles to avoid conflicts with other scripts, and adds a warning system (warning, deprecated) that ensures runtime warnings are displayed only once. Accessibility is improved with generate-aria-describedby to correctly associate description, hint, and validation message nodes with aria-describedby attributes. Additional utilities handle array-to-CSV conversion, removal of undefined object properties, extraction of major version numbers, and theme-specific text sizing for control heights.

src/lib · high confidence

The \src/themes\ directory now provides a complete, new default theme configuration. This includes a full set of design tokens (colors, fills, intents, radii, shadows, typography, and z-indices) and explicit style definitions for all UI components (such as buttons, inputs, tables, and dialogs). This change replaces the previous theme implementation with a structured, token-based approach that standardizes the visual appearance of the component library.

src/themes · high confidence

The Storybook setup has been updated to use the modern configuration format, replacing the legacy \config.js\ with \main.js\, \preview.js\, and \manager.js\. This change introduces a theme toggle in the UI allowing users to switch between 'v5' (classic) and 'v6' (default) component themes via the \ThemeProvider\. Additionally, the Webpack configuration has been refactored to use the new plugin and rule structure, ensuring compatibility with current Storybook standards.

.storybook · high confidence

The project has been migrated from JavaScript/Flow to TypeScript, introducing a new ESLint configuration (\.eslintrc.json\) that enforces TypeScript-specific rules and replaces the previous Flow-based setup. Build infrastructure has been updated to use Rollup for generating UMD bundles, with Babel configured to transpile TypeScript and React code. A comprehensive TypeScript declaration file (\index.d.ts\) is now provided, along with type tests (\index.test-d.ts\) to ensure type safety for consumers. Additionally, the monorepo structure (Lerna) has been removed in favor of a single package setup, and the Node version is pinned to 14.18 via \.nvmrc\.

(repo-wide) · high confidence

The icon rendering system has been updated to include a new \Icon\ component that automatically selects between 16px and 20px SVG path grids based on the requested size, ensuring sharper rendering for larger icons. A new \IconWrapper\ component has been added to handle custom icon elements and Evergreen icons with consistent sizing and color props, while Storybook stories now demonstrate the available icon color variants.

src/icons/src · high confidence

The codemods directory has been ported to TypeScript and expanded with new automated migration scripts for upgrading from Evergreen UI v6 to v7. These codemods handle replacing the deprecated \Nudge\ component with \Pulsar\ (wrapped in a \Pane\ with \display: inline-block\), converting \SidebarTab\ to \Tab\ with a vertical direction, ejecting the removed \classicTheme\ and \deprecatedDefaultTheme\ objects into local files, replacing string-based icon imports with named icon components, and updating \marginTop="default"\ to specific pixel values for \Heading\ and \Paragraph\ components.

codemods · high confidence

The default theme now includes specific styling logic for UI components via new files in the \component-specific\ directory. This introduces dedicated appearance definitions and class-name getters for Buttons (supporting default, primary, and minimal appearances), Checkboxes, Selects, TagInputs, TextInputs (with default, neutral, and none appearances), and TextAreas (with default, neutral, and editable-cell appearances). These changes define the visual states (base, hover, focus, active, disabled, invalid) for these elements using the theme's scales and palette.

src/theme/src/default-theme · high confidence

The library now exposes a consolidated public API for its UI components. Users can import Button, IconButton, and TextDropdownButton from the buttons module; OptionShapePropType, OptionsList, Option, SelectedPropType, SelectMenu, and SelectMenuContent from the select-menu module; and a comprehensive set of typography elements (Text, Paragraph, Heading, Code, Pre, Label, Link, Small, Strong) along with list components (Ul, Ol, Li) from the typography module. This change simplifies imports and standardizes how these components are accessed within the application.

src/buttons, src/select-menu, src/typography · high confidence

The Overlay component now supports the \shouldAutoFocus\ prop (defaulting to true) to control whether focus is automatically moved into the overlay upon opening, and the \onBeforeClose\ callback, which allows developers to conditionally prevent the overlay from closing based on user interaction or validation logic.

src/overlay/src · high confidence

The Pane and Card components, along with their associated types (PaneProps, PaneOwnProps), have been ported to TypeScript. This change updates the internal implementation and type definitions for these layering components, ensuring they are now fully typed within the library's core exports.

src, src/layers · medium confidence

The SelectMenu component has been restructured into a new set of internal components (Option, OptionsList, SelectMenuContent) to improve modularity and styling. This change introduces new props for customization: titleView for customizing the header, emptyView for displaying content when no options are available, and detailView for showing additional information alongside the options list. The component now supports multi-select functionality via the isMultiSelect prop and allows the menu to close automatically upon selection with the closeOnSelect prop. Additionally, the Option component now supports optional icons and improved keyboard navigation for filtering and selection.

src/select-menu/src · high confidence

The library now includes server-side rendering (SSR) capabilities, exposing the \extractStyles\ and \autoHydrate\ functions via the new \src/ssr/index.js\ entry point. However, when using the UMD bundle (\src/ssr/index.umd.js\), these functions are stubbed out: \extractStyles\ returns \null\ and \autoHydrate\ is an empty function, both issuing console warnings that users should switch to CommonJS or ESM formats for actual SSR development.

src/ssr · high confidence

The SideSheet component has been updated to include a built-in close button (SheetClose) that allows users to dismiss the panel directly. Additionally, the component now supports the \onBeforeClose\ prop, enabling developers to implement conditional logic to prevent the sheet from closing based on user interaction or validation.

src/side-sheet/src · high confidence

The library now provides explicit index files for individual components (Avatar, Checkbox, Combobox, CornerDialog, Dialog, FilePicker, Overlay, Popover, SearchInput, SideSheet, Spinner, Switch, and Tooltip). This change allows users to import specific components directly from their respective directories (e.g., \import { Avatar } from '@radix-ui/react-avatar'\) rather than relying solely on the main package entry point, improving tree-shaking efficiency and import clarity.

(repo-wide) · high confidence

The library has reorganized its public API by introducing dedicated index files for key component groups (autocomplete, badges, radio, select, table, and text-input). This change establishes a consistent pattern for importing components, allowing users to import specific sub-components (such as Badge, Pill, RadioGroup, SelectField, and various Table parts) directly from their respective module paths rather than relying on a single monolithic export.

(repo-wide) · high confidence

The Tooltip component in src/tooltip/src has been updated to include a new \showDelay\ prop, allowing users to specify a time in milliseconds before the tooltip appears after the target is hovered. This change introduces controlled timing for visibility, complementing the existing \hideDelay\ behavior, and ensures that timeouts are properly cleaned up when the component unmounts or the tooltip is hidden.

src/tooltip/src · high confidence

The typography components (Text, Heading, Paragraph, Link, Code, Label, List items, etc.) have been refactored to use the new \useStyleConfig\ hook and \ui-box\ for styling, replacing the previous implementation. This change introduces a consistent sizing system (numeric scales like 300-900) across components, adds support for icons in list items via \ListItem\, and ensures proper theme integration for colors and font families. Users will see updated visual defaults and more flexible styling options through the new design system.

src/typography/src · high confidence

The icon set has been regenerated using @blueprintjs/icons version 3.31.0, introducing a refreshed collection of icons available for use in the application. This update replaces the previous icon exports with the new set defined in the generated source files, ensuring that any components relying on these icons will now render the latest visual assets provided by the Blueprint library.

src/icons · high confidence

The internal development tools have been updated to support modern React patterns and React 18. The component scaffolding scripts now generate components using React hooks (forwardRef, memo) instead of class components, and Storybook templates have been updated to use the modern \storiesOf\ API. Additionally, the test setup now includes a mock for the React 18 scheduler, and the core task runner has been refactored to use async/await for better error handling.

tools · high confidence

The Pulsar component has been updated to forward React refs and accept Box component props. This change ensures that when Pulsar is used inside a Tooltip, the tooltip correctly identifies the target element for rendering, resolving previous issues where the tooltip might not appear or position incorrectly. Users wrapping Pulsar in a Tooltip will now see the tooltip display as expected on hover.

src/pulsar · high confidence

Add Storybook stories for FileUploader and FileCard components; Added Storybook stories for Alert and InlineAlert components; Added Storybook stories for the Select component; Added Storybook stories for typography components; Added fixture for Popover with TextInput child; Added smoke tests for Avatar and Badge components; Added smoke tests for typography components; Added test coverage for Select and SelectField components; Added test coverage for Textarea and TextareaField components; Added test utilities for file generation and mocking; Added tests for Autocomplete input value behavior; Added tests for Dialog component rendering behavior; Added tests for FormField accessibility attributes; Added tests for Popover event handling and visibility; Added tests for Positioner and UI snapshot serialization; Added tests for SSR style extraction and hydration; Added tests for TagInput component behavior; Added tests for array-to-csv and prevent-body-scroll utilities; Added tests for the Spinner component; Added unit tests for Card and Pane components; Added unit tests for FileUploader components and utilities; Added unit tests for Radio and RadioGroup components; Added unit tests for the Alert component; Added unit tests for the FilePicker component; Initial Storybook documentation for SearchInput component; Initial test coverage for Button and IconButton components; Initial test coverage for TextInput and TextInputField components; Storybook documentation for Overlay component features; TagInput component documentation and usage examples.

This release updates the Evergreen UI package to version 7.1.9, introducing a new TypeScript-based codemods sub-package (\evergreen-ui-codemods\) for automated code migrations, and adds a Server-Side Rendering (SSR) example using Next.js 12. The main package now supports React 16, 17, and 18 via peer dependencies, and the documentation site has been updated to use the latest Evergreen version with Next.js.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 54 → 51 (-3.3)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 66 → 66 (-0.0)
• Architecture 100 → 92 (-7.6)
• Maturity 47 → 47 (+0.0)
• Readiness 53 → 45 (-7.9)
• Security 70 → 68 (-2.0)
• Accessibility 61 → 61 (+0.0)
• Performance 60 (new)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no architecture or design documentation (README.md)
• High CVE: [GHSA redacted] (yarn.lock)

• End-of-life runtime: Node.js 14
• High CVE: [GHSA redacted] (yarn.lock)
• Outdated (npm): @babel/runtime
• Outdated (npm): @lottiefiles/lottie-player
• Outdated (npm): @mdx-js/react
• Outdated (npm): @segment/consent-manager
• Outdated (npm): @types/react-github-button
• Outdated (npm): @types/react-syntax-highlighter
• Outdated (npm): @types/react-transition-group
• Outdated (npm): arrify
• Outdated (npm): downshift
• Outdated (npm): lodash.omit
• Outdated (npm): lz-string
• Outdated (npm): next
• Outdated (npm): next-mdx-remote
• Outdated (npm): prop-types
• Outdated (npm): react
• Outdated (npm): react-copy-to-clipboard
• Outdated (npm): react-docgen
• Outdated (npm): react-dom
• …and 6 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

segmentio/evergreen was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.