v7.0.0-beta.5

⚠️ Breaking Changes

• Migrate Popup, Modal and other overlay components to use floating-ui instead of popper.js.
• Built JS files are now in ES2022

Button

• Rename CSS API: --g-button-icon-size → --g-button-icon-space.
• Component now accepts any properties from the <button/> or <a/> element.
• Deprecate extraProps property.

Link

• Component now accepts any properties from the <a/> element.
• Deprecate extraProps property.

RadioButton

• Rename component to SegmentedRadioGroup.
• No value is checked by default now (before, the first one was checked if no value has been provided).

RadioGroup

• No value is checked by default now (before, the first one was checked if no value has been provided).

Slider

• Remove deprecated debounceDelay property.

NumberInput

Component moved to the main entrypoint.

Breadcrumbs

Breadcrumbs is swapped with the component from the lab entrypoint.

The old component has beed moved to the legacy entrypoint, marked as deprecated and will be removed in v8:

import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy'; // <-- Old Breadcrumbs
import {Breadcrumbs} from '@gravity-ui/uikit'; // <-- New Breadcrumbs

Popup

• Change offset property type to number | {mainAxis?: number; crossAxis?: number}.
• Remove disableLayer and type properties. Floating elements are no longer attached to the "layer" context.
• Remove modifiers property. Use floatingMiddlewares instead, check the Floating UI docs for more info.

  ⚠️ Providing own middlewares will replace the defaults. Before, with modifires from popper.js it was adding to the defaults

• Remove altBoundary property. It now applies automatically when disablePortal is true.
• Remove deprecated onClick property.
• Remove onMouseEnter and onMouseLeave properties.
• Remove onFocus and onBlur properties.
• Remove container property. If you need to override Portal container, wrap Popup with PortalProvider.
• Remove contentClassName property. There is no more content element.
• Replace restoreFocus and restoreFocusRef properties with returnFocus?: boolean | React.Ref<HTMLElement>.
• Rename property: onTransitionEnter → onTransitionIn.
• Rename property: onTransitionEntered → onTransitionInComplete.
• Rename property: onTransitionExit → onTransitionOut.
• Rename property: onTransitionExited → onTransitionOutComplete.
• Deprecate anchorRef property. Use anchorElement instead.
• Deprecate onClose, onEscapeKeyDown and onOutsideClick callback. Use onOpenChange instead.

Popover

Popover is reworked to be a "low-level" component with built-in interactivity and simplier API. See README for details.

The old component has beed moved to the legacy entrypoint, marked as deprecated and will be removed in v8:

import {Popover as LegacyPopover} from '@gravity-ui/uikit/legacy'; // <-- Old Popover
import {Popover} from '@gravity-ui/uikit'; // <-- New Popover

Tooltip

• Remove id property. Tooltip sets it automatically now to connect the reference via a11y attributes.
• Remove contentClassName property. There is no more content element.
• Remove disablePortal property.

ActionTooltip

• Update open/close animation.
• Remove id property. ActionTooltip sets it automatically now to connect the reference via a11y attributes.
• Remove contentClassName property. There is no more content element.
• Remove disablePortal property.

Dialog

• Remove listenKeyEnter property from Dialog.Footer.

List

• Remove ListWrapper component.

Menu

• Remove icon property from Menu.Item. Use iconStart instead.

Select

• Change renderControl signature: onKeyDown, onClick, popupId, selectId, activeIndex are replaced by single triggerProps object.

Sheet

• Remove extra wrapper around the content.

FilePreview

• Remove fullscreen mobile image preview.

HelpMark

• Remove placement property. Use new popoverProps property to pass any prop to Popover.
• Remove buttonProps property. All "top-level" props are now passed to the button element.
• Remove buttonRef property. Use normal ref instead,

TextInput

• Remove leftContent property. Use startContent instead.
• Remove rightContent property. Use endContent instead.

Avatar

• One of the following properties is now required: imgUrl, icon or text.
• Change font size of the text in s size.
• Change border width in 2xs size.
• Rename CSS API: --g-avatar-color → --g-avatar-text-color.

User

• Change the gap between the avatar and the text in m size.
• Change font size in xl size.
• Rework CSS API (replace all the variables with new ones).

UserLabel

• Replace children property with text property.
• Change spacing between elements and font sizes.
• Add a border for avatar.
• Rework CSS API (replace all the variables with new ones).

useFocusWithin

• Remove FocusWithinProps type, use UseFocusWithinProps instead.

Layout

• RemoveLayoutProvider component. Use layout prop from the ThemeProvider instead.

Styles

• Update default monospace font family: prioritize Liberation Mono over Ubuntu Mono.
• Remove scrollbars styling.
• Update text offset in Checkbox, Radio and Switch.
• New appearance of disabled state in Checkbox and Radio.

🚀 Features

Popup

• Add modalFocus property which controls whether focus should be trapped inside the floating element.
• Add initialFocus property which moves focus to the specified element when autoFocus is true. It can be number (nth tabbable) or React.Ref.
• Add disableFocusVisuallyHiddenDismiss property which disables adding hidden controls for accessibility purposes when autoFocus is true.
• Add zIndex property

Tooltip

• children property can be a function that returns ReactElement.
• Add open and onOpenChange for controlled state.
• Add trigger property. See README for details.
• Add role property which can be either tooltip or label. See README for details.

ActionTooltip

• children property can be a function that returns ReactElement.
• Add open and onOpenChange for controlled state.
• Add trigger property. See README for details.

Avatar

• Add 3xs size.
• Support all AriaLabelingProps.
• Add --g-avatar-border-width, --g-avatar-inner-border-width and --g-avatar-font-weight to CSS API.

User

• Add 3xs size.
• Support all AriaLabelingProps.
• Support string in avatar property.

UserLabel

• Add 3xs and 2xs sizes.
• Add description property.