fix(DesignSystem): adding className to ButtonGroup

Author: MellyGray

packages/design-system/src/lib/components/button-group/ButtonGroup.module.scss

@@ -1,5 +1,5 @@
 @import "src/lib/assets/styles/design-tokens/colors.module";
 
-.border > button {
+.border > button, .border > [role="group"] > button {
   border: 1px solid $dv-button-border-color;
 }

packages/design-system/src/lib/components/button-group/ButtonGroup.tsx

@@ -7,9 +7,17 @@ interface ButtonGroupProps extends React.HTMLAttributes<HTMLElement> {
   vertical?: boolean
 }
 
-export function ButtonGroup({ vertical, children, ...props }: PropsWithChildren<ButtonGroupProps>) {
+export function ButtonGroup({
+  vertical,
+  children,
+  className,
+  ...props
+}: PropsWithChildren<ButtonGroupProps>) {
   return (
-    <ButtonGroupBS vertical={vertical} className={styles.border} {...props}>
+    <ButtonGroupBS
+      vertical={vertical}
+      className={`${styles.border} ${className ? className : ''}`}
+      {...props}>
       {children}
     </ButtonGroupBS>
   )