Merge branch 'main' into jfuchs/list-items-as

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

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.
 </AvatarStack>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-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 |

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",

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<StyledAvatarStackWrapperProps>`
   display: flex;
@@ -125,7 +123,6 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     }
   }
 
-  ${COMMON}
   ${sx};
 `
 const transformChildren = (children: React.ReactNode) => {
@@ -140,17 +137,18 @@ const transformChildren = (children: React.ReactNode) => {
 
 export type AvatarStackProps = {
   alignRight?: boolean
-} & ComponentProps<typeof AvatarStackWrapper>
+  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,
     'pc-AvatarStack--three-plus': count > 2,
     'pc-AvatarStack--right': alignRight
   })
   return (
-    <AvatarStackWrapper count={count} className={wrapperClassNames} {...rest}>
+    <AvatarStackWrapper count={count} className={wrapperClassNames} sx={sxProp}>
       <Box position="absolute" display="flex" width="38px" className="pc-AvatarStackBody">
         {transformChildren(children)}
       </Box>

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

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<typeof primitives.colors.light>
+ * @type Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>
  */
-const lightColors = omitScale(light.colors)
-
-/**
- * @type Partial<typeof primitives.colors.light>
- */
-const lightShadows = omitScale(light.shadows)
-
-/**
- * @type Partial<typeof primitives.colors.dark>
- */
-const darkColors = omitScale(dark.colors)
-
-/**
- * @type Partial<typeof primitives.colors.dark>
- */
-const darkShadows = omitScale(dark.shadows)
-
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-const darkDimmedColors = omitScale(darkDimmed.colors)
-
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-const darkDimmedShadows = omitScale(darkDimmed.shadows)
-
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-const darkHighContrastColors = omitScale(darkHighContrast.colors)
-
-/**
- * @type Partial<typeof primitives.colors.dark_high_contrast>
- */
-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 = {