feat(fuselage): Avoid Box usage on ButtonGroup

packages/fuselage/src/components/Button/Button.stories.tsx

@@ -94,7 +94,7 @@ export const Variants: ComponentStory<typeof Button> = () => (
 );
 
 export const Sizes: ComponentStory<typeof ButtonGroup> = () => (
-  <ButtonGroup marginBlockEnd={12}>
+  <ButtonGroup>
     <Button small>Small</Button>
     <Button medium>Medium</Button>
     <Button>Default</Button>

packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,48 +1,57 @@
-import type { ComponentProps } from 'react';
-import React from 'react';
+import type { HTMLAttributes, Ref } from 'react';
+import React, { forwardRef } from 'react';
 
 import { appendClassName } from '../../helpers/appendClassName';
 import { patchChildren } from '../../helpers/patchChildren';
-import Box from '../Box';
 
-type ButtonGroupProps = Omit<ComponentProps<typeof Box>, 'wrap'> & {
+type ButtonGroupProps = {
   align?: 'start' | 'center' | 'end';
   stretch?: boolean;
   wrap?: boolean;
   vertical?: boolean;
   small?: boolean;
   large?: boolean;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
-export const ButtonGroup = ({
-  align = 'start',
-  children,
-  stretch,
-  vertical,
-  wrap,
-  small,
-  large,
-  ...props
-}: ButtonGroupProps) => (
-  <Box
-    rcx-button-group
-    rcx-button-group--align={align}
-    rcx-button-group--stretch={stretch}
-    rcx-button-group--vertical={vertical}
-    rcx-button-group--small={small}
-    rcx-button-group--large={large}
-    rcx-button-group--wrap={wrap}
-    role='group'
-    {...props}
-  >
-    {patchChildren(
-      children,
-      (childProps: { className: string | string[] }) => ({
-        className: appendClassName(
-          childProps.className,
-          'rcx-button-group__item'
-        ),
-      })
-    )}
-  </Box>
-);
+export const ButtonGroup = forwardRef(function ButtonGroup(
+  {
+    align = 'start',
+    children,
+    stretch,
+    vertical,
+    wrap,
+    small,
+    large,
+    ...props
+  }: ButtonGroupProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return (
+    <div
+      ref={ref}
+      className={[
+        'rcx-button-group',
+        stretch && 'rcx-button-group--stretch',
+        vertical && 'rcx-button-group--vertical',
+        align && `rcx-button-group--align-${align}`,
+        small && 'rcx-button-group--small',
+        large && 'rcx-button-group--large',
+        wrap && 'rcx-button-group--wrap',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      role='group'
+      {...props}
+    >
+      {patchChildren(
+        children,
+        (childProps: { className: string | string[] }) => ({
+          className: appendClassName(
+            childProps.className,
+            'rcx-button-group__item'
+          ),
+        })
+      )}
+    </div>
+  );
+});

packages/fuselage/src/components/Modal/ModalFooterControllers.tsx

@@ -8,7 +8,5 @@ export type ModalFooterControllersProps = ComponentProps<typeof ButtonGroup>;
 export const ModalFooterControllers = ({
   children,
 }: ModalFooterControllersProps) => (
-  <ButtonGroup align='end' maxWidth='full'>
-    {children}
-  </ButtonGroup>
+  <ButtonGroup align='end'>{children}</ButtonGroup>
 );

packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap

@@ -56,7 +56,7 @@ exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = `
             Anototation
           </div>
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button
@@ -161,7 +161,7 @@ exports[`[Modal Component] renders _WithForm without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
         >
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button
@@ -251,7 +251,7 @@ exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
         >
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button
@@ -343,7 +343,7 @@ exports[`[Modal Component] renders _WithIcon without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
         >
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button
@@ -440,7 +440,7 @@ exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
         >
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button
@@ -527,7 +527,7 @@ exports[`[Modal Component] renders _WithTagline without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
         >
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button
@@ -621,7 +621,7 @@ exports[`[Modal Component] renders _WithThumb without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
         >
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button
@@ -703,7 +703,7 @@ exports[`[Modal Component] renders Default without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
         >
           <div
-            class="rcx-box rcx-box--full rcx-button-group--align-end rcx-button-group rcx-css-94c313"
+            class="rcx-button-group rcx-button-group--align-end"
             role="group"
           >
             <button

packages/fuselage/src/components/States/StatesActions.tsx

@@ -5,8 +5,6 @@ import { ButtonGroup } from '../ButtonGroup';
 
 type StatesActionsProps = ComponentProps<typeof ButtonGroup>;
 
-const StatesActions = ({ children, ...props }: StatesActionsProps) => (
-  <ButtonGroup {...props}>{children}</ButtonGroup>
-);
+const StatesActions = (props: StatesActionsProps) => <ButtonGroup {...props} />;
 
 export default StatesActions;

packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx

@@ -239,7 +239,7 @@ const AdminInfoForm = ({
         </FieldGroup>
       </Form.Container>
       <Form.Footer>
-        <ButtonGroup flexGrow={1}>
+        <ButtonGroup>
           <Button type='submit' primary loading={isValidating || isSubmitting}>
             {t('component.form.action.next')}
           </Button>

packages/onboarding-ui/src/forms/CreateNewPassword/CreateNewPassword.tsx

@@ -90,7 +90,7 @@ const CreateNewPassword = ({
         </FieldGroup>
       </Form.Container>
       <Form.Footer>
-        <ButtonGroup flexGrow={1}>
+        <ButtonGroup>
           <Button
             type='submit'
             primary

packages/onboarding-ui/src/forms/NewAccountForm/NewAccountForm.tsx

@@ -156,7 +156,7 @@ const NewAccountForm = ({
         </FieldGroup>
       </Form.Container>
       <Form.Footer>
-        <ButtonGroup flexGrow={1}>
+        <ButtonGroup>
           <Button
             type='submit'
             primary

packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx

@@ -230,7 +230,7 @@ const OrganizationInfoForm = ({
         </FieldGroup>
       </Form.Container>
       <Form.Footer>
-        <ButtonGroup vertical={isMobile} flexGrow={1}>
+        <ButtonGroup vertical={isMobile}>
           {onBackButtonClick && (
             <Button disabled={isSubmitting} onClick={onBackButtonClick}>
               {t('component.form.action.back')}
@@ -241,7 +241,7 @@ const OrganizationInfoForm = ({
           </Button>
           {onClickSkip && (
             <Box withTruncatedText flexGrow={1}>
-              <ButtonGroup flexGrow={1} align='end'>
+              <ButtonGroup align='end'>
                 <ActionLink onClick={onClickSkip}>
                   {t('component.form.action.skip')}
                 </ActionLink>

packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx

@@ -95,7 +95,7 @@ const CopyStep = ({
       </Form.Container>
       <Form.Footer>
         <Box display='flex' flexDirection='column'>
-          <ButtonGroup vertical={isMobile} flexGrow={1}>
+          <ButtonGroup vertical={isMobile}>
             <Button
               type='button'
               primary

packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/PasteStep.tsx

@@ -58,7 +58,7 @@ const PasteStep = ({ setStep }: PasteStepProps): ReactElement => {
       </Form.Container>
       <Form.Footer>
         <Box display='flex' flexDirection='column'>
-          <ButtonGroup vertical={isMobile} flexGrow={1}>
+          <ButtonGroup vertical={isMobile}>
             <Button
               type='submit'
               primary

packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx

@@ -148,7 +148,7 @@ const RegisterServerForm = ({
         </Form.Container>
         <Form.Footer>
           <Box display='flex' flexDirection='column' alignItems='flex-start'>
-            <ButtonGroup vertical={isMobile} flexGrow={1}>
+            <ButtonGroup vertical={isMobile}>
               <Button
                 type='submit'
                 primary

packages/onboarding-ui/src/forms/ResetPasswordForm/ResetPasswordForm.tsx

@@ -70,7 +70,7 @@ const ResetPasswordForm = ({
         </FieldGroup>
       </Form.Container>
       <Form.Footer>
-        <ButtonGroup flexGrow={1}>
+        <ButtonGroup>
           <Button
             type='submit'
             primary