From 3115dd1e0b2c13c5d2899529b0cbfd53d2bb823f Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Fri, 24 May 2024 09:20:00 -0500 Subject: [PATCH] feat: re-export Spectrum ButtonGroup (#2028) - Added Spectrum ButtonGroup support to DH Button - Re-exported Spectrum ButtonGroup resolves #2016 --- .../code-studio/src/styleguide/Buttons.tsx | 61 +++++++----------- packages/components/src/Button.tsx | 16 ++++- packages/components/src/SocketedButton.tsx | 17 ++++- packages/components/src/index.ts | 2 +- packages/components/src/spectrum/buttons.ts | 3 +- .../theme-spectrum-overrides.css | 16 +++-- ...ction-buttons-regular-0-chromium-linux.png | Bin 11108 -> 11164 bytes ...ection-buttons-regular-0-firefox-linux.png | Bin 14881 -> 14891 bytes ...section-buttons-regular-0-webkit-linux.png | Bin 6068 -> 6076 bytes ...ction-buttons-regular-1-chromium-linux.png | Bin 11175 -> 11227 bytes ...ection-buttons-regular-1-firefox-linux.png | Bin 14935 -> 14908 bytes ...section-buttons-regular-1-webkit-linux.png | Bin 6175 -> 6189 bytes ...ction-buttons-regular-2-chromium-linux.png | Bin 10938 -> 10992 bytes ...ection-buttons-regular-2-firefox-linux.png | Bin 14448 -> 14454 bytes ...section-buttons-regular-2-webkit-linux.png | Bin 5737 -> 5749 bytes ...ction-buttons-regular-3-chromium-linux.png | Bin 10996 -> 11066 bytes ...ection-buttons-regular-3-firefox-linux.png | Bin 14563 -> 14578 bytes ...section-buttons-regular-3-webkit-linux.png | Bin 5768 -> 5777 bytes ...ction-buttons-regular-4-chromium-linux.png | Bin 10962 -> 11029 bytes ...ection-buttons-regular-4-firefox-linux.png | Bin 14572 -> 14532 bytes ...section-buttons-regular-4-webkit-linux.png | Bin 5734 -> 5743 bytes ...ction-buttons-regular-5-chromium-linux.png | Bin 10838 -> 10839 bytes ...ection-buttons-regular-5-firefox-linux.png | Bin 14155 -> 14148 bytes ...section-buttons-regular-5-webkit-linux.png | Bin 5527 -> 5534 bytes ...ction-buttons-regular-6-chromium-linux.png | Bin 11098 -> 11154 bytes ...ection-buttons-regular-6-firefox-linux.png | Bin 14503 -> 14468 bytes ...section-buttons-regular-6-webkit-linux.png | Bin 5803 -> 5808 bytes ...tion-buttons-socketed-0-chromium-linux.png | Bin 10376 -> 10377 bytes ...ction-buttons-socketed-0-firefox-linux.png | Bin 15844 -> 15882 bytes ...ection-buttons-socketed-0-webkit-linux.png | Bin 6029 -> 6029 bytes ...tion-buttons-socketed-1-chromium-linux.png | Bin 10516 -> 10477 bytes ...ction-buttons-socketed-1-firefox-linux.png | Bin 15813 -> 15829 bytes ...ection-buttons-socketed-1-webkit-linux.png | Bin 6074 -> 6072 bytes ...tion-buttons-socketed-2-chromium-linux.png | Bin 10475 -> 10476 bytes ...ction-buttons-socketed-2-firefox-linux.png | Bin 15927 -> 15956 bytes ...ection-buttons-socketed-2-webkit-linux.png | Bin 6059 -> 6058 bytes ...tion-buttons-socketed-3-chromium-linux.png | Bin 10278 -> 10258 bytes ...ction-buttons-socketed-3-firefox-linux.png | Bin 15728 -> 15734 bytes ...ection-buttons-socketed-3-webkit-linux.png | Bin 5796 -> 5797 bytes ...ons-socketed-4-disabled-chromium-linux.png | Bin 10035 -> 10000 bytes ...tons-socketed-4-disabled-firefox-linux.png | Bin 15413 -> 15438 bytes ...ttons-socketed-4-disabled-webkit-linux.png | Bin 5564 -> 5561 bytes ...ction-buttons-regular-0-chromium-linux.png | Bin 10649 -> 10708 bytes ...ection-buttons-regular-0-firefox-linux.png | Bin 14274 -> 14302 bytes ...section-buttons-regular-0-webkit-linux.png | Bin 5575 -> 5582 bytes ...ction-buttons-regular-1-chromium-linux.png | Bin 10522 -> 10575 bytes ...ection-buttons-regular-1-firefox-linux.png | Bin 13939 -> 13967 bytes ...section-buttons-regular-1-webkit-linux.png | Bin 5179 -> 5192 bytes ...ction-buttons-regular-2-chromium-linux.png | Bin 10340 -> 10406 bytes ...ection-buttons-regular-2-firefox-linux.png | Bin 13776 -> 13800 bytes ...section-buttons-regular-2-webkit-linux.png | Bin 5122 -> 5126 bytes ...ction-buttons-regular-3-chromium-linux.png | Bin 10420 -> 10487 bytes ...ection-buttons-regular-3-firefox-linux.png | Bin 13961 -> 13929 bytes ...section-buttons-regular-3-webkit-linux.png | Bin 5215 -> 5220 bytes ...ction-buttons-regular-4-chromium-linux.png | Bin 10465 -> 10529 bytes ...ection-buttons-regular-4-firefox-linux.png | Bin 13936 -> 13910 bytes ...section-buttons-regular-4-webkit-linux.png | Bin 5211 -> 5219 bytes ...ction-buttons-regular-5-chromium-linux.png | Bin 10594 -> 10656 bytes ...ection-buttons-regular-5-firefox-linux.png | Bin 13904 -> 13897 bytes ...section-buttons-regular-5-webkit-linux.png | Bin 5328 -> 5331 bytes ...ction-buttons-regular-6-chromium-linux.png | Bin 10706 -> 10767 bytes ...ection-buttons-regular-6-firefox-linux.png | Bin 14224 -> 14206 bytes ...section-buttons-regular-6-webkit-linux.png | Bin 5384 -> 5393 bytes ...tion-buttons-socketed-0-chromium-linux.png | Bin 10680 -> 10679 bytes ...ction-buttons-socketed-0-firefox-linux.png | Bin 15608 -> 15639 bytes ...ection-buttons-socketed-0-webkit-linux.png | Bin 6008 -> 6005 bytes ...tion-buttons-socketed-1-chromium-linux.png | Bin 10687 -> 10742 bytes ...ction-buttons-socketed-1-firefox-linux.png | Bin 15625 -> 15650 bytes ...ection-buttons-socketed-1-webkit-linux.png | Bin 5965 -> 5960 bytes ...tion-buttons-socketed-2-chromium-linux.png | Bin 10919 -> 10904 bytes ...ction-buttons-socketed-2-firefox-linux.png | Bin 15801 -> 15833 bytes ...ection-buttons-socketed-2-webkit-linux.png | Bin 5972 -> 5968 bytes ...tion-buttons-socketed-3-chromium-linux.png | Bin 10226 -> 10187 bytes ...ction-buttons-socketed-3-firefox-linux.png | Bin 15452 -> 15483 bytes ...ection-buttons-socketed-3-webkit-linux.png | Bin 5615 -> 5611 bytes ...ons-socketed-4-disabled-chromium-linux.png | Bin 10035 -> 10000 bytes ...tons-socketed-4-disabled-firefox-linux.png | Bin 15413 -> 15438 bytes ...ttons-socketed-4-disabled-webkit-linux.png | Bin 5564 -> 5561 bytes .../buttons-regular-chromium-linux.png | Bin 10442 -> 10504 bytes .../buttons-regular-firefox-linux.png | Bin 13873 -> 13876 bytes .../buttons-regular-webkit-linux.png | Bin 5245 -> 5251 bytes .../buttons-socketed-chromium-linux.png | Bin 9928 -> 9924 bytes .../buttons-socketed-firefox-linux.png | Bin 15413 -> 15438 bytes .../buttons-socketed-webkit-linux.png | Bin 5564 -> 5561 bytes 84 files changed, 67 insertions(+), 48 deletions(-) diff --git a/packages/code-studio/src/styleguide/Buttons.tsx b/packages/code-studio/src/styleguide/Buttons.tsx index 0d36dbeac0..c02a27f4c3 100644 --- a/packages/code-studio/src/styleguide/Buttons.tsx +++ b/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, ButtonsState> { <>
Button Kinds
- + @@ -39,7 +44,7 @@ class Buttons extends Component, ButtonsState> { - + ); @@ -74,41 +79,21 @@ class Buttons extends Component, ButtonsState> { return (
Socketed Buttons (for linker)
- - Unlinked - - - Linked - - - Linked Source - - - Error - - - Disabled - + + Unlinked + + Linked + + + Linked Source + + + Error + + + Disabled + +
); } diff --git a/packages/components/src/Button.tsx b/packages/components/src/Button.tsx index 77907cf8af..a516ed59a2 100644 --- a/packages/components/src/Button.tsx +++ b/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( +export const Button = React.forwardRef( (props: ButtonProps, ref) => { const { kind, @@ -109,6 +110,16 @@ const Button = React.forwardRef( ...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( btnClassName, variantClassName, { active }, - className + className, + UNSAFE_className )} onClick={onClick} onContextMenu={onContextMenu} diff --git a/packages/components/src/SocketedButton.tsx b/packages/components/src/SocketedButton.tsx index a55c8e46aa..39f3d7d8f8 100644 --- a/packages/components/src/SocketedButton.tsx +++ b/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( 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 (