diff --git a/.changeset/itchy-horses-travel.md b/.changeset/itchy-horses-travel.md
deleted file mode 100644
index 0d2de07087f..00000000000
--- a/.changeset/itchy-horses-travel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/components": patch
----
-
-Rename `Breadcrumb` component to `Breadcrumbs`
diff --git a/.changeset/pretty-walls-brake.md b/.changeset/pretty-walls-brake.md
deleted file mode 100644
index f731b925620..00000000000
--- a/.changeset/pretty-walls-brake.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/components": major
----
-
-Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
diff --git a/.changeset/sixty-jokes-compete.md b/.changeset/sixty-jokes-compete.md
deleted file mode 100644
index 28c8c4fd7c5..00000000000
--- a/.changeset/sixty-jokes-compete.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/components": patch
----
-
-Fix ActionList.Item color
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e7e35067e4..fcb51f4f589 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,23 @@
# @primer/components
+## 30.0.0
+
+### Major Changes
+
+- [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Remove `.Breadcrumb` classname from the root element of the `Breadcrumbs` component. This change shouldn't break anything unless you have styles, scripts, or tests that reference the `.Breadcrumb` classname.
+
+* [#1468](https://github.com/primer/react/pull/1468) [`dc15763c`](https://github.com/primer/react/commit/dc15763c733994ea9baa3475139b9bf3c2111e5b) Thanks [@jfuchs](https://github.com/jfuchs)! - AvatarStack no longer accepts styled props or DOM props
+
+### Minor Changes
+
+- [#1474](https://github.com/primer/react/pull/1474) [`c54156bc`](https://github.com/primer/react/commit/c54156bc43f87370f3e8cb23fd9ebf338b5082e4) Thanks [@colebemis](https://github.com/colebemis)! - Add `light_protanopia` and `dark_protanopia` color blind color schemes
+
+### Patch Changes
+
+- [#1448](https://github.com/primer/react/pull/1448) [`1a39fb02`](https://github.com/primer/react/commit/1a39fb0284c5e19324d378629d09a343be4cde05) Thanks [@SferaDev](https://github.com/SferaDev)! - Rename `Breadcrumb` component to `Breadcrumbs`
+
+* [#1470](https://github.com/primer/react/pull/1470) [`f2e29a08`](https://github.com/primer/react/commit/f2e29a08e2aab9e98a460eb073229933f6ae050b) Thanks [@pksjce](https://github.com/pksjce)! - Fix ActionList.Item color
+
## 29.1.1
### Patch Changes
diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx
index 1b1ee21728d..1d471f0f602 100644
--- a/docs/content/AvatarStack.mdx
+++ b/docs/content/AvatarStack.mdx
@@ -2,6 +2,9 @@
title: AvatarStack
---
+import {Props} from '../src/props'
+import {AvatarStack} from '@primer/components'
+
AvatarStack is used to display more than one Avatar in an inline stack.
### Default example
@@ -26,18 +29,9 @@ AvatarStack is used to display more than one Avatar in an inline stack.
```
-## System props
-
-
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-
-
-AvatarStack components get `COMMON` system props, AvatarStack.Item components do not get any system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
-## AvatarStack Component props
+## Props
-| Name | Type | Default | Description |
-| :--------- | :------ | :-----: | :-------------------------------- |
-| alignRight | Boolean | | Creates right aligned AvatarStack |
+| Name | Type | Default | Description |
+| :--------- | :---------------- | :-----: | :----------------------------------- |
+| alignRight | Boolean | | Creates right aligned AvatarStack |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
diff --git a/package-lock.json b/package-lock.json
index 1fb0a91b84a..de0ff740472 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4139,9 +4139,9 @@
"integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ=="
},
"@primer/primitives": {
- "version": "4.7.1",
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.7.1.tgz",
- "integrity": "sha512-kttAUcP3QgT5UbYLeMTKDxPvnAVzywX0xnKPcLkmEVQyhmEBlTO4LSlYIzL5YcKyklHcFRf1426UcGOY9wdWDQ=="
+ "version": "4.8.1",
+ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz",
+ "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ=="
},
"@radix-ui/react-polymorphic": {
"version": "0.0.14",
diff --git a/package.json b/package.json
index 61be7afb1dd..a5da43a2579 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@primer/components",
- "version": "29.1.1",
+ "version": "30.0.0",
"description": "Primer react components",
"main": "lib/index.js",
"module": "lib-esm/index.js",
@@ -44,7 +44,7 @@
"license": "MIT",
"dependencies": {
"@primer/octicons-react": "^13.0.0",
- "@primer/primitives": "4.7.1",
+ "@primer/primitives": "4.8.1",
"@radix-ui/react-polymorphic": "0.0.14",
"@react-aria/ssr": "3.1.0",
"@styled-system/css": "5.1.5",
diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx
index 70ee203bf6f..e97063f6f00 100644
--- a/src/AvatarStack.tsx
+++ b/src/AvatarStack.tsx
@@ -1,15 +1,13 @@
import classnames from 'classnames'
import React from 'react'
import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
import {Box} from '.'
import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
type StyledAvatarStackWrapperProps = {
count?: number
-} & SystemCommonProps &
- SxProp
+} & SxProp
const AvatarStackWrapper = styled.span`
display: flex;
@@ -125,7 +123,6 @@ const AvatarStackWrapper = styled.span`
}
}
- ${COMMON}
${sx};
`
const transformChildren = (children: React.ReactNode) => {
@@ -140,9 +137,10 @@ const transformChildren = (children: React.ReactNode) => {
export type AvatarStackProps = {
alignRight?: boolean
-} & ComponentProps
+ children: React.ReactNode
+} & SxProp
-const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
+const AvatarStack = ({children, alignRight, sx: sxProp}: AvatarStackProps) => {
const count = React.Children.count(children)
const wrapperClassNames = classnames({
'pc-AvatarStack--two': count === 2,
@@ -150,7 +148,7 @@ const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
'pc-AvatarStack--right': alignRight
})
return (
-
+
{transformChildren(children)}
diff --git a/src/__tests__/AvatarStack.tsx b/src/__tests__/AvatarStack.tsx
index 460b7968e71..c3408303850 100644
--- a/src/__tests__/AvatarStack.tsx
+++ b/src/__tests__/AvatarStack.tsx
@@ -25,7 +25,11 @@ const rightAvatarComp = (
)
describe('Avatar', () => {
- behavesAsComponent({Component: AvatarStack, toRender: () => avatarComp})
+ behavesAsComponent({
+ Component: AvatarStack,
+ toRender: () => avatarComp,
+ options: {skipAs: true}
+ })
checkExports('AvatarStack', {
default: AvatarStack
diff --git a/src/theme-preval.js b/src/theme-preval.js
index 40399515250..2718c0a84e2 100644
--- a/src/theme-preval.js
+++ b/src/theme-preval.js
@@ -48,58 +48,19 @@ const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px
const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px']
-const light = partitionColors(primitives.colors.light)
-const dark = partitionColors(primitives.colors.dark)
-const darkDimmed = partitionColors(primitives.colors['dark_dimmed'])
-const darkHighContrast = partitionColors(primitives.colors['dark_high_contrast'])
-
-// This file must be in vanilla JS to work with preval
-// but our temporary filter utils make it impossible for
-// our TypeScript to properly infer const object structure
-// so we need to use JSDoc comments.
-
/**
- * @type Partial
+ * @type Record>
*/
-const lightColors = omitScale(light.colors)
-
-/**
- * @type Partial
- */
-const lightShadows = omitScale(light.shadows)
-
-/**
- * @type Partial
- */
-const darkColors = omitScale(dark.colors)
-
-/**
- * @type Partial
- */
-const darkShadows = omitScale(dark.shadows)
-
-/**
- * @type Partial
- */
-const darkDimmedColors = omitScale(darkDimmed.colors)
-
-/**
- * @type Partial
- */
-const darkDimmedShadows = omitScale(darkDimmed.shadows)
-
-/**
- * @type Partial
- */
-const darkHighContrastColors = omitScale(darkHighContrast.colors)
-
-/**
- * @type Partial
- */
-const darkHighContrastShadows = omitScale(darkHighContrast.shadows)
+const colorSchemes = Object.entries(primitives.colors).reduce((acc, [name, variables]) => {
+ const {colors, shadows} = partitionColors(variables)
+ acc[name] = {
+ colors: omitScale(colors),
+ shadows: omitScale(shadows)
+ }
+ return acc
+}, {})
const theme = {
- // General
animation,
borderWidths,
breakpoints,
@@ -110,25 +71,7 @@ const theme = {
radii,
sizes,
space,
- colorSchemes: {
- light: {
- colors: lightColors,
- shadows: lightShadows
- },
- dark: {
- colors: darkColors,
- shadows: darkShadows
- },
- dark_dimmed: {
- colors: darkDimmedColors,
- shadows: darkDimmedShadows
- },
- // eslint-disable-next-line camelcase
- dark_high_contrast: {
- colors: darkHighContrastColors,
- shadows: darkHighContrastShadows
- }
- }
+ colorSchemes
}
module.exports = {