fix(DesignSystem): fix styles for button group when using tooltips

Author: MellyGray

packages/design-system/src/lib/assets/styles/bootstrap-customized.scss

@@ -106,3 +106,13 @@ $navbar-brand-font-size: $dv-brand-font-size;
 th {
   vertical-align: middle;
 }
+
+.btn-group > div:not(:last-child) > .btn-group > .btn, .btn-group-vertical >div:not(:last-child) > .btn-group > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group > div:not(:first-child) > .btn-group > .btn, .btn-group-vertical > div:not(:first-child) > .btn-group > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

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

@@ -4,6 +4,8 @@ import { Button } from '../../components/button/Button'
 import { ButtonToolbar } from '../../components/button-group/ButtonToolbar'
 import { DropdownButton } from '../../components/dropdown-button/DropdownButton'
 import { DropdownButtonItem } from '../../components/dropdown-button/dropdown-button-item/DropdownButtonItem'
+import { Download, ThreeDotsVertical } from 'react-bootstrap-icons'
+import { Tooltip } from '../../components/tooltip/Tooltip'
 
 /**
  * ## Description
@@ -76,3 +78,32 @@ export const NestedButtonGroups: Story = {
     </ButtonToolbar>
   )
 }
+
+export const ButtonGroupWithTooltips: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Tooltip placement="top" overlay="Access File">
+        <DropdownButton
+          id={`action-button-access-file`}
+          title=""
+          asButtonGroup
+          variant="secondary"
+          icon={<Download />}>
+          <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+          <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+        </DropdownButton>
+      </Tooltip>
+      <Tooltip placement="top" overlay={<span>File Options</span>}>
+        <DropdownButton
+          id={`file-options-file`}
+          title=""
+          asButtonGroup
+          variant="secondary"
+          icon={<ThreeDotsVertical />}>
+          <DropdownButtonItem href="/item-1">Item 1</DropdownButtonItem>
+          <DropdownButtonItem href="/item-2">Item 2</DropdownButtonItem>
+        </DropdownButton>
+      </Tooltip>
+    </ButtonGroup>
+  )
+}