v6.0.0

6.0.0 (2024-02-06)

⚠️ Breaking Changes

Button

• Old "private" CSS-variables are removed: --yc-button-background-color, --yc-button-background-color-hover, --yc-button-height, --yc-button-padding, --yc-button-border-radius. Remove them or migrate to the new CSS API.

Alert

• Removed positive theme, use success instead.

Card

• Removed positive theme, use success instead.
• Old "private" CSS-variables are removed: --yc-card-box-shadow, --yc-card-border-radius. Remove them or migrate to the new CSS API.

CopyToClipboard

• CopyToClipboardStatus enum changed to union type: 'pending' | 'success' | 'error'.

ClipboardButton

• Used icons from Gravity pack.
• size prop accepts Button's size, not a number.

Dialog

• Old "private" CSS-variables are removed: --yc-dialog-*

Label

• onClose prop renamed to onCloseClick

Link

• href prop is now required.
• Removed normal-visitable view, use visitable prop instead.

List

• Removed --yc-list-height and --yc-list-item-height CSS vars, use component props itemsHeight and itemHeight respectively.
• CSS var --yc-list-margin is replaced with --g-list-item-padding from CSS API.
• From this release we do not recommend to use this component. We're working on a new version of list component with better customization and configuration.

MobileContext

Hooks useMobile and usePlatform now return only the value, without the setter. Same is true for withMobile HOC. The only remaining way to change context values is to set props directly on the MobileContext.

Modal

• Old "private" CSS-variables are removed: --yc-modal-margin, --yc-modal-border-radius. Remove them or migrate to the new CSS API.

Persona

• Component refactored to be built with new Avatar component
• Component renamed to UserLabel due to similarity with the Label
• onClose prop renamed to onCloseClick

Popup

• Old "private" CSS-variables are removed: --yc-popup-background-color, --yc-popup-border-color, --yc-popup-border-width. Remove them or migrate to the new CSS API.

Popover

• Old "private" CSS-variables are removed: --yc-popover-padding, --yc-popover-max-width. Remove them or migrate to the new CSS API.

Sheet

• Old "private" CSS-variables are removed: --yc-sheet-content-paddings. Remove them or migrate to the new CSS API.

Tabs

• Old "private" CSS-variables are removed: --yc-tab-item-vertical-padding, --yc-tab-item-vertical-height. Remove them or migrate to the new CSS API.

Toaster

• Old "private" CSS-variables are removed: --yc-toaster-desktop-width, --yc-toaster-margin, --yc-toaster-padding. Remove them or migrate to the new CSS API.
• type prop renamed to theme and its value error changed to danger.
• Type ToastType renamed to ToastTheme.

Tooltip

• Tooltip was merged into ActionTooltip.
• New component Tooltip was introduced as a replacement for browsers' native tooltip.

User

• Component is now built with new Avatar component, so imgUrl prop moved to dedicated avatar prop:

  // Old
  <User imgUrl="..." />
  
  // New
  <User avatar={{imgUrl: '...'}} />

UserAvatar

• Component removed in favor or new generic Avatar

CSS

• Removed deprecated --yc-* CSS-variables.
• Removed fallbacks of :focus-visible.
• Used logical CSS-properties all over the components.
• Prefix for all components is changed from .yc-* to .g-*.

Hooks

• Hook useOnFocusOutside removed. Use useFocusWithin instead.
• Type UseFileInputOutput removed. Use UseFileInputResult instead.
• Type UseIntersection renamed to UseIntersectionProps.
• Removed setOpen from useSelect result. Use toggleOpen instead.

Misc

• Added imports of CSS-files to cjs modules as well. If you are using these files, ensure that you have an appropriate loader in your bundler to handle them.

---

🚀 Features

Avatar Component

The component's purpose is to provide a way to display generic avatars. It allows to display images via urls, initials letters from text and icon. The component has different sizes and views "out of the box", but also fully customizable. It's now used in User and Persona components.

Components CSS API

We are introducing a new CSS API for some components. It allows "low-level" customization of component's appearance via CSS-variables. Look if CSS API is available for component on docs page.

RTL Support

All components are now correctly displayed with right-to-left languages. To set direction use direction prop of ThemeProvider, values are ltr (default) and rtl. To get current direction inside your React App use useDirection hook or withDirection HOC.

Button.Icon

• side prop now accepts start and end

Disclojure

• arrowPosition prop now accepts start and end

Popover

• offset prop now accepts {block: number; inline: number;}

Content overflow in Modal and Dialog

Modal and Dialog components now have prop for controlling content overflow behaviour. Prop contentOverflow has 2 values: visible (default, current behaviour) and auto. Setting auto switches scrolling to the content area.

New Table sort indicator

With withTableSorting HOC sort inidicators on sortable columns are always visible, new icons were used, arrows instead of carets.

List 2.0

• New set of hooks and basic stateless components
• useList, to create components based on lists of data, including tree-like ones. Keyboard support, filtering, and basic usage scenarios such as virtualization, dnd, and an endless list are implemented. For more information, see the documentation and examples in Storybook.
• Experimental component TreeSelect based on the new functionality of the useList hook. Depending on the passed data structure, the component can be used as a regular Select, or a representation of tree-like data structures. It has support for DnD and virtualization implemented outside, so the component doesn't not depends on heavy-weight libraries anymore. See the examples in Storybook.
• All new functionality is unstable meaning the API of the components may change based on feedback