Tweaks to v2 components based on Sam's notes

packages/ui/src/Button/index.tsx

@@ -1,11 +1,10 @@
-import { MouseEventHandler, useContext } from 'react';
+import { MouseEventHandler } from 'react';
 import styled, { css, DefaultTheme } from 'styled-components';
 import { asTransientProps } from '../utils/asTransientProps';
 import { Priority, ActionType, focusOutline, overlays, buttonBase } from '../utils/button';
 import { getBackgroundColor } from './helpers';
 import { button } from '../utils/typography';
 import { LucideIcon } from 'lucide-react';
-import { ButtonPriorityContext } from '../utils/ButtonPriorityContext';
 import { Density } from '../types/Density';
 import { useDensity } from '../hooks/useDensity';
 
@@ -108,6 +107,7 @@ interface BaseButtonProps {
   actionType?: ActionType;
   disabled?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;
+  priority?: Priority;
 }
 
 interface IconOnlyProps {
@@ -167,8 +167,8 @@ export const Button = ({
   iconOnly,
   actionType = 'default',
   type = 'button',
+  priority = 'primary',
 }: ButtonProps) => {
-  const priority = useContext(ButtonPriorityContext);
   const density = useDensity();
 
   return (
@@ -179,7 +179,11 @@ export const Button = ({
       onClick={onClick}
       aria-label={iconOnly ? children : undefined}
       title={iconOnly ? children : undefined}
-      $getFocusOutlineColor={theme => theme.color.action[outlineColorByActionType[actionType]]}
+      $getFocusOutlineColor={theme =>
+        iconOnly === 'adornment'
+          ? theme.color.base.transparent
+          : theme.color.action[outlineColorByActionType[actionType]]
+      }
       $getBorderRadius={theme =>
         density === 'sparse' && iconOnly !== 'adornment'
           ? theme.borderRadius.sm

packages/ui/src/ButtonGroup/index.stories.tsx

@@ -19,6 +19,7 @@ export const Basic: Story = {
     actionType: 'default',
     iconOnly: false,
     column: false,
+    hasPrimaryButton: true,
     buttons: [
       {
         label: 'Delegate',

packages/ui/src/ButtonGroup/index.tsx

@@ -4,7 +4,6 @@ import { ActionType } from '../utils/button';
 import { Button } from '../Button';
 import styled from 'styled-components';
 import { media } from '../utils/media';
-import { ButtonPriorityContext } from '../utils/ButtonPriorityContext';
 import { Density } from '../types/Density';
 import { useDensity } from '../hooks/useDensity';
 
@@ -56,6 +55,14 @@ export interface ButtonGroupProps<IconOnly extends boolean> {
    * narrow layout width, such as a dialog). In those cases, set this to `true`.
    */
   column?: boolean;
+  /**
+   * Often, a button group should have a primary button for the action that the
+   * user is most likely to take. In those cases, pass `hasPrimaryButton` to
+   * `<ButtonGroup />`. When you do, the first button will have a `priority` of
+   * `primary`, while the rest will be `secondary`. (Note that there can only be
+   * one primary button in a button group.)
+   */
+  hasPrimaryButton?: boolean;
 }
 
 const isIconOnly = (props: ButtonGroupProps<boolean>): props is ButtonGroupProps<true> =>
@@ -68,13 +75,14 @@ const isIconOnly = (props: ButtonGroupProps<boolean>): props is ButtonGroupProps
  * When rendering multiple Penumbra UI buttons together, always use a
  * `<ButtonGroup />` rather than individual `<Button />`s. This ensures that
  * they always meet Penumbra UI guidelines. (For example, all buttons in a group
- * should have the same `actionType`; and the first button in a group should be
- * the `primary` priority, while subsequent buttons are the `secondary`
+ * should have the same `actionType`; and the first button in a group can have
+ * the `primary` priority, while subsequent buttons have the `secondary`
  * priority.)
  */
 export const ButtonGroup = ({
   actionType = 'default',
   column,
+  hasPrimaryButton,
   ...props
 }: ButtonGroupProps<boolean>) => {
   const density = useDensity();
@@ -88,24 +96,31 @@ export const ButtonGroup = ({
       */}
       {isIconOnly(props) &&
         props.buttons.map((button, index) => (
-          <ButtonPriorityContext.Provider key={index} value={index === 0 ? 'primary' : 'secondary'}>
-            <ButtonWrapper $density={density} $iconOnly>
-              <Button icon={button.icon} actionType={actionType} onClick={button.onClick} iconOnly>
-                {button.label}
-              </Button>
-            </ButtonWrapper>
-          </ButtonPriorityContext.Provider>
+          <ButtonWrapper key={index} $density={density} $iconOnly>
+            <Button
+              icon={button.icon}
+              actionType={actionType}
+              onClick={button.onClick}
+              iconOnly
+              priority={index === 0 && hasPrimaryButton ? 'primary' : 'secondary'}
+            >
+              {button.label}
+            </Button>
+          </ButtonWrapper>
         ))}
 
       {!isIconOnly(props) &&
         props.buttons.map((button, index) => (
-          <ButtonPriorityContext.Provider key={index} value={index === 0 ? 'primary' : 'secondary'}>
-            <ButtonWrapper $density={density}>
-              <Button icon={button.icon} actionType={actionType} onClick={button.onClick}>
-                {button.label}
-              </Button>
-            </ButtonWrapper>
-          </ButtonPriorityContext.Provider>
+          <ButtonWrapper key={index} $density={density}>
+            <Button
+              icon={button.icon}
+              actionType={actionType}
+              onClick={button.onClick}
+              priority={index === 0 && hasPrimaryButton ? 'primary' : 'secondary'}
+            >
+              {button.label}
+            </Button>
+          </ButtonWrapper>
         ))}
     </Root>
   );

packages/ui/src/Dialog/index.stories.tsx

@@ -45,6 +45,7 @@ export const Basic: Story = {
               { label: 'Secondary CTA', icon: Handshake },
               { label: 'Another secondary CTA', icon: Ban },
             ],
+            hasPrimaryButton: true,
           }}
         >
           <WhiteTextWrapper>

packages/ui/src/Dialog/index.tsx

@@ -5,6 +5,8 @@ import { Text } from '../Text';
 import { Icon } from '../Icon';
 import { X } from 'lucide-react';
 import { ButtonGroup, ButtonGroupProps } from '../ButtonGroup';
+import { Button } from '../Button';
+import { Density } from '../Density';
 
 const gradualBlur = (blur: string) => keyframes`
   from {
@@ -226,11 +228,13 @@ const Content = <IconOnlyButtonGroupProps extends boolean | undefined>({
           </RadixDialog.Title>
 
           {showCloseButton && (
-            <RadixDialog.Close asChild>
-              <CloseButton aria-label='Close'>
-                <Icon IconComponent={X} size='md' />
-              </CloseButton>
-            </RadixDialog.Close>
+            <Density compact>
+              <RadixDialog.Close asChild>
+                <Button icon={X} iconOnly priority='secondary'>
+                  Close
+                </Button>
+              </RadixDialog.Close>
+            </Density>
           )}
         </TitleAndCloseButton>