#3384 3633535c Thanks @joshblack! - Update styled-components and related dependencies to v5.x
#3384 3633535c Thanks @joshblack! - Remove components from deprecated
BorderBox, ChoiceFieldset, Flex, Grid, Position, Dropdown, FormGroup, SelectMenu, InputField, Label
#3384 3633535c Thanks @joshblack! - Remove components from draft bundle
- Move UnderlineNav2 (draft) to the main bundle
- import {UnderlineNav} from '@primer/react/drafts'
+ import {UnderlineNav} from '@primer/react'
....
- Remove TreeView from drafts
- import {TreeView} from '@primer/react/drafts'
+ import {TreeView} from '@primer/react'
- Remove SegmentedControl from drafts
- import {SegmentedControl} from '@primer/react/drafts'
+ import {SegmentedControl} from '@primer/react'
- Remove NavList from drafts
- import {NavList} from '@primer/react/drafts'
+ import {NavList} from '@primer/react'
- Remove SplitPageLayout from drafts
- import {SplitPageLayout} from '@primer/react/drafts'
+ import {SplitPageLayout} from '@primer/react'
#3384 3633535c Thanks @joshblack! - - Changes leadingIcon and trailingIcon to leadingVisual and trailingVisual
- Removes
Button.Counter as a child component, replacing it with a count prop. This change allows us to use the trailingVisual slot for counters.
- Removes the
outline button variant as we wish to only support invisible buttons.
#3384 3633535c Thanks @joshblack! - Remove deprecated extralarge variant from Token and TextInputWithToken component
#3384 3633535c Thanks @joshblack! - Remove StyledOcticon component. The component was renamed to Octicon. Update your imports by swapping StyledOcticon with Octicon
#3384 3633535c Thanks @joshblack! - Deprecates FilterList and FilteredSearch components
#3384 3633535c Thanks @joshblack! - Makes @types/styled-components an optional peer dependency, not a dependency
#3384 3633535c Thanks @joshblack! - ConfirmationDialog: Use createRoot instead of ReactDOM.render for React 18 compatibility.
#3384 3633535c Thanks @joshblack! - Update minimum version for react and react-dom to v18
#3384 3633535c Thanks @joshblack! - Remove DropdownButton and DropdownMenu from deprecated and update the usages across
#3384 3633535c Thanks @joshblack! - The Autocomplete component no longer uses the deprecated ActionList component. There have been minor API updates, but it's largely the same.
#3384 3633535c Thanks @joshblack! - Removes 'warning' option from form components' validationStatus props
#3384 3633535c Thanks @joshblack! - Remove support for activeClassName for Breadcrumb, SubNav, TabNav, UnderlineNav
#3384 3633535c Thanks @joshblack! - Ensure ActionList item has border-radius on hover with full variant
#3124 5b3cf499 Thanks @mattcosta7! - replace createRef with useRef
#3149 4c2d121f Thanks @colebemis! - FormControl is now SSR-compatible.
Warning: In this new implementation, FormControl.Caption, FormControl.Label, FormControl.LeadingVisual, and FormControl.Validation must be direct children of FormControl.
#3114 f5c7f299 Thanks @radglob! - Adds the option to declare multiple segments in a ProgressBar.
#3127 5224fcbf Thanks @siddharthkp! - Suppress SSR warning for useLayoutEffect in NavList, use useIsomorphicLayoutEffect instead of useLayoutEffect
#3165 d749f495 Thanks @broccolinisoup! - UnderlineNav2: Add transparent outline for focus to support WHCM
#3120 9e40fdf4 Thanks @simurai! - Bump @primer/primitives to 7.11.5
#3093 8b5307da Thanks @simurai! - Bump @primer/primitives to 7.11.3
#3097 a38c00e6 Thanks @colebemis! - TreeView is now SSR-compatible.
Warning: In this new implementation, TreeView.LeadingVisual and TreeView.TrailingView must be direct children of TreeView.Item.
#3170 1f2df9b7 Thanks @lukasoppermann! - When an inline description is added to the item the normal text is set to bold
#3160 4b05b19e Thanks @joshblack! - Update PageLayout.Pane to provide a warning instead of an error when overflow is detected and no label has been provided
#3094 16cae51a Thanks @mperrotti! - Fixes styling issue where PointerBox would show a border between the caret and the box if the background color was transparent.
#3112 bd4e1393 Thanks @langermank! - Adds shadow and color change to IssueLabelToken on hover
#3146 a19b721c Thanks @colebemis! - CheckboxGroup and RadioGroup are now SSR-compatible.
Warning: In this new implementation, CheckboxGroup.Caption, CheckboxGroup.Label, and CheckboxGroup.Validation must be direct children of CheckboxGroup. The same applies to RadioGroup.
#1893 17ef5ef8 Thanks @siddharthkp! -
ActionList
⚠️ ActionList has been rewritten with a composable API, design updates and accessibility fixes.
See full list of props and examples: https://primer.style/react/ActionList
| Before (v34) | After (v35) |
<ActionList
items={[
{text: 'New file'},
{text: 'Copy link'},
{text: 'Edit file'},
ActionList.Divider,
{text: 'Delete file', variant: 'danger'},
]}
/>
|
<ActionList>
<ActionList.Item>New file</ActionList.Item>
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Edit file</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger">Delete file</ActionList.Item>
</ActionList>
|
<ActionList
showItemDividers
items={[
{
key: '0',
leadingVisual: LinkIcon,
text: 'github/primer',
},
{
key: '1',
leadingVisual: () => <Avatar src="https://github.com/mona.png" />,
text: 'mona',
description: 'Monalisa Octocat',
descriptionVariant: 'block',
},
{
key: '2',
leadingVisual: GearIcon,
text: 'View Settings',
trailingVisual: ArrowRightIcon,
},
]}
/>
|
<ActionList showDividers>
<ActionList.Item>
<ActionList.LeadingVisual>
<LinkIcon />
</ActionList.LeadingVisual>
github/primer
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<Avatar src="https://github.com/mona.png" />
</ActionList.LeadingVisual>
mona
<ActionList.Description variant="block">Monalisa Octocat</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<GearIcon />
</ActionList.LeadingVisual>
View settings
<ActionList.TrailingVisual>
<ArrowRightIcon />
</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
|
<ActionList
groupMetadata={[
{groupId: '0', header: {title: 'Live query'}},
{groupId: '1', header: {title: 'Layout'}},
]}
items={[
{key: '0', text: 'repo:github/github', groupId: '0'},
{key: '1', text: 'Table', groupId: '1'},
{key: '2', text: 'Board', groupId: '1'},
{key: '3', text: 'View settings'},
]}
/>
|
<ActionList>
<ActionList.Group title="Live query">
<ActionList.Item>repo:github/github</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group title="Layout">
<ActionList.Item>Table</ActionList.Item>
<ActionList.Item>Board Description</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item>View settings</ActionList.Item>
</ActionList>
|
To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:
import {ActionList} from '@primer/react/deprecated'
You can use the one-time codemod to change your import statements automatically.
#1883 310e6553 Thanks @siddharthkp! - ActionList2 exported types are now prefixed with ActionList:
ListProps → ActionListProps
GroupProps → ActionListGroupProps
ItemProps → ActionListItemProps
DescriptionProps → ActionListDescriptionProps
LeadingVisualProps → ActionListLeadingVisualProps,
TrailingVisualProps → ActionListTrailingVisualProps
ActionMenu2 exported types are now prefixed with ActionMenu:
MenuButtonProps → ActionMenuButtonProps
MenuAnchorProps → ActionMenuAnchorProps
#1897 d4023572 Thanks @siddharthkp! -
⚠️ ActionMenu has been rewritten with a composable API, design updates and accessibility fixes.
See full list of props and examples: https://primer.style/react/ActionMenu
Main changes:
- Instead of using
items prop, use ActionList inside ActionMenu
- Instead of using
anchorContent on ActionMenu, use ActionMenu.Button with children
- Instead of using
onAction prop on ActionMenu, use onSelect prop on ActionList.Item
- Instead of using
groupMetadata on ActionMenu, use ActionList.Group
- Instead of
overlayProps on ActionMenu, use ActionMenu.Overlay
| Before (v34) | After (v35) |
<ActionMenu
anchorContent="Menu"
onAction={fn}
items={[
{text: 'New file'},
{text: 'Copy link'},
{text: 'Edit file'},
ActionMenu.Divider,
{text: 'Delete file', variant: 'danger'},
]}
overlayProps={{width: 'small'}}
/>
|
<ActionMenu>
<ActionMenu.Button>Menu</ActionMenu.Button>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={fn}>New file</ActionList.Item>
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Edit file</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger">Delete file</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
|
To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:
import {ActionMenu} from '@primer/react/deprecated'
You can use the one-time codemod to change your import statements automatically.
#1898 d6d1ca4c Thanks @siddharthkp! -
⚠️ DropdownMenu has been deprecated in favor of ActionMenu with ActionList
See example with selection: https://primer.style/react/ActionMenu#with-selection
Migration guide:
- Instead of using
items prop, use ActionList inside ActionMenu
- Use
selectionVariant="single" on ActionList to set the right semantics for selection
- Instead of using
selectedItem prop, use selected prop on ActionList.Item
- Instead of using
renderAnchor and placeholder props on DropdownMenu, use ActionMenu.Button or ActionMenu.Anchor
- Instead of using
onChange prop on DropdownMenu, use onSelect prop on ActionList.Item
- Instead of using
groupMetadata on DropdownMenu, use ActionList.Group
- Instead of
overlayProps on DropdownMenu, use ActionMenu.Overlay
| Before (v34) | After (v35) |
const fieldTypes = [
{key: 0, text: 'Text'},
{key: 1, text: 'Number'},
{key: 3, text: 'Date'},
{key: 4, text: 'Single select'},
{key: 5, text: 'Iteration'},
]
const Example = () => {
const [selectedType, setSelectedType] = React.useState()
return (
<DropdownMenu
renderAnchor={({children, ...anchorProps}) => (
<ButtonInvisible {...anchorProps}>
{children} <GearIcon />
</ButtonInvisible>
)}
placeholder="Field type"
items={fieldTypes}
selectedItem={selectedType}
onChange={setSelectedType}
overlayProps={{width: 'medium'}}
/>
)
}
|
const fieldTypes = [
{id: 0, text: 'Text'},
{id: 1, text: 'Number'},
{id: 3, text: 'Date'},
{id: 4, text: 'Single select'},
{id: 5, text: 'Iteration'},
]
const Example = () => {
const [selectedType, setSelectedType] = React.useState()
render(
<ActionMenu>
<ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button>
<ActionMenu.Overlay width="medium">
<ActionList selectionVariant="single">
{fieldTypes.map(type => (
<ActionList.Item
key={type.id}
selected={type.id === selectedType.id}
onSelect={() => setSelectedType(type)}
>
{type.name}
</ActionList.Item>
))}
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>,
)
}
|
To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:
import {DropdownMenu} from '@primer/react/deprecated'
You can use the one-time codemod to change your import statements automatically.
⚠️ DropdownMenu2 has been removed in favor of ActionMenu with ActionList
#1889 e9b81fae Thanks @mperrotti! -
Label
The Label component's API and visual design have been updated to be consistent with its counterpart in Primer ViewComponents' Label component.
⚠️ Major changes in the new Label component:
- No more
medium size - only small and large
- Labels are outlined by default, so the
outline prop has been removed
- Custom text and background colors are discouraged, but still possible via the
sx prop
If you were using the Label component to render issue/PR labels, use the IssueLabelToken component instead.
| Before (v34) | After (v35) |
import {Label} from '@primer/react'
function Example() {
return (
<>
<Label outline>default</Label>
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>
danger
</Label>
</>
)
}
|
import {Label} from '@primer/react'
function Example() {
return (
<>
<Label>default</Label>
<Label size="small" variant="danger">
danger
</Label>
</>
)
}
|
To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:
import {Label} from '@primer/react/deprecated'
You can use the one-time codemod to change your import statements automatically.
#1908 61404aed Thanks @pksjce! -
Before v35, Button was a set of seven independent components. In v35, we've simplified the Button API.
We now support a variant property which takes values primary, invisible, outline and danger
| Before (v34) | After (v35) |
import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react'
function Example() {
return (
<>
<ButtonPrimary>Primary Button</ButtonPrimary>
<ButtonInvisible>Invisible Button</ButtonInvisible>
<ButtonOutline>Outline Button</ButtonOutline>
<ButtonDanger>Danger Button</ButtonDanger>
</>
)
}
|
import {Button} from '@primer/react'
function Example() {
return (
<>
<Button variant="primary">Primary Button</Button>
<Button variant="invisible">Invisible Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="danger">Danger Button</Button>
</>
)
}
|
Leading and trailing icons
Previously including icons inside buttons required a lot of custom styling. In the new Button component, we now support first-class leadingIcon and trailingIcon props:
| Before (v34) | After (v35) |
<Button>
<SearchIcon />
Search
</Button>
|
<Button leadingIcon={SearchIcon}>Search</Button>
|
Icon-only buttons are common in many applications. We now have a component designed for this use-case:
| Before (v34) | After (v35) |
<Button>
<XIcon />
</Button>
|
<IconButton aria-label="Close button" icon={XIcon} />
|
Size property
Previously, we used a variant prop to set the size of buttons. We now have a prop called size which is more semantically correct.
| Before (v34) | After (v35) |
<Button variant="small">Small button</Button>
|
<Button size="small">Small button</Button>
|
#1900 d61b28ad Thanks @mperrotti! -
ChoiceFieldset
⚠️ The CheckboxGroup and RadioGroup components are replacing the ChoiceFieldset component.
CheckboxGroup and RadioGroup have the ability to render contextual content with your fieldset: labels, validation statuses, captions. They also handle the ARIA attributes that make the form controls accessible to assistive technology.
| Before (v34) | After (v35) |
import {ChoiceFieldset} from '@primer/react'
function Example() {
return (
<>
{/* Multi-select */}
<ChoiceFieldset>
<ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
<ChoiceFieldset.List selectionVariant="multiple">
<ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
<ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
<ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
<ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
</ChoiceFieldset.List>
</ChoiceFieldset>
{/* Single select */}
<ChoiceFieldset>
<ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
<ChoiceFieldset.List>
<ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
<ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
<ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
<ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
</ChoiceFieldset.List>
</ChoiceFieldset>
</>
)
}
|
import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react'
function Example() {
return (
<>
{/* Multi-select */}
<CheckboxGroup>
<CheckboxGroup.Label>Preferred Primer component interface</CheckboxGroup.Label>
<FormControl>
<Checkbox value="figma" />
<FormControl.Label>Figma</FormControl.Label>
</FormControl>
<FormControl>
<Checkbox value="css" />
<FormControl.Label>CSS</FormControl.Label>
</FormControl>
<FormControl>
<Checkbox value="react" />
<FormControl.Label>Primer React components</FormControl.Label>
</FormControl>
<FormControl>
<Checkbox value="viewcomponents" />
<FormControl.Label>Primer ViewComponents</FormControl.Label>
</FormControl>
</CheckboxGroup>
{/* Single select */}
<RadioGroup name="preferred-primer">
<RadioGroup.Label>Preferred Primer component interface</RadioGroup.Label>
<FormControl>
<Radio value="figma" />
<FormControl.Label>Figma</FormControl.Label>
</FormControl>
<FormControl>
<Radio value="css" />
<FormControl.Label>CSS</FormControl.Label>
</FormControl>
<FormControl>
<Radio value="react" />
<FormControl.Label>Primer React components</FormControl.Label>
</FormControl>
<FormControl>
<Radio value="viewcomponents" />
<FormControl.Label>Primer ViewComponents</FormControl.Label>
</FormControl>
</RadioGroup>
</>
)
}
|
To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:
import {ChoiceFieldset} from '@primer/react/deprecated'
You can use the one-time codemod to change your import statements automatically.
#1882 df757521 Thanks @colebemis! -
PageLayout
PageLayout is being graduated from the drafts bundle to the main bundle.
To upgrade, rewrite your imports accordingly:
- import {PageLayout} from '@primer/react/drafts'
+ import {PageLayout} from '@primer/react'
#1888 f94dcd33 Thanks @mperrotti! -
⚠️ The FormControl component is replacing the FormGroup, InputField, and ChoiceInputField components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology.
| Before (v34) | After (v35) |
import {FormControl, Checkbox, TextInput} from '@primer/react'
function Example() {
return (
<>
<FormGroup>
<FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
<TextInput id="example-text" />
</FormGroup>
{/* OR */}
<InputField>
<InputField.Label>Example text</InputField.Label>
<TextInput />
</InputField>
{/* OR */}
<ChoiceInputField>
<ChoiceInputField.Label>Example text</ChoiceInputField.Label>
<Checkbox />
</ChoiceInputField>
</>
)
}
|
import {FormGroup, TextInput} from '@primer/react'
function Example() {
return (
<>
<FormControl>
<FormControl.Label>Example text</FormControl.Label>
<TextInput />
</FormControl>
{/* OR */}
<FormControl>
<FormControl.Label>Example text</FormControl.Label>
<Checkbox />
</FormControl>
</>
)
}
|
import {InputField, TextInput} from '@primer/react'
function Example() {
return (
<InputField>
<InputField.Label>Example text</InputField.Label>
<TextInput />
</InputField>
)
}
|
import {FormControl, TextInput} from '@primer/react'
function Example() {
return (
<FormControl>
<FormControl.Label>Example text</FormControl.Label>
<TextInput />
</FormControl>
)
}
|
To continue to use the deprecated API for now, change the import path to @primer/react/deprecated:
import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated'
You can use the one-time codemod to change your import statements automatically.
#1881 8cd12439 Thanks @pksjce! -
⚠️ SelectMenu has been deprecated. Please use ActionMenu instead.
| Before | After |
<SelectMenu>
<Button as="summary">Projects</Button>
<SelectMenu.Modal>
<SelectMenu.Header>Projects</SelectMenu.Header>
<SelectMenu.List>
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
<SelectMenu.Item href="#">Project 3</SelectMenu.Item>
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
</SelectMenu.List>
</SelectMenu.Modal>
</SelectMenu>
|
<ActionMenu>
<ActionMenu.Button>Projects</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList showDividers>
<ActionList.Group title="Projects">
<ActionList.Item>Primer React bugs</ActionList.Item>
<ActionList.Item>Primer React roadmap</ActionList.Item>
<ActionList.Item>Project three</ActionList.Item>
<ActionList.Item>Project four</ActionList.Item>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
|
See https://primer.style/react/ActionMenu for more migration examples.
Dropdown
⚠️ Dropdown has been deprecated. Please use ActionMenu instead.
| Before | After |
const fieldTypes = [
{leadingVisual: TypographyIcon, text: 'Text'},
{leadingVisual: NumberIcon, text: 'Number'},
]
const Example = () => {
const [selectedItem, setSelectedItem] = React.useState()
return (
<DropdownMenu
renderAnchor={({children, ...anchorProps}) => <ButtonInvisible {...anchorProps}>{children}</ButtonInvisible>}
placeholder="Select a field type"
items={fieldTypes}
selectedItem={selectedItem}
onChange={() => setSelectedIndex(index)}
/>
)
}
|
const fieldTypes = [
{icon: <TypographyIcon />, name: 'Text'},
{icon: <NumberIcon />, name: 'Number'},
]
const Example = () => {
const [selectedItem, setSelectedItem] = React.useState()
return (
<ActionMenu>
<ActionMenu.Button>{selectedItem ? selectedItem.name : 'Select a field type'}</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList selectionVariant="single">
{fieldTypes.map(field => (
<ActionList.Item onSelect={() => setSelectedItem(field)} key={field.name}>
<ActionList.LeadingVisual>{field.icon}</ActionList.LeadingVisual>
{field.name}
</ActionList.Item>
))}
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
)
}
|
See https://primer.style/react/ActionMenu for more migration examples.
Flex
⚠️ Flex has been deprecated. Please use Box instead.
| Before | After |
<Flex flexWrap="nowrap">
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
Item 1
</Box>
</Flex>
|
<Box display="flex" flexWrap="nowrap">
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
Item 1
</Box>
</Box>
|
Grid
⚠️ Grid has been deprecated. Please use Box instead.
| Before | After |
<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
1
</Box>
<Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
2
</Box>
</Grid>
|
<Box display="grid" gridTemplateColumns="repeat(2, auto)" gridGap={3}>
<Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
1
</Box>
<Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
2
</Box>
</Box>
|
BorderBox
⚠️ BorderBox has been deprecated. Please use Box instead.
| Before | After |
<BorderBox>Item 1</BorderBox>
|
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
Item 1
</Box>
|
Position
⚠️ Position has been deprecated. Please use Box instead.
| Before | After |
<>
<Position position="absolute">...</Position>
<Absolute>...</Absolute>
<Relative>...</Relative>
<Fixed>...</Fixed>
<Sticky>...</Sticky>
</>
|
<>
<Box position="absolute">...</Box>
<Box position="absolute">...</Box>
<Box position="relative">...</Box>
<Box position="fixed">...</Box>
<Box position="sticky">...</Box>
</>
|
016a273f #1115 Thanks @VanAnderson! - Removes deprecated presentational theme variables in favor of functional variables for styling components that are consistent across multiple themes.
Migration guide
If you don't use any color-related system props (e.g. color, bg, borderColor), all components should work without changes. If you're using color-related system props, you'll need to update them to use the new functional variables. Reference the tables below to see how old variables map to new functional variables.
If you have any questions, feel free to reach out in the #design-systems channel.
Text
| v25 | v26 |
| ------------------------ | ------------------------ |
| color="text.gray" | color="text.secondary" |
| color="text.grayLight" | color="text.tertiary" |
| color="text.grayDark" | color="text.primary" |
| color="text.red" | color="text.danger" |
| color="text.white" | color="text.inverse" |
| color="gray.6" | color="text.secondary" |
| color="gray.5" | color="text.tertiary" |
| color="gray.9" | color="text.primary" |
| color="red.6" | color="text.danger" |
| color="white" | color="text.inverse" |
| color="blue.5" | color="text.link" |
| color="gray.4" | color="text.disabled" |
| color="green.5" | color="text.success" |
| color="yellow.8" | color="text.warning" |
Icon
| v25 | v25 |
| ------------------ | ------------------------ |
| color="gray.9" | color="icon.primary" |
| color="gray.6" | color="icon.secondary" |
| color="gray.4" | color="icon.tertiary" |
| color="blue.5" | color="icon.info" |
| color="red.5" | color="icon.danger" |
| color="green.6" | color="icon.success" |
| color="yellow.8" | color="icon.warning" |
Border
| v25 | v26 |
| --------------------------------- | ------------------------------- |
| borderColor="border.blue" | borderColor="border.info" |
| borderColor="border.blueLight" | n/a |
| borderColor="border.grayLight" | borderColor="border.primary" |
| borderColor="border.grayDark" | borderColor="border.tertiary" |
| borderColor="border.grayDarker" | n/a |
| borderColor="border.green" | borderColor="border.success" |
| borderColor="border.greenLight" | n/a |
| borderColor="border.purple" | n/a |
| borderColor="border.red" | borderColor="border.danger" |
| borderColor="border.redLight" | n/a |
| borderColor="border.white" | borderColor="border.inverse" |
| borderColor="border.whiteFace" | n/a |
| borderColor="border.yellow" | borderColor="border.warning" |
| borderColor="border.blackFade" | borderColor="fade.fg15" |
| borderColor="border.whiteFade" | borderCOlor="fade.white15" |
| borderColor="blue.5" | borderColor="border.info" |
| borderColor="gray.2" | borderColor="border.primary" |
| borderColor="gray.3" | borderColor="border.tertiary" |
| borderColor="green.4" | borderColor="border.success" |
| borderColor="red.5" | borderColor="border.danger" |
| borderColor="white" | borderColor="border.inverse" |
Background
| v25 | v26 |
| ------------------- | ------------------------ |
| bg="white" | bg="bg.primary" |
| bg="bg.grayLight" | bg="bg.secondary" |
| bg="bg.gray" | bg="bg.tertiary" |
| bg="bg.grayDark" | bg="bg.canvasInverse" |
| bg="blue.0" | bg="bg.info" |
| bg="blue.5" | bg="bg.infoInverse" |
| bg="red.0" | bg="bg.danger" |
| bg="red.5" | bg="bg.dangerInverse" |
| bg="green.1" | bg="bg.success" |
| bg="green.5" | bg="bg.successInverse" |
Labels
Note the change in pluralization from 'labels' to 'label'.
| v25 | v26 |
| ----------------------------- | ------------------------------------- |
| color="labels.grayDarkText" | color="label.primary.text |
| borderColor="labels.gray" | borderColor="label.primary.border |
| color="labels.grayText" | color="label.secondary.text |
| borderColor="labels.gray" | borderColor="label.secondary.border |
| color="labels.blueText" | color="label.info.text |
| borderColor="labels.blue" | borderColor="label.info.border |
| color="labels.greenText" | color="label.success.text |
| borderColor="labels.green" | borderColor="label.success.border |
| color="labels.yellowText" | color="label.warning.text |
| borderColor="labels.yellow" | borderColor="label.warning.border |
| color="labels.redText" | color="label.danger.text |
| borderColor="labels.red" | borderColor="label.danger.border |
| color="labels.orangeText" | color="label.primary.text |
| borderColor="labels.orange" | borderColor="label.primary.text |
| color="labels.pinkText" | n/a |
| borderColor="labels.pink" | n/a |
| color="labels.purpleText" | n/a |
| borderColor="labels.purple" | n/a |
Counters
| v25 | v26 |
| --------------------- | -------------------- |
| scheme="gray" | scheme="primary" |
| scheme="gray-light" | scheme="secondary" |
Timeline
| v25 | v26 |
| ----------------------------------------- | ----------------------------- |
| bg="red.5" | bg="prState.closed.bg" |
| bg="green.5" | bg="prState.open.bg" |
| bg="purple.5" | bg="prState.merged.bg" |
| bg="gray.5" | bg="prState.draft.bg" |
| color="white" (context: closed PR icon) | color="prState.closed.text" |
| color="white" (context: open PR icon) | color="prState.open.text" |
| color="white" (context: merged PR icon) | color="prState.merged.text" |
| color="white" (context: merged PR icon) | color="prState.draft.text" |
primer
| 
|