Overview

This guide focuses on breaking prop changes to be aware of when migrating from Abyss V1 to V2. These include:

• Props that have been removed
• Props whose behavior or typings have been updated
• Props whose names have been changed but whose functionality remains the same.

This guide does not cover:

• New props added in V2, or
• Additional features and enhancements.

For complete documentation of all available props, including new features added, refer to each component's dedicated documentation page.

AI-Powered Component Migration

Need help with component migration? Use our AI-powered migration tool to help convert V1 components to their V2 equivalents with proper prop mapping.

Accordion

import { Accordion } from '@uhg-abyss/web/ui/Accordion';

Same in V1 and V2

Quick Overview

The Accordion component has been simplified to help you write less code while maintaining flexibility.

Foundation changes

V1 Prop	Status	Migration Details
Accordion.Trigger	Removed	Use the triggerPosition prop in Accordion to set the position of the trigger. Use the headingLevel prop available on Accordion.Header to set the heading level of the accordion item.

Accordion.Header changes

V1 Prop	Status	Migration Details
subText	Removed	Use subheading prop on Accordion.Content component instead.

Alert

import { Alert } from '@uhg-abyss/web/ui/Alert';

Same in V1 and V2

Quick Overview

The Alert component has been streamlined for a more intuitive API. We've removed redundant props, introduced automatic icon handling, and simplified actions with a structured cta prop. These changes make it easier to implement and maintain alerts in your application.

Alert changes

V1 Prop	Status	Migration Details
variant	Renamed	The variant prop has been renamed to status.
children	Modified	The children prop now only accepts strings instead of any React.ReactNode.
errorCode	Removed	No direct replacement; use the timestamp prop to display a timestamp (without an error code).
onAction	Removed	Use the structured cta prop instead.
actionText	Removed	Use the structured cta prop instead.
actionHref	Removed	Use the structured cta prop with type: 'link' instead.
inlineText	Removed	No direct replacement; use the children prop for all text content.
hideIcon	Removed	Icons are now always shown and automatically determined by the status.
icon	Removed	Custom icons are no longer supported, icons are automatically determined by the status.
isIconScreenReadable	Removed	Icon accessibility is now handled automatically.
iconTitle	Removed	Icon title is now handled automatically based on the status.
timezone	Removed	Timezone handling is no longer built in, format the timestamp string as needed.
openNewWindow	Removed	Use the structured cta prop with Link's target property instead.

Avatar

import { Avatar } from '@uhg-abyss/web/ui/Avatar';

Same in V1 and V2

Quick Overview

Avatar changes

V1 Prop	Status	Migration Details
sizes	Removed	The sizes prop has been removed. Avatar sizing is now determined through tokens or the size prop.
variant	Modified	The variant prop has been modified. There is always an outline that can be customized through token or CSS styling. variant is now used to determine the background color.
colorTheme	Removed	The colorTheme prop has been removed. Instead, use the prop variant.

Badge

import { Badge } from '@uhg-abyss/web/ui/Badge';

Same in V1 and V2

Quick Overview

The Badge component has been enhanced to make it more visually appealing.

Badge changes

V1 Prop	Status	Migration Details
rounded	Removed	The rounded prop has been removed. All badges now have a standard rounded appearance.
icon	Modified	The icon prop now accepts a string (IconSymbol icon name) or an object with icon name and variant, rather than a React.ReactNode.

Breadcrumbs

import { Breadcrumbs } from '@uhg-abyss/web/ui/Breadcrumbs';

Same in V1 and V2

Quick Overview

The Breadcrumbs component has been updated to improve navigation and accessibility. The new design ensures better usability across devices.

Breadcrumbs changes

V1 Prop	Status	Migration Details
size	Removed	The size prop has been removed. Breadcrumbs uses a fixed size based on tokens.
sizes	Removed	The sizes prop has been removed. Breadcrumbs uses a fixed size based on tokens.
space	Removed	The space prop has been removed. Breadcrumbs uses fixed spacing based on tokens.
isDarkMode	Removed	The isDarkMode prop has been removed. Use the variant="alt" prop instead for dark backgrounds.
leadingIcon	Removed	The leadingIcon prop has been removed and is no longer supported.
divider	Removed	The divider prop has been removed. Breadcrumbs uses a fixed chevron divider.

Button

import { Button } from '@uhg-abyss/web/ui/Button';

Same in V1 and V2

Quick Overview

The Button component has been redesigned for better consistency and accessibility. We've introduced new variant options to make it more visually appealing.

Button changes

V1 Prop	Status	Migration Details
variant	Modified	The variant prop now controls the button style category (filled, outline, text), while colors are controlled by the new color prop.
before	Removed	Use the icon prop with position: "leading" instead.
after	Removed	Use the icon prop with position: "trailing" instead.
rounded	Removed	Use icon prop with position: "icon-only" instead.
orientation	Removed	This prop has been removed and is no longer supported.
sizes	Removed	This prop has been removed and is no longer supported. The prop size, however, still exists.
isAnimated	Removed	This prop has been removed and is no longer supported.

Card

import { Card } from '@uhg-abyss/web/ui/Card';

Same in V1 and V2

Quick Overview

The Card component has been simplified to provide a more flexible base component, allowing you to compose complex card layouts using standard HTML elements and styling. There are no more subcomponents.

Foundation changes

V1 Prop	Status	Migration Details
Card.Title	Removed	The Card.Title subcomponent has been removed. Use your own heading elements or components.
Card.Header	Removed	The Card.Header subcomponent has been removed. Use your own heading elements or components.
Card.Section	Removed	The Card.Section subcomponent has been removed. Use div elements with appropriate styling.

Card changes

V1 Prop	Status	Migration Details
size	Removed	The size prop has been removed. Use CSS to control the size of the Card.
fullHeight	Removed	The fullHeight prop has been removed. Use CSS to control the height of the Card.
collapse	Removed	The collapse functionality has been removed. Implement collapse behavior with other components like Accordion.
defaultIsOpen	Removed	The defaultIsOpen prop has been removed along with collapse functionality.
header	Removed	The header prop has been removed. Add header content as children of the Card.
isOpen	Removed	The isOpen prop has been removed along with collapse functionality.
collapseOnClick	Removed	The collapseOnClick prop has been removed along with collapse functionality.
headingLevel	Removed	The headingLevel prop has been removed. Use semantic HTML elements within the Card.

Carousel

import { Carousel } from '@uhg-abyss/web/ui/Carousel';

Same in V1 and V2

Quick Overview

The Carousel component now offers smoother animations and better support for responsive layouts. We've also made it possible to provide custom plugins / overrides through emblaOverrides.

Carousel changes

