The upgrade to Garden v8 is designed to allow you to upgrade each package individually. It is not necessary to upgrade all Garden packages to v8 at once. Each upgrade step can be completed in isolation.
- Upgrade all existing Garden React dependencies to their latest
v7
version. - Upgrade
@zendeskgarden/react-theming
tov8
.react-theming@v8
includes breaking changes. Refer to the Breaking Changes section for specific upgrade instructions.react-theming@v8
is a valid peerDependency for allv7
packages.
- Upgrade all other
@zendeskgarden/react-*
packages tov8
individually.- These upgrades included several breaking changes. Refer to the Breaking Changes section for specific upgrade instructions.
- Garden v8 packages use CSS-in-JS and no longer provide CSS files.
- Remove all Garden React CSS imports.
- i.e
@zendeskgarden/react-buttons/dist/styles.css
- All themable component IDs (
data-garden-id
attributes) have been renamed for consistency across all packages. - Any custom theming provided to the
ThemeProvider
component should be checked for accuracy. - Garden v8 packages no longer provide UMD bundles.
- The
Text
component has been removed.- Use
Avatar.Text
instead.
- Use
- New props to ease color control:
surfaceColor
,backgroundColor
, andforegroundColor
.
- The
Item
component has been removed.- Instead of passing
Item
components as children toBreadcrumb
, consumers can now pass any inline elements of their choice. - For example, a child of
Breadcrumb
can be a<span>
or a component that renders an<a>
.
- Instead of passing
- The following props have been renamed:
Button
basic
->isBasic
danger
->isDanger
external
->isExternal
link
->isLink
pill
->isPill
primary
->isPrimary
stretched
->isStretched
muted
-> removed (use theming to adjustprimaryHue
)
ButtonGroup
selectedKey
->selectedItem
onStateChange
->onSelect
- The
onSelect
callback passesselectedItem
directly rather than nesting it in an object.
- The
- The
ButtonGroupView
component has been removed. - The
Icon
component has been removed.- Use an
IconButton
with a modifiedisRotated
prop instead.
- Use an
- The
ButtonGroup
component now requires its children to contain avalue
prop which is returned when selected. - Buttons no longer provide a minimum width.
- The following props have been renamed:
Header
standalone
->isStandalone
HeaderItem
isRound
->isRound
logo
->hasLogo
HeaderItemText
clipped
->isClipped
Nav
expanded
->isExpanded
NavItem
logo
->hasLogo
brandmark
->hasBrandmark
current
->isCurrent
CollapsibleSubNavItem
expanded
->isExpanded
SubNavItem
current
->isCurrent
- The
Nav
component no longer takes adark
orlight
prop.- Use the
Chrome
component’shue
prop to apply a custom color. - All themed components will dynamically change styling to create an accessible contrast level.
- Use the
- All state and styling props such as
active
,focused
, ‘hover` etc. have been removed.
- The following props have been renamed:
Datepicker
small
->isCompact
animated
->isAnimated
DatepickerRange
small
->isCompact
- The following props have been renamed or removed:
Autocomplete
,MultiSelect
,Select
small
->isCompact
bare
->isBare
open
->isOpen
focused
-> removedhovered
-> removed
Label
regular
->isRegular
small
-> removed
Hint
small
-> removed
Menu
animate
->isAnimated
small
->isCompact
hidden
->isHidden
arrow
->hasArrow
AddItem
,HeaderItem
,Item
,MediaItem
,NextItem
,PreviousItem
active
-> removedfocused
-> removedhovered
-> removed
- The following props have been renamed or removed:
- The following props have been removed from all components:
focused
hovered
mediaLayout
open
select
tagLayout
- Field
inline
-> removed- Inline layouts can now be achieved with custom styling.
- Hint
small
-> removed- Use
isCompact
on theInput
component instead.
- Use
- Label
regular
->isRegular
hidden
-> removedindeterminate
-> removed- All attributes should be applied to the corresponding
<input>
component (checked, disabled, indeterminate).
Input
,Textarea
,FauxInput
bare
->isBare
small
->isCompact
TextArea
resizable
->isResizable
- The following props have been removed from all components:
- Checkbox now uses the
indeterminate
prop which was previously obfuscated under theLabel
component.
- The following props have been renamed or removed:
Grid
fluid
-> removed (which now defaults totrue
)- Garden does not have an opinion re: non-fluid maximum container widths per breakpoint. If
you need these four
max-width
CSS properties across the small, medium, large, and extra-large breakpoints, either use Bootstrap's.container
or add them to your application.
- Garden does not have an opinion re: non-fluid maximum container widths per breakpoint. If
you need these four
Row
gutters
-> removed- Use
<Grid gutters={false}>
instead
- Use
Col
justifyContent
-> removed- Row component’s
justifyContent
prop can be used for alignment.
- Row component’s
- New features and fixes include:
- Ability to resize gutters (default = 20px).
- Ability to set number of columns (default = 12).
- Added Col
offset
and fixed RTL across all offsets. - Added Row
alignContent
prop. - Most Row/Col props accept responsive variants for targeting screen size breakpoints.
- The following props have been renamed or removed:
Dots
velocity
-> removed- Use
duration
instead which accepts milliseconds. The default is 1250ms.
- Use
Skeleton
dark
->isLight
- The following props have been renamed or removed:
Modal
animate
->isAnimated
center
->isCentered
large
->isLarge
Header
danger
->isDanger
Close
focus
-> removedhovered
-> removed
- The
Backdrop
andModalView
components have been removed.
- The following props have been renamed:
Well
floating
->isFloating
recessed
->isRecessed
- The following components have been removed:
Gap
NextPage
Page
PaginationView
PreviousPage
- A new
pageGap
prop has been added.- It is used to modify the gap display positioning.
- All components in this package now use native
<table>
styling.- Previous implementations may have hard-coded column widths. This may no longer be necessary.
- All state and styling props such as
active
,focused
, ‘hover` etc. have been removed. - The following props have been renamed:
Cell
minimum
->isMinimum
truncate
->isTruncated
menu
->hasOverflow
Row
striped
->isStriped
selected
->isSelected
- A new structure is required for the
Tabs
component.- This new structure allows consumers to style individual tags if necessary.
<Tabs>
<TabList>
<Tab item="tab-1">Tab 1</Tab>
</TabList>
<TabPanel item="tab-1">Content</TabPanel>
</Tabs>
- All state and styling props such as
active
,focused
,hover
,selected
, etc. have been removed. - The
vertical
prop has been renamed toisVertical
.
- Child component exports
Avatar
andClose
have been removed.- Use
Tag.Avatar
andTag.Close
instead.
- Use
- The following props have been renamed:
Tag
pill
->isPill
round
->isRound
type
->hue
retrieveTheme
has been renamed toretrieveComponentStyles
.- All theming is now provided through a single
theme
prop.- RTL notation
- Previously
<ThemeProvider rtl>
- Currently
<ThemeProvider theme={{ ...DEFAULT_THEME, rtl: true }}>
- Previously
- Custom
document
object- Previously
<ThemeProvider document={doc}>
- Currently
<ThemeProvider theme={{ ...DEFAULT_THEME, document: doc }}>
- Previously
- RTL notation
- Per component styles
- Previously
theme[COMPONENT_ID]
- Currently
theme.components[COMPONENT_ID]
.
- Previously
- The following exports have been removed:
LightTooltip
TooltipView
GARDEN_PLACEMENTS
POPPER_PLACEMENTS
getPopperPlacement
getRtlPopperPlacement
- The following props have been renamed or removed:
delayMilliseconds
->delayMS
arrow
->hasArrow
appendToBody
->appendToNode
- It is required to pass the HTML element which the tooltip should append to.
trigger
-> removed- Tooltip
children
now accepts a single element which acts as the triggering element
- Tooltip
- Tooltip
content
prop now accepts Tooltip content (previouschildren
) - The Tooltip trigger no longer has a wrapping
<div>
element- An optional
refKey
prop has been added for retrieving the ref from the triggering element.
- An optional
-
The following props have been renamed:
Code
type
->hue
Typography
,MD
,LG
,SM
,monospace
->isMonospace
- This package has been deprecated and will be removed in a future major release.
- Migrate to
@zendeskgarden/container-utilities
to continue receiving updates.