Merge branch 'main' into action-list-state-backgrounds

CHANGELOG.md

@@ -1,5 +1,19 @@
 # @primer/components
 
+## 28.1.0
+
+### Minor Changes
+
+- [`6800c609`](https://github.com/primer/components/commit/6800c609634d8227c6538a49bca3ef59d8b660a1) [#1232](https://github.com/primer/components/pull/1232) Thanks [@dgreif](https://github.com/dgreif)! - New `Spinner` Component
+
+### Patch Changes
+
+- [`909ada5c`](https://github.com/primer/components/commit/909ada5c47c597f0260563c5030df0613051f618) [#1224](https://github.com/primer/components/pull/1224) Thanks [@dgreif](https://github.com/dgreif)! - Add `SelectPanel` alpha component
+
+* [`0d26d2b0`](https://github.com/primer/components/commit/0d26d2b07d8ed242eec71fd05959d8cdd0e6f0ba) [#1240](https://github.com/primer/components/pull/1240) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Fix check Spacing on selected items for ActionList components.
+
+- [`e009e321`](https://github.com/primer/components/commit/e009e321bf6c456ca6584650cd5f3ea35fe36003) [#1235](https://github.com/primer/components/pull/1235) Thanks [@VanAnderson](https://github.com/VanAnderson)! - Dialog properly auto-focuses cancel button by default when originating from a FocusZone/FocusTrap.
+
 ## 28.0.4
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "28.0.4",
+  "version": "28.1.0",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

src/ActionList/Item.tsx

@@ -212,6 +212,7 @@ const BaseVisualContainer = styled.div<{variant?: ItemProps['variant']; disabled
   // hardcoded '20px' with '${get('space.s20')}'.
   height: 20px;
   width: ${get('space.3')};
+  flex-shrink: 0;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;

src/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button'
 import Flex from '../Flex'
@@ -341,11 +341,16 @@ const buttonTypes = {
 const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
   const autoFocusRef = useRef<HTMLButtonElement>(null)
   let autoFocusCount = 0
+  const [hasRendered, setHasRendered] = useState(0)
   useEffect(() => {
-    if (autoFocusRef.current) {
-      autoFocusRef.current.focus()
+    // hack to work around dialogs originating from other focus traps.
+    if (hasRendered === 1) {
+      autoFocusRef.current?.focus()
+    } else {
+      setHasRendered(hasRendered + 1)
     }
-  }, [])
+  }, [hasRendered])
+
   return (
     <>
       {buttons.map((dialogButtonProps, index) => {

src/stories/ConfirmationDialog.stories.tsx

@@ -3,6 +3,7 @@ import {Meta} from '@storybook/react'
 
 import {BaseStyles, Button, Flex, ThemeProvider, useTheme} from '..'
 import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
+import {ActionMenu} from '../ActionMenu'
 
 export default {
   title: 'Internal components/ConfirmationDialog',
@@ -78,3 +79,27 @@ export const ShorthandHook = () => {
     </Flex>
   )
 }
+
+export const ShorthandHookFromActionMenu = () => {
+  const confirm = useConfirm()
+  const [text, setText] = useState('open me')
+  const onButtonClick = useCallback(async () => {
+    if (await confirm({title: 'Are you sure?', content: 'Do you really want to do a trick?'})) {
+      setText('tada!')
+    }
+  }, [confirm])
+
+  return (
+    <Flex flexDirection="column" alignItems="flex-start">
+      <ActionMenu
+        renderAnchor={props => <Button {...props}>{text}</Button>}
+        items={[
+          {
+            text: 'Do a trick!',
+            onAction: onButtonClick
+          }
+        ]}
+      />
+    </Flex>
+  )
+}