V1 Prop	Status	Migration Details
variant	Removed	The variant prop has been removed. Styling is now controlled through tokens.
compact	Removed	The compact prop has been removed. Use CSS styling to control carousel sizing.
rounded	Removed	The rounded prop has been removed. Navigation buttons now have consistent styling.
noLoop	Removed	The noLoop prop has been removed. Use emblaOverrides prop to control looping behavior.
minimal	Removed	The minimal prop has been removed. Navigation now has a consistent appearance.
autoplay	Removed	The autoplay prop has been removed. Use emblaOverrides with Embla Carousel Autoplay plugin for autoplay functionality.
autoplayDelay	Removed	The autoplayDelay prop has been removed. Use emblaOverrides with Embla Carousel Autoplay plugin to control delay.
ariaLabel	Renamed	The ariaLabel prop has been renamed to label and now serves both as a visible heading and for accessibility.

Slide

import { Slide } from '@uhg-abyss/web/ui/Carousel';

Same in V1 and V2

Quick Overview

The Slide subcomponent still wraps content in a Card, and now allows for greater flexibility.

Foundation changes

V1 Prop	Status	Migration Details
Slide.Title	Removed	The Slide.Title subcomponent has been removed. Use your own heading elements or components.
Slide.Container	Removed	The Slide.Container subcomponent has been removed. Use your own container elements or components.
Slide.Content	Removed	The Slide.Content subcomponent has been removed. Use your own container elements or components.
Slide.Button	Removed	The Slide.Button subcomponent has been removed. Use Button to add a button to your slide.

Slide changes

V1 Prop	Status	Migration Details
height	Removed	The height prop has been removed. Use css to customize your slides.
variant	Removed	The variant prop has been removed. Use css to customize your slides.

Charts

V1

import { Charts } from '@uhg-abyss/web/ui/Charts';

V2

import { V1Charts } from '@uhg-abyss/web/ui/Charts';

Changed from V1

Quick Overview

The old color tokens have been removed in favor of a new V1Charts.colors object that maintains consistency with previous color keys.

Foundation changes

V1 Prop	Status	Migration Details
Colors	Modified	The old color tokens have been removed to align with the new design system, but to maintain consistency, we have created a new V1Charts.colors object that contains all the same color keys as before.

Checkbox

import { Checkbox } from '@uhg-abyss/web/ui/Checkbox';

Same in V1 and V2

Quick Overview

The Checkbox component has been simplified to follow design system guidelines more closely, with improved accessibility and consistent layout patterns.

Checkbox changes

V1 Prop	Status	Migration Details
sizes	Removed	The sizes prop has been removed. Use css or token values in a theme instead.
size	Removed	The size prop has been removed. Use css or token values in a theme instead.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.

CheckboxGroup

import { CheckboxGroup } from '@uhg-abyss/web/ui/CheckboxGroup';

Same in V1 and V2

Quick Overview

The CheckboxGroup component now has easier layout control of Checkbox components.

Foundation changes

V1 Prop	Status	Migration Details
CheckboxGroup	Modified	CheckboxGroup now requires Checkbox components to be wrapped in CheckboxGroup.Column components.
CheckboxGroup.SelectAll	Modified	CheckboxGroup.SelectAll must now be wrapped in a CheckboxGroup.Column component.

CheckboxGroup changes

V1 Prop	Status	Migration Details
display	Removed	The display prop has been removed. Use multiple CheckboxGroup.Column components to create a multi-column layout.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.
sizes	Removed	The sizes prop has been removed and is no longer supported. Use css or token values in a theme instead.
size	Removed	The size prop has been removed and is no longer supported. Use css or token values in a theme instead.

Chip

import { Chip } from '@uhg-abyss/web/ui/Chip';

Same in V1 and V2

Quick Overview

The Chip component has been simplified to provide a more consistent visual style.

Chip changes

V1 Prop	Status	Migration Details
icon	Renamed	The icon prop has been removed, but prop leftAddOn allows for custom content such as an icon, which can be passed the same way.
outline	Removed	The outline prop has been removed. All chips now have a consistent visual style without borders.
isDisabled	Removed	The isDisabled prop has been removed. All chips now have a consistent state management.
onClose	Modified	In V1, when adding the onClose prop, the chip would have a close icon. In V2, the close icon is always present, and the onClose prop is used to handle the close action.
maxWidth	Modified	The maxWidth behavior has changed. Previously, chips had a fixed max width of 200px and there was no maxWidth prop, while now the default is "fit-content" and it can more easily be customized.

DateInput

import { DateInput } from '@uhg-abyss/web/ui/DateInput';

Same in V1 and V2

Quick Overview

The DateInput component has been redesigned to align with our design system standards, with improved accessibility and better integration with form validation systems. It now uses dayjs for date handling, ensuring consistent date manipulation and formatting across the application.

DateInput changes

V1 Prop	Status	Migration Details
placeholder	Removed	The placeholder prop has been removed and is no longer supported.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.
startingYear	Removed	The startingYear prop has been removed. Use the minDate prop to set the minimum selectable date instead.
endingYear	Removed	The endingYear prop has been removed. Use the maxDate prop to set the maximum selectable date instead.
onConfirm	Removed	The onConfirm prop has been removed. The component now automatically handles date selection without requiring a confirmation step and the calendar does not show a confirm button.
onCancel	Removed	The onCancel prop has been removed. The calendar does not show a cancel button.
excludeDate	Modified	The callback passed to the excludeDate prop now accepts a Dayjs object as a parameter instead of a JavaScript Date object.
minimumDate	Renamed	The minimumDate prop has been renamed to minDate. Additionally, it now only accepts a Dayjs object instead of a string or JavaScript Date object.
maximumDate	Renamed	The maximumDate prop has been renamed to maxDate. Additionally, it now only accepts a Dayjs object instead of a string or JavaScript Date object.
inputLeftElement	Modified	The inputLeftElement prop has been modified to accept an object with the values element and description.
inputLeftElementDescription	Removed	The inputLeftElementDescription prop has been merged into the inputLeftElement object as the description property.
inputRightElement	Removed	The inputRightElement prop has been removed.
inputRightElementDescription	Removed	The inputRightElementDescription prop has been removed as it was tied to inputRightElement.

Drawer

import { Drawer } from '@uhg-abyss/web/ui/Drawer';

Same in V1 and V2

Quick Overview

The Drawer component now only supports left/right positioning and uses structured header/footer objects.

Drawer changes

V1 Prop	Status	Migration Details
position	Modified	The position prop values have been restricted. The 'top' and 'bottom' positions are no longer supported.
header	Modified	The title prop has been renamed to header.
titleAlign	Removed	The titleAlign prop has been removed and is no longer supported.
headerAction	Removed	The headerAction prop has been removed.
size	Modified	The size prop is simplified to only $sm or custom.
sizes	Removed	The sizes prop has been removed. Use specific size values directly.
closeOnEscPress	Removed	The closeOnEscPress prop has been removed. Escape key closing behavior is now always enabled.
scrollableFocus	Removed	The scrollableFocus prop has been removed. Overflow focus behavior is now handled automatically.

DropdownMenu

