ActionGroup bugs

packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

@@ -44,7 +44,6 @@ governing permissions and limitations under the License.
 .spectrum-ActionGroup {
   display: flex;
   flex-wrap: wrap;
-  isolation: isolate;
   --column-gap: var(--spectrum-actionbuttongroup-text-button-gap-x);
   --row-gap: var(--spectrum-actionbuttongroup-text-button-gap-y);
 
@@ -168,6 +167,22 @@ governing permissions and limitations under the License.
   flex-wrap: nowrap;
 }
 
+.spectrum-ActionGroup-menu {
+  .spectrum-ActionGroup-menu-chevron {
+    order: 2;
+    padding-inline-start: 0;
+    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
+  }
+
+  .spectrum-ActionGroup-menu-contents {
+    /* This wrapper is needed to keep the :only-child/sibling selectors
+     * in button CSS working with the additional chevron element. */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 .spectrum-ActionGroup-item--iconOnly {
   padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
 }

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -211,7 +211,7 @@ a.spectrum-ActionButton {
     padding-inline-start: var(--spectrum-actionbutton-icon-padding-x);
   }
 
-  .spectrum-ActionButton-label + .spectrum-Icon {
+  .spectrum-ActionButton-label:not([hidden]) + .spectrum-Icon {
     padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
   }
 

packages/@react-spectrum/actiongroup/chromatic/ActionGroup.chromatic.tsx

@@ -24,6 +24,7 @@ import React from 'react';
 import SettingsIcon from '@spectrum-icons/workflow/Settings';
 import {storiesOf} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
+import {View} from '@react-spectrum/view';
 import ViewCardIcon from '@spectrum-icons/workflow/ViewCard';
 import ViewGridIcon from '@spectrum-icons/workflow/ViewGrid';
 import ViewListIcon from '@spectrum-icons/workflow/ViewList';
@@ -93,6 +94,38 @@ storiesOf('ActionGroup', module)
     'selectionMode: multiple',
     () => render({selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
   )
+  .add(
+    'staticColor=white',
+    () => (
+      <View backgroundColor="static-seafoam-600" padding="size-1000">
+        {render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
+  .add(
+    'staticColor=white, isQuiet',
+    () => (
+      <View backgroundColor="static-seafoam-600" padding="size-1000">
+        {render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
+  .add(
+    'staticColor=black',
+    () => (
+      <View backgroundColor="static-yellow-400" padding="size-1000">
+        {render({staticColor: 'black', defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
+  .add(
+    'staticColor=black, isQuiet',
+    () => (
+      <View backgroundColor="static-yellow-400" padding="size-1000">
+        {render({staticColor: 'black', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
   .add(
     'selectionMode: single, disallowEmptySelection',
     () => render({selectionMode: 'single', disallowEmptySelection: true, defaultSelectedKeys: ['1']}, dataItems)

packages/@react-spectrum/actiongroup/package.json

@@ -42,6 +42,7 @@
     "@react-spectrum/form": "^3.2.2",
     "@react-spectrum/menu": "^3.2.3",
     "@react-spectrum/provider": "^3.1.4",
+    "@react-spectrum/text": "^3.1.2",
     "@react-spectrum/tooltip": "^3.1.3",
     "@react-spectrum/utils": "^3.5.2",
     "@react-stately/collections": "^3.3.2",

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -24,6 +24,7 @@ import {Provider} from '@react-spectrum/provider';
 import React, {forwardRef, Key, ReactElement, ReactNode, useCallback, useMemo, useRef, useState} from 'react';
 import {SpectrumActionGroupProps} from '@react-types/actiongroup';
 import styles from '@adobe/spectrum-css-temp/components/actiongroup/vars.css';
+import {Text} from '@react-spectrum/text';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 import {useActionGroup} from '@react-aria/actiongroup';
 import {useActionGroupItem} from '@react-aria/actiongroup';
@@ -372,7 +373,7 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
     summaryIcon = null;
   }
 
-  let iconOnly = hideButtonText && summaryIcon;
+  let iconOnly = false;
 
   // If there is a selection, show the selected state on the menu button.
   let isSelected = state.selectionManager.selectionMode !== 'none' && !state.selectionManager.isEmpty;
@@ -382,6 +383,10 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
     let selectedItem = state.collection.getItem(state.selectionManager.firstSelectedKey);
     if (selectedItem) {
       summaryIcon = selectedItem.rendered;
+      if (typeof summaryIcon === 'string') {
+        summaryIcon = <Text>{summaryIcon}</Text>;
+      }
+      iconOnly = hideButtonText;
       ariaLabelledby = `${ariaLabelledby ?? id} ${textId}`;
     }
   }
@@ -390,8 +395,10 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
     // If there's a custom summary icon, also add a chevron.
     summaryIcon = (
       <>
-        {summaryIcon}
-        <ChevronDownMedium />
+        <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-ActionGroup-menu-chevron')} />
+        <span className={classNames(styles, 'spectrum-ActionGroup-menu-contents', {'spectrum-ActionGroup-item--iconOnly': iconOnly})}>
+          {summaryIcon}
+        </span>
       </>
     );
   }
@@ -403,7 +410,8 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
         slots={{
           text: {
             id: hideButtonText ? textId : null,
-            isHidden: hideButtonText
+            isHidden: hideButtonText,
+            UNSAFE_className: classNames(styles, 'spectrum-ActionGroup-menu-text')
           }
         }}>
         <PressResponder {...mergeProps(buttonProps, hoverProps)}>
@@ -416,8 +424,8 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
               classNames(
                 styles,
                 'spectrum-ActionGroup-item',
+                'spectrum-ActionGroup-menu',
                 {
-                  'spectrum-ActionGroup-item--iconOnly': iconOnly,
                   'is-hovered': isHovered,
                   'is-selected': isSelected
                 },

packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx

@@ -43,6 +43,7 @@ import TextStrikethrough from '@spectrum-icons/workflow/TextStrikethrough';
 import TextStyle from '@spectrum-icons/workflow/TextStyle';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 import VectorDraw from '@spectrum-icons/workflow/VectorDraw';
+import {View} from '@react-spectrum/view';
 import ViewCardIcon from '@spectrum-icons/workflow/ViewCard';
 import ViewGridIcon from '@spectrum-icons/workflow/ViewGrid';
 import ViewListIcon from '@spectrum-icons/workflow/ViewList';
@@ -159,6 +160,38 @@ storiesOf('ActionGroup', module)
     'isQuiet, isEmphasized',
     () => render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)
   )
+  .add(
+    'staticColor=white',
+    () => (
+      <View backgroundColor="static-seafoam-600" padding="size-1000">
+        {render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
+  .add(
+    'staticColor=white, isQuiet',
+    () => (
+      <View backgroundColor="static-seafoam-600" padding="size-1000">
+        {render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
+  .add(
+    'staticColor=black',
+    () => (
+      <View backgroundColor="static-yellow-400" padding="size-1000">
+        {render({staticColor: 'black', defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
+  .add(
+    'staticColor=black, isQuiet',
+    () => (
+      <View backgroundColor="static-yellow-400" padding="size-1000">
+        {render({staticColor: 'black', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
+      </View>
+    )
+  )
   .add(
     'selectionMode: multiple',
     () => render({selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
@@ -316,6 +349,16 @@ storiesOf('ActionGroup', module)
       </div>
     )
   )
+  .add(
+    'overflowMode: collapse, single selection',
+    () => (
+      <div style={{padding: '10px', resize: 'horizontal', overflow: 'auto', display: 'flex', gap: 10, width: 300, backgroundColor: 'var(--spectrum-global-color-gray-50)'}}>
+        {renderCollapsibleAlignment({density: 'compact', maxWidth: '50%', isEmphasized: true})}
+        {renderCollapsibleAlignment({density: 'compact', maxWidth: '50%', isEmphasized: true, buttonLabelBehavior: 'show'})}
+        {renderCollapsibleAlignmentNoIcons({density: 'compact', maxWidth: '50%', isEmphasized: true, buttonLabelBehavior: 'show'})}
+      </div>
+    )
+  )
   .add(
     'orientation: vertical, overflowMode: collapse',
     () => (
@@ -426,8 +469,8 @@ function renderCollapsible(props = {}) {
         <Text>Copy</Text>
       </Item>
       <Item key="delete">
-        <DeleteIcon />
         <Text>Delete</Text>
+        <DeleteIcon />
       </Item>
       <Item key="move">
         <MoveIcon />
@@ -502,8 +545,8 @@ function renderCollapsibleAlignment(props = {}) {
         <Text>Align Center</Text>
       </Item>
       <Item key="right">
-        <TextAlignRight />
         <Text>Align Right</Text>
+        <TextAlignRight />
       </Item>
       <Item key="justify">
         <TextAlignJustify />
@@ -513,6 +556,24 @@ function renderCollapsibleAlignment(props = {}) {
   );
 }
 
+function renderCollapsibleAlignmentNoIcons(props = {}) {
+  return (
+    <ActionGroup
+      aria-label="Text alignment"
+      overflowMode="collapse"
+      selectionMode="single"
+      defaultSelectedKeys={['left']}
+      disallowEmptySelection
+      onSelectionChange={action('onSelectionChange')}
+      {...props}>
+      <Item key="left">Align Left</Item>
+      <Item key="center">Align Center</Item>
+      <Item key="right">Align Right</Item>
+      <Item key="justify">Justify</Item>
+    </ActionGroup>
+  );
+}
+
 function renderTools(props = {}) {
   return (
     <ActionGroup