v5.0.0

5.0.0 (2023-07-14)

⚠️ Breaking Changes

Components

• These components are moved to @gravity-ui/components repo: ChangelogDialog, Stories, StoriesGroup, HelpPopover, SharePopover, PromoSheet, StoreBadge
• Toast: removed deprecated prop isOverride
• Popup: prop className is now assigned to the root node, added new contentClassName for content node
• SharePopover: removed deprecated prop handleMetrika
• SharePopover: prop tooltipClassName is now named tooltipContentClassName
• Label: removed prop style, use theme variables for overriding border radius. Later style may be used for CSSObjectProperties
• Progress: view prop is replaced by size with new values (m, s, xs)
• Button: updated component layout
• Button: selected state supported for all views
• Popover: used div instead of span on trigger node
• Popover: prop tooltipClassName is now named tooltipContentClassName
• TextInput: component split into TextInput and TextArea

Theme

• useTheme: now only returns theme string, without setter
• useThemeSettings: now only returns theme setting object, without setter

The only way to change theme or theme settings now is to provide new props to the ThemeProvider component

CSS

• Color palette updated with new colors, including main accent color, which is now yellow instead of blue. Read “Branding” section of Storybook to apply color customization

• removed --yc-*-my-* vars, use plain vars directly:

  Old Variable	New Variable
  --yc-my-scrollbar-width	--g-scrollbar-width
  --yc-my-border-radius-s	--g-border-radius-s
  --yc-my-border-radius-m	--g-border-radius-m
  --yc-my-border-radius-l	--g-border-radius-l
  --yc-my-border-radius-xl	--g-border-radius-xl
  --yc-my-color-brand-normal	--g-color-base-brand
  --yc-my-color-brand-normal-hover	--g-color-base-brand-hover
  --yc-my-color-brand-light	No alternative
  --yc-my-color-brand-selection	--g-color-base-selection
  --yc-my-color-brand-selection-hover	--g-color-base-selection-hover
  --yc-my-color-brand-text	--g-color-text-brand
  --yc-my-color-brand-text-contrast	--g-color-text-brand-contrast
  --yc-my-color-brand-link	--g-color-text-link
  --yc-my-color-brand-link-hover	--g-color-text-link-hover
  --yc-my-color-brand-link-visited	--g-color-text-link-visited
  --yc-my-color-brand-link-visited-hover	--g-color-text-link-visited-hover

• removed --yc-color-promo-* vars. If you need different non-semantic colors, define them by yourself

• removed “social” color vars (facebook, twitter, telegram, …)

• renamed brand variables:

  Old Variable	New Variable
  --yc-color-brand-normal	--g-color-base-brand
  --yc-color-brand-normal-hover	--g-color-base-brand-hover
  --yc-color-brand-light	No alternative
  --yc-color-brand-selection	--g-color-base-selection
  --yc-color-brand-selection-hover	--g-color-base-selection-hover
  --yc-color-brand-link	--g-color-text-link
  --yc-color-brand-link-hover	--g-color-text-link-hover
  --yc-color-brand-link-visited	--g-color-text-link-visited
  --yc-color-brand-link-visited-hover	--g-color-text-link-visited-hover
  --yc-color-brand-text	--g-color-text-brand
  --yc-color-brand-text-contrast	--g-color-text-brand-contrast

⌛️ Deprecations

• All --yc-* variables will be removed in the next major update. For almost all variables it is enough to change prefix to the --g-*, except for the variables below, which will be replaced by the new ones.

  Old Variable	New Variable
  --yc-color-base-special	--g-color-base-brand
  --yc-color-base-special-hover	--g-color-base-brand-hover
  --yc-color-base-action	--g-color-base-brand
  --yc-color-base-action-hover	--g-color-base-brand-hover
  --yc-color-base-info	--g-color-base-info-light
  --yc-color-base-info-hover	--g-color-base-info-light-hover
  --yc-color-base-positive	--g-color-base-positive-light
  --yc-color-base-positive-hover	--g-color-base-positive-light-hover
  --yc-color-base-warning	--g-color-base-warning-light
  --yc-color-base-warning-hover	--g-color-base-warning-light-hover
  --yc-color-base-danger	--g-color-base-danger-light
  --yc-color-base-danger-hover	--g-color-base-danger-light-hover
  --yc-color-base-misc	--g-color-base-misc-light
  --yc-color-base-misc-hover	--g-color-base-misc-light-hover
  --yc-color-base-neutral	--g-color-base-neutral-light
  --yc-color-base-neutral-hover	--g-color-base-neutral-light-hover
  --yc-color-text-special	--g-color-text-brand
  --yc-color-line-selection-hover	No alternative
  --yc-color-line-selection-active	--g-color-line-brand
  --yc-color-line-link	--g-color-line-brand
  --yc-color-line-hint	--g-color-line-brand
  --yc-color-line-solid	--g-color-line-generic-solid
  --yc-color-text-yandex-red	No alternative
  --yc-color-infographics-*-{light|medium|heavy}	--g-color-base-*-{light|medium|heavy}
  --yc-alert-*	No alternative
  --yc-button-*	No alternative
  --yc-card-*	No alternative
  --yc-dialog-*	No alternative
  --yc-list-*	No alternative
  --yc-modal-*	No alternative
  --yc-popover-*	No alternative
  --yc-popup-*	No alternative
  --yc-radio-button-*	No alternative
  --yc-sheet-*	No alternative
  --yc-tab-*	No alternative
  --yc-tabs-*	No alternative
  --yc-toast-*	No alternative
  --yc-toaster-*	No alternative

--yc-{alert|button|...} variables are always considered as private. Consider using props and if it's not possible, open the issue and describe your use case.

🚀 Features

• All icons used in the components are now from @gravity-ui/icons package
• Size of xs border radius is changed from 5px to 3px
• Updated most of semantic colors
• Tooltip: visible state is toggled on focus/blur events as well
• Button: added new views: outlined-action, flat-action, outlined-success, flat-success, outlined-warning, flat-warning