import { DropdownMenu } from '@uhg-abyss/web/ui/DropdownMenu';

Same in V1 and V2

Quick Overview

The DropdownMenu component has been updated to provide a more consistent look between it's various items. These include menu items, checkbox items and radio items.

DropdownMenu changes

V1 Prop	Status	Migration Details
after	Removed	The after prop has been removed. The dropdown menu no longer allows inserting icons (or modifying the default icon) on the right side of the dropdown.

FileUpload

import { FileUpload } from '@uhg-abyss/web/ui/FileUpload';

Same in V1 and V2

Quick Overview

The FileUpload component has been redesigned better file management, and a more flexible API for handling file uploads and validation.

FileUpload changes

V1 Prop	Status	Migration Details
uploadMessage	Removed	Use the subText prop instead to provide additional context about accepted file types or requirements, or change the default message with our i18n system.
maxMessage	Removed	Use the subText prop instead to provide additional context about accepted file sizes or requirements
noIcon	Renamed	Renamed to hideUploadIcon for clarity.
isUploading	Removed	Use the onValidationReady callback to access the file status API, which allows you to programmatically update file statuses including upload progress.
dragDisabled	Removed	This prop has been removed. On mobile screens, the view automatically changes to disable dragging. Otherwise, dragging is always allowed.
fileHistory	Removed	This prop has been removed. File history management is now handled internally by the component with improved file status tracking. Use the file status API, which has method getFileList to access the current list of files.
fileHistorySort	Removed	This prop has been removed. File list ordering is now handled internally by the component, with files added in order of recency.
removeFileTray	Removed	This prop has been removed. The file list is now an integral part of the component and cannot be removed.
headerContent	Removed	Use the subText prop for additional context, or use the children prop to add custom content below the component.
customValidation	Modified	The signature has changed. The callback now receives a single File object instead of an array, and should return a string error message or null.
isDisabled	Removed	The component no longer has a disabled view.
maxFiles	Removed	Use the validators prop instead to create custom validation rules.

Sub-components changes

V1 Prop	Status	Migration Details
FileUpload.Heading	Removed	This sub-component has been removed. Use the subText prop or children prop instead.
FileUpload.Description	Removed	This sub-component has been removed. Use the subText prop or children prop instead.

FormProvider

import { FormProvider } from '@uhg-abyss/web/ui/FormProvider';

Same in V1 and V2

Quick Overview

FormProvider has been updated to follow best design patterns.

FormProvider changes

V1 Prop	Status	Migration Details
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.

Fullscreen

V1

import { Fullscreen } from '@uhg-abyss/web/ui/Fullscreen';

V2

import { ModalDialog } from '@uhg-abyss/web/ui/ModalDialog';

Changed from V1

Quick Overview

The Fullscreen component has been made into a variant of ModalDialog.

Foundation changes

V1 Prop	Status	Migration Details
Fullscreen	Removed	The Fullscreen component has been removed. Use the ModalDialog component's size="fullscreen" prop instead.

Heading

import { Heading } from '@uhg-abyss/web/ui/Heading';

Same in V1 and V2

Quick Overview

The Heading component has been redesigned to utilize the new design system typography styles.

Heading changes

V1 Prop	Status	Migration Details
offset	Removed	The offset prop has been removed. Different heading levels can now be achieved using the level prop.
display	Modified	The display prop is now just a boolean. Set to true to use display styles. Then, use the size prop to adjust the size and level to change the heading level from an h1.

Icon

import { Icon } from '@uhg-abyss/web/ui/Icon';

Same in V1 and V2

Quick Overview

The isScreenReadable prop has been removed from the Icon component.

Icon changes

V1 Prop	Status	Migration Details
isScreenReadable	Removed	The isScreenReadable prop has been removed. Use the title prop to provide accessible text for screen readers.

IconBrand

import { IconBrand } from '@uhg-abyss/web/ui/IconBrand';

Same in V1 and V2

Quick Overview

The old Optum icons have been removed from the IconBrand component to align with Optum branding guidelines. The isScreenReadable prop has also been removed.

IconBrand changes

V1 Prop	Status	Migration Details
useDeprecated	Removed	The useDeprecated prop has been removed. The old Optum icons are no longer available.
isScreenReadable	Removed	The isScreenReadable prop has been removed. Use the title prop to provide accessible text for screen readers.

IconSymbol

import { IconSymbol } from '@uhg-abyss/web/ui/IconSymbol';

Same in V1 and V2

Quick Overview

The isScreenReadable prop has been removed from the IconSymbol component.

IconSymbol changes

V1 Prop	Status	Migration Details
isScreenReadable	Removed	The isScreenReadable prop has been removed. Use the title prop to provide accessible text for screen readers.

Indicator

import { Indicator } from '@uhg-abyss/web/ui/Indicator';

Same in V1 and V2

Quick Overview

The Indicator component has been updated for token-based styling, and a simplified API.

Indicator changes

V1 Prop	Status	Migration Details
size	Removed	The size prop has been removed. Indicator sizing is now determined by design tokens and cannot be set directly.
withBorder	Removed	The withBorder prop has been removed. All indicators now have a consistent border style based on tokens.

Link

import { Link } from '@uhg-abyss/web/ui/Link';

Same in V1 and V2

Quick Overview

The Link component has been updated to improve accessibility and also added better styling options.

Link changes

V1 Prop	Status	Migration Details
variant	Modified	The variant prop values have changed.
color	Removed	The color prop has been removed. Rest colors are now controlled by the variant prop and tokens.
colorHover	Removed	The colorHover prop has been removed. Hover colors are now controlled by the variant prop and tokens.
fontWeight	Modified	The fontWeight prop now accepts specific token values instead of any string.
size	Modified	The size prop now only accepts specific token values.
sizes	Removed	The sizes prop has been removed. Use the size prop with specific token values instead.
before	Removed	The before prop has been replaced with beforeIcon which now only accepts an icon name or configuration object.
after	Removed	The after prop has been replaced with afterIcon which now only accepts an icon name or configuration object.
isDisabled	Removed	The isDisabled prop has been removed due to accessibility reasons.

LoadingOverlay

import { LoadingOverlay } from '@uhg-abyss/web/ui/LoadingOverlay';

Same in V1 and V2

Quick Overview

The LoadingOverlay component no longer supports the loadingIcon prop.

LoadingOverlay changes

V1 Prop	Status	Migration Details
loadingIcon	Removed	The loadingIcon prop has been removed as the V2 LoadingSpinner does not support icons within the spinner.

LoadingSpinner

import { LoadingSpinner } from '@uhg-abyss/web/ui/LoadingSpinner';

Same in V1 and V2

Quick Overview

The LoadingSpinner component now supports three sizes, to better match your application's design.

LoadingSpinner changes

