feat: re-export Spectrum ButtonGroup (#2028)

- Added Spectrum ButtonGroup support to DH Button
- Re-exported Spectrum ButtonGroup

resolves #2016

Author: bmingles

packages/code-studio/src/styleguide/Buttons.tsx

@@ -1,5 +1,10 @@
 import React, { Component, ReactElement } from 'react';
-import { Button, SocketedButton, Flex } from '@deephaven/components';
+import {
+  Button,
+  SocketedButton,
+  Flex,
+  ButtonGroup,
+} from '@deephaven/components';
 
 import { dhTruck } from '@deephaven/icons';
 import SampleSection from './SampleSection';
@@ -17,7 +22,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
       <>
         <h5>Button Kinds</h5>
         <SampleSection name="buttons-regular" style={{ padding: '1rem 0' }}>
-          <Flex gap="size-100">
+          <ButtonGroup>
             <Button kind="primary" onClick={noOp}>
               Primary
             </Button>
@@ -39,7 +44,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
             <Button kind="ghost" onClick={noOp}>
               Ghost
             </Button>
-          </Flex>
+          </ButtonGroup>
         </SampleSection>
       </>
     );
@@ -74,41 +79,21 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     return (
       <SampleSection name="buttons-socketed">
         <h5>Socketed Buttons (for linker)</h5>
-        <SocketedButton
-          style={{ marginBottom: '1rem', marginRight: '1rem' }}
-          onClick={noOp}
-        >
-          Unlinked
-        </SocketedButton>
-        <SocketedButton
-          style={{ marginBottom: '1rem', marginRight: '1rem' }}
-          isLinked
-          onClick={noOp}
-        >
-          Linked
-        </SocketedButton>
-        <SocketedButton
-          style={{ marginBottom: '1rem', marginRight: '1rem' }}
-          isLinkedSource
-          onClick={noOp}
-        >
-          Linked Source
-        </SocketedButton>
-        <SocketedButton
-          style={{ marginBottom: '1rem', marginRight: '1rem' }}
-          isLinked
-          isInvalid
-          onClick={noOp}
-        >
-          Error
-        </SocketedButton>
-        <SocketedButton
-          style={{ marginBottom: '1rem', marginRight: '1rem' }}
-          disabled
-          onClick={noOp}
-        >
-          Disabled
-        </SocketedButton>
+        <ButtonGroup marginBottom="1rem">
+          <SocketedButton onClick={noOp}>Unlinked</SocketedButton>
+          <SocketedButton isLinked onClick={noOp}>
+            Linked
+          </SocketedButton>
+          <SocketedButton isLinkedSource onClick={noOp}>
+            Linked Source
+          </SocketedButton>
+          <SocketedButton isLinked isInvalid onClick={noOp}>
+            Error
+          </SocketedButton>
+          <SocketedButton disabled onClick={noOp}>
+            Disabled
+          </SocketedButton>
+        </ButtonGroup>
       </SampleSection>
     );
   }

packages/components/src/Button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSlotProps } from '@react-spectrum/utils';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -83,7 +84,7 @@ function getVariantClasses(kind: VariantKind): string {
   }
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props: ButtonProps, ref) => {
     const {
       kind,
@@ -109,6 +110,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       ...rest
     } = props;
 
+    // Spectrum container components such as `ButtonGroup` provide
+    // UNSAFE_className prop for the `button` slot via a SlotProvider (
+    // https://github.com/adobe/react-spectrum/blob/%40adobe/react-spectrum%403.33.1/packages/%40react-spectrum/buttongroup/src/ButtonGroup.tsx#L104-L107)
+    // This can be retrieved via `useSlotProps` to allow our buttons to be styled
+    // correctly inside the container.
+    const { UNSAFE_className } = useSlotProps<{ UNSAFE_className?: string }>(
+      {},
+      'button'
+    );
+
     let variantClassName;
     if (variant) {
       variantClassName = getVariantClasses(variant);
@@ -157,7 +168,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           btnClassName,
           variantClassName,
           { active },
-          className
+          className,
+          UNSAFE_className
         )}
         onClick={onClick}
         onContextMenu={onContextMenu}

