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 newcontentClassName
for content node - SharePopover: removed deprecated prop
handleMetrika
- SharePopover: prop
tooltipClassName
is now namedtooltipContentClassName
- Label: removed prop
style
, use theme variables for overriding border radius. Laterstyle
may be used for CSSObjectProperties - Progress:
view
prop is replaced bysize
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 namedtooltipContentClassName
- TextInput: component split into
TextInput
andTextArea
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 from5px
to3px
- 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