V1 Prop	Status	Migration Details
size	Modified	The size prop now accepts a limited set of string values instead of any string or number.
sizes	Removed	The sizes prop has been removed. Use the new predefined size options instead.
variant	Modified	The variant prop values have changed from 'default'/'light' to 'primary'/'alt'.
children	Modified	The children prop is no longer supported. Instead, this functionality has been replaced with the structured label prop that provides a heading and bodyText placed below the spinner and it's only applicable for sizes lg and xl.

Modal

V1

import { Modal } from '@uhg-abyss/web/ui/Modal';

V2

import { ModalDialog } from '@uhg-abyss/web/ui/ModalDialog';

Changed from V1

Quick Overview

The Modal component has been redesigned as ModalDialog for a more modern look and feel. We've also added better support for accessibility.

Foundation changes

V1 Prop	Status	Migration Details
Modal.Section	Removed	The Modal.Section subcomponent has been removed. Use standard layout components inside the ModalDialog.
Modal.Description	Removed	The Modal.Description subcomponent has been removed. Use standard text or layout components inside the ModalDialog.

Modal changes

V1 Prop	Status	Migration Details
title	Renamed	The title prop has been renamed to header.
titleAlign	Removed	The titleAlign prop has been removed and is no longer supported.
position	Removed	The position prop has been removed. For positioned overlays, use the Drawer component instead.
isDrawer	Removed	The isDrawer prop has been removed. Use the dedicated Drawer component instead.
size	Modified	The size prop now accepts different values. Default has changed from 'lg' to '$md'.
sizes	Removed	The sizes prop has been removed. Use specific size values directly.
hideTitle	Removed	The hideTitle prop has been removed can just not pass in the header prop.
scrollableFocus	Removed	The scrollableFocus prop has been removed. Overflow focus behavior is now handled automatically.
closeOnEscPress	Removed	The closeOnEscPress prop has been removed. Escape key closing behavior is now always enabled.
headerAction	Removed	The headerAction prop has been removed and is no longer supported.

NavMenuPrimitives

V1

import { NavMenuPrimitives } from '@uhg-abyss/web/ui/NavMenu';

V2

import { NavMenu } from '@uhg-abyss/web/ui/NavMenu';

Changed from V1

Quick Overview

The NavMenuPrimitives component has been renamed to NavMenu. This migration involves changes to component names, prop names, and structural modifications to simplify the API.

Foundation changes

V1 Prop	Status	Migration Details
NavMenuPrimitives.Provider	Removed	The NavMenuPrimitives.Provider component has been removed. Configuration props are now passed directly to the NavMenu.Root component.
NavMenuPrimitives.Viewport	Removed	The NavMenuPrimitives.Viewport component has been removed and is no longer necessary for rendering the dropdown menu.

NavMenuPrimitives.Provider changes

V1 Prop	Status	Migration Details
seoMode	Removed	The seoMode prop has been removed. SEO-friendly rendering is now handled automatically.
scrollState	Removed	The scrollState prop has been removed. NavMenu no longer utilizes horizontal scrolling, and instead, uses mobile-responsive design to stack items vertically.

NavMenuPrimitives.Viewport changes

V1 Prop	Status	Migration Details
viewportHeight	Modified	The viewportHeight prop which sets the max-height of the dropdown menu, has been moved to NavMenu.Root.

NumberInput

import { NumberInput } from '@uhg-abyss/web/ui/NumberInput';

Same in V1 and V2

NumberInput changes

V1 Prop	Status	Migration Details
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines it will now always be column (stacked) layout.
stepValue	Renamed	The stepValue prop has been renamed to step to follow consistency across other components.

PageBodyIntro

import { PageBodyIntro } from '@uhg-abyss/web/ui/PageBodyIntro';

Same in V1 and V2

Quick Overview

The PageBodyIntro component has been restructured with a simplified, predefined layout that combines navigation, heading, and content sections into a more cohesive structure.

Foundation changes

V1 Prop	Status	Migration Details
PageBodyIntro.Row	Removed	The PageBodyIntro.Row subcomponent has been removed. PageBodyIntro now has a predefined structure with navigation, heading, and content sections.
PageBodyIntro.Title	Removed	The PageBodyIntro.Title subcomponent has been removed. Use the title prop on the main component instead.
PageBodyIntro.Profile	Removed	The PageBodyIntro.Profile subcomponent has been removed and is no longer supported.
PageBodyIntro.ProfileHeading	Removed	The PageBodyIntro.ProfileHeading subcomponent has been removed and is no longer supported.
PageBodyIntro.ProfileData	Removed	The PageBodyIntro.ProfileData subcomponent has been removed. You'll need to implement a custom solution.
PageBodyIntro.Links	Removed	The PageBodyIntro.Links subcomponent has been removed. You'll need to implement a custom solution.
PageBodyIntro.RequiredKey	Removed	The PageBodyIntro.RequiredKey subcomponent has been removed and is no longer supported.

PageBodyIntro changes

V1 Prop	Status	Migration Details
children	Modified	The children prop now has a different purpose. Previously, it accepted subcomponents like Row, Title, Profile, etc. Now it only accepts content to be displayed beneath the navigation and heading sections.
rowSpace	Removed	The rowSpace prop has been removed and is no longer supported. Spacing can be controlled using tokens.

PageFooter

V1

import { PageFooter } from '@uhg-abyss/web/ui/PageFooter';

V2

import { Footer } from '@uhg-abyss/web/ui/Footer';

Changed from V1

Quick Overview

The PageFooter component has been renamed to Footer with a new structure of sub-components for extensive customization.

Foundation changes

V1 Prop	Status	Migration Details
PageFooter.Link	Renamed	The PageFooter.Link subcomponent has been renamed to Footer.Link.
PageFooter.Section	Renamed	The PageFooter.Section subcomponent has been renamed to Footer.Section.

Page Footer changes

V1 Prop	Status	Migration Details
subFooterLinks	Modified	Previously, sub-footer links were passed directly to the main component. Now they are part of the Footer.SubFooter sub-component.
subFooterTitle	Renamed	The subFooterTitle prop has been renamed to copyright and is now part of the Footer.SubFooter sub-component.
subFooterBottomText	Renamed	The subFooterBottomText prop has been renamed to bottomText and is now part of the subFooter object.
subFooterName	Renamed	The subFooterName prop has been renamed to name and is now part of the Footer.SubFooter sub-component.
spreadSections	Modified	The spreadSections prop behavior remains the same, but the default value has changed from false to true, and is applied on Footer.Sections sub-component.

PageHeaderPrimitives

V1

import { PageHeaderPrimitives } from '@uhg-abyss/web/ui/PageHeader';

V2

import { Header } from '@uhg-abyss/web/ui/Header';

Changed from V1

Quick Overview

The PageHeaderPrimitives component has been redesigned as Header to support more flexible layouts and better integration with navigation elements.

Foundation changes