packages/components/src/SocketedButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import { dhExclamation, vsLink } from '@deephaven/icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useSlotProps } from '@react-spectrum/utils';
+import { dhExclamation, vsLink } from '@deephaven/icons';
 
 import './SocketedButton.scss';
 
@@ -36,6 +37,17 @@ const SocketedButton = React.forwardRef<HTMLButtonElement, SocketedButtonProps>(
       style,
       'data-testid': dataTestId,
     } = props;
+
+    // Spectrum container components such as `ButtonGroup` provide
+    // UNSAFE_className prop for the `button` slot via a SlotProvider (
+    // https://github.com/adobe/react-spectrum/blob/%40adobe/react-spectrum%403.33.1/packages/%40react-spectrum/buttongroup/src/ButtonGroup.tsx#L104-L107)
+    // This can be retrieved via `useSlotProps` to allow our buttons to be styled
+    // correctly inside the container.
+    const { UNSAFE_className } = useSlotProps<{ UNSAFE_className?: string }>(
+      {},
+      'button'
+    );
+
     return (
       <button
         ref={ref}
@@ -48,7 +60,8 @@ const SocketedButton = React.forwardRef<HTMLButtonElement, SocketedButtonProps>(
           },
           { 'btn-socketed-linked-source': isLinkedSource },
           { 'is-invalid': isInvalid },
-          className
+          className,
+          UNSAFE_className
         )}
         id={id}
         onClick={onClick}

packages/components/src/index.ts

@@ -3,7 +3,7 @@ export * from './actions';
 export { default as AutoCompleteInput } from './AutoCompleteInput';
 export { default as AutoResizeTextarea } from './AutoResizeTextarea';
 export { default as BasicModal } from './BasicModal';
-export { default as Button } from './Button';
+export * from './Button';
 export * from './BulkActionBar';
 export { default as CardFlip } from './CardFlip';
 export * from './context-actions';

packages/components/src/spectrum/buttons.ts

@@ -2,7 +2,8 @@ export {
   ActionButton,
   type SpectrumActionButtonProps as ActionButtonProps,
   // Button - we want to use our own `Button` component instead of Spectrum's
-  // ButtonGroup - will re-export once our `Button` is compatible
+  ButtonGroup,
+  type SpectrumButtonGroupProps as ButtonGroupProps,
   // FileTrigger - we aren't planning to support this component
   LogicButton,
   type SpectrumLogicButtonProps as LogicButtonProps,

packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css

@@ -65,17 +65,25 @@ svg[class*='spectrum-Textfield-validationIcon'] {
   );
 }
 
-button[class*='spectrum-Button'] {
+/**
+  Adjust Spectrum button text and icon alignment to account for DH using a
+  different font and smaller icons. Spectrum `ButtonGroup` will add additional
+  `-spectrum-ButtonGroup` classes to child buttons (including DH ones), so we
+  explicitly exclude our buttons from the selector.
+  */
+button[class*='spectrum-Button']:not(.btn):not(.btn-socketed) {
   /* make the icon closer to the text */
   --spectrum-button-primary-text-gap: var(--spectrum-global-dimension-size-75);
 
   /* Center the text vertically. We use a different font then spectrum so we require different custom centering */
   padding-bottom: calc(var(--spectrum-global-dimension-size-50) - 1px);
   padding-top: calc(var(--spectrum-global-dimension-size-50));
 }
-
-button[class*='spectrum-Button'] svg {
-  /* our icons are smaller, center them too */
+button[class*='spectrum-Button']:not(.btn):not(.btn-socketed) svg {
+  /* 
+    We use smaller icons than Spectrum, so we need to adjust the padding to 
+    center when we use our icons inside of Spectrum buttons.
+    */
   padding-bottom: var(--spectrum-global-dimension-size-25);
 }