V1 Prop	Status	Migration Details
PageHeaderPrimitives.Provider	Removed	The Provider subcomponent has been removed. Use Header.Container directly instead.
PageHeaderPrimitives.Container	Renamed	The Container subcomponent has been renamed to Header.Container.
PageHeaderPrimitives.HamburgerMenu	Renamed	The HamburgerMenu subcomponent has been renamed to Header.HamburgerMenu.
PageHeaderPrimitives.DrawerLink	Renamed	The DrawerLink subcomponent has been renamed to Header.DrawerLink.
PageHeaderPrimitives.Brandmark	Renamed	The Brandmark subcomponent has been renamed to Header.Brandmark.

PageHeader changes

V1 Prop	Status	Migration Details
menuPosition	Removed	The menuPosition prop has been removed. You must now manually place the Header.HamburgerMenu component in the desired position within the layout (it is highly recommended to follow the placement shown in the component's documentation).
topMenuItems	Removed	The topMenuItems prop has been removed. You must now explicitly compose navigation using the Header.Actions and NavMenu components.
bottomMenuItems	Removed	The bottomMenuItems prop has been removed. You must now explicitly compose navigation using the Header.Navigation and NavMenu components.
extraDrawerContent	Modified	The way drawer content is composed has changed. Use Header.Drawer component with explicit children instead.
drawerPosition	Removed	The drawerPosition prop has been removed. The drawer position is now controlled by explicit placement of the Header.HamburgerMenu component.
fullWidth	Removed	The fullWidth prop has been removed from the PageHeader component. The Header component no longer supports this property.

PageHeader.Drawer changes

V1 Prop	Status	Migration Details
drawerSelection	Modified	The way drawer selection is handled has changed. The drawer content must now be explicitly composed within the Header.Drawer component.
maxWindowWidth	Removed	The maxWindowWidth prop has been removed. The responsive behavior is now handled internally.

PageHeader.Brandmark changes

V1 Prop	Status	Migration Details
logoTitle	Removed	The logoTitle prop has been removed. Header is more open and flexible - use Header.MainContent container to place items next to the brandmark.

Pagination

import { Pagination } from '@uhg-abyss/web/ui/Pagination';

Same in V1 and V2

Quick Overview

The Pagination component has been updated to improve accessibility and functionality. The components have been redesigned with better user experience in mind.

Pagination changes

V1 Prop	Status	Migration Details
variant	Modified	The variant prop values have been modified. The "compact" value has been renamed to "minimal".
ariaLabel	Renamed	The ariaLabel prop has been renamed to label.
customPreviousLabel	Removed	The customPreviousLabel prop has been removed and is no longer supported.
customNextLabel	Removed	The customNextLabel prop has been removed and is no longer supported.

ResultCount

V1

import { ResultCount } from '@uhg-abyss/web/ui/Pagination';

V2

import { Results } from '@uhg-abyss/web/ui/Pagination';

Changed from V1

Popover

import { Popover } from '@uhg-abyss/web/ui/Popover';

Same in V1 and V2

Quick Overview

The Popover component has standardized positioning behavior and improved accessibility features.

Popover changes

V1 Prop	Status	Migration Details
align	Removed	The align prop has been removed and is no longer supported.
alignOffset	Removed	The alignOffset prop has been removed and is no longer supported.
hasCustomButtonTrigger	Removed	The hasCustomButtonTrigger prop has been removed. The component now automatically detects button children.
hideArrow	Removed	The hideArrow prop has been removed. Arrows are always shown.
positionOffset	Removed	The positionOffset prop has been removed and is no longer supported.
width	Modified	The default value of the width prop has changed from 260px to 343px.

ProgressBar

import { ProgressBar } from '@uhg-abyss/web/ui/ProgressBar';

Same in V1 and V2

Quick Overview

The ProgressBar component has been enhanced to make it more visually appealing. Some props labeling props have been removed for a cleaner look and easier readability.

ProgressBar changes

V1 Prop	Status	Migration Details
label	Modified	The label prop has been updated to be required for accessibility reasons. Use the hideLabel prop to visually hide the label.
labelOffset	Modified	The labelOffset prop has been removed. It has been replaced with headingLevel to set the semantic level of the label's heading.
minLabel	Removed	The minLabel prop has been removed. It no longer supports displaying a minimum label at the bottom left.
maxLabel	Removed	The maxLabel prop has been removed. It no longer supports displaying a maximum label at the bottom right.
hideMinLabel	Removed	The hideMinLabel prop has been removed as there is no longer a label at the bottom left.
hideMaxLabel	Removed	The hideMaxLabel prop has been removed as there is no longer a label at the bottom right.
height	Removed	The height prop has been removed. The bar now has a fixed height of eight pixels.
borderRadius	Removed	The borderRadius prop has been removed. The bar now has a fixed border radius for a consistent look.
barColor	Removed	The barColor prop has been removed. The ProgressBar now only takes in a fillColor, and the bar's color is automatically set to 0.2 opacity of that color to guarantee accessibility contrast ratios.

RadioGroup

import { RadioGroup } from '@uhg-abyss/web/ui/RadioGroup';

Same in V1 and V2

Quick Overview

The RadioGroup component now has easier layout control of RadioGroup.Radio subcomponents.

Foundation changes

V1 Prop	Status	Migration Details
RadioGroup	Modified	RadioGroup now requires RadioGroup.Radio subcomponents to be wrapped in a RadioGroup.Column subcomponent.

RadioGroup changes

V1 Prop	Status	Migration Details
display	Removed	The display prop has been removed. Use RadioGroup.Column components to arrange radio buttons in columns instead.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.
helper	Removed	The helper prop has been removed and is no longer supported.
size	Modified	The size prop now only accepts a number instead of a string or number. The default value has changed from "$md" to 24.

RadioGroup.Radio changes

V1 Prop	Status	Migration Details
label	Modified	The label prop on Radio component now only accepts string instead of string or ReactElement.
sizes	Modified	The sizes prop on Radio component now only accepts a specific structure with sm and md keys.

Rating

import { Rating } from '@uhg-abyss/web/ui/Rating';

Same in V1 and V2

Quick Overview

The Rating component has been enhanced with additional functionality, and keeps the same properties with a few modified exceptions.

Rating changes

V1 Prop	Status	Migration Details
size	Modified	The size no longer supports single. Instead use singleStarDisplay.
reviewAction	Removed	The reviewAction prop has been split into href for link navigation and onClick for click handlers, as part of the reviewsConfig object.
reviewCount	Renamed	The reviewCount prop is now part of the reviewsConfig object / renamed to count.
reviewDescription	Renamed	The reviewDescription prop is now part of the reviewsConfig object / renamed to description.

RichTextEditor

import { RichTextEditor } from '@uhg-abyss/web/ui/RichTextEditor';

Same in V1 and V2

Quick Overview

The RichTextEditor component has been redesigned to align with our design system standards, with improved accessibility, better integration with form validation systems and the addition of a wide range of new features.

RichTextEditor changes

V1 Prop	Status	Migration Details
label	Removed	The label prop and the heading element have been removed from the component.

SearchInput

import { SearchInput } from '@uhg-abyss/web/ui/SearchInput';

Same in V1 and V2

Quick Overview

The SearchInput component has been redesigned for site search functionality and is no longer to be used within a form. This has led to quite a few changes to the API, as documented below. Also please note that SearchInput now includes two primary variants: the default variant is a simple search input field, while similar to V1 the typeahead variant (using the isTypeAhead prop) is a more advanced search input field that includes typeahead functionality and a corresponding options menu.

SearchInput changes

V1 Prop	Status	Migration Details
apiFiltering	Removed	The apiFiltering prop has been removed. Use onInputChange in combination with the useDebounce hook instead
customFilter	Removed	The customFilter prop has been removed. Use onInputChange to provide your own custom filter logic and set the resulting options to the options prop.
customNoOptionsMessage	Removed	The customNoOptionsMessage prop has been removed. The component no longer includes a no options message.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed as V2 SearchInput is not designed to be used within a form.
errorMessage	Removed	The errorMessage prop has been removed as V2 SearchInput is not designed to be used within a form with validation.
fuseConfig	Removed	The fuseConfig prop has been removed and search configurations have been consolidated into the more comprehensive searchConfig prop.
height	Removed	The height prop has been removed.
isRequired	Removed	The isRequired prop has been removed as V2 SearchInput is not designed to be used within a form with validation.
keys	Removed	The keys prop has been removed. Use searchConfig.keys instead.
debounceTime	Removed	The debounceTime prop has been removed. Use searchConfig.debounce instead. When using an API to filter options, use the useDebounce hook as shown above in the V2 apiFiltering prop example.
retainSectionHeader	Removed	The retainSectionHeader prop has been removed. Use searchConfig.retainSectionHeader instead.
resultLimit	Removed	The resultLimit prop has been removed. Use searchConfig.maxResults instead.
inputDefaultValue	Removed	The inputDefaultValue prop has been removed. Use the value prop with a default state value instead.
inputLeftElement	Removed	The inputLeftElement prop has been removed and is no longer supported.
inputLeftElementDescription	Removed	The inputLeftElementDescription prop has been removed and is no longer supported.
inputRightElement	Removed	The inputRightElement prop has been removed and is no longer supported.
inputRightElementDescription	Removed	The inputRightElementDescription prop has been removed and is no longer supported.
inputIcon	Removed	The inputIcon prop has been removed and is no longer supported.
model	Removed	The model prop has been removed as V2 SearchInput is not to be used within a form and no longer supports FormProvider and useForm.
onChange	Removed	In V1, onChange provided both the selected value and the complete selection object (onChange(value, selectedOption)). In V2, this functionality has been split: onInputChange now handles all input value changes with type information (onInputChange(value, changeType)), while the selection object is now provided through the onSearch callback as its second parameter (onSearch(searchedValue, selectedOption)). This separation provides clearer intent - onInputChange for tracking input state changes, and onSearch for handling selection completion with the full option object.
onClickSearchButton	Removed	The onClickSearchButton prop has been removed. Only the default variant includes a separate search button on click triggers the onSearch callback.
optionIcon	Removed	The optionIcon prop has been removed. Use the customRender prop to provide a custom icon for each option.
rounded	Removed	The rounded prop has been removed.
subText	Removed	The subText prop has been removed as V2 SearchInput is not designed to be used within a form.
uniqueStorageId	Removed	The uniqueStorageId prop has been removed and is no longer supported.
validators	Removed	The validators prop has been removed as V2 SearchInput is not designed to be used within a form with validation.
customRender	Modified	The signature of customRender has changed to include the item state.
onClear	Modified	onClear is no longer required to clear out state when the clear button is selected. Instead, onInputChange will fire and provide the updated empty value.
onInputChange	Modified	The second parameter of onInputChange callback has changed to include the type of input change that occurred, providing more context about how the input was changed.
onSearch	Modified	The signature of the onSearch callback has changed to include the selected option as a second parameter. This is where you can now access the full option object that was previously available in the onChange callback.
openOnFocus	Modified	In V1 you had to set openOnFocus to true to enable the menu to automatically open when the input received keyboard focus. This is now the default behavior in V2. To change this behavior, set the openOnFocus prop to false.

SelectInput

import { SelectInput } from '@uhg-abyss/web/ui/SelectInput';

Same in V1 and V2

Quick Overview

The SelectInput component has been restructured to provide better support for different selection modes and enhanced search capabilities.

SelectInput changes

V1 Prop	Status	Migration Details
apiFiltering	Removed	The apiFiltering prop has been removed. Use onInputChange in combination with the useDebounce hook instead
fuseConfig	Removed	The fuseConfig prop has been removed and search configurations have been consolidated into the more comprehensive searchConfig prop.
keys	Removed	The keys prop has been removed. Use searchConfig.keys instead.
debounceTime	Removed	The debounceTime prop has been removed. Use searchConfig.debounce instead. When using an API to filter options, use the useDebounce hook as shown above in the V2 apiFiltering prop example.
retainSectionHeader	Removed	The retainSectionHeader prop has been removed. Use searchConfig.retainSectionHeader instead.
inputLeftElement	Modified	The inputLeftElement prop has been modified to accept an object with the values element and description.
inputLeftElementDescription	Removed	The inputLeftElementDescription prop has been merged into the inputLeftElement object as the description property.
inputRightElement	Removed	The inputRightElement prop has been removed and is no longer supported.
inputRightElementDescription	Removed	The inputRightElementDescription prop has been removed and is no longer supported.
onPaste	Removed	The onPaste prop has been removed and is no longer supported.
placeholder	Removed	The placeholder prop has been removed and is no longer supported.
maxListHeight	Modified	The default value of maxListHeight has changed from "185px" to "200px".
onClear	Modified	onClear is no longer required to clear out state when the clear button is selected. Instead, onChange will fire and provide the updated empty value.
onInputChange	Modified	The signature of the onInputChange callback has changed to include the current selection(s).

SelectInputMulti

V1

import { SelectInputMulti } from '@uhg-abyss/web/ui/SelectInputMulti';

V2

import { SelectInput } from '@uhg-abyss/web/ui/SelectInput';

Changed from V1

Quick Overview

The SelectInputMulti component has been consolidated into SelectInput. Use SelectInput with the isMulti prop set to true to achieve the same multi-select functionality.

SelectInputMulti changes

V1 Prop	Status	Migration Details
apiFiltering	Removed	The apiFiltering prop has been removed. Use onInputChange in combination with the useDebounce hook instead
fuseConfig	Removed	The fuseConfig prop has been removed and search configurations have been consolidated into the more comprehensive searchConfig prop.
keys	Removed	The keys prop has been removed. Use searchConfig.keys instead.
debounceTime	Removed	The debounceTime prop has been removed. Use searchConfig.debounce instead. When using an API to filter options, use the useDebounce hook as shown above in the V2 apiFiltering prop example.
retainSectionHeader	Removed	The retainSectionHeader prop has been removed. Use searchConfig.retainSectionHeader instead.
hideChips	Removed	The hideChips prop has been removed and is no longer supported.
inputLeftElement	Modified	The inputLeftElement prop has been modified to accept an object to accept an element and a description prop.
inputLeftElementDescription	Removed	The inputLeftElementDescription prop has been merged into the inputLeftElement object as the description property.
inputRightElement	Removed	The inputRightElement prop has been removed and is no longer supported.
inputRightElementDescription	Removed	The inputRightElementDescription prop has been removed and is no longer supported.
placeholder	Removed	The placeholder prop has been removed and is no longer supported.
searchLabel	Removed	The searchLabel prop has been removed and is no longer supported.
searchPlaceholder	Removed	The searchPlaceholder prop has been removed and is no longer supported.
maxListHeight	Modified	The default value of maxListHeight has changed from "185px" to "200px".
onClear	Modified	onClear is no longer required to clear out state when the clear button is selected. Instead, onChange will fire and provide the updated empty value.
onInputChange	Modified	The signature of the onInputChange callback has changed to include the current selection(s).

Skeleton

import { Skeleton } from '@uhg-abyss/web/ui/Skeleton';

Same in V1 and V2

Quick Overview

The Skeleton component has been simplified. The variant prop has been modified to represent color variations instead of shapes, enhancing the visual flexibility of the component.

Skeleton changes

V1 Prop	Status	Migration Details
variant	Modified	The variant prop values have been changed to represent color variations instead of shapes.

Slider

import { Slider } from '@uhg-abyss/web/ui/Slider';

Same in V1 and V2

Quick Overview

The Slider component has been optimized by removing range capabilities and adding a form input, with advanced configurations moved to a tooltipConfig and marksConfig object for better organization.

Slider changes

V1 Prop	Status	Migration Details
labelTransition	Removed	The labelTransition prop has been removed. Label transitions are no longer configurable.
labelTransitionDuration	Removed	The labelTransitionDuration prop has been removed. Label transitions are no longer configurable.
popoverAlwaysOn	Renamed	The popoverAlwaysOn prop has renamed and moved to the tooltipConfig object. Use tooltipConfig.alwaysOn.
showLabelOnHover	Renamed	The showLabelOnHover prop has been renamed and moved to the tooltipConfig object. Use tooltipConfig.showOnHover.
disablePopover	Modified	The disablePopover prop has been renamed and moved to the tooltipConfig object. Use tooltipConfig.showOnDrag.
customPopoverLabel	Renamed	The customPopoverLabel prop has been renamed and moved to the tooltipConfig object. Use tooltipConfig.customLabel.
marks	Renamed	The marks prop has been moved to the marksConfig object. Use marksConfig.marks in v2 instead.
customMarkLabel	Renamed	The customMarkLabel prop has been renamed and moved to the marksConfig object. Use marksConfig.customLabel in v2 instead.
showMarks	Modified	The showMarks prop is now part of marksConfig.showMarks and its allowed values have changed.
validators	Removed	The validators prop has been removed. Use form validation at the form level instead.
name	Removed	The name prop has been removed. Use model for form integration.
thumbChildren	Removed	The thumbChildren prop has been removed. Custom thumb content is no longer supported.
scale	Removed	The scale prop has been removed. Value scaling is no longer supported.
errorMessage	Removed	The errorMessage prop has been removed. Use form-level error handling instead.
pageUpDownStep	Removed	The pageUpDownStep prop has been removed. Keyboard navigation internally uses the step prop instead.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Descriptor layout is now handled automatically.
hideLabel	Removed	The hideLabel prop has been removed. Label visibility is now handled automatically.
isRange	Removed	The isRange prop has been removed. Range slider support is not available in v2.

StepIndicator

V1

import { StepIndicator } from '@uhg-abyss/web/ui/StepIndicator';

V2

import { StepTracker } from '@uhg-abyss/web/ui/StepTracker';

Changed from V1

Quick Overview

The StepIndicator component has been redesigned as StepTracker to provide better accessibility and a more consistent design.

Foundation changes

V1 Prop	Status	Migration Details
StepIndicator.Step	Renamed	The StepIndicator.Step subcomponent has been renamed to StepTracker.Step.

StepTracker changes

V1 Prop	Status	Migration Details
variant	Removed	The variant prop has been removed. StepTracker uses a single, consistent design.
barColor	Removed	The barColor prop has been removed.StepTracker uses design system tokens for colors.
barSize	Removed	The barSize prop has been removed. StepTracker uses fixed sizes from the design system.
stepSize	Removed	The stepSize prop has been removed. StepTracker uses fixed sizes from the design system.
horizontalScroll	Removed	The horizontalScroll prop has been removed. StepTracker handles responsive behavior automatically.
onStepClick	Removed	The onStepClick prop has been removed. Steps are no longer interactive.
stepCompletionState	Removed	The stepCompletionState prop has been removed. Step completion is determined by the currentStep value.
title	Modified	The title prop is now required for accessibility.

StepTracker.Step changes

V1 Prop	Status	Migration Details
icon	Removed	The icon prop on Step components has been removed. Steps now use consistent iconography.
label	Modified	The label prop now only accepts string values.

Tabs

import { Tabs } from '@uhg-abyss/web/ui/Tabs';

Same in V1 and V2

Quick Overview

The Tabs component has been redesigned to provide better accessibility, improved responsiveness, and a more consistent design.

Tabs changes

V1 Prop	Status	Migration Details
variant	Removed	The variant prop has been removed. The Tabs component now uses a single, consistent design, similar to V1 variant="line". Use css for any custom styling needs.
position	Removed	The position prop has been removed. Tabs now are always positioned at flex-start. Override with css if needed.
grow	Removed	The grow prop has been removed. Tabs now have a consistent size and spacing model, hugging the contents of the tab. Override with css if needed.
size	Removed	The size prop has been removed. Tabs now have a fixed size following the design system guidelines.
sizes	Removed	The sizes prop has been removed. Tabs now have a fixed size following the design system guidelines.
title	Modified	The title prop is now required for accessibility reasons.

Tabs.Tab changes

V1 Prop	Status	Migration Details
subText	Renamed	The subText prop has been renamed to subLabel and now only accepts string values.

Text

import { Text } from '@uhg-abyss/web/ui/Text';

Same in V1 and V2

Quick Overview

The Text component has been redesigned to utilize the new design system typography styles.

Text changes

V1 Prop	Status	Migration Details
size	Renamed	The size prop has been renamed to fontSize. Additionally, it now only accepts specified values to align with design system standards.
sizes	Removed	The sizes prop has been removed. The component now relies on design tokens for all sizing values, eliminating the need for custom size configurations.
fontWeight	Modified	The fontWeight prop now only accepts specified values to align with design system standards.
lineHeights	Removed	The lineHeights prop has been removed. Line heights are now determined by the design system based on the selected fontSize.
transform	Removed	The transform prop has been removed and is no longer supported.

TextInput

import { TextInput } from '@uhg-abyss/web/ui/TextInput';

Same in V1 and V2

Quick Overview

The TextInput component has been redesigned to align with our design system standards, with improved accessibility and better integration with form validation systems.

TextInput changes

V1 Prop	Status	Migration Details
type	Modified	The type prop is now limited to specific values rather than accepting any string.
inputLeftElement	Modified	The inputLeftElement prop has been modified to accept an object with the values element and description.
inputLeftElementDescription	Removed	The inputLeftElementDescription prop has been merged into the inputLeftElement object as the description property.
inputRightElement	Removed	The inputRightElement prop has been removed.
inputRightElementDescription	Removed	The inputRightElementDescription prop has been removed as it was tied to inputRightElement.
onClickSearch	Removed	The onClickSearch prop has been removed and is no longer supported.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.
mask	Modified	The mask prop now only accepts specific predefined values and no longer accepts custom string patterns.
highlighted	Modified	The highlighted prop now only accepts boolean values, not strings.

TextInputArea

import { TextInputArea } from '@uhg-abyss/web/ui/TextInputArea';

Same in V1 and V2

Quick Overview

The TextInputArea component has been redesigned to align with our design system standards, with improved accessibility and better integration with form validation systems.

TextInputArea changes

V1 Prop	Status	Migration Details
inputRightElement	Removed	The inputRightElement prop has been removed.
inputRightElementDescription	Removed	The inputRightElementDescription prop has been removed as it was tied to inputRightElement.
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.
displayMaxLength	Removed	The displayMaxLength prop has been removed, since it is now always visible for accessibility.
disableAutoSize	Removed	The disableAutoSize prop has been removed, since the height of the input field is always 192px unless overridden by the css prop.
rows	Removed	The rows prop has been removed, since the height of the input field is always 192px unless overridden by the css prop.

TimeInput

import { TimeInput } from '@uhg-abyss/web/ui/TimeInput';

Same in V1 and V2

Quick Overview

The TimeInput component has been redesigned to align with our design system standards, with improved accessibility and better integration with form validation systems

TimeInput changes

V1 Prop	Status	Migration Details
descriptorsDisplay	Removed	The descriptorsDisplay prop has been removed. Following design system guidelines, it will now always be a column (stacked) layout.
inputLeftElement	Modified	The inputLeftElement prop has been modified to accept an object with the values element and description.
inputLeftElementDescription	Removed	The inputLeftElementDescription prop has been merged into the inputLeftElement object as the description property.
inputRightElement	Removed	The inputRightElement prop has been removed.
inputRightElementDescription	Removed	The inputRightElementDescription prop has been removed as it was tied to inputRightElement.

Timeline

import { Timeline } from '@uhg-abyss/web/ui/Timeline';

Same in V1 and V2

Quick Overview

The Timeline component has been updated to align with the latest design system standards. Several props have been removed or modified to simplify the API and improve consistency.

Foundation changes

V1 Prop	Status	Migration Details
Timeline.Item	Renamed	The Timeline.Item subcomponent has been renamed to Timeline.Step.

Timeline changes

V1 Prop	Status	Migration Details
active	Modified	The active prop has been renamed to activeStep and is now required. It is now 1-indexed instead of 0-indexed.
align	Removed	The align prop has been removed. Timeline items are now always left-aligned.
horizontal	Removed	The horizontal prop has been removed. The timeline is now always vertical.
centeredItems	Removed	The centeredItems prop has been removed as was tied to horizontal.
color	Removed	The color prop has been removed. Timeline now uses design system tokens for colors.
lineWidth	Removed	The lineWidth prop has been removed. Timeline now uses a fixed line width defined by the design system.
title	Modified	The title prop is now visible and is no longer used solely for screen readers

Timeline.Item changes

V1 Prop	Status	Migration Details
title	Modified	The title prop is now required for each timeline step.
lineVariant	Removed	The lineVariant prop has been removed. Steps now use a consistent line style.
bullet	Removed	The bullet prop has been removed. Steps now use a consistent bullet style.

Toast

import { Toast } from '@uhg-abyss/web/ui/Toast';

Same in V1 and V2

Quick Overview

The Toast component has been simplified to follow design system guidelines more closely, with improved accessibility and consistent layout patterns.

Toast changes

V1 Prop	Status	Migration Details
isLoading	Removed	The isLoading prop has been removed. You can still load updated content for a toast by using the .update method, which will update the targeted toast after a specified time.
ariaLoadingLabel	Removed	The ariaLoadingLabel prop has been removed as part of the removal of isLoading described above.
limit	Removed	The limit prop has been removed. Toasts will now fill up all available vertical space. After this threshold, the container will add a vertical scroll so the user can visualize all toasts. The queue is still in place with unlimited amount.
position	Removed	The position prop has been removed. On mobile screens, the position is now locked at the top center. For any larger screen, the position is locked at the bottom right.

ToggleSwitch

V1

import { ToggleSwitch } from '@uhg-abyss/web/ui/ToggleSwitch';

V2

import { Toggle } from '@uhg-abyss/web/ui/Toggle';

Changed from V1

Quick Overview

The ToggleSwitch component has been renamed to Toggle, with improved accessibility features and a more streamlined API, while maintaining its core functionality as an on/off switch.

ToggleSwitch changes

V1 Prop	Status	Migration Details
text	Removed	The text prop, which previously allowed showing text in the toggle switch, has been removed. The component no longer supports displaying text within the switch itself.
size	Removed	The size prop has been removed. The component now uses the design system tokens to control sizing internally, providing consistent sizing across the application.
sizes	Removed	The sizes prop has been removed. The component now relies on design tokens for all sizing values, eliminating the need for custom size configurations.
borderRadius	Removed	The borderRadius prop has been removed. The component now uses design tokens to apply consistent border radius styling based on the design system specifications.
helper	Removed	The helper prop has been removed. The component no longer supports displaying helper text or tooltips directly within the toggle switch.
hideLabel	Removed	The hideLabel prop has been removed. The component now always displays the label, ensuring better accessibility and usability.

Tooltip

import { Tooltip } from '@uhg-abyss/web/ui/Tooltip';

Same in V1 and V2

Quick Overview

The Tooltip component has been redesigned with improved accessibility features and a more consistent behavior. The core functionality remains the same: providing contextual text that appears on hover or focus.

Tooltip changes

V1 Prop	Status	Migration Details
positionOffset	Removed	The positionOffset prop has been removed. The tooltip position is now controlled internally with consistent spacing based on design tokens.
align	Removed	The align prop has been removed. The tooltip is now always centered relative to its trigger element for consistency.
hideArrow	Removed	The hideArrow prop has been removed. Tooltips now always display with an arrow for consistent visual design.